【注】更多详情请参阅mermaid流程图官方文档。
1. 绘图方向
| 命令 | 方向 |
|---|---|
| TB（TD） | 从上到下 |
| BT | 从下到上 |
| RL | 从右到左 |
| LR | 从左到右 |
2. 节点形状
| 命令 | 形状 |
|---|---|
| A[text] | 文本框（默认形状） |
| B(text) | 圆角框 |
| C([text]) | 体育场型框 |
| D[(text)] | 数据库型框 |
| E((text)) | 圆形框 |
| F>text] | 非对称框 |
| G{text} | 菱形框 |
| H{{text}} | 六边形框 |
| I[/text/] J[\text\] |
平行四边形框 |
【注】可以将文本用引号引起，避免引号中出现特殊字符无法正常显示的情况（此时引号可以使用MarkDown引号字符编码 #quot; ）。
```mermaid
graph TB
A[text]
B(text)
C([text])
D[(text)]
E((text))
F>text]
G{text}
H{{text}}
I[/text/]
J[\text\]
```
3. 连线形状
| 命令 | 形状 | 添加文本 |
|---|---|---|
| A1 --> B1 | 直线箭头 | --text--> |
| A2 --- B2 | 直线 | --text--- |
| A3 -.-> B3 | 虚线箭头 | -.text.-> |
| A4 -.- B4 | 虚线 | -.text.-- |
| A5 === B5 | 加粗直线 | ==text=== |
| A6 ==> B6 | 加粗直线箭头 | ==text==> |
【注】还有一种简单添加文本的方式：连线后使用 |text| 来在连线上添加文本。
```mermaid
graph TB
A1 --> B1
A2 --- B2
A3 -.-> B3
A4 -.- B4
A5 === B5
A6 ==> B6
```
```mermaid
graph TB
A1 --text--> B1
A2 ---|text| B2
A3 -.text.-> B3
A4 -.-|text| B4
A5 ==text=== B5
A6 ==>|text| B6
```
【注】可以使用 & 同时指定多个节点之间的多个连线。
```mermaid
graph TB
A --> D & E & F
B & C -.-> F
```
4. 子流程图
代码格式如下：
subgraph xxx
······
end
其中，xxx 为该子图的标题。
【注】不论 graph 还是 subgraph 中的节点标识都是全局的。
```mermaid
graph TB
subgraph one
A1 --> B1
end
subgraph two
A2 === B2
end
subgraph three
A3 -.-> B2
end
```
5. 注释
graph流程图中以 %% 为开头注释一行。
```mermaid
graph LR
A --> B %%此处为注释
```
6. 链接
graph流程图可以在节点标识上绑定 URL ，当点击对应节点时，链接到对应的 URL。语法格式如下
click nodeID URL
举例如下：点击节点 A 会跳转到百度搜索引擎页面。
```mermaid
graph LR;
A-->B;
click A "https://www.baidu.com"
```
