这是我参与「第三届青训营 -后端场」笔记创作活动的的第5篇笔记

在最近写青训营的笔记的过程中，需要画流程图放进笔记中。可是用Xmind、Visio等软件绘制流程图再放入markdown格式的笔记中不方便修改，需要反复导入导出。于是我找到一个对markdown很友好的绘制流程图的工具：Mermaid。

所以写了这篇笔记，记录使用Mermaid绘制流程图的学习过程。

1. Mermaid介绍

Mermaid 是一个基于 Javascript 的图表和图表工具，它是基于 markdown 语法来简化和加速生成流程图的过程，也不止于生成流程图。Mermaid允许您使用文本和代码创建图表和可视化。

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JavaScript 进行本地渲染，广泛集成于许多 Markdown 编辑器中。

Mermaid 作为一个使用 JavaScript 渲染的库，生成的不是一个“图片”，而是一段 SVG 形式的图形的 HTML 代码。

2. 图形

头部用graph 或 flowchart 关键字来声明流程图。两者用法基本一致，使用graph 声明时，链接线上的文字会附带白底；使用flowchart 声明时，连接线更平滑，并且似乎可以支持更新的语法。更多区别详见源码，以下内容不加区分地使用两种声明方式。

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

flowchart TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

flowchart TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

2.1 一个节点（默认）

graph LR
id

graph
id

2.2 带有文字的节点

graph LR
id[文字]

graph
文字

3. 流程图方向

方向	代码
从上到下	TB/TD
从下到上	BT
从左到右	LR
从右到左	RL

3.1 从上到下

graph TB
start --> stop

graph TB
start --> stop

3.2 从下到上

graph BT
start --> stop

graph BT
start --> stop

3.3 从左到右

graph LR
start --> stop

graph LR
start --> stop

3.4 从右到左

graph RL
start --> stop

graph RL
start --> stop

4. 节点样式

4.1 矩形

用中括号 []表示

graph
id[text]

graph
id[text]

4.2 圆角矩形

用圆括号 () 表示

graph
id(text)

graph
id(text)

4.3 体育场型

用圆括号内含方括号 ([]) 表示

graph
id([text])

graph
id([text])

4.4 子程序型

用方括号内含方括号 [[]] 表示

graph
id[[text]]

graph
id[[text]]

4.5 圆柱形

用方括号内含圆括号 [()] 表示

graph
id[(text)]

graph
id[(text)]

4.6 圆形

用圆括号内含圆括号 (()) 表示

graph
id((text))

graph
id((text))

4.7 不对称矩形

用大于号和右方括号 >] 表示

graph
id>text]

graph
id>text]

4.8 菱形

用大括号 {} 表示

graph
id{text}

graph
id{text}

4.9 六边形

用大括号内含大括号 {{}} 表示

graph
id{{text}}

graph
id{{text}}

4.10 平行四边形

向左：用中括号包含左斜杠 [//] 表示
```
graph
id[/text/]
```
```
graph
id[/text/]
```
向右：用中括号包含右斜杠 [\] 表示
```
graph
id[\text\]
```
```
graph
id[\text\]
```

4.11 梯形

用中括号包含左斜杠和右斜杠表示

graph
id[/text\]

graph
id[/text\]

4.12 含特殊字符

转义字符为双引号 ""

含有() [] {} 等特殊字符时，可用双引号"" 包裹进行转义。

graph
id["[特殊字符]"]

graph
id["[特殊字符]"]

5. 节点之间的连接

5.1 连接线样式

连接线样式	命令
实线	---
虚线	-.-
加粗实线	===

graph LR
a---b
a-.-b
a===b

graph LR
a---b
a-.-b
a===b

5.2 箭头样式（当前掘金的mermaid版本不支持）

箭头样式	命令
右箭头	-->
圆形箭头	--o
叉形箭头	--x
双向箭头	<--> o--o x--x

graph LR
a --> b
a --ob 
a --x b
a <--> b
a o--o b

graph LR
a --> b
a --ob 
a --x b
a <--> b
a o--o b

5.3 连接线上的文本

在箭头后在 || 中填写要显示的文本内容

graph LR
a-->|text|b

graph LR
a-->|text|b

5.4 连接线长度

连接线长度从短到长：--- < ---- < ---->

graph LR
a---b
a1----b1
a2---->b2

graph LR
a---b
a1----b1
a2---->b2

5.5 小结

长度	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	==	===	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.-	-..->	-...->

5.6 链式连接

用与符号 & 连接同级的节点

graph LR
a --- b1 & b2--- c

graph LR
a --- b1 & b2--- c

graph TB
a1 & a2 --- b1 & b2 & b3

graph TB
a1 & a2 --- b1 & b2 & b3

5.7 示例

graph TD
    A[Start] --> B{Is it?} -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];

graph TD
    A[Start] --> B{Is it?} -->|Yes| C[OK];
    C --> D[Rethink];
    D --> B;
    B ---->|No| E[End];

6. 节点上的超链接

可以将单击事件绑定到节点，可设置为在本页面打开或在新选项卡中打开。可以使 javascript 回调或将在新浏览器选项卡中打开链接。

默认情况下，链接在同一个浏览器选项卡/窗口中打开。可以通过给click定义添加一个链接目标来改变这一点(支持_self， _blank， _parent和_top):

graph LR;
    A-->B;
    B-->C;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank

graph LR;
    A-->B;
    B-->C;
    click A "http://www.github.com" _blank
    click B "http://www.github.com" "Open this in a new tab" _blank

typora对Interaction 支持有限，更多内容可以查看mermaid官方文档。

7. 子图

子图从 subgraph 子图名 开始，到 end 结束。

不同子图之间的节点可以用连接线连接

graph TB
    subgraph one
    a1-->a2
        subgraph subone
        a11-->a21
        end
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
c1-->a2

graph TB
    subgraph one
    a1-->a2
        subgraph subone
        a11-->a21
        end
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
c1-->a2

7.1 测试功能：子图之间的连接

当图像类型选择flowchart 时，可以设置子图之间的边的连接。（图像类型选择graph时，连接子图会报错）

注：在当前版本，此处仅支持使用flowchart 声明。

flowchart TB
        c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

flowchart TB
        c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
    one --> two
    three --> two
    two --> c2

7.2 子图的方向(当前掘金的mermaid版本不支持）

在子图中用 direction 方向表示

方向表示与流程图的方向相同，从上到下为TB，从下到上为BT，从左到右为LR，从右到左为RL。

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2

8. 注释

注释要以%% 开头，并且独占一行。注释开始之后的任何文本都将被视为注释，包括任何流语法

graph LR
%% this is a comment A -- text --> B{node}
    A -- text --> B -- text2 --> C

graph LR
%% this is a comment A -- text --> B{node}
    A -- text --> B -- text2 --> C

9. 节点样式

可以对节点应用特定样式，例如节点的背景颜色、节点的边框的粗细，文字的颜色等待。

语法与css类似。

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

更多样式参考可以mermaid官方文档。

10. 附录：相关链接

mermadi项目地址: github.com/mermaid-js/…
mermaid官方文档: mermaid-js.github.io/mermaid/#/f…
mermaid在线编辑: mermaid-js.github.io/mermaid-liv…

使用Mermaid绘制流程图 | 青训营笔记