使用markdown画流程图、时序图等

概述

能表示的图类型还有很多，比如：

• sequenceDiagram时序图

• classDiagram类图

• stateDiagram:状态图

• erDiagram：ER图

• gantt： 甘特图

• pie：饼图

• requirementDiagram: 需求图

流程图

流程图代码以「graph 《布局方向》」开头

布局

TB，从上到下
TD，从上到下
BT，从下到上
RL，从右到左
LR，从左到右
1
2
3
4
5

例如

```mermaid
流程图/时序图代码
```

符号

起止框

处理框

可以使用 HTML 中的实体字符。

判断框

连接

连接样式

实线

带文字实线箭头

无文字实线箭头

无文字实线无箭头

带文字实线无箭头

虚线

无文字虚线箭头

注意有中间点

有文字虚线箭头

注意有中间点

其他

其他类似实线

综合示例

	` ``mermaid
	graph TB
	    A(接口请求) --> B[参数校验]
	    B[参数校验] --> C{校验通过}
	    C{校验通过} -- 通过 --> d[处理业务逻辑]
	    C{校验不通过} -- 不通过 --> e[结束]
	    d[处理业务逻辑] --> e(结束)
	 ```
1
2
3
4
5
6
7
8

时序图

时序图代码以「sequenceDiagram」开头

	```mermaid
	sequenceDiagram
	    participant A as lilei
	    participant B as hanmeimei
	    A ->> B: How are you.
	    Note left of A: 对象A的描述(提示)
	    B -->> A: Fine, Thank you.
	    Note right of B: 对象B的描述
	    A -x B: 我走了
	```
1
2
3
4
5
6
7
8
9
10

参与者

	```mermaid
	sequenceDiagram
	    participant 别名 as 参与者名称
	```
1
2
3
4

	```mermaid
	sequenceDiagram
	    participant 参与者名称
	```
1
2
3
4

注解

左边注解

 Note left of 参与者: 参与者的描述(提示)
1

右边注解

 Note right of 参与者: 参与者的描述(提示)
1

在xx之上

Note over 参与者1,参与者2 : 哈哈哈
1

	```mermaid
	sequenceDiagram
	    participant 别名1 as 参与者名称1
	    participant 别名2 as 参与者名称2
	    Note left of 别名1: 参与者名称1的描述(提示)
	    Note right of 别名2: 参与者名称2的描述
	    Note over 别名1,别名1: over1的描述
	    Note over 别名2,别名2: over2的描述
	    Note over 别名2,别名1: over21的描述
	    Note over 别名1,别名2: over12的描述
	```
1
2
3
4
5
6
7
8
9
10
11

消息

交互时一方对另一方的操作（比如接口调用）或传递出的信息。

格式

<参与者> <箭头> <参与者> : <描述文本>
1

箭头

->> 显示为实线箭头（主动发出消息）
-->> 显示为虚线箭头（响应）
-x 显示为末尾带「X」的实线箭头（异步消息）
1
2
3

举例

	```mermaid
	sequenceDiagram
	    participant 别名1 as 参与者名称1
	    participant 别名2 as 参与者名称2
	    别名1 ->> 别名2: who are you
	    Note left of 别名1: 参与者名称1的描述(提示)
	    别名2 -->> 别名1: i am  参与者名称2
	    Note right of 别名2: 参与者名称2的描述
	    别名1 -x 别名2: bye!
	```
1
2
3
4
5
6
7
8
9
10

激活框

从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。
格式

<参与者> <箭头> [+/-]: <描述文本>。
1

	```mermaid
	sequenceDiagram
	    A1 ->> + A2: 111
	    A2 -->> - A1: 222
	```
1
2
3
4
5

循环

相当于编程代码中的 while 循环 循环格式为：

loop 循环的描述
    消息
end
1
2
3

	```mermaid
	sequenceDiagram
	     A1 ->> + A2:  111
		 A2 -->> - A1: 222
	    loop 一天七次
	            A1 ->> + A2:  消息1
	    		A2 -->> - A1: 响应1
	    end
	```
1
2
3
4
5
6
7
8
9

选择(alt)

类似于 switch语句

	```mermaid
	sequenceDiagram
	    学生 ->> 学校 : 查询成绩
	    学校 -->> 学生 : 成绩
	
	    alt 成绩 > 90
	        学生 ->> 学校 : 优秀
	    else 60 <= 成绩 < 90
	        学生 ->> 学校 : 及格
	    else 成绩 < 60
	        学生 ->> 学校 : 不及格
	    end
	```
1
2
3
4
5
6
7
8
9
10
11
12
13

可选

类似于单个分支的 if 语句

	```mermaid
	sequenceDiagram
	    学生 ->> 学校 : 我成绩及格再出成绩
	
	    opt 成绩 > 60
	        学校  -->> 学生 : 你及格了
	    end
	```
1
2
3
4
5
6
7
8

并行

	```mermaid
	sequenceDiagram
	    A ->> B: 工作做什么
	
	    par 开始摸鱼
	        B ->> B : 刷微博
	    and
	        B ->> B : 听音乐
	    end
	
	    B -->> A : 9点下班回家
	```
1
2
3
4
5
6
7
8
9
10
11
12