markdown绘图插件----mermaid简介

ゝ一世哀愁。 2021-09-19 13:14 1901阅读 0赞

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

官网：[https://mermaidjs.github.io/][https_mermaidjs.github.io]

在线编辑器：[here][]

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

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

1.流程图(flowchart)

graph LR;  
    　　A-->B;    
    　　A-->C;  
    　　B-->D;  
    　　C-->D;

生成的图表如下所示：

![这里写图片描述][20161021210422053]   
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!

生成的图表如下所示：

![这里写图片描述][20161021210500377]

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

生成的表如下：

![这里写图片描述][20161021210533393]

--------------------

下游项目

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

*  [Gitbook-plugin][]
 *  [Light table][]
 *  [Confluence plugin][]
 *  [Using mermaid via docpad][]
 *  [Using mermaid in Jekvll][]
 *  [Using mermaid via Octopress][]
 *  [Mardown editor Haroopad][]
 *  [Plugin for atom][]
 *  [Markdown Plus][]
 *  [LightPaper 1.2+][LightPaper 1.2]
 *  [Vim Plugin][]   
    以上的这些都有集成mermaid或者开发相关的插件。

Graph

graph LR
        A --> B

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

--------------------

节点与形状

默认节点

> graph LR   
> id1

![20161021211609945][]   
注意：’id’显示在节点内部。

文本节点

![这里写图片描述][20161021234031220]

graph LR
    id[This is the text in the box];

圆角节点

![这里写图片描述][20161021234142456]

graph LR
    id(This is the text in the box);

圆节点(The form of a circle)

![这里写图片描述][20161021234523829]

graph LR
    id((This is the text in the circle));

非对称节点(asymetric shape)

![这里写图片描述][20161021234543595]

graph LR
    id>This is the text in the box]

菱形节点(rhombus)

![这里写图片描述][20161021234607369]

graph LR
    id{This is the text in the box}

--------------------

连接线

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

箭头形连接

![这里写图片描述][20161021235256658]

graph LR;
      A-->B;

开放行连接

![20161021235317799][]

graph LR
    A --- B

标签连接

![这里写图片描述][20161021235357770]

graph LR
    A -- This is the label text --- B;

箭头标签连接

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

![这里写图片描述][20161022000831696]

graph LR
     A-- text -->B

虚线(dotted link,点连线)

> \-.->

![这里写图片描述][20161022000926713]

graph LR
    A-.->B

> \-.-.

![这里写图片描述][20161022000949275]

graph LR
    A-.-.B

标签虚线

> \-.text.->

graph LR
    A-.text.->B

![这里写图片描述][20161022001052183]

粗实线

> ==>

graph LR
    A==>B

![这里写图片描述][20161022001112761]

> ===

graph LR
    A===B

![这里写图片描述][20161022001206902]

标签粗线

> =\\=text\\==>

graph LR
    A==text==>B

![这里写图片描述][20161022001232918]

> =\\=text\\===

graph LR
    A==text===B

![这里写图片描述][20161022001257074]

--------------------

特殊的语法

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

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

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

![这里写图片描述][20161022001504435]

html字符的转义字符

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

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

渲染后的图如下：   
![这里写图片描述][20161022001541200]

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

子图(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

结果：

![这里写图片描述][20161022001631207]

基础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?);

渲染图如下：

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?);

![这里写图片描述][20161022001648160]

以上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;

渲染结果：

![这里写图片描述][20161022002151244]

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;

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

样式类

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

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

对节点使用样式类：

class nodeId className;

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

class nodeId1,nodeId2 className;

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

graph LR
          A-->B[AAABBB];
          B-->D;
          class A cssClass;

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

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

示例：

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

结果：

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

## ![这里写图片描述][20161022002223062] ##

### 序列图(sequence diagram)[1][] ###

[序列图][Link 2]

示例：

sequenceDiagram
    　　Alice->>John: Hello John, how are you ?
    　　John-->>Alice: Great!
    　　Alice--->>John: Huang,you are better .
    　　John-->>Alice: yeah, Just not bad.

sequenceDiagram
    　　Alice->>John: Hello John, how are you ?
    　　John-->>Alice: Great!
    　　Alice->>John: Hung,you are better .
    　　John-->>Alice: yeah, Just not bad.

![这里写图片描述][20161022002549453]   
观察上面的图，如果想让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!

