mermaid 用法

最新推荐文章于 2024-05-28 15:59:44 发布

Dijkstra__

最新推荐文章于 2024-05-28 15:59:44 发布

阅读量3.8k

点赞数

分类专栏： markdown 文章标签： markdown

markdown 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<div id="article_content" class="article_content tracking-ad" data-mod="popu_307" data-dsm="post">
<div class="markdown_views">作者：黄永刚

<h2 id="mermaid简介"><a name="t0" target="_blank"></a>mermaid简介</h2>

<img src="https://img-blog.csdn.net/20161021235139472" alt="这里写图片描述" title="">

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

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

1.流程图(flowchart)

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs brainfuck has-numbering">graph LR;
　　A-->B;
　　A-->C;
　　B-->D;
　　C-->D; </code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

生成的图表如下所示：

<img src="https://img-blog.csdn.net/20161021210422053" alt="这里写图片描述" title=""> 
2. 时序图(sequence diagram)

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs erlang-repl has-numbering">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!</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul></pre>

生成的图表如下所示：

<img src="https://img-blog.csdn.net/20161021210500377" alt="这里写图片描述" title="">

3.甘特图(gantt diagram)

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs livecodeserver has-numbering">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</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul></pre>

生成的表如下：

<img src="https://img-blog.csdn.net/20161021210533393" alt="这里写图片描述" title="">

<hr>

<h5 id="下游项目"><a name="t1" target="_blank"></a>下游项目</h5>

Mermaid 是由Knut Sveidqbist发起旨在轻便化的文档撰写。所有开发者:<a href="https://github.com/knsv/mermaid/graphs/contributors" target="_blank">开发者列表</a>

<ul>
<li><a href="https://github.com/JozoVilcek/gitbook-plugin-mermaid" target="_blank">Gitbook-plugin</a></li>
<li><a href="http://lighttable.com/" target="_blank">Light table</a></li>
<li><a href="https://marketplace.atlassian.com/plugins/org.anvard.atlassian.mermaid-plugin/server/overview" target="_blank">Confluence plugin</a></li>
<li><a href="http://nauvalatmaja.com/2015/01/13/rendering-mermaid-in-docpad/" target="_blank">Using mermaid via docpad</a></li>
<li><a href="https://rubygems.org/gems/jekyll-mermaid/versions/1.0.0" target="_blank">Using mermaid in Jekvll</a></li>
<li><a href="http://mostlyblather.com/blog/2015/05/23/mermaid-jekyll-octopress/" target="_blank">Using mermaid via Octopress</a></li>
<li><a href="http://pad.haroopress.com/user.html" target="_blank">Mardown editor Haroopad</a></li>
<li><a href="https://atom.io/packages/atom-mermaid" target="_blank">Plugin for atom</a></li>
<li><a href="http://mdp.tylingsoft.com/" target="_blank">Markdown Plus</a></li>
<li><a href="http://lightpaper.42squares.in/" target="_blank">LightPaper 1.2+</a></li>
<li><a href="https://github.com/kannokanno/previm" target="_blank">Vim Plugin</a> 
以上的这些都有集成mermaid或者开发相关的插件。</li>
</ul>

<h4 id="graph"><a name="t2" target="_blank"></a>Graph</h4>

<pre class="prettyprint" name="code"><code class="hljs brainfuck has-numbering">graph LR
A --> B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161021210608758" alt="这里写图片描述" title=""> 
这是申明一个由左到右，水平向右的图。\ 
可能方向有： 
- TB - top bottom 
- BT - bottom top 
- RL - right left 
- LR - left right 
- TD - same as TB

<hr>

<h4 id="节点与形状"><a name="t3" target="_blank"></a>节点与形状</h4>

<h6 id="默认节点"><a name="t4" target="_blank"></a>默认节点</h6>

<blockquote>
graph LR 
id1
</blockquote>

<img src="https://img-blog.csdn.net/20161021211609945" alt=" " title=""> 
注意：’id’显示在节点内部。

<h6 id="文本节点"><a name="t5" target="_blank"></a>文本节点</h6>

<img src="https://img-blog.csdn.net/20161021234031220" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering">graph LR
id[This is the text in the box];</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="圆角节点"><a name="t6" target="_blank"></a>圆角节点</h6>

<img src="https://img-blog.csdn.net/20161021234142456" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering">graph LR
id(This is the text in the box);</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="圆节点the-form-of-a-circle"><a name="t7" target="_blank"></a>圆节点(The form of a circle)</h6>

<img src="https://img-blog.csdn.net/20161021234523829" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering">graph LR
id((This is the text in the circle));</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="非对称节点asymetric-shape"><a name="t8" target="_blank"></a>非对称节点(asymetric shape)</h6>

