mermaid 用法

2023-11-16

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

markdown

mermaid 用法的相关文章

Markdown 中的 VS Code Latex 语法

我目前正在使用 pandoc markdown 编写文档因此使用 Latex 语法在编写时如何获得 Latex 支持自动完成语法突出显示等 md file Latex Workshop 扩展适用于 tex文件但我找不到添加文件类型
将 docx 转换为 Rmarkdown

我的工作流程涉及生成包含数据分析的 Microsoft Word 报告使用 Rmarkdown 然后使用 Word 的标注注释功能对这些报告进行审查和注释对 Word 文档中的注释进行编辑会更容易所以这就是我所做的我现在想将这些更改
如何在 Markdown 文件中输入 html 而不渲染？

我想在 markdown 文件中输入以下句子她说 h1 很大我可以在 StackOverflow 中使用 h1 周围的三个反引号来完成此操作但这不适用于 md 文件我还尝试过单反引号单引号双引号主题标签间距 code h1
Markdown 报告未在 Rstudio 中执行

我正在生成错误 gt options encoding UTF 8 require knitr knit March 2013 Report Rmd Loading required package knitr processing fil
表格太宽，无法容纳 Markdown 生成的 PDF

我正在尝试使用 Rmarkdown 将 SQL 查询的表显示为 pdf 但是我得到的表格太宽不适合文档有人建议我使用 Pander 包因此我尝试使用 pandoc table 函数该函数在控制台上运行良好但由于某种原因它阻止我
如何在 Markdown 表格中编写列表？

可以在 Markdown 表格中创建一个列表项目符号编号与否一个表看起来像这样 Tables Are Cool col 3 is right aligned 1600 col 2 is centered 12 zebra stripe
如何在代码/预块中添加 Markdown 格式？

这似乎违背了代码块的目的但我希望能够将代码块中的某些内容加粗例如如果我想将返回行加粗 int main void return 0 您必须在 HTML 中执行此操作按设计 http daringfireball net projec
如何让 markdown.js 在 Delphi 的 TWebBrowser 中将 Markdown 文档显示为 HTML？

如何让 markdown js 在 Delphi 的 TWebBrowser 中将 Markdown 文档显示为 HTML 给定包含 Markdown 的字符串的内容如何让 markdown js 将该 markdown 转换为 HTML
gulp通过markdown json用jade生成html文件

我在用着gulp markdown to json and gulp jade 我的目标是从 markdown 文件中获取数据如下所示 template index jade title Europa This is a test gra
比较和对比轻量级标记语言[关闭]

就目前情况而言这个问题不太适合我们的问答形式我们希望答案得到事实参考资料或专业知识的支持但这个问题可能会引发辩论争论民意调查或扩展讨论如果您觉得这个问题可以改进并可能重新开放访问帮助中心 help reopen questi
如何将 Liquid 标签突出显示在有序列表中？

这就是我want页面为 ol li first li li second code code li li third li ol 这就是我正在写的 1 first 2 second highlight ruby code here endh
Pandoc Filter 为链接添加脚注

我只是想问是否有人知道 Pandoc 的一个简短过滤器可以自动向任何链接添加脚注我只想在我的打印文档中有可读的链接源所以为了指定我想从 link url 对于类似的东西 link url link url 因此在打印的 PDF 中
《美人鱼》中的空间

我有一个 md文件已保存我正在使用 Atom 和 Mermaid Preview 包查看它我将关闭他们的 GitHub 页面上的示例 graph TD A gt B A gt C B gt D C gt D 这渲染得很好但是如何在文本
带有 Pandoc 的内联 CSS

如果在某处记录了以编程方式实现此目的的简单方法不是通过在浏览器字段中复制粘贴并单击按钮进行转换我深表歉意在我的搜索和阅读中我找不到它我想以编程方式将 Markdown 和 CSS 文件转换为听起来可能称为内联 CSS 的文件例
.rmd 文件的访问名称并在 R 中使用

我正在编织一个名为MyFile rmd 我如何访问该字符串MyFile在编织过程中并将其用于在 YAML 标头的标题部分中使用在后续的 R 块中使用 title r rmarkdown metadata title author My
如何处理 Ipython Notebook 中的引用？

在 Ipython Notebook 中处理引用的最佳方法是什么理想情况下我想要一个 bibtex 文件然后像在 Latex 中一样在 Ipython markdown 单元格中拥有一个速记列表并在笔记本末尾提供完整的参考文献我
如何在 VS TextMateRules 中将标记设为粗体+斜体

在 Visual Studio Code 中我编辑 Markdown 文件在编辑器中标记的文本 bold 被渲染bold以及标记的那个 italic 呈现在italic 但文字标记 bold and italic 简单地呈现为itali
yaml / yaml 多行转义序列中的 Markdown？

是否可以在 yaml 中存储未转义的 Markdown 文档我测试过 key markdown text block that could have any combination of line breaks gt etc etc 这是
如何在 IPython 中设置 markdown 链接的基本 url？

我很高兴地设置在我的 IPython html 笔记本 IPython 0 12 的 Markdown 单元中以便能够将链接缩写为 wiki documentation doc html 在 Markdown 单元格中但这使得保存笔记
yard 0.7.3 无法在 Markdown 和 Textile 中构建我的自述文件

我决定将我的项目中的 README 文件转换为 Markdown 并一直使用yard 验证文档是否正确呈现所以我安装了 rdiscount 将 README 更改为 README md 并尝试 yard doc README md 这给了

随机推荐

Dubbo架构整体设计

