为了账号安全,请及时绑定邮箱和手机立即绑定

Markdown 高级玩法:用代码画时序图

2019.09.21 23:56 3935浏览

这篇文章将为大家介绍如何以写代码的方式画时序图(也叫顺序图),同时也会介绍一些时序图基础知识。

相比于使用画图工具拖拽画图,用代码画图有什么好处?

  • 首先,这种方式非常轻便,无需安装复杂的画图应用。Typora 等多种 Markdown 编辑器自带有画图扩展(这也是 Markdown 能画图的原因,因为用到了扩展)
  • 其次,拖拽画图时需要考虑图形尺寸和对齐问题,而代码画图不需要考虑这些,一切均自动调整
  • 另外,想象下你在写文档时,随手一段代码就插入了一幅时序图,这多么酷炫!

话不多说,先来看看用代码画的时序图的效果。如下图是小程序登陆过程中,小程序、服务器、微信服务器三者交互的时序图:

而画这幅图只用了很少并且很简单的代码:

sequenceDiagram
	小程序 ->> 小程序 : wx.login()获取code
	小程序 ->> + 服务器 : wx.request()发送code
	服务器 ->> + 微信服务器 : code+appid+secret
	微信服务器 -->> - 服务器 : openid
	服务器 ->> 服务器 : 根据openid确定用户并生成token
	服务器 -->> - 小程序 : token

看了这个心动了没有?学起来吧!

工具

君欲善其事,必先利其器。想要用代码画图,就得有支持这种方式的画图工具。这里介绍两款工具:

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

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

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

其中时序图的代码便会自动被 mermaid 解析和渲染。演示视频

这样的使用方式很简单,其它的能支持 mermaid 的编辑器也可以这样使用,比如印X笔记。

  1. 如果你不想用 Markdown,可以选择网页版 mermaid 编辑器,免费且无需注册。链接:https://dwz.cn/hOMIoH4w

代码画图

工具准备妥当后,我们开始学习画图代码的语法。同时也会顺带对时序图作一些简单介绍,一方面帮助读者温习时序图的内容,另一方面统一一下术语和概念。

时序图是一种表现交互过程的图示,主要展示各个参与者之间是如何交互的,以及交互的顺序是怎样的。它的主要构成元素有:

(1) 参与者

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

画法:

sequenceDiagram
	participant 客户端
	participant 服务器

sequenceDiagram 为每幅时序图的固定开头
participant <参与者名称> 声明(添加)参与者。语句次序即为参与者横向排列的次序,如后续示例所示。

(2) 消息

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

画法:

sequenceDiagram
	participant 老板L
	participant 员工A

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

消息语句格式为:<参与者> <箭头> <参与者> : <描述文本>

其中 <箭头> 的写法有:

  • ->>:显示为实线箭头(主动发出消息)
  • -->>:显示为虚线箭头(响应)
  • -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点下班

用代码画时序图的方法就是这些,内容很简单,却能满足大多数时候的需求。不妨找几个实际例子练练手,加深下印象。

相关阅读:

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

4人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消