<img src="https://img-blog.csdn.net/20161021234543595" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering">graph LR
id>This is the text in the box]</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="菱形节点rhombus"><a name="t9" target="_blank"></a>菱形节点(rhombus)</h6>

<img src="https://img-blog.csdn.net/20161021234607369" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs applescript has-numbering">graph LR
id{This is the text in the box}</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<hr>

<h4 id="连接线"><a name="t10" target="_blank"></a>连接线</h4>

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

<h6 id="箭头形连接"><a name="t11" target="_blank"></a>箭头形连接</h6>

<img src="https://img-blog.csdn.net/20161021235256658" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs brainfuck has-numbering">graph LR;
A-->B;</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="开放行连接"><a name="t12" target="_blank"></a>开放行连接</h6>

<img src="https://img-blog.csdn.net/20161021235317799" alt="" title="">

<pre class="prettyprint" name="code"><code class="hljs brainfuck has-numbering">graph LR
A --- B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="标签连接"><a name="t13" target="_blank"></a>标签连接</h6>

<img src="https://img-blog.csdn.net/20161021235357770" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs brainfuck has-numbering">graph LR
A -- This is the label text --- B;</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="箭头标签连接"><a name="t14" target="_blank"></a>箭头标签连接</h6>

<blockquote>
A–>|text|B\ 
或者\ 
A– text –>B
</blockquote>

<img src="https://img-blog.csdn.net/20161022000831696" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs brainfuck has-numbering">graph LR
A-- text -->B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="虚线dotted-link点连线"><a name="t15" target="_blank"></a>虚线(dotted link,点连线)</h6>

<blockquote>
-.->
</blockquote>

<img src="https://img-blog.csdn.net/20161022000926713" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs haskell has-numbering">graph LR
A-.->B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<blockquote>
-.-.
</blockquote>

<img src="https://img-blog.csdn.net/20161022000949275" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs autohotkey has-numbering">graph LR
A-.-.B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h6 id="标签虚线"><a name="t16" target="_blank"></a>标签虚线</h6>

<blockquote>
-.text.->
</blockquote>

<pre class="prettyprint" name="code"><code class="hljs haskell has-numbering">graph LR
A-.text.->B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001052183" alt="这里写图片描述" title="">

<h6 id="粗实线"><a name="t17" target="_blank"></a>粗实线</h6>

<blockquote>
==>
</blockquote>

<pre class="prettyprint" name="code"><code class="hljs fix has-numbering">graph LR
A==>B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001112761" alt="这里写图片描述" title="">

<blockquote>
===
</blockquote>

<pre class="prettyprint" name="code"><code class="hljs fix has-numbering">graph LR
A===B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001206902" alt="这里写图片描述" title="">

<h6 id="标签粗线"><a name="t18" target="_blank"></a>标签粗线</h6>

<blockquote>
=\=text\==>
</blockquote>

<pre class="prettyprint" name="code"><code class="hljs fix has-numbering">graph LR
A==text==>B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001232918" alt="这里写图片描述" title="">

<blockquote>
=\=text\===
</blockquote>

<pre class="prettyprint" name="code"><code class="hljs fix has-numbering">graph LR
A==text===B</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001257074" alt="这里写图片描述" title="">

<hr>

<h4 id="特殊的语法"><a name="t19" target="_blank"></a>特殊的语法</h4>

<h5 id="使用引号可以抑制一些特殊的字符的使用可以避免一些不必要的麻烦"><a name="t20" target="_blank"></a>使用引号可以抑制一些特殊的字符的使用，可以避免一些不必要的麻烦。</h5>

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

<pre class="prettyprint" name="code"><code class="hljs mizar has-numbering">graph LR
d1["This is the (text) in the box"]</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001504435" alt="这里写图片描述" title="">

<h5 id="html字符的转义字符"><a name="t21" target="_blank"></a>html字符的转义字符</h5>

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

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

渲染后的图如下： 
<img src="https://img-blog.csdn.net/20161022001541200" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs autohotkey has-numbering">graph LR
A["A double quote:#quot;"]-->B["A dec char:#9829;"]</code><ul class="pre-numbering" style=""><li>1</li><li>2</li></ul></pre>

<h4 id="子图subgraphs"><a name="t22" target="_blank"></a>子图(Subgraphs)</h4>

<blockquote>
subgraph title\ 
graph definition\ 
end
</blockquote>

示例：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs livecodeserver has-numbering">graph TB
subgraph one
a1 --> a2
en
subgraph two
b2 --> b2
end
subgraph three
c1 --> c2
end
c1 --> a2</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul></pre>

