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

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 上看看。

相关推荐
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
考虑考虑3 小时前
@FilterRegistration和@ServletRegistration注解
spring boot·后端·spring
一只叫煤球的猫3 小时前
🔥 同事混用@Transactional和TransactionTemplate被我怼了,三种事务管理到底怎么选?
java·spring boot·后端
你的人类朋友9 天前
(●'◡'●)从Dockerfile快速入门Docker Compose
后端
GetcharZp9 天前
「神器推荐」Rclone:轻松玩转云端存储,FTP 也能飞起来!
后端
华子w9089258599 天前
基于 SpringBoot+JSP 的医疗预约与诊断系统设计与实现
java·spring boot·后端
舒一笑9 天前
工作流会使用到Webhook是什么
后端·程序员
止观止9 天前
Rust智能指针演进:从堆分配到零复制的内存管理艺术
开发语言·后端·rust
学無芷境9 天前
Cargo 与 Rust 项目
开发语言·后端·rust
ai小鬼头9 天前
AIStarter开发者熊哥分享|低成本部署AI项目的实战经验
后端·算法·架构