![这里写图片描述][20161022002612798]   
消息的语法：   
　　实线或者虚线的使用：   
\[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!

![这里写图片描述][20161022002857083]

便签

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

sequenceDiagram
    　　participant John
    　　Note left of John: Text in note

结果：

![这里写图片描述][20161022002928022]

跨越两个Actor的便签：

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

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

![这里写图片描述][20161022003002159]

循环Loops

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

loop Loop text
    ... statements...
    end

示例：

sequenceDiagram
    　　Alice->>John: Hello!
    　　loop Reply every minute
    　　　　John->>Alice:Great!
    　　end

渲染结果：

![这里写图片描述][20161022003209222]

选择ALT

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

alt Describing text
    ...statements...
    else
    ...statements...
    end

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

opt Describing text
    ...statements...
    end

示例：

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

渲染结果如下：

![这里写图片描述][20161022003252848]

--------------------

### 甘特图(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

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

![这里写图片描述][20161022003521420]

先来看一个大的例子：

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

获得的图渲染后如下：   
![这里写图片描述][20161022003542911]

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

关于日期的格式可以参考：   
\- [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

![这里写图片描述][20161022003623677]

### **reference** ###

[https_mermaidjs.github.io]: https://mermaidjs.github.io/
[here]: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ
[20161021210422053]: /images/20210812/725b3d619adf409ca35a9473f1ea0a30.png
[20161021210500377]: /images/20210812/7783a959219b4b6b8dacc85aec9a878f.png
[20161021210533393]: /images/20210812/e4caa86a43b54b4c971d85969b77f857.png
[Link 1]: https://github.com/knsv/mermaid/graphs/contributors
[Gitbook-plugin]: https://github.com/JozoVilcek/gitbook-plugin-mermaid
[Light table]: http://lighttable.com/
[Confluence plugin]: https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview
[Using mermaid via docpad]: http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/
[Using mermaid in Jekvll]: https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0
[Using mermaid via Octopress]: http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/
[Mardown editor Haroopad]: http://pad.haroopress.com/user.html
[Plugin for atom]: https://atom.io/packages/atom-mermaid
[Markdown Plus]: http://mdp.tylingsoft.com/
[LightPaper 1.2]: http://lightpaper.42squares.in/
[Vim Plugin]: https://github.com/kannokanno/previm
[20161021210608758]: /images/20210812/dce98f0d617a4a9ca8cfd7379dc9abcc.png
[20161021211609945]: /images/20210812/9aa5def54bfa4f5a9326476858b5c6cd.png
[20161021234031220]: /images/20210812/dad778fe8958498dae1564b5121f36a7.png
[20161021234142456]: /images/20210812/55d8e6d4c7624eb5a477ad50fff6f7cf.png
[20161021234523829]: /images/20210812/1daa0578002a4291a48645e86a50540f.png
[20161021234543595]: /images/20210812/21e1c10a2d51410da07ceadb4505fb7c.png
[20161021234607369]: /images/20210812/d55ec0e58d9b44208c53dcf4a34c974c.png
[20161021235256658]: /images/20210812/2f658357421e4316811f3aeadf05ed1e.png
[20161021235317799]: /images/20210812/e431a96d76ff4306877000034b8b61b7.png
[20161021235357770]: /images/20210812/4006a1f7e9c1482fb4fd1bacd600d8dd.png
[20161022000831696]: /images/20210812/4241a3e0f82a45ba8e76274a063f686b.png
[20161022000926713]: /images/20210812/72bb97315cef4d43858ae5e6f95177ab.png
[20161022000949275]: /images/20210812/f5744b6c6e514763a45baafc21f91b3d.png
[20161022001052183]: /images/20210812/c95e796c73e74c0c83064b0c9edbe2e6.png
[20161022001112761]: /images/20210812/914f3bc56e444f83b4532417c2534265.png
[20161022001206902]: /images/20210812/be14c4d83b7644208e7e2c9913469028.png
[20161022001232918]: /images/20210812/a30e0ec48710420a80a98602372f0030.png
[20161022001257074]: /images/20210812/1a6290f8ef4842669fad9871a67f2d49.png
[20161022001504435]: /images/20210812/49be79a598a6418f859114d98cf3426c.png
[20161022001541200]: /images/20210812/beec95948adf4539a34ffa082f9524b3.png
[20161022001631207]: /images/20210812/17102518177d4b52a5a8b48f1ef43902.png
[fontawdsome]: http://fontawesome.io/
[20161022001648160]: /images/20210812/6a73fbee5b414307a61ba1f7209009aa.png
[mermaid docs]: https://knsv.github.io/mermaid/#initialization
[20161022002151244]: /images/20210812/c6aea4d9258147e4813dc09d3e286877.png
[20161022002223062]: /images/20210812/562bb4cedc834d89b4ed3f9b3ca5ca1f.png
[1]: https://www.cnblogs.com/wuyida/p/6301240.html#fn:sequence
[Link 2]: https://en.wikipedia.org/wiki/Unified_Modeling_Language#Interaction_diagrams
[20161022002549453]: /images/20210812/10d23a2d55714aefbdeb99450ea00d2c.png
[20161022002612798]: /images/20210812/cf09cd2377194ea4b954c1356dfc60f8.png
[20161022002857083]: /images/20210812/e0d3164bf3e64901834209773b008606.png
[20161022002928022]: /images/20210812/ab7c185085f341f5bfd7b7bb63183796.png
[20161022003002159]: /images/20210812/07ceaa9217604e0e85363a8be78c87c9.png
[20161022003209222]: /images/20210812/95df4c88d2eb4c12abf6587455be30d7.png
[20161022003252848]: /images/20210812/716ab3ab8b9640d8a556c0937ba0d80b.png
[2]: https://www.cnblogs.com/wuyida/p/6301240.html#fn:gantt
[20161022003521420]: /images/20210812/dba07835e74d4b25970b3fb47a0f6479.png
[20161022003542911]: /images/20210812/e26cfeabca95489ea9d06e558fd0600f.png
[string-format]: http://momentjs.com/docs/#/parsing/string-format/
[Time-Formatting]: https://github.com/mbostock/d3/wiki/Time-Formatting
[20161022003623677]: /images/20210812/3281b47a794044f894621174d6e3c74e.png