结果：

<img src="https://img-blog.csdn.net/20161022001631207" alt="这里写图片描述" title="">

<h4 id="基础fontawesome支持"><a name="t23" target="_blank"></a>基础fontawesome支持</h4>

如果想加入来自frontawesome的图表字体,需要像frontawesome网站上那样引用的那样。\ 
详情请点击：<a href="http://fontawesome.io/" target="_blank">fontawdsome</a>

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

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs lua has-numbering">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?);</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

渲染图如下：

<pre class="prettyprint" name="code"><code class="hljs lua has-numbering">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?);</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022001648160" alt="这里写图片描述" title="">

以上reference： 
1.<a href="https://knsv.github.io/mermaid/#initialization" target="_blank">mermaid docs</a>

<hr>

<h3 id="第二部分图表graph"><a name="t24" target="_blank"></a>第二部分—图表(graph)</h3>

<hr>

<h5 id="定义连接线的样式"><a name="t25" target="_blank"></a>定义连接线的样式</h5>

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs scss has-numbering">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;</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li></ul></pre>

渲染结果：

<img src="https://img-blog.csdn.net/20161022002151244" alt="这里写图片描述" title="">

<pre class="prettyprint" name="code"><code class="hljs scss has-numbering">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;</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li></ul></pre>

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

<h5 id="样式类"><a name="t26" target="_blank"></a>样式类</h5>

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

<pre class="prettyprint" name="code"><code class="hljs css has-numbering">classDef className fill:#f9f,stroke:#333,stroke-width:4px;</code><ul class="pre-numbering" style=""><li>1</li></ul></pre>

对节点使用样式类：

<pre class="prettyprint" name="code"><code class="hljs ruby has-numbering">class nodeId className;</code><ul class="pre-numbering" style=""><li>1</li></ul></pre>

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

<pre class="prettyprint" name="code"><code class="hljs ruby has-numbering">class nodeId1,nodeId2 className;</code><ul class="pre-numbering" style=""><li>1</li></ul></pre>

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

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs coffeescript has-numbering">graph LR
A-->B[AAABBB];
B-->D;
class A cssClass;</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li></ul></pre>

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

<pre class="prettyprint" name="code"><code class="hljs scss has-numbering">classDef default fill:#f9f,stroke:#333,stroke-width:4px;</code><ul class="pre-numbering" style=""><li>1</li></ul></pre>

示例：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs scss has-numbering">graph LR
classDef default fill:#f90,stroke:#555,stroke-width:4px;
id1(Start)-->id2(Stop)</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

结果：

<pre class="prettyprint" name="code"><code class="hljs scss has-numbering">graph LR
classDef default fill:#f90,stroke:#555,stroke-width:4px;
id1(Start)-->id2(Stop)</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

<h2 id="title"><a name="t27" target="_blank"></a><img src="https://img-blog.csdn.net/20161022002223062" alt="这里写图片描述" title=""></h2>

<h3 id="序列图sequence-diagram1"><a name="t28" target="_blank"></a>序列图(sequence diagram)<a href="#fn:sequence" id="fnref:sequence" title="See footnote" class="footnote" target="_blank">1</a></h3>

<a href="https://en.wikipedia.org/wiki/Unified_Modeling_Language#Interaction_diagrams" target="_blank">序列图</a>

示例：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs erlang-repl has-numbering">sequenceDiagram
　　Alice->>John: Hello John, how are you ?
　　John-->>Alice: Great!
　　Alice--->>John: Huang,you are better .
　　John-->>Alice: yeah, Just not bad.</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs erlang-repl has-numbering">sequenceDiagram
　　Alice->>John: Hello John, how are you ?
　　John-->>Alice: Great!
　　Alice->>John: Hung,you are better .
　　John-->>Alice: yeah, Just not bad.</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022002549453" alt="这里写图片描述" title=""> 
观察上面的图，如果想让John出现在前面，如何控制，mermaid通过设定参与者(participants)的顺序控制二者的顺序。上面的图可以做如下修改：

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

<pre class="prettyprint" name="code"><code class="hljs css has-numbering">sequenceDiagram
　　participant John
　　participant Alice
　　Alice-xJohn:Hello John,how are you?
　　John-->>Alice:Great!</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022002612798" alt="这里写图片描述" title=""> 
消息的语法： 
　　实线或者虚线的使用： 
[Actor][Arrow][Actor]:Message text\ 
Arrow的六种样式：

<ul>
<li>-></li>
<li>–></li>
<li>->></li>
<li>–>></li>
<li>-x</li>
<li>–x</li>
</ul>

示例：

