mermaid，关于时序图的高阶语法

前言

在上篇已经讲过了时序图的基础语法，接着继续使用在茶馆里茶艺师与到店客人的场景，再介绍几个高级的语法。

高阶语法

真注释 Comments

当茶艺师看到到店的客人，向他打招呼时，心里想着"啊，这客人来的也真早，是喝完早茶出来逛的吧？"

当然这多少有点失礼的想法不能说出口。

那么在 mermaid 的时序图里，这心里话可用 %% 注释起来。

例如：

go 复制代码

```mermaid
sequenceDiagram
participant A as 茶艺师
participant B as 到店客人
A->>B: 你好，欢迎光临
%%啊，这客人来的也真早，是喝完早茶出来逛的吧？
B-->>A: 我就看看
B->>A: 给我看看这个
// 最后一行是```

当然了，它的原本用法，其实就是各种编程语言里的注释：不会被编译，不会对程序本身产生影响，但是能帮助代码阅读甚至是优化代码的"附加说明"

循环 Loop

假如说，茶馆规定，每次茶艺师看到客人进店，都要热情地招呼。

那么在 mermaid 的时序图要怎么写呢？

这时就是要用 loop...end。

go 复制代码

```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor B as 到店客人
loop 每次客人进店
A->>B: 你好，欢迎光临
end
// 最后一行是```

选择分支 Alt

茶艺师当然有自己的熟客，也有不对付的客人。

招待起来都不会得罪人，但多少还是会有点差别的。

直接上代码：

go 复制代码

```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor B as 到店客人
alt 是熟客
A->>B: 你好，欢迎光临，见到您真高兴
else 是一般客人
A->>B: 你好，欢迎光临
end
// 最后一行是```

其实这也是编程语言里最最常见的 if...else...，如果...否则...。

并行 Parallel

假设茶馆里有同事请假了，那么该茶艺师就得一人扛起别人的活。

很可能在招待客人A的同时，要给客人B结账。

像这种同时发生的并行动作， mermaid 是这样表示的：

go 复制代码

```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor BA as 到店客人A
actor BB as 到店客人B
par 茶艺师 to 到店客人A
    A->>BA: 您尝尝今年的新茶
and 茶艺师 to 到店客人B
    A->>BB: 谢谢茶位费XX元
end
BB->>A: 茶不错，我下次再来
BA->>A: 我能再试试更加生猛的茶吗？
// 最后一行是```

背景高亮 Background Highlighting

我想把图4中，茶艺师与客人B交流的部分标注出来，毕竟这是有收钱的。

那么代码可以这么写：

go 复制代码

```mermaid
sequenceDiagram
autonumber
actor A as 茶艺师
actor BA as 到店客人A
actor BB as 到店客人B
A->>BA: 您尝尝今年的新茶
rect rgb(200, 150, 255)
A->>BB: 谢谢茶位费XX元
BB->>A: 茶不错，我下次再来
end
BA->>A: 我能再试试更加生猛的茶吗？
// 最后一行是```

留意一下，你会发现这里并没有上面的并行。

那是因为并行会与背景高亮冲突，不能正常显示。我猜其中的原因应该两者都使用了相同的结束语句 end。导致会其功能的程序不能正确显示。

结语

好了，到这里，mermaid 的时序图相关语法已经介绍得差不多了。

相信当能把这些语法用得熟练，就会体会到用代码画图的是件有多cool的事。如果想深入学习，可与去 GitHub 上看看。