Markdown 时序图绘制详解

news2024/12/23 20:40:43

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、CSDN
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

文章目录

一、前言
二、基本语法
- 2.1 参与者 Participants
- 2.1 角色 Actors
- 2.1 别名 Aliases
三、箭头介绍
四、消息（Messages）
五、激活期（Activations）
六、注解（Notes）
七、循环（Loops）
八、选择（Alt）
九、可选（opt）
十、并行（Par）
十一、背景高亮Background Highlighting
十二、注释
十三、字符转义
十四、使用场景及应用实例
十伍、总结

一、前言

Markdown 的原生语法不支持绘制图形，但通过扩展模块，我们可以将一些格式化的文字渲染成我们需要的图形。常用的图形有 “流程图”、“时序图”、“类图”、“状态图”、“甘特图”、“饼图” 等。

本节将重点介绍如何通过 Mermaid 绘制「时序图」。

时序图 (Sequence Diagram) ，用来体现对象之间的时间顺序关系，可以表达出对象的交互过程，也就是 “从哪到哪” 的图形化描述。

二、基本语法

时序图Sequence Diagram是一种交互图，显示了流程如何彼此操作以及以什么顺序进行操作。

2.1 参与者 Participants

可以像上面第一个示例中一样隐式定义参与者。参与者或角色的渲染由定义中出现的顺序决定。有时，您可能希望以与参与者在第一条消息中显示的顺序不同的顺序显示参与者。可以通过执行以下操作来指定角色的出现顺序：

语法示例

```mermaid 
sequenceDiagram
    participant 小北
    participant 小宝
    小北->>小宝: 好啊，小宝！
    小宝->>小北: 你也好！
```

效果如下：

2.1 角色 Actors

如果你要使用角色符号而不是带有文本的矩形框表示参与者，则可以使用actor语句，如下所示：

语法示例

```mermaid 
sequenceDiagram
    actor 小北
    actor 小宝
    小北->>小宝: 你好，宝
    小宝->>小北: 你好，小北
```

效果如下：

2.1 别名 Aliases

角色可以以别名的形式定义一个方便输入的id：

语法示例

```mermaid 
sequenceDiagram
    participant M as 小北
    participant L as 老铁
    M->>L: 好啊，老铁！
    L->>M: 你也好！
```

效果如下：

三、箭头介绍

目前支持的箭头有6种：

类型	描述
->	无箭头实线
–>	无箭头虚线
->>	带箭头实线
–>>	带箭头虚线
-x	带×的实线
–x	带×的虚线
-)	带开放箭头的实线
–)	带开放箭头的虚线

四、消息（Messages）

交互时一方对另一方的操作（比如接口调用）或传递出的信息。用单向箭头来表示——实线代表主动发出消息；虚线代表响应；末尾带「X」代表异步消息，无需等待回应。

[Actor][Arrow][Actor]:Message text

语法示例

```mermaid 
sequenceDiagram
	participant 老板L
	participant 员工A

	老板L ->> 员工A : “在这里我们是兄弟！”
	老板L -x 员工A : 画个饼
	员工A -->> 老板L : 怯怯地鼓掌
```

效果如下：

消息语句格式为：<参与者> <箭头> <参与者> : <描述文本>。

五、激活期（Activations）

可以激活和停用角色。激活/停用可以显式声明：从消息接收方的时间线上标记一小段时间，表示对消息进行处理的时间间隔。

语法示例

```mermaid 
sequenceDiagram
	老板M ->> + 员工B : “不仅996，还要669！”
	员工B -->> - 老板M : 怯怯地鼓掌
	老板M ->> + 员工B : “悔创本司！”
	员工B -->> - 老板M : 怯怯地鼓掌
```

效果如下：

注意体会箭头符号后的 + 和 - 的使用方法和效果，它们相当于激活框的开关。

六、注解（Notes）

可以在序列图中添加注解。通过语法 Note [ right of | left of | over ] [Actor]：注解内容

语法示例

```mermaid 
sequenceDiagram
    participant 老马
    Note left of 老马: 对钱不感兴趣
    participant 小马
    Note right of 小马: 对脸不感兴趣
    Note over 老马,小马 : 对996感兴趣
```

