markdown图表语法Mermaid介绍
Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。
Mermaid 是一个基于 Javascript 的图表绘制工具，可用于创建流程图、时序图、甘特图、类图、状态图、饼图等。
Mermaid集成到了很多 Markdown 编辑器中，本文使用的是Typora编辑器，在代码块中编写Mermaid代码，编程语言名字设置为 mermaid 。
接下来介绍Mermaid语法。
流程图
1. 定义流程图节点及节点名称
flowchart LR
A[Start]
flowchart LR
A[Start]
2. 定义流程图方向
可设置4个方向：
- TD - top-down，从上到下。或者使用TB（top to bottom）
- BT - bottom to top，从下到上
- RL - right to left，从右到左
- LR - left to right，从左到右
flowchart TD
A --> B
flowchart TD
A --> B
flowchart LR
A --> B
flowchart LR
A --> B
3. 节点形状
默认节点形状为长方形，也可以设置为其它形状。
flowchart LR
A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)]
E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}
I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]
flowchart LR
A(圆角矩形) -.- B([椭圆形]) -.- C((圆形)) -.- D[(圆柱形)]
E[[subroutine]] -.- F>非对称形状] -.- G{菱形} -.- H{{六角形}}
I[/平行四边形/] -.- J[\平行四边形\] -.- K[\梯形/] -.- L[/梯形\]
4. 节点连线
flowchart LR
A1 -- 箭头和文本 --> B1 --> |箭头和文本| C1 --> D1
A2 == 加粗直线箭头 ==> B2 ==> C2
A3 -- 无箭头 --- B3 ---|无箭头| C3 --- D3
A4 -. 虚线 .- B4 -.- C4 -. 虚线 .-> D4 -.-> E4
flowchart LR
A1 -- 箭头和文本 --> B1 --> |箭头和文本| C1 --> D1
A2 == 加粗直线箭头 ==> B2 ==> C2
A3 -- 无箭头 --- B3 ---|无箭头| C3 --- D3
A4 -. 虚线 .- B4 -.- C4 -. 虚线 .-> D4 -.-> E4
5. 多节点连接
flowchart LR
A --> B & C--> D
flowchart LR
A --> B & C--> D
flowchart TD
A & B--> C & D
flowchart TD
A & B--> C & D
或者
flowchart TD
A --> C
A --> D
B --> C
B --> D
flowchart TD
A --> C
A --> D
B --> C
B --> D
可通过增加短横线来增加连线长度。
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
flowchart TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
虚线或粗连线，可增加等号或点来延长连线：
| Length | 1 | 2 | 3 |
|---|---|---|---|
| 连线 | --- |
---- |
----- |
| 箭头 | --> |
---> |
----> |
| 加粗连线 | === |
==== |
===== |
| 加粗箭头 | ==> |
===> |
====> |
| 虚线 | -.- |
-..- |
-...- |
| 虚线箭头 | -.-> |
-..-> |
-...-> |
6. 其它类型箭头
flowchart LR
A --o B
B --x C
flowchart LR
A --o B
B --x C
flowchart LR
A o--o B
B <--> C
C x--x D
flowchart LR
A o--o B
B <--> C
C x--x D
7. 特殊字符
如果文本中有字符可以用双引号：
flowchart LR
A["括号 (text)"]
flowchart LR
A["括号 (text)"]
flowchart LR
A["括号 [text]"]
flowchart LR
A["中括号 [text]"]
如果文本中要使用双引号或者其它更多特殊字符，可以使用HTML 实体来表示：
flowchart LR
A["引号#quot;"]
flowchart LR
A["引号#quot;"]
flowchart LR
A["美元符号#36;"]
flowchart LR
A["美元符号#36;"]
flowchart LR
A["笑脸#128512;"]
flowchart LR
A["笑脸#128512;"]
更多HTML字符可参考https://www.w3school.com.cn/charsets/index.asp
8. 子图
flowchart TB
b2-->a2
subgraph A [one]
a1-->a2
end
subgraph B [two]
b1-->b2
end
flowchart TB
b2-->a2
subgraph A [A]
a1-->a2
end
subgraph B [B]
b1-->b2
end
subgraph C [C]
c1 -->c2
end
A --> C
可以通过设置样式来设置流程图边框，具体设置方法可参考：https://mermaid-js.github.io/mermaid/#/flowchart
时序图
举几个时序图的例子：
sequenceDiagram
autonumber
participant B as Browser
participant C as Controller
participant M as Model
participant V as View
B ->> C: Request
C ->> M: 数据请求
M ->> C: 返回数据
C ->> V: 发送数据
V ->> B: Response
sequenceDiagram
autonumber
participant B as Browser
participant C as Controller
participant M as Model
participant V as View
B ->> C: Request
C ->> M: 数据请求
M ->> C: 返回数据
C ->> V: 发送数据
V ->> B: Response
sequenceDiagram
autonumber
participant A
participant B
A -> B: 实线
A --> B: 虚线
A ->> B: 实线箭头
A -->> B: 虚线箭头
A -x B: 实线箭头+十字
A --x B: 虚线箭头+十字
loop
B->>B
sequenceDiagram
autonumber
participant A
participant B
A ->> B: 实线
A -->> B: 虚线
A ->> B: 实线箭头
A -->> B: 虚线箭头
A -x B: 实线箭头+十字
A --x B: 虚线箭头+十字
B ->> B: 循环
类图
Mermaid也支持类图，https://mermaid-js.github.io/mermaid/#/classDiagram：
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
状态图
Mermaid状态图语法和plantUml一样。
stateDiagram-v2
state "状态1" as State1
State2 : 状态2
[*] --> State1
State1 --> State2: 过渡文本
State2 --> State1
State2 --> State3
state State3 {
[*] --> second
second --> [*]
}
stateDiagram-v2
state "状态1" as State1
State2 : 状态2
[*] --> State1
State1 --> State2: 过渡文本
State2 --> State1
State2 --> State3
state State3 {
[*] --> second
second --> [*]
}
甘特图
甘特图例子：
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目
A 项目 :A1, 2022-01-01, 30d
B 项目 :after A1 , 20d
section 子任务
子任务1 :2022-01-12 , 12d
子任务2 : 24d
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目
A 项目 :A1, 2022-01-01, 30d
B 项目 :after A1 , 20d
section 子任务
子任务1 :2022-01-12 , 12d
子任务2 : 24d
饼图
Mermaid可以用来渲染饼图：
pie title 标题
"Dogs" : 38
"Cats" : 85
"Rats" : 15
pie title 标题
"Dogs" : 38
"Cats" : 85
"Rats" : 15
Mermaid除了可以渲染流程图、时序图、甘特图、类图、状态图和饼图外，还可以用来画实体关系图、需求图等，更多语法课参考官方文档：https://mermaid-js.github.io/mermaid/#/ 。
