Markdown用代码画时序图

文章目录

1. 1. Markdown用代码画时序图
   1. 1.1. 1.参与者
   2. 1.2. 2.消息
   3. 1.3. 3.激活框
   4. 1.4. 4.注解
   5. 1.5. 5.循环（loop）
   6. 1.6. 6.选择（alt）
   7. 1.7. 7.可选（opt）
   8. 1.8. 8. 并行（Par）

Markdown用代码画时序图

免费 Markdown 编辑器 Typora，非常好用且美观。其自带 mermaid 画图扩展。

在用 Typora 编写 Markdown 文本时，插入这样一个代码块：

```mermaid
……时序图代码……
```

1.参与者

画法：

sequenceDiagram
	participant 客户端
	participant 服务器

sequenceDiagram 为每幅时序图的固定开头
participant <参与者名称> 声明（添加）参与者。语句次序即为参与者横向排列的次序

2.消息

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

画法：

sequenceDiagram
	participant 老板L
	participant 员工A

	老板L ->> 员工A : “在这里我们是兄弟！”
	老板L -x 员工A : 画个饼
	员工A -->> 老板L : 怯怯地鼓掌

消息语句格式为：<参与者> <箭头> <参与者> : <描述文本>。
其中 <箭头> 的写法有：

->>：显示为实线箭头（主动发出消息）
–>>：显示为虚线箭头（响应）
-x：显示为末尾带「X」的实线箭头（异步消息）
->:无箭头的实线
–>:无箭头的虚线
–x:末端为叉的虚线（表示异步）

注：participant <参与者名称> 这句其实可以省略，省略后参与者横向排列的次序，由消息语句中参与者出现的次序决定。

3.激活框

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

画法：

sequenceDiagram
	老板M ->> + 员工B : “不仅996，还要669！”
	员工B -->> - 老板M : 怯怯地鼓掌
	老板M ->> + 员工B : “悔创本司！”
	员工B -->> - 老板M : 怯怯地鼓掌

注意体会箭头符号后的 + 和 - 的使用方法和效果，它们相当于激活框的开关：

4.注解

画法：

sequenceDiagram
	Note left of 老板L : 对脸不感兴趣
	Note right of 老板M : 对钱不感兴趣
	Note over 老板L,老板M : 对996感兴趣

5.循环（loop）

在条件满足时，重复发出消息序列。（相当于编程语言中的 while 语句。）

画法：

sequenceDiagram
	网友 ->> + X宝 : 网购钟意的商品
	X宝 -->> - 网友 : 下单成功
	
	loop 一天七次
		网友 ->> + X宝 : 查看配送进度
		X宝 -->> - 网友 : 配送中
	end

6.选择（alt）

在多个条件中作出判断，每个条件将对应不同的消息序列。（相当于 if 及 else if 语句。）

画法：

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

7.可选（opt）

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

画法：

sequenceDiagram
	老板们 ->> 员工们 : 开始实行996
	
	opt 永不可能
		员工们 -->> 老板们 : 拒绝
	end

8. 并行（Par）

将消息序列分成多个片段，这些片段并行执行。

画法：

sequenceDiagram
老板C ->> 员工C : 开始实行996

par 并行
	员工C ->> 员工C : 刷微博
and
	员工C ->> 员工C : 工作
and
	员工C ->> 员工C : 刷朋友圈
end

员工C -->> 老板C : 9点下班