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

深藏阁楼爱情的钟 2024-03-31 12:56 69阅读 0赞

## 概述 ##

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

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

## 流程图 ##

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

### 布局 ###

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

例如

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

### 符号 ###

#### 起止框 ####

起止框

![在这里插入图片描述][58c31fee13274cc7a7675aca58a37a99.png]

#### 处理框 ####

处理框

![在这里插入图片描述][f8cbeeb43ffe48edbf3e2e8c12fb4719.png]

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

双引号："

![在这里插入图片描述][6b4875aabaa941e2b3bcbc01a85e5ab6.png]

#### 判断框 ####

判断框

![在这里插入图片描述][73635fec3abc4f3cbcaefc7e244b6897.png]

#### 连接 ####

连接

![在这里插入图片描述][18fd9ea3fef74e65babcc0fbf8b7503a.png]

### 连接样式 ###

#### 实线 ####

##### 带文字实线箭头 #####

文字描述

![在这里插入图片描述][33bf1016061b4fcda2e3e2592e1e3d12.png]

##### 无文字实线箭头 #####

![在这里插入图片描述][092fc885bbf749fe91a2223632ed6675.png]

##### 无文字实线无箭头 #####

![在这里插入图片描述][0bf0ef337df74adaa28e4fa59e5e6334.png]

##### 带文字实线无箭头 #####

文字描述

![在这里插入图片描述][9043b9a446df4dce8dba5bbec68c4168.png]

#### 虚线 ####

##### 无文字虚线箭头 #####

注意有中间`点`  
![在这里插入图片描述][2b376ca1eba94c688f5fe08a29d3d095.png]

##### 有文字虚线箭头 #####

文字

注意有中间`点`  
![在这里插入图片描述][dbef358cbfa74ee29f7ce48cc69d1900.png]

##### 其他 #####

其他类似实线

### 综合示例 ###

通过

不通过

接口请求

参数校验

校验不通过

处理业务逻辑

结束

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

## 时序图 ##

`时序图代码以「sequenceDiagram」开头`

lileihanmeimeiHow are you.对象A的描述(提示)Fine, Thank you.对象B的描述我走了lileihanmeimei

```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参与者名称2who 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!
    	```

### 激活框 ###

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

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

A1A2111222A1A2

```mermaid
    	sequenceDiagram
    	    A1 ->> + A2: 111
    	    A2 -->> - A1: 222
    	```

### 循环 ###

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

loop 循环的描述
        消息
    end

A1A2111222消息1响应1loop\[一天七次\]A1A2

```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
    	```

### 并行 ###

AB工作做什么刷微博听音乐par\[开始摸鱼\]9点下班回家AB

```mermaid
    	sequenceDiagram
    	    A ->> B: 工作做什么
    	
    	    par 开始摸鱼
    	        B ->> B : 刷微博
    	    and
    	        B ->> B : 听音乐
    	    end
    	
    	    B -->> A : 9点下班回家
    	```

[58c31fee13274cc7a7675aca58a37a99.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/aa12490f322144c7a22aaf8b6f8910b3.png
[f8cbeeb43ffe48edbf3e2e8c12fb4719.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/57b6726acece4d0e88fdb1a1dff834d1.png
[6b4875aabaa941e2b3bcbc01a85e5ab6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/adf180139f064d27800536835e13435b.png
[73635fec3abc4f3cbcaefc7e244b6897.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/187ae009e6e24ba59f33f98a43075eb6.png
[18fd9ea3fef74e65babcc0fbf8b7503a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/98406b0004434201a45c7e185849a8b8.png
[33bf1016061b4fcda2e3e2592e1e3d12.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/b285f8f15d894568a4843d892e0950f0.png
[092fc885bbf749fe91a2223632ed6675.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d9269a91e98c42198fc2f9b39dd072d2.png
[0bf0ef337df74adaa28e4fa59e5e6334.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1187a230119c4662a1dbdb21de443847.png
[9043b9a446df4dce8dba5bbec68c4168.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0497206e1f0c4af8bb395bd61b214e17.png
[2b376ca1eba94c688f5fe08a29d3d095.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4e519d0f4dfc4e8fa34882ed6f3e7a4a.png
[dbef358cbfa74ee29f7ce48cc69d1900.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8f1634a68c1249e68d6bcd5ab394e8e8.png