精华内容
参与话题
问答
  • mermaid Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull requests, people ...
  • mermaid Edit this Page Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!! Thanks to all involved, people committing pull ...
  • Mermaid

    2019-09-28 13:53:47
    graph TD; A-->B; A-->C; B-->D; C-->D; 转载于:https://www.cnblogs.com/xintiao9/p/11327596.html
    graph TD; A-->B; A-->C; B-->D; C-->D;

    转载于:https://www.cnblogs.com/xintiao9/p/11327596.html

    展开全文
  • Mermaid formatting

    2020-11-27 03:14:56
    <div><p>I tried the GANTT examples of mermaid (http://knsv.github.io/mermaid/gantt.html) or subgraph. In general it works. But black background with black arrows does not look nice. Try this: <pre>...
  • Mermaid support

    2020-11-29 06:21:10
    <div><p>How can I use kramdown with mermaid code blocks? <p>I am trying to implement this for fixing https://github.com/ethereum/EIPs/issues/2450 </p> <p>I tried finding a way of making a custom ...
  • 一、项目背景 本项目是自己在公司做前端网页的时候,...想着能不能在前端把后端的流程图信息转换为 markdown 支持的 mermaid 定义信息直接画图呢?说干就干,于是就有了这个小项目。 二、项目使用介绍 本项目允许

    一、项目背景

    本项目是自己在公司做前端网页的时候,后端需要做一个流程控制引擎,给出了节点信息和节点之间的连接信息,老板希望根据这些信息把流程图画出来,当时自己的第一感觉就是在网上寻找开源项目,但是发现找到的大多都不是开源的,找了一天时间也没有找到比较容易上手的解决方案。

    后来想着 markdown 不是能够通过代码的方式直接画流程图吗?想着能不能在前端把后端的流程图信息转换为 markdown 支持的 mermaid 定义信息直接画图呢?说干就干,于是就有了这个小项目。

    二、项目使用介绍

    本项目允许用户使用 json 配置文件的方式生成一个 mermaid 的流程图定义信息,其中 json 的定义信息如下:

    /**
     * node.name: 节点名称
     * node.id: 节点唯一 ID
     * line.desc: 关联名称(可选)
     * line.id: 节点唯一 ID
     * line.nodeId: 关联起点节点 ID
     * line.nextNodeId: 关联节点结束 ID
     */
    {
    	"nodes": [
    		{
    			"name": "如何大象装进冰箱?",
    			"id": "1601480108398"
    		},
    		{
    			"name": "打开冰箱门",
    			"id": "1601480222473"
    		},
    		{
    			"name": "关闭冰箱门",
    			"id": "1601480242369"
    		},
    		{
    			"name": "把大象装进冰箱",
    			"id": "1601480269532"
    		}
    	],
    	"lines": [
    		{
    			"desc": "第一步",
    			"nodeId": "1601480108398",
    			"nextNodeId": "1601480222473",
    			"id": "1601480305753"
    		},
    		{
    			"desc": "第二步",
    			"nodeId": "1601480222473",
    			"nextNodeId": "1601480269532",
    			"id": "1601480330510"
    		},
    		{
    			"desc": "第三步",
    			"nodeId": "1601480269532",
    			"nextNodeId": "1601480242369",
    			"id": "1601480347673"
    		}
    	]
    }

    转换为如下节点定义信息:

    graph TB
    tzstart((开始))-->1601480108398("如何大象装进冰箱?");
    1601480108398("如何大象装进冰箱?")-->|第一步|1601480222473("打开冰箱门");
    1601480222473("打开冰箱门")-->|第二步|1601480269532("把大象装进冰箱");
    1601480269532("把大象装进冰箱")-->|第三步|1601480242369("关闭冰箱门");
    1601480242369(关闭冰箱门)-->tzend((结束));

    项目已经对如下情况作出了处理:

    • 节点之间允许出现循环连接,既 A => B => C => A 不会出现错误。
    • 如果某一个节点有多个子节点,则该节点的形状会自动变为菱形。
    • 开始节点会自动识别,并自动添加开始节点,结束节点也会自动识别,并且指向结束节点。
    • 节点展示顺序已经通过深度优先遍历算法预先排序处理。
    • 节点连线顺序可以通过修改同一个 nodeId 下的连线先后顺序实现(想了想怎么自动调整,能力不足,实现不了)。

    三、项目预览

    点击 https://dreamcatcher_yxc.gitee.io/require-vue-admin/index.html#/components/flowchart 访问在线示例,默认提供了一个复杂流程图。核心代码请参看: flowchart.js, 预览版本实现了一个相对完整的在线示例,点击 FlowChat.vue 查看代码,渲染逻辑可以参看:FlowChartView.vue

    四、总结

    这是一个比较简单的项目,但是核心解析逻辑已经经历了真实的检验,期间出现的问题都已经修复,目前没有发现什么问题,感兴趣的小伙伴可以基于代码实现节点边框形状、图标、子流程图扩展功能,有任何问题可以在此留言或者在 gitee 主页下留言。

     

    展开全文
  • 支持 Mermaid

    2020-11-22 03:21:10
    <div><p><a href="https://knsv.github.io/mermaid/#mermaid">Mermaid</a> 支持以下三种: - Flowcharts - Sequence diagrams - Gant diagrams 文档:https://mermaidjs.github.io/</p><p>该提问来源于...
  • mermaid工具

    万次阅读 2018-10-30 17:04:54
    mermaid是一款开源的画流程图、甘特图、时序图工具,她提供了一...我们先试用mermaid提供的在线编辑器,来熟悉一下mermaid的各种画图语法; 1)流程图 2)时序图: sequenceDiagram A-&gt;&gt; B: Qu...

    mermaid是一款开源的画流程图、甘特图、时序图工具,她提供了一种类似markdown的语法来创建各种图。

    官网:https://mermaidjs.github.io/

    在线编辑器:here

    1、入门

    我们先试用mermaid提供的在线编辑器,来熟悉一下mermaid的各种画图语法;

    1)流程图

    2)时序图:

    sequenceDiagram
    A->> B: Query
    B->> C: Forward query
    Note right of C: Thinking...
    C->> B: Response
    B->> A: Forward response

    效果如下:

    3)甘特:

    gantt
    dateFormat  YYYY-MM-DD
    title Shop项目交付计划
    
    section 里程碑 0.1 
    数据库设计          :active,    p1, 2016-08-15, 3d
    详细设计            :           p2, after p1, 2d
    
    section 里程碑 0.2
    后端开发            :           p3, 2016-08-22, 20d
    前端开发            :           p4, 2016-08-22, 15d
    
    section 里程碑 0.3
    功能测试            :       p6, after p3, 5d
    上线               :       p7, after p6, 2d
    交付               :       p8, afterp7, 2d

    效果如下

    2、使用:

    1)mermaid提供了nodejs方式,在命令行上使用:

    由于 mermaid 使用 nodejs 写的,所以需要 node 环境,这个不多说,根据自己的平台安装好 node 即可。安装 mermaid :

    npm install -g phantomjs && npm install -g mermaid

    完成之后,就可以使用命令行了。先新建一个文本文件,我们这里就来展示一个甘特图,命名 demo.ganttdemo.gantt 文件内容就用上面的甘特图的例子,然后使用命令:

    mermaid demo.gantt -w 1920 -s -p -o images

    就可以在 images 目录下生成两个文件,一个是 PNG 图片,另一个是 SVG 矢量图。

    可以用 mermaid -h 命令查看帮助,这里我贴上刚刚那条命令里用到的参数:

    -s --svg       输出 SVG 替代 PNG(试验性的功能)。
    -p --png       如果选择保存 SVG,那么加上这个选项可以同时保存 PNG。
    -o --outputDir 保存文件的目录(如果不存在会自动创建),默认 `cwd`。
    -w --width     生成的 PNG 图片宽度。

    2)整合进 Markdown:

    忽略

    3)在html中使用:

    官网上有很多例子可以参考https://unpkg.com/mermaid/ ,这里简单写一个

    <!DOCTYPE html>
    <html>
    <head>
    <script src="./mermaid.js"></script>
    </head>
    <body>
    
    
    <div class="firstTest">
       graph LR;
        A--合并-->B;
        A-->C;
        B-->D;
        C-->D;
    </div>
    <script>     
     mermaid.init({noteMargin: 10}, ".firstTest");
    </script>
    
    
    </body>
    </html>
    

    效果:

    展开全文
  • Update mermaid

    2020-11-27 13:04:11
    <div><p>I wanted to be able to use the latest feature of mermaid and an older version was in use.</p><p>该提问来源于开源项目:codimd/server</p></div>
  • Mermaid rendering broken

    2020-11-28 06:34:35
    <p>when i open below markdown file which contains two mermaid graphs, haroopad v 0.13.1 (Mac OSX) renders it just fine. As soon as i start editing the second mermaid graph (changing one line title) ...
  • mermaid 教程

    千次阅读 2018-01-04 23:36:37
    作者:黄永刚mermaid简介当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。mermaid解决这个痛点,这是一个类似markdown语法的脚本...

    作者:黄永刚

    mermaid简介

    这里写图片描述

    当撰写文档的时候,对于流程图的生成大多使用Visio等繁重的工具,没有一种轻便的工具能够画图从而简化文档的编写,就像markdown那样。

    mermaid解决这个痛点,这是一个类似markdown语法的脚本语言,通过JavaScript实现图表的生成。
    先来看个例子:

    1.流程图(flowchart)

    graph LR;  
      A-->B;    
      A-->C;  
      B-->D;  
      C-->D;  
    • 1
    • 2
    • 3
    • 4
    • 5

    生成的图表如下所示:

    这里写图片描述
    2. 时序图(sequence diagram)

    sequenceDiagram
       participant Alice
       participant Bob
       Alice->John:Hello John, how are you?
       loop Healthcheck
         John->John:Fight against hypochondria
       end
       Note right of John:Rational thoughts <br/>prevail...
       John-->Alice:Great!
       John->Bob: How about you?
       Bob-->John: Jolly good!
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    生成的图表如下所示:

    这里写图片描述

    3.甘特图(gantt diagram)

    gantt
       dateFormat YYYY-MM-DD
       title Adding GANTT diagram functionality to mermaid
       section A section
       Completed task  :done, des1, 2014-01-06,2014-01-08
       Active task     :active, des2, 2014-01-09, 3d
       future task     :     des3, after des2, 5d
       future task2    :     des4, after des3, 5d
       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and json      :crit, done, after des1, 2d
       Create tests for parser       :crit, active, 3d
       Future task in critical line     :crit, 5d
       Create tests for renderer      :2d
       Add to ,mermaid           :1d
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    生成的表如下:

    这里写图片描述


    下游项目

    Mermaid 是由Knut Sveidqbist发起旨在轻便化的文档撰写。所有开发者:开发者列表

    Graph

    graph LR
        A --> B
    • 1
    • 2

    这里写图片描述
    这是申明一个由左到右,水平向右的图。\
    可能方向有:
    - TB - top bottom
    - BT - bottom top
    - RL - right left
    - LR - left right
    - TD - same as TB


    节点与形状

    默认节点

    graph LR
    id1


    注意:’id’显示在节点内部。

    文本节点

    这里写图片描述

    graph LR
    id[This is the text in the box];
    • 1
    • 2
    圆角节点

    这里写图片描述

    graph LR
    id(This is the text in the box);
    • 1
    • 2
    圆节点(The form of a circle)

    这里写图片描述

    graph LR
    id((This is the text in the circle));
    • 1
    • 2
    非对称节点(asymetric shape)

    这里写图片描述

    graph LR
    id>This is the text in the box]
    • 1
    • 2
    菱形节点(rhombus)

    这里写图片描述

    graph LR
    id{This is the text in the box}
    • 1
    • 2

    连接线

    节点间的连接线有多种形状,而且可以在连接线中加入标签:

    箭头形连接

    这里写图片描述

    graph LR;
      A-->B;
    • 1
    • 2
    开放行连接

    graph LR
    A --- B
    • 1
    • 2
    标签连接

    这里写图片描述

    graph LR
    A -- This is the label text --- B;
    • 1
    • 2
    箭头标签连接

    A–>|text|B\
    或者\
    A– text –>B

    这里写图片描述

    graph LR
     A-- text -->B
    • 1
    • 2
    虚线(dotted link,点连线)

    -.->

    这里写图片描述

    graph LR
    A-.->B
    • 1
    • 2

    -.-.

    这里写图片描述

    graph LR
    A-.-.B
    • 1
    • 2
    标签虚线

    -.text.->

    graph LR
    A-.text.->B
    • 1
    • 2

    这里写图片描述

    粗实线

    ==>

    graph LR
    A==>B
    • 1
    • 2

    这里写图片描述

    ===

    graph LR
    A===B
    • 1
    • 2

    这里写图片描述

    标签粗线

    =\=text\==>

    graph LR
    A==text==>B
    • 1
    • 2

    这里写图片描述

    =\=text\===

    graph LR
    A==text===B
    • 1
    • 2

    这里写图片描述


    特殊的语法

    使用引号可以抑制一些特殊的字符的使用,可以避免一些不必要的麻烦。

    graph LR\
    d1[“This is the (text) in the box”]

    graph LR
    d1["This is the (text) in the box"]
    • 1
    • 2

    这里写图片描述

    html字符的转义字符

    转义字符的使用语法:
    流程图定义如下:

    graph LR\
    A[“A double quote:#quot;”] –> B[“A dec char:#9829;”]

    渲染后的图如下:
    这里写图片描述

    graph LR
            A["A double quote:#quot;"]-->B["A dec char:#9829;"]
    • 1
    • 2

    子图(Subgraphs)

    subgraph title\
    graph definition\
    end

    示例:

    graph TB
            subgraph one
            a1 --> a2
            en
            subgraph two
            b2 --> b2
            end
            subgraph three
            c1 --> c2
            end
            c1 --> a2
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    结果:

    这里写图片描述

    基础fontawesome支持

    如果想加入来自frontawesome的图表字体,需要像frontawesome网站上那样引用的那样。\
    详情请点击:fontawdsome

    引用的语法为:++fa:#icon class name#++

    graph TD
          B["fa:fa-twitter for peace"]
          B-->C[fa:fa-ban forbidden]
          B-->D(fa:fa-spinner);
          B-->E(A fa:fa-camerra-retro perhaps?);
    • 1
    • 2
    • 3
    • 4
    • 5

    渲染图如下:

    graph TD
          B["fa:fa-twitter for peace"]
          B-->C[fa:fa-ban forbidden]
          B-->D(fa:fa-spinner);
          B-->E(A fa:fa-camera-retro perhaps?);
    • 1
    • 2
    • 3
    • 4
    • 5

    这里写图片描述

    以上reference:
    1.mermaid docs


    第二部分—图表(graph)


    定义连接线的样式
    graph LR
         id1(Start)-->id2(Stop)
         style id1 fill:#f9f,stroke:#333,stroke-width:4px;
         style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
    • 1
    • 2
    • 3
    • 4

    渲染结果:

    这里写图片描述

    graph LR
         id1(Start)-->id2(Stop)
         style id1 fill:#f9f,stroke:#333,stroke-width:4px;
         style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
    • 1
    • 2
    • 3
    • 4

    备注:这些样式参考CSS样式。

    样式类

    为了方便样式的使用,可以定义类来使用样式
    类的定义示例:

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
    • 1

    对节点使用样式类:

    class nodeId className;
    • 1

    同时对多个节点使用相同的样式类:

    class nodeId1,nodeId2 className;
    • 1

    可以在CSS中提前定义样式类,应用在图表的定义中。

    graph LR
          A-->B[AAABBB];
          B-->D;
          class A cssClass;
    • 1
    • 2
    • 3
    • 4

    默认样式类:\
    当没有指定样式的时候,默认采用。

    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
    • 1

    示例:

    graph LR
        classDef default fill:#f90,stroke:#555,stroke-width:4px;
        id1(Start)-->id2(Stop)
    • 1
    • 2
    • 3

    结果:

    graph LR
    classDef default fill:#f90,stroke:#555,stroke-width:4px;
    id1(Start)-->id2(Stop)
    • 1
    • 2
    • 3

    这里写图片描述

    序列图(sequence diagram)1

    序列图

    示例:

    sequenceDiagram
      Alice->>John: Hello John, how are you ?
      John-->>Alice: Great!
      Alice--->>John: Huang,you are better .
      John-->>Alice: yeah, Just not bad.
    • 1
    • 2
    • 3
    • 4
    • 5
    sequenceDiagram
      Alice->>John: Hello John, how are you ?
      John-->>Alice: Great!
      Alice->>John: Hung,you are better .
      John-->>Alice: yeah, Just not bad.
    • 1
    • 2
    • 3
    • 4
    • 5

    这里写图片描述
    观察上面的图,如果想让John出现在前面,如何控制,mermaid通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改:

    sequenceDiagram\
      participant John\
      participant Alice\
      Alice->>John:Hello John,how are you?\
      John–>>Alice:Great!

    sequenceDiagram
      participant John
      participant Alice
      Alice-xJohn:Hello John,how are you?
      John-->>Alice:Great!
    • 1
    • 2
    • 3
    • 4
    • 5

    这里写图片描述
    消息的语法:
      实线或者虚线的使用:
    [Actor][Arrow][Actor]:Message text\
    Arrow的六种样式:

    • ->
    • –>
    • ->>
    • –>>
    • -x
    • –x

    示例:

    sequenceDiagram
        Alice->John: Hello John, how are you ?
        John-->Alice:Great!
        Alice->>John: dont borther me !
        John-->>Alice:Great!
        Alice-xJohn: wait!
        John--xAlice: Ok!
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    这里写图片描述

    便签

    给序列图增加便签:\
    具体规则:\
    [right of | left of | over][Actor]:Text\
    示例:

    sequenceDiagram
      participant John
      Note left of John: Text in note
    • 1
    • 2
    • 3

    结果:

    这里写图片描述

    跨越两个Actor的便签:

    sequenceDiagram
      Alice->John:Hello John, how are you?
      Note over Alice,John:A typical interaction
    • 1
    • 2
    • 3
    sequenceDiagram
    Alice->>John:Hello John, how are you?
    Note over Alice,John:A typical interaction
    • 1
    • 2
    • 3

    这里写图片描述

    循环Loops

    在序列图中,也可以使用循环,具体规则如下:

    loop Loop text
    ... statements...
    end
    • 1
    • 2
    • 3

    示例:

    sequenceDiagram
      Alice->>John: Hello!
      loop Reply every minute
        John->>Alice:Great!
      end
    • 1
    • 2
    • 3
    • 4
    • 5

    渲染结果:

    这里写图片描述

    选择ALT

    在序列图中选择的表达。规则如下:

    alt Describing text
    ...statements...
    else
    ...statements...
    end
    • 1
    • 2
    • 3
    • 4
    • 5

    或者使用opt(推荐在没有else的情况下使用)

    opt Describing text
    ...statements...
    end
    • 1
    • 2
    • 3

    示例:

    sequenceDiagram
      Alice->>Bob: Hello Bob, how are you?
      alt is sick
        Bob->>Alice:not so good :(
      else is well
        Bob->>Alice:Feeling fresh like a daisy:)
      end
      opt Extra response
        Bob->>Alice:Thanks for asking
      end
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    渲染结果如下:

    这里写图片描述


    甘特图(gantt)2

    甘特图是一类条形图,由Karol Adamiechi在1896年提出, 而在1910年Henry Gantt也独立的提出了此种图形表示。通常用在对项目终端元素和总结元素的开始及完成时间进行的描述。

    示例:

    gantt
    dateFormat YYYY-MM-DD
    
    section S1
    T1: 2014-01-01, 9d
    
    section S2
    T2: 2014-01-11, 9d
    
    section S3
    T3: 2014-01-02, 9d
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    gantt
    dateFormat YYYY-MM-DD
    section S1
    T1: 2014-01-01, 9d
    section S2
    T2: 2014-01-11, 9d
    section S3
    T3: 2014-01-02, 9d
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    这里写图片描述

    先来看一个大的例子:

        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
    
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
    
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d
    
        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h
    
        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    获得的图渲染后如下:
    这里写图片描述

    header 1 header 2
    title 标题
    dateFormat 日期格式
    section 模块
    Completed 已经完成
    Active 当前正在进行
    Future 后续待处理
    crit 关键阶段
    日期缺失 默认从上一项完成后

    关于日期的格式可以参考:
    - string-format
    - Time-Formatting

    Demo

    graph TB
        sq[Square shape] --> ci((Circle shape))
    
        subgraph A subgraph
            di{Diamond with  line break} -.-> ro(Rounded)
            di==>ro2(Rounded square shape)
        end
    
        e --> od3>Really long text with linebreak<br>in an Odd shape]
    
        cyr[Cyrillic]-->cyr2((Circle shape Начало));
    
        classDef green fill:#9f6,stroke:#333,stroke-width:2px;
        classDef orange fill:#f96,stroke:#333,stroke-width:4px;
        class sq,e green
        class di orange
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    这里写图片描述

    reference

    mermaid docs


    本文原创首发于公众号:老王和他的IT界朋友们

    微信扫描关注微信号:(原创投稿有惊喜!!!)


    1. 序列图的样式的定制需要在可以渲染CSS的地方才可使用,具体可以查阅参考。
    2. 甘特图的样式的定制需要在可以渲染CSS的地方才可使用,具体可以查阅参考。
    (function () {('pre.prettyprint code').each(function () { var lines = (this).text().split(\n).length;varnumbering = $('
    • ').addClass('pre-numbering').hide();
    (this).addClass(hasnumbering).parent().append(numbering); for (i = 1; i
    展开全文
  • mermaid 用法

    千次阅读 2018-01-04 23:31:36
    作者:黄永刚 ...mermaid简介 ...当撰写文档的时候,对于流程图的生成大多使用...mermaid解决这个痛点,这是一个类似markdown语法的脚本语言,通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(flowch
  • mermaid 语法

    2015-05-09 14:05:00
    a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover { outline: 0; } a:active { outline: 0; } a:hover { color: #005580 !... t...
  • Mermaid 学习

    2018-07-25 21:01:00
    在 VS code 中安装插件 Markdown Preview Mermaid Support,则便可支持 Mermaid 流程图 flowchart graph LR; A-->B; A-->C; B-->D; C-->D; 时序图 sequence diagram sequenceDiagram  participant ...
  • Markdown Mermaid

    2019-05-14 09:02:00
    Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库,使用 JS 进行本地渲染,广泛集成于许多 Markdown 编辑器中。 之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从...
  • Mermaid测试

    2019-10-03 06:31:52
    graph LR 1--4---2 2--3---3 3--1---1 转载于:https://www.cnblogs.com/Ewiges-Leben/p/11382792.html
  • mermaid test

    2019-10-16 14:35:57
    子图表2 子图表普通线普通线粗线虚线无箭头粗线虚线无箭头矩形菱形右向旗圆形矩形菱形右向旗帜圆形圆角矩形
  • Mermaid Song

    2006-08-16 17:54:00
    芝华士啤酒的广告歌 一首很踊懒的歌,听的时候很放松的说…… 其实自己很希望有这种生活,但现在的社会……很难,只有晚上的时候听一听放松自己一下 We could be together Everyday together We could sit forever ...
  • Mermaid语法

    2020-06-10 17:20:34
    文章目录Mermaid8.5版本中的新图表有关8.2版本的特别记录图表流程图顺序图甘特图类图-实验阶段Git图表-实验阶段实体关系图-试验阶段安装CDNNode.js原版文档孪生项目寻求帮助针对参与者安装编译Lint测试发布信任 ...
  • mermaid-demo

    2018-10-30 17:07:32
    mermaid是一款开源的画流程图、时序图、甘特度的工具,提供了命令行和html两种使用方法。本例是在html中使用mermaid画出各种图的例子。

空空如也

1 2 3 4 5 ... 20
收藏数 1,435
精华内容 574
关键字:

mermaid