简介
本文介绍如何用 markdown 绘制时序图。那么，何为时序图呢？看下面的示例：
sequenceDiagram 客户端->>服务器: 发送账号密码 服务器 ->> 服务器: 鉴权并处理数据 服务器 -->> 客户端: 响应内容
怎么看懂时序图呢？
- 横向：是参与交互的各个对象/模块
- 纵向：时间顺序
那么，上面的简单示例就可以看懂：总共有 2 各模块，客户端时间上是先给服务端发送了账号密码，然后服务端接着自己处理了一下，最后讲内容返回给了客户端。
俗话说，一图胜千言。下面，我们就学习一下如何绘制出上面的图，利用好这个工具。
Markdown 中绘制时序图，其实主要是利用的 Mermaid js 库提供的功能，这个库其实不仅可以绘制时序图，还可以绘制常见的流程图、甘特图、饼图等。本文今天仅学习一下如何利用它来绘制出时序图。
基本语法
1 | <pre class="mermaid">sequenceDiagram |
如果你本地有 markdown 编辑器，那么，输入上面这段代码则可以预览出本文一开始的示例了。要想绘制时序图，基本是下面的这样框架：
1 | <pre class="mermaid">sequenceDiagram |
使用别名
上面的那个示例里，反复出现了客户端、服务器，可以使用别名来简化复杂交互场景下模块名的拼写，还不容易搞错：
1 | <pre class="mermaid">sequenceDiagram |
sequenceDiagram participant c as 客户端 participant s as 服务器 c ->> s: 发送账号密码 s ->> s: 鉴权并处理数据 s -->> c: 响应内容
这里其实还有个语法，就是 participant 关键字，它如果显示的来声明参与者模块对象，那么，时序图就会按照对象的声明先后顺序来调整模块在横向首次出现的顺序。例如，上面示例我如果调换一下顺序，将会看到差异：
1 | <pre class="mermaid">sequenceDiagram |
sequenceDiagram participant s as 服务器 participant c as 客户端 c ->> s: 发送账号密码 s -> s: 鉴权并处理数据 s -->> c: 响应内容
注意：参与者默认为 participant，所以一般无需显示声明。
线和箭头
| Type | Description |
|---|---|
| -> | 实线 |
| –> | 虚线 |
| ->> | 带箭头实线 |
| –>> | 带箭头虚线 |
| -x | 断头实线 |
| –x | 断头虚线 |
| -) | 表示异步的箭头实线 (async) |
| –) | 表示异步的箭头虚线 (async) |
总结：
- 一个
-表示实线，两个-表示虚线 - 两个
>>择表示线会带箭头，一个>则简单表示指向
经过这里的解释，可以看懂为何示例中的线有的是实线而有的是虚线了吧。
角色 actor
如果你想在时序图里加上用户的那种角色，而不是简单的矩形框，可以使用如下语法：
1 | <pre class="mermaid">sequenceDiagram |
sequenceDiagram actor u as 用户 participant c as 客户端 participant s as 服务器 u ->> c: 使用客户端 c ->> s: 发送账号密码 s ->> s: 鉴权并处理数据 s -->> c: 响应内容 c -->> u: 拿到内容
活动状态
有时候想标识模块处于活动状态，可以通过在箭头后面加上 +/- 号：
1 | <pre class="mermaid">sequenceDiagram |
sequenceDiagram actor u as 用户 participant c as 客户端 participant s as 服务器 u ->> c: 使用客户端 c ->>+ s: 发送账号密码 s ->> s: 鉴权并处理数据 s -->>- c: 响应内容 c -->> u: 拿到内容
可以发现服务器鉴权的活动，显示成了一个长方块。
注释
语法规则：
1 | Note [ right of | left of | over ] [Paticipant]: Text in note content |
继续丰富示例，加上必要的注释：
1 | <pre class="mermaid">sequenceDiagram |
sequenceDiagram actor u as 用户 participant c as 客户端 participant s as 服务器 u ->> c: 使用客户端 note right of c: 要注意加密 c ->>+ s: 发送账号密码 s ->> s: 鉴权并处理数据 s -->>- c: 响应内容 c -->> u: 拿到内容
自动编号
通过 autonumber 关键字，开启自动编号，看看效果吧。
1 | <pre class="mermaid">sequenceDiagram |
sequenceDiagram autonumber actor u as 用户 participant c as 客户端 participant s as 服务器 u ->> c: 使用客户端 note right of c: 要注意加密 c ->>+ s: 发送账号密码 s ->> s: 鉴权并处理数据 s -->>- c: 响应内容 c -->> u: 拿到内容
总结
好了，暂时就学习到这里了，类似循环、并行、路线选择、背景色等语法暂时就不去深入了解了。由简入深，想继续钻研的，可以阅读本文的参考链接。
参考
- cnblogs - markdown mermaid序列图:https://www.cnblogs.com/sdsxblpjava/p/15798281.html