一 Dubbo调用关系说明 1 1 组成部分在这里主要由四部分组成 Provider 暴露服务的服务提供方 Protocol 负责提供者和消费者之间的协议交互数据 Service 真实的业务服务信息可以理解成接口和实现 Containe
神经网络综述

本文指在介绍机器学习中的神经网络的多种变种包括简单的代码实现及优缺点并尽量不涉及到公式希望能给阅读者建立起一个关于神经网络的综合概念因此本文会涉及到一点神经网络的原理但不会太深入以致于读者迷失在其中而无法得到一个全局性的概念另外
SQLServer2019安装教程

可以去官网下载我百度网盘也有都一样 https pan baidu com s 1i3umqHXSUMbxJ9rRi6mU4A 提取码 5g9q 打开应用程序点击安装点第一个全新得SQL server独立安装下一步在这一步可能有需
TCP-IP详解：超时重传机制

参考教材 TCP IP Guide 超时重传是TCP保证数据传输可靠性的又一大措施本文主要介绍重传TCP报文的两大举措超时重传和快速重传超时重传机制超时重传指的是发送数据包在一定的时间周期内没有收到相应的ACK 等待一定的时间超
几款好用的指纹识别工具

几款好用的指纹识别工具在web渗透过程中对站点进行指纹探测识别非常重要了解网站所用的web框架或者cms可以为后续的渗透提供思路和突破口这篇文章主要用于总结几款我平时工作中经常使用的指纹识别工具一 whatweb whatweb是
Python Requests使用Cookie的几种方式

本文主要给大家介绍了关于Python Requests使用Cookie的几种方式 Python中的requests库可以使用cookie来维持会话状态实现登录等操作需要的朋友可以参考下一通过headers参数使用通过headers
c语言实现字符串的指定位置删除

要求任意输入一串字符串指定要删除的位置并输入要删除指定位置后字符的个数实现代码如下 include
el-table绑定的数组里面的对象值进行修改时，视图没有更新

在Vue js中如果您在对绑定到el table的数组里面的对象值进行修改后发现视图没有更新可能是因为Vue js无法检测到数据的变化解决这个问题的方法有以下几种使用Vue set 方法显式地告诉Vue js数据已经发生了变化例如
GNN等优缺点总结及解决方案

https www zhihu com question 338051122 https www zhihu com question 346942899 https zhuanlan zhihu com p 291230435 GCN的缺
STM32实现MLX90614非接触测温串口显示（标准库与HAL库实现）

目录模块选择编程环境 MLX90614基本原理通信协议 SMBus通信类IIC通信代码实现 STM32与模块之间接线表 1 标准库实现温度采集 2 HAL库实现温度采集模块选择 STM32F103C8T6 MLX90614 非接
多目标跟踪问题

A Baseline for 3D Multi Object Tracking 三维多目标跟踪原文地址 https arxiv org pdf 1907 03961v4 pdf 用到的基础知识卡尔曼滤波和匈牙利算法匈牙利算法用来求
weex＜==＞nvue书写样式需要注意的点（全部）

weex书写步骤全局样式规划将整个页面分割成合适的模块 flex 布局排列和对齐页面模块定位盒子定位并设置偏移量细节样式处理增加特定的具体样式 1 通用样式除此通用样式之外的属性均不被支持 1 单位只支持px和wx 不受屏
风起云涌，拓世法宝破茧而出！免费使用无限时长，领航数字人全新时代，你还在等什么？

随着元宇宙概念的不断推进数字化转型已经成为了时代的主流趋势在这个背景下虚拟数字人的发展迅速崭露头角为各个行业带来了前所未有的应用机会尤其是在短视频领域由于短视频的流量和人力成本持续上升数字人逐渐被企业视为一个新的探索方向希望
如何测试Android APP的耗电量？

现在可以使用google提供的battery historian来测试适用条件 5 0及以上手机 battery historian链接 google battery historian android吧所以的android都自带的功能
Qt--自定义控件

写在前面 Qt中提供了应用在各种场景的控件使开发人员在实际工作中选择但有些特定的场合中这些控件并不满足需要时 Qt允许使用自定义的控件例我们在工作中有这样一种需求点击按钮会根据一些其他状态来显示不同的图片这时Qt提供的QPush
阿里巴巴开源的免费数据库工具Chat2DB

Chat2DB 是一款由阿里巴巴开源的免费数据库工具它为开发人员提供了一个强大且易于使用的平台用于存储和查询数据与传统的数据库工具相比 Chat2DB 具有以下特点和优势多数据库支持 Chat2DB 可以与多种类型的数据库进行集成
GD32 OSC引脚做普通IO配置

根据用户手册 bit15共同控制了PD0 PD1的重映射的使能总的来说比普通IO配置多开启一个复用时钟和重映射使能 rcu periph clock enable RCU GPIOD rcu periph clock enable RC
第1关：Hbase数据库的安装

在安装HBase之前你需要先安装Hadoop和Zookeeper 如果你还没有安装可以通过这两个实训来学习 Hadoop安装与配置 Zookeeper安装与配置本次实训的环境已经默认安装好了Hadoop 接下来我们就开始安装配置HBase
500G JAVA视频网盘分享 (Jeecg社区)

http blog csdn net zhangdaiscott article details 18220411 csdn 排名400多名 500 G JAVA视频网盘分享 Jeecg社区涵盖从java入门到深入架构 Linux 云计算
mermaid 用法

div class article content tracking ad div class markdown views p 作者黄永刚 p h2 a target blank a strong mermaid简介 strong h2

mermaid 用法

mermaid 用法 的相关文章

随机推荐

热门标签

mermaid 用法的相关文章