Markdown画流程图(mermaid的基本使用)

Mermaid简介

Mermaid这个单词是美人鱼的意思，不过在这里是指一个受Markdown的“文本定义”所启发的一款开源js库，它可以用类似于写Markdown的方式来画流程图、状态图、时序图、甘特图，并使用js进行本地渲染，广泛集成于许多Markdown编辑器中。

Mermaid被提名并赢得了js开源奖(2019)类别“最另人兴奋的技术应用”。
美人鱼的主要目的是帮助文档跟上开发进度，这是Mermaid官方文档。

怎样让Markdown解析你的mermaid脚本？

如下图所示，在markdown里用三个反引号开始(并在旁边写上mermaid)，然后用三个反引号结束(其实就是代码块标记)，然后在这两对三反引号里写marmaid语句，即可让markdown编辑器识别到这是mermaid

当然，其本质是需要一个class="mermaid"的div标签对，只不过上述写法markdown编辑器会把它解析为class="mermaid"的div标签对。

流程图

这是流程图官方文档。

流程图基本语法

如下所示，用graph关键字表示这是“流程图”，后面跟着是”方向关键字“，然后换行缩进，就可以开始写具体语句了

graph 方向关键字
    其它语句

方向关键字

方向关键字用两个字母表示，如下表所示(其中从上到下有两种写法)

方向关键字	英文原意	中文解释
TB	Top Bottom	从上到下
BT	Bottom Top	从下到上
LR	Left Right	从左到右
RL	Right Left	从右到左
TD	Top Down	从上到下

---

从上到下

graph TD
    开始 --> 结束

---

从下到上

graph BT
    开始 --> 结束

---

从左到右

graph LR
    开始 --> 结束

---

从右到左

graph RL
    开始 --> 结束

流程图节点形状

直角矩形: 方括号表示直角矩形，id只是一个标记，不一定要写成id，可以写成任意字母，比如aa、bb、abc等等，中括号表示直角矩形

graph LR
    id[直角矩形节点]

---

默认直角矩形: 当然不写id和方括号，直接写节点内文本，默认也是直角矩形，但实际使用一般不会这么用，因为这样写，一方面不能换行、不能有空格，另一方面也需要id来标记指向其它节点

graph LR
    默认直角矩形节点

---

圆角矩形: 圆括号表示圆角矩形

graph LR
    id(圆角矩形节点)

---

子程序: 双方括号表示子程序(部分库不支持，比如本博客所用的库就不支持)

graph LR
    id[[子程序节点]]

---

圆柱形: 方括号里面套圆括号表示圆柱形节点(一般表示数据库，部分不支持，比如本博客所用的库就不支持)

graph LR
    id[(圆柱形数据库节点)]

---

圆形: 双圆括号表示圆形节点

graph LR
    id((圆柱形数据库节点))

---

右向旗帜: 左大于号+右方括号，表示右向旗帜状节点

graph LR
    id>右向旗帜状节点]

---

菱形: 花括号表示菱形节点，一般用于条件判断

graph LR
    id{菱形节点}

---

六角矩形: 双花括号表示六角矩形(本博客所用库不支持)

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

---

平行四边形: 方括号里套双斜杠，表示平行四边形(本博客所用库不支持)

graph TD
    id1[/This is the text in the box/]

---

反向平行四边形: 方括号里套双反斜杠，表示反向平行四边形(本博客所用库不支持)

graph TD
    id1[\This is the text in the box\]

---

正梯形: 方括号内套正反斜杠，表示正梯形

graph TD
    A[/Christmas\]

---

反梯形: 方括号内套反正斜杠，表示反梯形

graph TD
    A[\Christmas/]

---

节点内换行: 节点内文字换行用html的换行标记<br>

graph LR
    id[节点里面<br>文本换行]

---

节点内显示关键字符号: 要把各种关键字符号作为文字显示在节点内(如在节点内显示圆括号、方括号、花括号及其它的，如大于号，正反斜杠等等)，只需要加双引号就行

graph LR
    id["(圆括号)<br>[方括号]<br>{花括号}<br>/正斜杠/<br>\反斜杠\<br>/正反斜杠\<br>\反正斜杠/<br>>大于号"]

节点间的连线

带箭头连线

graph LR
    A-->B

---

无箭头连线

graph LR
    A---B

---

带文字无箭头连线
写法一：

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

---

写法二：

graph LR
    A---|This is the text|B

---

带文字箭头连线
写法一：

graph LR
    A--text-->B

---

写法二：

graph LR
    A-->|text|B

---

带箭头虚线连线

graph LR
   A-.->B;

---

带文字箭头虚线连线

graph LR
   A-.这是文字.->B;

---

无箭头粗线
无箭头细线的横杠换成等号

graph LR
   A===B;

---

带箭头粗线
带箭头细线的横杠换成等号

graph LR
   A==>B;

---

带文字箭头粗线

graph LR
   A==文字==>B;

---

链式连线
部分库不支持这种写法，比如本博客所用的库就不支持

graph LR
    A--文字-->B--文字-->C--文字-->D

本博客所用的库要用这种写法

graph LR
    A--文字-->B
    B--文字-->C
    C--文字-->D

---

“&”符号的应用
这种图

graph TB
    A --> C
    A --> D
    B --> C
    B --> D

可以用“&”符号简写成，但是本博客所用库不支持这种写法

graph TB
    A&B-->C&D

---

还有比如这种

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

可以简写成这种，它的意思是，a连接到b和c，b和c都连接到d，不过本博客所用库不支持

graph LR
   a-->b&c-->d

---

综合应用示例

graph TD
    n1[client] --https请求--> n2
    n2(nginx stream<br>统一监听443) --> n3{根据sni分发}
    n3 --tcp转发--> n4[A]
        n4 --"转发"--> web[G]
    n3 --tcp转发--> n5[B]
        n5 --"转发"--> web
    n3 --tcp转发--> n6[C]
        n6 --"转发"--> web
    n3 --tcp转发--> n7[D]
    n3 --tcp转发--> n8[E]
    n3 --tcp转发--> n9[F]
    n7 --> n10{H}
       n10 --是-->n11[I]
       n10 --否-->n12[J]

更多使用方式请看官方文档。

序列图

序列图官方文档

类图

类图官方文档

状态图

状态图官方文档

实体关系图

实体关系图官方文档

用户旅行图

用户旅行图官方文档

甘特(Gant)图

甘特图官方文档

饼状图

饼状图官方文档

---

参考：
Mermaid官方文档
基于Mermaid的时序图、流程图和甘特图