![d6ed7a2065f9669088f406908fe39e62.png](https://i-blog.csdnimg.cn/blog_migrate/8e9408cf947833034cb6c815851b15fb.jpeg)
这篇文章将为大家介绍如何以写代码的方式画时序图(也叫顺序图),同时也会介绍一些时序图基础知识。
相比于使用画图工具拖拽画图,用代码画图有什么好处?
- 首先,这种方式非常轻便,无需安装复杂的画图应用。Typora 等多种 Markdown 编辑器自带有画图扩展(这也是 Markdown 能画图的原因,因为用到了扩展)
- 其次,拖拽画图时需要考虑图形尺寸和对齐问题,而代码画图不需要考虑这些,一切均自动调整
- 另外,想象下你在写文档时,随手一段代码就插入了一幅时序图,这多么酷炫!
一、效果如何
话不多说,先来看看用代码画的时序图的效果。如下图是小程序登陆过程中,小程序、服务器、微信服务器三者交互的时序图:
![8eb8a139c7f7e5a86a4ced89e9663d69.png](https://i-blog.csdnimg.cn/blog_migrate/9a6cb472b99ba717813ae4c15eae5f86.jpeg)
而画这幅图只用了很少并且很简单的代码:
sequenceDiagram
小程序 ->> 小程序 : wx.login()获取code
小程序 ->> + 服务器 : wx.request()发送code
服务器 ->> + 微信服务器 : code+appid+secret
微信服务器 -->> - 服务器 : openid
服务器 ->> 服务器 : 根据openid确定用户并生成token
服务器 -->> - 小程序 : token
看了这个心动了没有?学起来吧!
二、工具
君欲善其事,必先利其器。想要用代码画图,就得有支持这种方式的画图工具。这里介绍两款工具:
(1) 免费 Markdown 编辑器 Typora,非常好用且美观。其自带 mermaid 画图扩展。
在用 Typora 编写 Markdown 文本时,插入这样一个代码块:
```mermaid
……时序图代码……
```
其中时序图的代码便会自动被 mermaid 解析和渲染。
![f9ab6359fc52c9d0dcbb8c71c8976b80.png](https://i-blog.csdnimg.cn/blog_migrate/0e85830e5558e26f2dbcaf0210c95c94.png)
这样的使用方式很简单,并且其它的能支持 mermaid 的编辑器也可以这样来用,比如印X笔记。
(2) 如果你不想用 Markdown,可以选择网页版 mermaid 编辑器,免费且无需注册。链接:https://dwz.cn/hOMIoH4w
三、代码画图
工具准备妥当后,我们开始学习画图代码的语法。同时也会顺带对时序图作一些简单介绍,一方面帮助读者温习时序图的内容,另一方面统一一下术语和概念。
时序图是一种表现交互过程的图示,主要展示各个参与者之间是如何交互的,以及交互的顺序是怎样的。它的主要构成元素有:
(1) 参与者
传统时序图概念中参与者有角色和类对象之分,但这里我们不做此区分,用参与者表示一切参与交互的事物,可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。
![81204d4ee3afe7fa483a459dcc1e07f7.png](https://i-blog.csdnimg.cn/blog_migrate/889c5c43fc4831884e664a5f6d33186f.jpeg)
画法:
sequenceDiagram
participant 客户端
participant 服务器
sequenceDiagram
为每幅时序图的固定开头participant <参与者名称>
声明参与者,语句次序即为参与者横向排列次序
(2) 消息
交互时一方对另一方的操作(比如接口调用)或传递出的信息。用单向箭头来表示——实线代表主动发出消息;虚线代表响应;末尾带「X」代表异步消息,无需等待回应。
![bd57bdc85e81f7c4878b523ee78b19a5.png](https://i-blog.csdnimg.cn/blog_migrate/39a8491672d6bbc2cf5f78ab40705137.jpeg)
画法:
sequenceDiagram
participant 老板A
participant 员工A
老板A ->> 员工A : “在这里我们都是兄弟!”
老板A -x 员工A : 画个饼
员工A -->> 老板A : 鼓掌
消息语句格式为:<参与者> <箭头> <参与者> : <描述文本>
。
其中<箭头>
的写法有:->>
显示为实线箭头(主动发出消息)-->>
显示为虚线箭头(响应)-x
显示为末尾带「X」的实线箭头(异步消息)
注:
participant <参与者名称>
这句可以省略,省略后参与者横向排列的次序,由消息语句中其出现的次序决定。如后续示例所示。
(3) 激活框
从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。
![fc518b75c01edfa77033c7ed5504efb2.png](https://i-blog.csdnimg.cn/blog_migrate/1cbc5808ee736755d72f35be89d2b048.jpeg)
画法如下,注意体会箭头符号后的 +
和 -
的使用方法和效果,它们相当于激活框的开关:
sequenceDiagram
老板B ->> + 员工B : “你们要669!”
员工B -->> - 老板B : 鼓掌
老板B ->> + 员工B : “悔创本司!”
员工B -->> - 老板B : 鼓掌
(4) 注解
![6a1696922a6219d1c08fe354d09f3881.png](https://i-blog.csdnimg.cn/blog_migrate/3aa2d87be3c36ccb15c22cd74658313b.jpeg)
画法:
sequenceDiagram
Note left of 老板A : 对脸不感兴趣
Note right of 老板B : 对钱不感兴趣
Note over 老板A,老板B : 对996感兴趣
(5) 循环(loop)
在条件满足时,重复发出消息序列。相当于编程语言中的 while 语句。
![fa995b05dcb620484e32b4ed3f7bd3f1.png](https://i-blog.csdnimg.cn/blog_migrate/db74d886904f69ed3506695ce59373f7.jpeg)
画法:
sequenceDiagram
网友 ->> + X宝 : 网购钟意的商品
X宝 -->> - 网友 : 下单成功
loop 一天七次
网友 ->> + X宝 : 查看配送进度
X宝 -->> - 网友 : 配送中
end
(6) 选择(alt)
在多个条件中作出判断,每个条件将对应不同的消息序列。相当于 if 及 else if 语句。
![8c9eb1ce820d3e0d2ae66ac59a17f249.png](https://i-blog.csdnimg.cn/blog_migrate/9c44d3f36caa305d6130f186aefdb4d3.jpeg)
画法:
sequenceDiagram
土豪 ->> 取款机 : 查询余额
取款机 -->> 土豪 : 余额
alt 余额 > 5000
土豪 ->> 取款机 : 取上限值 5000 块
else 5000 < 余额 < 100
土豪 ->> 取款机 : 有多少取多少
else 余额 < 100
土豪 ->> 取款机 : 退卡
end
取款机 -->> 土豪 : 退卡
(7) 可选(opt)
在某条件满足时执行消息序列,否则不执行。相当于单个分支的 if 语句。
![254cca2f46d65e8f521593c21d405609.png](https://i-blog.csdnimg.cn/blog_migrate/4b532e6bf20036b95e89635cf14a5de8.jpeg)
画法:
sequenceDiagram
老板C ->> 员工C : 开始实行996
opt 永不可能
员工C -->> 老板C : 拒绝
end
(8) 并行(Par)
将消息序列分成多个片段,这些片段并行执行。
![ade933e2136f9a9ed6169cbfaf53b58f.png](https://i-blog.csdnimg.cn/blog_migrate/97c478920fdc238a804a5f7ead0dcd9b.jpeg)
画法:
sequenceDiagram
老板C ->> 员工C : 开始实行996
par 并行
员工C ->> 员工C : 刷微博
and
员工C ->> 员工C : 工作
and
员工C ->> 员工C : 刷朋友圈
end
员工C -->> 老板C : 9点下班
用代码画时序图的方法就是这些,内容很简单,却能满足大多数时候的需求。不妨找几个实际例子练练手,加深下印象。
![d11e854667834f532858d48e9c9ca3e2.png](https://i-blog.csdnimg.cn/blog_migrate/772c8d27e40648c0eba399a3ea3f635a.jpeg)
作者相关阅读:
《轻松上手写作利器 Markdown:从此文章排版无烦恼》
《会用 Markdown 还不够,还得知道排版规范》
《Markdown 进阶技能:用代码画流程图(编程零基础也适用)》