mermaid，关于时序图的简单用法
前言
mermaid，目前X象笔记、Goland都会用到的绘图工具，想体会一下什么叫做“代码既是图表”，那就来看看本篇教程。
我们先从经常会用到的时序图开始说。
核心方法
mermaid的语法写起来是有种Python的美感，因为其命令都是“你说什么他就干什么”，非常的直观。
核心调用方法：
```mermaid
// 【重要】你的图的类型
// 你图表的内容
// 最后一行是```
我们要画时序图的话，那就是：
```mermaid
sequenceDiagram
// 你图表的内容
// 最后一行是```
时序图画法
基础示例
这是最简单的示例
```mermaid
sequenceDiagram
茶艺师->>到店客人: 你好，欢迎光临
到店客人-->茶艺师: 我就看看
// 最后一行是```
当需要线条是实线时，就写->>；要虚线，就写-->>。
参与者 Participants
图1描述的是当一位客人走入茶室时会发生的对话。
涉及到的人物有二：到店客人与茶艺师。
那么“客人”与“茶艺师”，就是这段对话的参与者 Participants
```mermaid
sequenceDiagram
participant 茶艺师
participant 到店客人
茶艺师->>到店客人: 你好，欢迎光临
到店客人-->>茶艺师: 我就看看
// 最后一行是```
别名 Aliases
那么如果我希望能给这“茶艺师”和“到店客人”起个简称，以便在编写时不用打这么多字？
也行，就这样子写
```mermaid
sequenceDiagram
participant A as 茶艺师
participant B as 到店客人
A->>B: 你好，欢迎光临
B-->>A: 我就看看
B->>A: 给我看看这个
// 最后一行是```
这样子，我们就用了 A 来指代“茶艺师”，用 B 指代“到店顾客”。
【需要注意】这里其实是先创建了两个参与者 A 与 B，然后分别给命名为“茶艺师”与“到店客人”，因此在代码里写的是 A 与 B，然后在显示为“茶艺师”与“到店客人”。之间的关系别搞反了。
角色 Actors
把图3的相关代码中的 participant 替换为 actor,比如这样：
```mermaid
sequenceDiagram
actor A as 茶艺师
actor B as 到店客人
A->>B: 你好，欢迎光临
B-->>A: 我就看看
B->>A: 给我看看这个
// 最后一行是```
这样就会获得：
就会发现“茶艺师”“到店客人”的图标从矩形变成现在的小人。
自动编号 SequenceNumbers
这个指的是，给每一行自己编号，比如这样：
```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor B as 到店客人
A->>B: 你好，欢迎光临
B-->>A: 我就看看
B->>A: 给我看看这个
// 最后一行是```
这样就能看到两人之间的“对话”，“对话”的顺序已经被标上序号了。
激活 Activations
相信经常画 UML 的同学对这不会陌生，但再给第一次碰的朋友介绍一下。
假设“到店客人”在听到“茶艺师”的招呼，胆怯了一阵才回答，那么代码可以这么写：
```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor B as 到店客人
A->>B: 你好，欢迎光临
activate B
B->>A: 给我看看这个
deactivate B
// 最后一行是```
图6中在①与②、“到店客人”上的小矩形，表示着“到店客人”的胆怯。
这就是所谓的激活。
需要注意的是，一个 activate 之后，必须要有 deactivate ，这就是所谓的有始有终。
这有简化写法：
```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor B as 到店客人
A->>+B: 你好，欢迎光临
B->>-A: 给我看看这个
// 最后一行是```
这里用 + 替代了 activate B ，用 - 替代了 deactivate B。
这样子写读起来也直白一些，很快就能看出某动作的起始在哪里。
但是这也容易泄露，还请注意。
注释 Notes
直接上代码和图：
```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
Note left of A: 首席茶艺师
actor B as 到店客人
Note right of B: 自诩眼光毒辣的奇人
A->>+B: 你好，欢迎光临
Note over A,B: 开展一次推销与拒绝的攻防
B->>-A: 给我看看这个
// 最后一行是```
可以在指定对象的左、右、下用一个矩形文本框输入额外的内容。
我就是这样给“茶艺师”“到店客人”以及他们之间的对话插入画外音。
最后
到这里，已经介绍用 mermaid 画时序图要用到的基本语句。
熟练一下这里的语句，基本就能画出不错的时序图。
当然 mermaid 还有着能画出更加复杂的时序图的高阶语句，我们下篇再聊。
