【注】更多详情请参阅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 引号字符编码 " ）。

1
2
3
4
5
6
7
8
9
10
11
12
```mermaid
graph TB
    A[text] 
    B(text)
    C([text])
    D[(text)]
    E((text))
    F>text]
    G{text}
    H{{text}}
    I[/text/]
    J[\text\]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- {% img '/images/Technique/MarkDown/MarkDown绘图mermaid流程图graph/graph节点形状.png' 1099 ''%} -->
```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| 来在连线上添加文本。

1
2
3
4
5
6
7
8
```mermaid
graph TB
    A1 --> B1
    A2 --- B2
    A3 -.-> B3
    A4 -.- B4
    A5 === B5
    A6 ==> B6
1
2
3
4
5
6
7
8
9
10

<!-- {% img '/images/Technique/MarkDown/MarkDown绘图mermaid流程图graph/graph连线形状.png' 524 ''%} -->
```mermaid
graph TB
    A1 --> B1
    A2 --- B2
    A3 -.-> B3
    A4 -.- B4
    A5 === B5
    A6 ==> B6
1
2
3
4
5
6
7
8
```mermaid
graph TB
A1 --text--> B1
A2 ---|text| B2
A3 -.text.-> B3
A4 -.-|text| B4
A5 ==text=== B5
A6 ==>|text| B6
1
2
3
4
5
6
7
8
9
10

<!-- {% img '/images/Technique/MarkDown/MarkDown绘图mermaid流程图graph/graph连线文本.png' 521 ''%} -->
```mermaid
graph TB
A1 --text--> B1
A2 ---|text| B2
A3 -.text.-> B3
A4 -.-|text| B4
A5 ==text=== B5
A6 ==>|text| B6

【注】可以使用 & 同时指定多个节点之间的多个连线。

1
2
3
4
```mermaid
graph TB
A --> D & E & F
B & C -.-> F
1
2
3
4
5
6

<!-- {% img '/images/Technique/MarkDown/MarkDown绘图mermaid流程图graph/graph并发连线.png' 309 ''%} -->
```mermaid
graph TB
A --> D & E & F
B & C -.-> F

4. 子流程图

代码格式如下：

1
2
3
subgraph xxx
    ······
end

其中，xxx 为该子图的标题。

【注】不论 graph 还是 subgraph 中的节点标识都是全局的。

1
2
3
4
5
6
7
8
9
10
11
```mermaid
graph TB
subgraph one
    A1 --> B1
end
subgraph two
    A2 === B2
end
subgraph three
    A3 -.-> B2
end
1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- {% img '/images/Technique/MarkDown/MarkDown绘图mermaid流程图graph/graph子图.png' 418 ''%} -->
```mermaid
graph TB
subgraph one
    A1 --> B1
end
subgraph two
    A2 === B2
end
subgraph three
    A3 -.-> B2
end

5. 注释

graph流程图中以 %% 为开头注释一行。

1
2
3
```mermaid
graph LR
    A --> B %%此处为注释
1
2
3
4
5
6

## 6. 链接

graph流程图可以在节点标识上绑定 URL ，当点击对应节点时，链接到对应的 URL。语法格式如下
```markdown
click nodeID URL

举例如下：点击节点 A 会跳转到百度搜索引擎页面。

1
2
3
4
```mermaid
graph LR;
    A-->B;
    click A "https://www.baidu.com"