Markdown如何画时序图，一篇就够了

markdown 如何画图

前言：
mermaid 是一个开源项目，可以在Markdown中，使用类似编码的方式，制作类图、流程图、时序图、甘特图、饼图等。使用下来，可以明显提升画图的效率。 本次介绍如何画时序图。

1. 时序图

1.1 时序图介绍

时序图是一种表现交互过程的图示，主要展示各个参与者之间是如何交互的，以及交互的顺序是怎样的。它的主要构成元素有：参与者、消息、激活框、注释、循环(loop)、选择(alt)、可选(opt)、并行(Par)。

时序图基本语法如下：

```mermaid
	%% 注释
	sequenceDiagram
	participant 别名 as 对象显示名(全部直接用显示名时可以忽略该步骤)
	顺序增加图标中消息
	增加标签提示
```

sequenceDiagram 是每幅时序图的固定开头；

participant <参与者名称> 声明参与者，语句次序即为参与者横向排列次序。

1.2 参与者

传统时序图概念中参与者有角色和类对象之分，这里不做区分，用参与者表示一切参与交互的事物，可以是人、类对象、系统等。中间竖直的线段从上至下表示时间的流逝。

1.2.1 画法1(不带昵称)

```mermaid
	sequenceDiagram
	Client->>Gateway : 发送JSON RPC请求
	Gateway-->>Client : 把JSON RPC响应发送给客户端
```

效果如图

1.2.2 画法2(使用参与者别名)

```mermaid
	sequenceDiagram
		participant C as Clicnt
		participant G as Gateway
		
		C ->> G : 发送JSON RPC请求
		G -->> C : 把JSON RPC响应发送给客户端

效果如图

1.3 消息

交互时一方对另一方的的操作(比如接口调用)或传递信息。用单向箭头表示：实线代表主动发出消息；虚线代表响应；末尾带「x」 表示异步消息，无需等待回应。

消息语句格式： <参与者><箭头><参与者>:<描述文本> 。 描述文本可以为空，但是: 不能省略。

**<箭头>**的写法有6种3类，其中实线表示请求，虚线表示响应：

• -> ：无箭头的实线
• -->：无箭头的虚线
• ->> ：有箭头的实线(主动发出消息)
• -->>：有箭头的虚线(响应)
• -x：末尾带「x」 的实线箭头
• --x：末尾带「x」的虚线箭头
• -)：实线末端带有一个空心箭头(异步)
• --)：虚线末端带有一个空心箭头(异步)

画法：

```mermaid
	sequenceDiagram
	participant L as 老板
	participant A as 员工A
	
	L ->> A : "在这里我们是兄弟!"
	L -x A : 年底每人发一年的奖金(画大饼)
	A -->> L : 弱弱的鼓掌
```

效果如下：

1.4 激活框

从消息接收方 的时间上上标记一小段时间，表示对消息进行处理的时间间隔。有两种激活方式：

1. 显示通过语法实现，会在指定对象的消息中增加；
2. 直接在对象前面增加加减号(开始时用加号 +， 结束时用减号 -)。在加号对应的对象上开始，减号对应的对象上结束。他们相当于激活框的开关。

# 直接接货
开始： activate <对象>
结束： deactivate <对象>

# 符号激活
+<对象>
-<对象>

示例代码：

```mermaid
	sequenceDiagram
		participant L as 老板
		participant A as 员工
		
		L ->> + A : ”不仅要996，还要669“
		activate L
		A -->> - L : "鼓掌"
		L ->> +A : "悔创公司"
		A -->> L : ……
		deactivate L 
```

效果如下

1.5 注释

语法格式： Note [位置] [对象]： <注释内容>

注释显示的位置有三个，以被标记的对象中心为参考系，给予横跨多个时，可以用逗号分割：

• right of
• left of
• over

示例代码：

```mermaid
	sequenceDiagram 
		note left of 老板 : 我是个脸盲
		note right of 员工 :  对钱不感兴趣
		note over 老板,员工:  对996感兴趣
```

效果如图

1.6 循环(loop)

当条件满足时，重复发出消息序列(相当于while语句)。语法格式如下：

loop  消息说明
	[消息流]
end

示例代码：

```mermaid
		sequenceDiagram
			网友  ->> + 某宝 : 网购喜欢的商品
			某宝 -->> - 网友 : 下单成功
			
			loop  一天7次
				网友 ->> + 某宝: 查看配送进度
				某宝 -->> - 网友 : 配送中
			end
```

效果如图：

1.7 选择(alt)

在多个条件中做出判断，每个条件对应不同的消息队列(相当于if else 语句)。语法格式如下：

alt 条件说明
	[消息流]
else 
	[消息流]
else 
	[消息流]
end

示例代码：

	```mermaid
	sequenceDiagram
		土豪 ->> + 取款机 : 查询余额
		取款机 -->> - 土豪: 余额
		
		alt 余额 > 5000 
			土豪 ->> 取款机 : 取上限5000块
		else 100 < 余额 < 5000
			土豪 ->> 取款机 : 有多少取多少
		else 余额 < 100 
			土豪 ->> 取款机 : 退卡
		end 
		
		取款机 -->> 土豪 : 退卡成功
	```

示例如下

1.8 可选(opt)

在满足某条件的时候执行消息序列，否则不执行，相当于单个分支的if语句。 语法格式如下:

opt  条件说明
	[消息流]
end

示例代码：

```mermaid
	 	sequenceDiagram
	 		老板 ->> +员工 : 开始实行996
	 		
	 		opt 薪资加倍
	 			员工 -->> -老板 : no way
	 		end 
```

效果如下

1.9 并行(par)

将消息序列分成多个片段，并行执行。语法格式如下：

par 说明
	[消息流]
and 
	[消息流]
and
	……
end

示例代码：

```mermaid
	sequenceDiagram
		老板 ->> 员工 : "开始996"
		
		par 上班时间
			员工 ->> 员工 : 工作
		and 
			员工 ->> 员工 : 刷微博
		and 
			员工 ->> 员工 : 刷朋友圈
		end
		
		员工 -->> 老板 : 下班
```

示例如下

1.10 背景颜色

语法格式：

rect rgb(191, 222, 233)
	[消息流]
end

示例代码：

```mermaid
	sequenceDiagram
		Client ->> +Service : 发送请求
		rect rgb(191,223,255)
		Service ->> Service : 处理请求
		Service -->> Client : 发送响应
		end
```

示例如下

2. 饼图

语法格式说明：

pie	showdata
	title [titleValue]
	[dataKey1] : [dataValue1]
	[dataKey2] : [dataValue2]
	……

代码示例：

```mermaid
	pie showData
    title Key elements in Product X
    "Calcium" : 40.50
    "Potassium" : 45.5
    "Magnesium" : 10
    "Iron" :  5

示例如下

原文地址：https://blog.csdn.net/zhw21w/article/details/125749449