效果如下：

七、循环（Loops）

在条件满足时，重复发出消息序列。（相当于编程语言中的 while 语句。）

语法示例

```mermaid 
sequenceDiagram
	网友 ->> + X宝 : 网购钟意的商品
	X宝 -->> - 网友 : 下单成功
	
	loop 一天七次
		网友 ->> + X宝 : 查看配送进度
		X宝 -->> - 网友 : 配送中
	end
```

效果如下：

八、选择（Alt）

在多个条件中作出判断，每个条件将对应不同的消息序列。（相当于 if 及 else if 语句。）

语法示例

```mermaid 
sequenceDiagram
	土豪 ->> 取款机 : 查询余额
	取款机 -->> 土豪 : 余额
	
	alt 余额 > 5000
		土豪 ->> 取款机 : 取上限值 5000 块
	else 100 < 余额 < 5000
		土豪 ->> 取款机 : 有多少取多少
	else 余额 < 100
		土豪 ->> 取款机 : 退卡
	end
	
	取款机 -->> 土豪 : 退卡
```

效果如下：

九、可选（opt）

在某条件满足时执行消息序列，否则不执行。相当于单个分支的 if 语句。
语法示例

```mermaid 
sequenceDiagram
	老板们 ->> 员工们 : 开始实行996
	
	opt 永不可能
		员工们 -->> 老板们 : 拒绝
	end
```

效果如下：

十、并行（Par）

将消息序列分成多个片段，这些片段并行执行。

语法示例

```mermaid 
sequenceDiagram
老板C ->> 员工C : 开始实行996

par 并行
	员工C ->> 员工C : 刷微博
and
	员工C ->> 员工C : 工作
and
	员工C ->> 员工C : 刷朋友圈
end

员工C -->> 老板C : 9点下班
```

效果如下：

十一、背景高亮Background Highlighting

可以通过提供指定颜色的背景来突出动作流，通过下面的语法：
（颜色使用rgb和rgba语法定义）

基本语法

rect rgb(184, 76, 78)
... content ...
end

rect rgba(184, 76, 78, .1)
... content ...
end

语法示例

```mermaid 
sequenceDiagram
    participant 老马
    participant 老铁

    rect rgb(184, 76, 78)
    note right of 老马: 老马呼叫老铁
    老马->>+老铁: 好啊，老铁！
    rect rgb(42, 143, 244)
    老马->>+老铁: 老铁，听到我喊你吗？
    老铁-->>-老马: 老马，我听到了！
    end
    老铁-->>-老马: 我挺好！
    end
    老马 ->>+老铁: 今晚一起喝一杯？
    老铁 -->>-老马: 不见不散！
```

效果如下：

十二、注释

可以在时序图代码中写注释，解析器将忽略这些注释。注释需要写在单独的行，并且必须以 %% 开头。注释开始到下一个换行符之后的任何文本都将被视为注释，包括任何时序图语法。

语法示例

```mermaid 
sequenceDiagram
    老马->>老铁: 好啊，老铁！
    %% 这里是注释，图中不起作用
    老铁-->>老马: 好！
```

效果如下：

十三、字符转义

可以使用如下所示的语法转义字符：

语法示例

```mermaid 
sequenceDiagram
    老铁->>二丫: 我 #9829; 你！
    二丫->>老铁: 我 #9829; 你 #infin; 次！
```

效果如下：

数字为十进制，因此 # 可以编码为 #35;。也支持使用HTML字符名称。
因为可以使用分号代替换行符来定义标记，所以你需要使用 #59; 在消息文本中表示分号。

十四、使用场景及应用实例

时序图作为展示对象交互顺序的工具，可以更直观的描述顺序及并发过程。学生使用教务系统时序图展示：

语法示例

```mermaid 
sequenceDiagram
    participant a as 学生
    participant b as 教务系统
    participant c as 课程
    participant d as 成绩
		opt 认证
        a->>b: 用户名/密码
    end
    a->>+b: 请求课程列表
    b->>+c: 获取课程列表
    c-->>-b: 返回课程列表
    b->>+d: 获取成绩信息
    d-->>-b: 返回成绩信息
    b-->>-a: 显示成绩
```

效果如下：