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