文章中出现的图表代码在 web 页面中可能无法正常显示为图表，要查看效果请拷贝图表代码内容到 Windows Typora 应用程序中的代码框，并选择语言为 mermaid；
mermaid 介绍
mermaid 是一个基于 Javascript 的图表工具，可以使用特定 markdown 标记动态创建和修改图表；
支持的图表
饼图
以下是一个简单饼图代码：
1
2
3
4
pie title What Voldemort doesn't have?
"FRIENDS" : 2
"FAMILY" : 3
"NOSE" : 45
显示效果如下：
序列图
以下是一个简单序列图代码：
1
2
3
4
5
6
7
8
9
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
显示效果如下：
流程图
以下是一个简单流程图代码：
graph TD;表示从上到下；
graph LR;表示从左到右；
graph RL;表示从右到左；
1
2
3
4
5
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
显示效果如下：
类图
以下是一个简单类图代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
显示效果如下：
状态图
以下是一个简单状态图代码：
1
2
3
4
5
6
7
8
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
显示效果如下：
实体关系图
以下是一个简单实体关系图代码：
1
2
3
4
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
显示效果如下：
用户旅程图
以下是一个简单用户旅程图代码：
1
2
3
4
5
6
7
8
9
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
显示效果如下：
甘特图
以下是一个简单甘特图代码：
1
2
3
4
5
6
7
8
9
10
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
显示效果如下：
Git 图
以下是一个简单 Git 图代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gitGraph:
options
{
"nodeSpacing": 150,
"nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
显示效果如下：