<pre class="prettyprint" name="code"><code class="hljs erlang-repl has-numbering">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!</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022002857083" alt="这里写图片描述" title="">

<h5 id="便签"><a name="t29" target="_blank"></a>便签</h5>

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

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs vbnet has-numbering">sequenceDiagram
　　participant John
　　Note left of John: Text in note</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

结果：

<img src="https://img-blog.csdn.net/20161022002928022" alt="这里写图片描述" title="">

跨越两个Actor的便签：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs ruby has-numbering">sequenceDiagram
　　Alice->John:Hello John, how are you?
　　Note over Alice,John:A typical interaction</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs ruby has-numbering">sequenceDiagram
Alice->>John:Hello John, how are you?
Note over Alice,John:A typical interaction</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022003002159" alt="这里写图片描述" title="">

<h5 id="循环loops"><a name="t30" target="_blank"></a>循环Loops</h5>

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

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs r has-numbering">loop Loop text
... statements...
end</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

示例：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs erlang-repl has-numbering">sequenceDiagram
　　Alice->>John: Hello!
　　loop Reply every minute
　　　　John->>Alice:Great!
　　end</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

渲染结果：

<img src="https://img-blog.csdn.net/20161022003209222" alt="这里写图片描述" title="">

<h5 id="选择alt"><a name="t31" target="_blank"></a>选择ALT</h5>

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

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs lasso has-numbering">alt Describing text
...statements...
else
...statements...
end</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></pre>

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

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs livecodeserver has-numbering">opt Describing text
...statements...
end</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li></ul></pre>

示例：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs livecodeserver has-numbering">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</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></pre>

渲染结果如下：

<img src="https://img-blog.csdn.net/20161022003252848" alt="这里写图片描述" title="">

<hr>

<h3 id="甘特图gantt2"><a name="t32" target="_blank"></a>甘特图(gantt)<a href="#fn:gantt" id="fnref:gantt" title="See footnote" class="footnote" target="_blank">2</a></h3>

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

示例：

<pre class="prettyprint" name="code"><code class="language-{python} hljs avrasm has-numbering">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</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul></pre>

<pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">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</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022003521420" alt="这里写图片描述" title="">

先来看一个大的例子：

<pre class="prettyprint" name="code"><code class="language-{mermaid} hljs sql has-numbering"> 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</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul></pre>

获得的图渲染后如下： 
<img src="https://img-blog.csdn.net/20161022003542911" alt="这里写图片描述" title="">

<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>

关于日期的格式可以参考： 
- <a href="http://momentjs.com/docs/#/parsing/string-format/" target="_blank">string-format</a> 
- <a href="https://github.com/mbostock/d3/wiki/Time-Formatting" target="_blank">Time-Formatting</a>

<h3 id="demo"><a name="t33" target="_blank"></a>Demo</h3>

<pre class="prettyprint" name="code"><code class="hljs coffeescript has-numbering">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 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</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul></pre>

<img src="https://img-blog.csdn.net/20161022003623677" alt="这里写图片描述" title="">

<h3 id="reference"><a name="t34" target="_blank"></a>reference</h3>

<a href="https://knsv.github.io/mermaid/" target="_blank">mermaid docs</a>

<hr>

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

微信扫描关注微信号：（原创投稿有惊喜！！！）

<table>
<thead>
<tr>
<th align="center"></th>
<th align="center"><img src="https://img-blog.csdn.net/20160720010928530" alt="微信扫描二维码关注" title=""></th>
<th align="center"></th>
</tr>
</thead>
</table>
<div class="footnotes"><hr><ol><li id="fn:sequence">序列图的样式的定制需要在可以渲染CSS的地方才可使用，具体可以查阅参考。 <a href="#fnref:sequence" title="Return to article" class="reversefootnote" target="_blank">↩</a></li><li id="fn:gantt">甘特图的样式的定制需要在可以渲染CSS的地方才可使用，具体可以查阅参考。 <a href="#fnref:gantt" title="Return to article" class="reversefootnote" target="_blank">↩</a></li></ol></div></div>
<script type="text/javascript">
$(function () {
$('pre.prettyprint code').each(function () {
var lines = $(this).text().split('\n').length;
var $numbering = $('<ul/>').addClass('pre-numbering').hide();
$(this).addClass('has-numbering').parent().append($numbering);
for (i = 1; i <= lines; i++) {
$numbering.append($('<li/>').text(i));
};
$numbering.fadeIn(1700);
});
});
</script>

</div>

Dijkstra__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mermaid 用法

作者：黄永刚mermaid简介当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。先来看个例子:1.流程图(flowch
复制链接

扫一扫