概述
能表示的图类型还有很多,比如:
- sequenceDiagram时序图
- classDiagram类图
- stateDiagram:状态图
- erDiagram:ER图
- gantt: 甘特图
- pie:饼图
- requirementDiagram: 需求图
流程图
流程图代码以「graph 《布局方向》」开头
布局
TB,从上到下
TD,从上到下
BT,从下到上
RL,从右到左
LR,从左到右
例如
```mermaid
流程图/时序图代码
```
符号
起止框
起止框
处理框
处理框
可以使用 HTML 中的实体字符。
双引号:"
判断框
判断框
连接
连接
连接样式
实线
带文字实线箭头
文字描述
A
B
无文字实线箭头
A
B
无文字实线无箭头
A
B
带文字实线无箭头
文字描述
A
B
虚线
无文字虚线箭头
A
B
注意有中间点
有文字虚线箭头
文字
A
B
注意有中间点
其他
其他类似实线
综合示例
通过
不通过
接口请求
参数校验
校验不通过
处理业务逻辑
结束
` ``mermaid
graph TB
A(接口请求) --> B[参数校验]
B[参数校验] --> C{校验通过}
C{校验通过} -- 通过 --> d[处理业务逻辑]
C{校验不通过} -- 不通过 --> e[结束]
d[处理业务逻辑] --> e(结束)
```
时序图
时序图代码以「sequenceDiagram」开头
lilei hanmeimei How are you. 对象A的描述(提示) Fine, Thank you. 对象B的描述 我走了 lilei hanmeimei
```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: 我走了
```
参与者
参与者名称 参与者名称
```mermaid
sequenceDiagram
participant 别名 as 参与者名称
```
参与者名称 参与者名称
```mermaid
sequenceDiagram
participant 参与者名称
```
注解
左边注解
Note left of 参与者: 参与者的描述(提示)
右边注解
Note right of 参与者: 参与者的描述(提示)
在xx之上
Note over 参与者1,参与者2 : 哈哈哈
参与者名称1 参与者名称2 参与者名称1的描述(提示) 参与者名称2的描述 over1的描述 over2的描述 over21的描述 over12的描述 参与者名称1 参与者名称2
```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的描述
```
消息
交互时一方对另一方的操作(比如接口调用)或传递出的信息。
格式
<参与者> <箭头> <参与者> : <描述文本>
箭头
->> 显示为实线箭头(主动发出消息)
-->> 显示为虚线箭头(响应)
-x 显示为末尾带「X」的实线箭头(异步消息)
举例
参与者名称1 参与者名称2 who are you 参与者名称1的描述(提示) i am 参与者名称2 参与者名称2的描述 bye! 参与者名称1 参与者名称2
```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!
```
激活框
从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。
格式
<参与者> <箭头> [+/-]: <描述文本>。
A1 A2 111 222 A1 A2
```mermaid
sequenceDiagram
A1 ->> + A2: 111
A2 -->> - A1: 222
```
循环
相当于编程代码中的 while 循环 循环格式为:
loop 循环的描述
消息
end
A1 A2 111 222 消息1 响应1 loop [一天七次] A1 A2
```mermaid
sequenceDiagram
A1 ->> + A2: 111
A2 -->> - A1: 222
loop 一天七次
A1 ->> + A2: 消息1
A2 -->> - A1: 响应1
end
```
选择(alt)
类似于 switch语句
学生 学校 查询成绩 成绩 优秀 及格 不及格 alt [成绩 > 90] [60 <= 成绩 < 90] [成绩 < 60] 学生 学校
```mermaid
sequenceDiagram
学生 ->> 学校 : 查询成绩
学校 -->> 学生 : 成绩
alt 成绩 > 90
学生 ->> 学校 : 优秀
else 60 <= 成绩 < 90
学生 ->> 学校 : 及格
else 成绩 < 60
学生 ->> 学校 : 不及格
end
```
可选
类似于单个分支的 if 语句
学生 学校 我成绩及格再出成绩 你及格了 opt [成绩 > 60] 学生 学校
```mermaid
sequenceDiagram
学生 ->> 学校 : 我成绩及格再出成绩
opt 成绩 > 60
学校 -->> 学生 : 你及格了
end
```
并行
A B 工作做什么 刷微博 听音乐 par [开始摸鱼] 9点下班回家 A B
```mermaid
sequenceDiagram
A ->> B: 工作做什么
par 开始摸鱼
B ->> B : 刷微博
and
B ->> B : 听音乐
end
B -->> A : 9点下班回家
```