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

图片

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

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

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

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

图片

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

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

看了这个心动了没有？学起来吧！

工具

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

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

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

    ……时序图代码……

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

    已关注

    关注

    重播 分享 赞

    关闭

    观看更多

    更多

    正在加载

    正在加载

    退出全屏

    切换到竖屏全屏__退出全屏

    轻IT已关注

    分享点赞在看

    已同步到看一看写下你的评论

    [](javascript:;)

    分享视频

    ，时长00:11

    0/0

    00:00/00:11

    切换到横屏模式

    继续播放

    进度条，百分之0

    播放

    00:00

    /

    00:11

    00:11

    全屏

    倍速播放中

    0.5倍 0.75倍 1.0倍 1.5倍 2.0倍

    超清 流畅

    您的浏览器不支持 video 标签

    继续观看

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

    观看更多

    转载

    ,

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

    轻IT已关注

    分享点赞在看

    已同步到看一看写下你的评论

    视频详情

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

  2. 如果你不想用 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点下班

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

    • *

相关阅读：

原网址: 访问
创建于: 2023-03-09 09:37:36
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论