OD(8)之Mermaid序列图(Sequence diagrams)使用详解
Author: Once Day Date: 2024年2月21日
漫漫长路才刚刚开始…
全系列文章可参考专栏: Linux实践记录_Once_day的博客-CSDN博客
参考文章:
- 关于 Mermaid | Mermaid 中文网 (nodejs.cn)
- Mermaid | Diagramming and charting tool
- Mermaid 绘图语法介绍 - 飞书云文档 (larkoffice.com)
- Draw Diagrams With Markdown - Typora Support (typoraio.cn)
- Mermaid 使用教程：从入门到精通——流程图、时序图、甘特图、类图等图形绘制轻松搞定 - 知乎 (zhihu.com)
- 序列图 | Mermaid 中文网 (nodejs.cn)
文章目录
- OD(8)之Mermaid序列图(Sequence diagrams)使用详解
- 1. 序列图介绍
- 2. 具体使用
- 2.1 关键字歧义和注释
- 2.2 定义序列图角色
- 2.3 角色动态创建和销毁
- 2.4 分组绘制
- 2.5 角色交互信息格式
- 2.6 激活和停用角色
- 2.7 交互信息标注功能
- 2.8 循环交互信息
- 2.9 替代和可选交互
- 2.10 并发平行交互
- 2.11 交互临界区
- 2.12 交互中断停止
- 2.13 背景高亮
- 2.14 序列号支持(sequenceNumbers)
- 2.15 角色菜单支持
1. 序列图介绍
序列图是一种用于展示系统中对象之间如何交互的UML（统一建模语言）图。它们主要用于展现对象之间交互的顺序，这些交互以时间顺序排列，通常用于系统分析和设计阶段来捕捉系统的动态行为。序列图描述了参与交互的对象集合以及它们之间消息传递的时间顺序，非常直观地表示了各个组件或对象在整个流程中的作用和活动。
序列图的功能在于能够清晰地显示多个对象在某个业务流程或用例中的交互方式。它可以帮助开发者和系统分析师理解系统运行的具体细节，便于发现系统设计中的问题，并且为代码实现提供参考。例如，在一个在线购物系统中，序列图可以用来表示用户、购物车、库存管理以及支付服务之间的交互过程。
Mermaid 是一个基于JavaScript的图表工具，它支持使用文本语言生成序列图等多种图表。Mermaid 中的序列图通过简洁的文本描述来定义，然后自动转换成图形展示，这让非技术用户也能较容易地读写图表定义。Mermaid 的序列图语法简单易学，开发者可以快速地绘制出复杂的交互过程。在Mermaid中，您可以通过声明参与者，然后描述他们之间发送消息的过程来生成序列图。这种方式非常适合版本控制和协作，因为图表定义是以文本形式存储的，而不是传统的图形文件。
比如，要在Mermaid中创建一个简单的序列图，只需要按照其语法规则编写文本代码，例如：
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>Alice: I am good, thanks!
上面的代码将会生成一个序列图，显示Alice向Bob发送了一个问候，并得到Bob的答复。Mermaid 使得创建和分享序列图变得更加轻松和高效，尤其适合在文档中嵌入图表，或者在支持Mermaid的平台上（如GitHub）进行协作。
总的来说，序列图是一个强大的工具，它可以帮助团队成员理解系统的交互逻辑，而Mermaid提供了一种现代、高效的方式来创建和共享这些图表。在软件开发的多个阶段，从需求分析到系统设计再到文档编写，序列图都扮演着重要的角色。通过Mermaid，这一过程变得更加简单，为项目的成功提供了有力的支持。
2. 具体使用
2.1 关键字歧义和注释
在Mermaid序列图的文本描述中，有一个特别的注意点涉及到了“节点”（nodes）的使用，尤其是“end”这个词。由于Mermaid的脚本语言设计特性，如果直接使用“end”作为节点名称或者文本内容，可能会导致序列图绘制出现问题。这是因为在Mermaid中，“end”是一个关键字，用来标记某些结构的结束，比如一个序列图的结束。如果在不应该结束的地方使用“end”，Mermaid可能会错误地解释这个关键字，从而破坏整个图表的结构。
为了避免这个问题，如果确实需要在序列图中使用“end”这个词，必须采用一些特殊的方式来“包围”它，防止Mermaid将其误解为关键字。具体来说，可以使用圆括号（parentheses），引号（quotation marks），或者不同类型的括号，如花括号（braces）或方括号（brackets），来包围“end”。例如，可以写作(end)，"end"，{end}，[end]等形式。
简而言之，当在Mermaid序列图中书写节点信息时，若不得不使用“end”这个词，记得用合适的括号将它包起来，以防止图表因解析异常而发生错误。这一点对于保证序列图正确生成是非常关键的。
可以在序列图中输入注释，解析器将忽略这些注释。注释需要独占一行，并且必须以 %%（双百分号）开头。注释开始后到下一个换行符的任何文本都将被视为注释，包括任何图表语法：
sequenceDiagram
Alice->>John: Hello John, how are you?
%% this is a comment
John-->>Alice: Great!
也可以在序列图中使用转义字符:
sequenceDiagram
A->>B: I #9829; you!
2.2 定义序列图角色
Mermaid序列图是一种非常灵活的工具，提供了丰富的功能来描述系统中各个参与者的交互，其中包含了参与者（participant）、角色（role）、别名（alias）。接下来，将简要介绍这些功能，并提供相应的示例。
-
参与者（Participant）：在序列图中，参与者通常指的是系统中的对象或角色，它们通过消息传递进行交互。在Mermaid中，可以使用关键字
participant来定义一个参与者。sequenceDiagram participant System as 系统 participant User as 用户 User ->> System: 发送操作指令 System ->> User: 返回执行结果上面的代码定义了两个参与者，分别是“用户”和“系统”，通过
participant关键字，可以直接指定角色出场顺序，默认情况下按照角色第一次出现的顺序排列。 -
角色（Actors）：角色通常指的是参与者扮演的具体行为或职责。在Mermaid序列图中，如果你特别想使用角色符号而不是带有文本的矩形，则可以通过使用角色语句来实现。
sequenceDiagram actor 小明 actor 小智 小明 ->> 小智: 你好