概述

能表示的图类型还有很多,比如:

  • sequenceDiagram时序图
  • classDiagram类图
  • stateDiagram:状态图
  • erDiagram:ER图
  • gantt: 甘特图
  • pie:饼图
  • requirementDiagram: 需求图

流程图

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

布局

TB,从上到下
TD,从上到下
BT,从下到上
RL,从右到左
LR,从左到右

例如

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

符号

起止框


起止框


Time series net时序算法库 时序图代码_md

处理框


处理框


Time series net时序算法库 时序图代码_时序图_02

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


双引号:"


Time series net时序算法库 时序图代码_md_03

判断框


判断框


Time series net时序算法库 时序图代码_md_04

连接


连接


Time series net时序算法库 时序图代码_实线_05

连接样式

实线

带文字实线箭头


文字描述

A

B


Time series net时序算法库 时序图代码_实线_06

无文字实线箭头



A

B


Time series net时序算法库 时序图代码_md_07

无文字实线无箭头



A

B


Time series net时序算法库 时序图代码_md_08

带文字实线无箭头


文字描述

A

B


Time series net时序算法库 时序图代码_实线_09

虚线

无文字虚线箭头



A

B


注意有中间

Time series net时序算法库 时序图代码_实线_10

有文字虚线箭头


文字

A

B


注意有中间

Time series net时序算法库 时序图代码_实线_11

其他

其他类似实线

综合示例




通过

不通过


接口请求

参数校验

校验不通过

处理业务逻辑

结束


` ``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点下班回家
	```