Mermaid流程图应用

Mermaid是Markdown语法中另一个有用的插件，可以制作流程图、甘特图、饼图等图表。

Mermaid写法

基本代码如下，类似代码块写法。

第一行启动mermaid，第二行指定类型，第三行开始代码，结束行。

1
2
3
4
​```mermaid
flowchart
A---B
​```

显示效果：

flowchart
A---B

流程图

语法：

1
2
3
4
5
6
7
8
9
10
​```mermaid
flowchart TB
A[8月<br>雅思基础段]-->B([9月<br>雅思6.5分段])-->C[[次年1月<br>期末测试]]-->D[(2-3月<br>刷题)]
D-->E{4月<br>首考}
E--通过-->F[9月<br>正式考]
E--不通过-->H((跑出去玩了))
E--不通过-->G[/重新刷题\]-->F
H <-.->|玩个痛快| I(走好不送)
F ==>H
​```
效果如下：

flowchart TB
A>8月<br>雅思基础段]-->B([9月<br>雅思6.5分段])-->C[[次年1月<br>期末测试]]-->D[(2-3月<br>刷题)]
D-->E{4月<br>首考}
E--通过-->F(9月<br>正式考)
E--不通过-->H((跑出去玩了))
E--不通过-->G[/重新刷题\]-->F
H <-.->|玩个痛快| I(走好不送)
F ==>H

图形和线条还可以有更多变化，而且还并列几个流程，流程之间还可以交叉......

饼图

语法：

1
2
3
4
5
6
7
8
​```mermaid
pie
title 中午饭吃点什么好呢？
"汉堡": 5
"披萨": 6
"皮肚面": 1
"西北风": 1
​```
效果如下：
pie
title 中午饭吃点什么好呢？
"汉堡": 5
"披萨": 6
"皮肚面": 1
"西北风": 1

写在最后

同学们在学习过程中可能上面的流程图和饼图会用到的多一些，所以在这里做了范例。

Mermaid图形渲染同样最好是通过主题支持，否则又可能会找一大圈找不到合适的解决方案。这里特别提醒注意。

https://mermaid-js.github.io/mermaid/#/

这是Mermaid的网页，更多有趣的写法请在这里探索。