OD(9)之Mermaid序列图(Sequence diagrams)使用详解_mermaid sequencediagram

OD(8)之Mermaid序列图(Sequence diagrams)使用详解

Author: Once Day Date: 2024年2月21日

漫漫长路才刚刚开始…

全系列文章可参考专栏: Mermiad使用指南_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)

1. 序列图介绍

序列图是一种用于展示系统中对象之间如何交互的UML（统一建模语言）图。它们主要用于展现对象之间交互的顺序，这些交互以时间顺序排列，通常用于系统分析和设计阶段来捕捉系统的动态行为。序列图描述了参与交互的对象集合以及它们之间消息传递的时间顺序，非常直观地表示了各个组件或对象在整个流程中的作用和活动。

序列图的功能在于能够清晰地显示多个对象在某个业务流程或用例中的交互方式。它可以帮助开发者和系统分析师理解系统运行的具体细节，便于发现系统设计中的问题，并且为代码实现提供参考。例如，在一个在线购物系统中，序列图可以用来表示用户、购物车、库存管理以及支付服务之间的交互过程。

Mermaid 是一个基于JavaScript的图表工具，它支持使用文本语言生成序列图等多种图表。Mermaid 中的序列图通过简洁的文本描述来定义，然后自动转换成图形展示，这让非技术用户也能较容易地读写图表定义。Mermaid 的序列图语法简单易学，开发者可以快速地绘制出复杂的交互过程。在Mermaid中，您可以通过声明参与者，然后描述他们之间发送消息的过程来生成序列图。这种方式非常适合版本控制和协作，因为图表定义是以文本形式存储的，而不是传统的图形文件。

比如，要在Mermaid中创建一个简单的序列图，只需要按照其语法规则编写文本代码，例如：

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: I am good, thanks!
1
2
3

上面的代码将会生成一个序列图，显示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!
1
2
3
4

也可以在序列图中使用转义字符:

sequenceDiagram
    A->>B: I #9829; you!
1
2

2.2 定义序列图角色

Mermaid序列图是一种非常灵活的工具，提供了丰富的功能来描述系统中各个参与者的交互，其中包含了参与者（participant）、角色（role）、别名（alias）。接下来，将简要介绍这些功能，并提供相应的示例。

1. 参与者（Participant）：在序列图中，参与者通常指的是系统中的对象或角色，它们通过消息传递进行交互。在Mermaid中，可以使用关键字participant来定义一个参与者。

   sequenceDiagram
   	participant System as 系统
       participant User as 用户
       User ->> System: 发送操作指令
       System ->> User: 返回执行结果
   1
   2
   3
   4
   5

   上面的代码定义了两个参与者，分别是“用户”和“系统”，通过participant关键字，可以直接指定角色出场顺序，默认情况下按照角色第一次出现的顺序排列。

2. 角色（Actors）：角色通常指的是参与者扮演的具体行为或职责。在Mermaid序列图中，如果你特别想使用角色符号而不是带有文本的矩形，则可以通过使用角色语句来实现。

   sequenceDiagram
   	actor 小明
   	actor 小智
   	小明 ->> 小智: 你好
   1
   2
   3
   4

3. 别名（Alias）：别名用于给参与者设置一个更易于理解或更简短的名字。在上面提供的参与者示例中，User as 用户和System as 系统中的“用户”和“系统”就是别名。

2.3 角色动态创建和销毁

在Mermaid版本10.3.0及以上版本中，引入了一项新功能，即“角色创建和销毁”（Actor Creation and Destruction）。这项功能允许序列图明确地表示参与者（也就是角色或对象）在交互过程中的创建和销毁时机。这对于描绘对象的生命周期非常重要，尤其是在复杂的系统设计和交互过程中，能够帮助读者理解参与者是如何被创建和销毁的，以及它们的作用域。

在Mermaid中，角色的创建通常使用create关键字来标识，而角色的销毁则使用destroy关键字。这两个关键字分别在角色被创建和销毁的时点上使用。

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree
1
2
3
4
5
6
7
8
9
10
11

2.4 分组绘制

在Mermaid序列图中，分组（Grouping）或称为盒子（Box）是一个用于组织和区分图表中不同部分的功能。这个功能非常有用，尤其是当你想要高亮显示或者区分图表中的某个特定流程或逻辑时。通过分组，可以将相关的交互放在一个视觉上突出的框（Box）内，以便更清晰地传达信息。

sequenceDiagram
    box blue Alice & John
    participant A
    participant J
    end
    box Another Group
    participant B
    participant C
    end
    A->>J: Hello John!
    J->>B: Hello Bob!
    B->>C: Hello Charly!
1
2
3
4
5
6
7
8
9
10
11
12

颜色指定可以使用已有定义的名字标签，也可以用rgb(33,66,99)形式，或者按照下面方式强制指定为透明底色:

box transparent name
... actors ...
end
1
2
3

2.5 角色交互信息格式

Mermaid允许通过简洁的文本语法来创建序列图，并在图中展示消息的流转。这些消息可以通过箭头来表示，箭头的不同样式和方向可以传达不同类型的消息和交互模式。其标准信息交互格式如下:

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

目前支持的箭头种类如下:

下面是一些常见的消息类型及其在Mermaid中的表示方法：

1. 同步消息（Synchronous Messages）：这类消息表示发送者在等待接收方处理完消息并给出响应之前，不会继续执行其他操作。在Mermaid中，同步消息通常用实线箭头表示。

   sequenceDiagram
       participant A as Alice
       participant B as Bob
       A->>B: 同步消息
       B-->>A: 响应消息
   1
   2
   3
   4
   5

   返回消息（Reply Messages）用于表示从接收方返回给发送方的响应或结果。在Mermaid中，返回消息通常用虚线箭头并带有一个箭头朝向发送方表示。

2. 异步消息（Asynchronous Messages）：与同步消息不同，异步消息允许发送者在发送消息后继续执行其他操作，不需要等待接收方的响应。在Mermaid中，异步消息通常用虚线箭头表示。

   sequenceDiagram
       participant A as Alice
       participant B as Bob
       A->>B: 同步消息
       Note right of B: Bob处理消息
       B-->>A: 响应消息
       A-xB: 异步消息
       Note right of A: Alice继续其他操作
   1
   2
   3
   4
   5
   6
   7
   8

3. 自发消息（Self Messages）：这种类型的消息是指参与者发送给自己的消息，通常用于表示自我调用或内部处理。在Mermaid中，自发消息通过循环箭头来表示。

   sequenceDiagram
       participant A as Alice
       A->>A: 自发消息
   1
   2
   3

消息在序列图中非常重要，它们可以揭示参与者之间的协作方式、调用顺序以及系统的动态行为。

2.6 激活和停用角色

在Mermaid序列图（Sequence Diagrams）中，激活（Activation）是一个表示参与者或对象在一段时间内处于活跃状态的功能。这通常意味着参与者正在执行某个操作，或者正在处理一个接收到的消息。在序列图中，激活用于直观地展示对象的生命周期，即对象何时开始活动，何时结束活动。它是通过在参与者的生命线上绘制一个矩形条来表示的，这个条形的长度对应于对象处理操作的时间跨度。这个功能帮助观察者理解系统内部的交互和并发执行流程。

Mermaid通过简单的语法来支持激活的表示。默认情况下，当一个参与者发送或接收一个消息时，它的激活状态会自动显示。如果需要更细致地控制激活的开始和结束，可以使用activate和deactivate关键字。这允许开发者手动指定何时激活或停用一个对象，从而更精确地描绘出参与者的活跃期。

Alice->>John: Hello John, how are you?
activate John
1
2

上述即是使用关键字进行激活，但是略显繁琐，有一种快捷表示法，即在消息箭头后附加 +/- 后缀，如下所示：

sequenceDiagram
    participant User
    participant System
    User->>+System: 发起请求
    Note right of System: 系统开始处理请求
	User->>+System: 查询状态
	System-->>-User: 返回状态
    System-->>-User: 返回响应
    Note right of User: 用户得到响应
1
2
3
4
5
6
7
8
9

在这个例子中：

• User->>+System: 发起请求：当用户向系统发送请求时，系统的激活条开始显示，表示系统已开始处理请求。
• System-->>-User: 返回响应：当系统完成处理并向用户返回响应时，激活条结束，表示系统的活跃状态已结束。
• 中间穿插了状态查询，同一角色的激活过程可以叠加，因此可用于复合交互逻辑的展示。

通过这种方式，激活功能可以清楚地表示出每个参与者在交互过程中的活动状态，这对于理解参与者之间的交互模式和执行顺序非常有帮助。特别是在复杂的交互或并发处理场景中，激活可以帮助描绘出参与者的操作顺序以及潜在的性能瓶颈。因此，激活在设计和分析系统交互时，是一个非常实用的视觉工具。

2.7 交互信息标注功能

在Mermaid序列图中，标注（Note）功能是一种强大的工具，用于为图表中的特定部分添加解释性文本。这可以帮助说明图中的某些步骤或者交互过程，使得图表的意图更加清晰和容易理解。尤其是在复杂的序列图中，标注可以突出显示重要的信息或解释不易直接从图形中得出的逻辑。

在Mermaid中，标注可以被附加到参与者旁边，或者连接到两个参与者之间的消息上。通过使用Note关键字，你可以指定标注的位置，是在左侧（left）、右侧（right）还是在消息的上方（over）。此外，你还可以指定标注覆盖一个或多个参与者。

下面是一个简单的例子，展示了如何在Mermaid序列图中使用标注功能：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->Bob: Hello Bob, how are you?
    Note right of Bob: Bob thinks about it.
    Bob->Alice: I am good thanks!
    Note left of Alice: Alice is happy to hear that.
1
2
3
4
5
6
7

在这个例子中，Alice 发送了一个消息问候 Bob，并询问他的情况。在 Bob 回复之前，我们在他的右侧添加了一个标注，说明 Bob 正在思考。Bob 回复后，我们又在 Alice 的左侧添加了一个说明她对 Bob 回复感到高兴的标注。

除了在参与者旁边添加标注外，还可以使用over关键字在两个参与者之间的消息上方添加标注：

sequenceDiagram
    participant Alice
    participant Bob
    Alice->Bob: Are you sure?
    Note over Alice, Bob: Both Alice and Bob <br/> think about the question.
    Bob->Alice: Yes, I am sure.
1
2
3
4
5
6

在此场景中，Alice 问 Bob 是否确定，我们在 Alice 和 Bob 之间添加了一个覆盖他们两个的标注，说明他们都在思考这个问题。

标注功能是Mermaid序列图的一个非常有用的组成部分，它使得图表不仅仅是简单的消息传递流程，而是能够携带丰富的上下文信息，为图表的观察者提供了更深入的理解。通过合理使用标注，可以极大地提升序列图的表述能力和可读性。

2.8 循环交互信息

Mermaid序列图中的循环（Loop）功能非常有用，它允许图表的创建者在序列图中表示重复发生的交互过程。在软件系统的交互中，循环是常见的结构，表示某个操作或交互会执行多次，直到满足某个特定条件为止。使用循环可以帮助理解系统中的重复行为，以及这些行为如何影响系统的整体流程。

在Mermaid中，循环通过loop关键字来定义，后面紧跟着循环的描述。循环体内包含的是循环期间发生的交互。结束循环的标记是end关键字。这种表示方法可以清晰地展示出参与者（Participant）之间在循环过程中的消息交换。

下面是一个使用循环功能的Mermaid序列图的例子：

sequenceDiagram
    participant User
    participant System
    loop 每次用户输入
        User->>+System: 输入数据
        System-->>-User: 验证反馈
    end
1
2
3
4
5
6
7

在这个简单的例子中，用户（User）与系统（System）之间的交互被放在了一个循环中，表示用户每次输入数据，系统都会进行验证并给出反馈。这个循环会一直进行，直到不再有用户输入，或者达到了某个特定的结束条件。

循环结构在描述算法、工作流程或者任何需要重复执行直到条件满足的场景中都非常有用。例如，在用户登录流程中，系统可能需要循环地提示用户输入用户名和密码，直到用户提供的凭据正确为止。在这种情况下，循环可以帮助展示出整个验证过程。

使用循环功能不仅让序列图的逻辑更加明确，也有助于识别可能的性能问题，比如一个循环是否可能导致系统响应缓慢，或者在某些情况下是否可能陷入无限循环。

2.9 替代和可选交互

Mermaid序列图中的替代（Alt）和可选（Opt）功能是用于表达条件流程的强大工具。在软件开发和系统设计领域，经常需要描述基于特定条件发生的不同交互路径。这时，Alt和Opt结构就显得尤为重要，因为它们可以清晰地展现在某些条件下执行的不同操作或者交互序列。

Alt结构用于描述两个或多个基于条件的不同流程路径。每个路径都有一个条件表达式，根据这些条件决定执行哪个路径。这类似于编程中的if-else语句。对于只有一个条件路径的情况，Opt结构则是一个更简洁的选择，表示如果满足某个条件，则执行某个操作，它类似于编程中的if语句。

下面是一个使用Alt和Opt结构的Mermaid序列图的例子：

sequenceDiagram
    participant User
    participant System
    
    opt 用户已认证
        User->>System: 访问受限资源
        System->>User: 提供受限资源
    end
    
    alt 用户名正确
        User->>System: 输入用户名
        System->>User: 请求输入密码
    else 用户名错误
        System->>User: 显示错误信息
    end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这个例子中，我们首先使用了Opt结构，表示如果用户已经通过认证，则可以直接访问受限资源。这个条件流程之外的操作不会发生，直到Opt块结束。

接下来使用了Alt结构，描述了两种基于用户输入用户名的情形。第一种情况是用户名正确，系统随后将请求用户输入密码；第二种情况是用户名错误，此时系统会向用户显示错误信息。Alt结构清晰地描述了这两种不同的分支路径，每个分支都对应一个条件。

Mermaid序列图中的Alt和Opt结构非常有助于展示不同的业务逻辑分支和条件决策。它们使得图表更加丰富和具有表现力，同时也帮助读者更好地理解在特定条件下可能发生的不同场景。

2.10 并发平行交互

Mermaid序列图的并发处理（Parallel）功能是一个用于表示多个操作可以同时发生的强大结构。在现代软件开发中，多任务并行执行是常见的模式，它可以显著提高程序的效率和响应速度。Parallel功能在序列图中提供了一种视觉化的方式来描述这种并行性，帮助开发者和利益相关者理解系统中各个组件是如何同时工作的。

在Mermaid中，平行处理通常通过par关键字来标识。par块的开始和结束分别由par和end关键字定义。在这个块内部，可以包含多个同时发生的交互序列，它们都将并行展示。这有助于说明在给定的时间点，系统中的不同部分是如何同时执行任务的。

下面是一个使用Parallel功能的Mermaid序列图的例子：

sequenceDiagram
    participant User
    participant ServiceA
    participant ServiceB

    User->>ServiceA: 发起请求A
    par 并行处理
        ServiceA->>ServiceB: 请求数据B
        ServiceA->>ServiceA: 处理本地数据A
    end
    ServiceB-->>ServiceA: 数据响应B
    ServiceA-->>User: 最终响应
1
2
3
4
5
6
7
8
9
10
11
12

在这个例子中，用户向ServiceA发起了一个请求（请求A）。接着，ServiceA同时向ServiceB请求数据（请求数据B）和处理本地数据（处理本地数据A）。这两个操作是并行执行的，由par块表示。一旦ServiceB响应了数据（数据响应B），ServiceA将完成其剩余的处理并将最终结果响应给用户。

Parallel功能在描述微服务架构、多线程程序或者任何涉及并行处理的系统时非常有用。它帮助开发者将复杂的并行执行流程简化为易于理解的视觉模型。在系统设计和问题排查阶段，了解不同组件是如何并行工作的，对于优化性能和确保系统的可靠性至关重要。

2.11 交互临界区

Mermaid序列图的临界区（Critical Region）功能，也称为关键区域，是用来表示系统中需要互斥访问资源或执行原子操作的部分。临界区是并发编程中的一个概念，用于指代那些一次只允许一个线程（或进程）进入的代码区域。在软件工程中，正确的管理临界区对于防止资源冲突和数据不一致至关重要。

在Mermaid序列图中，临界区通过critical关键字来标识，与平行处理（Parallel）和其他结构一样，它也有开始（critical）和结束（end）关键字界定范围。在这个块内部的操作被视为互斥执行，这意味着当一个参与者进入临界区时，其他参与者必须等待直到它完成操作并退出临界区。

下面是一个使用Critical Region功能的Mermaid序列图的例子：

sequenceDiagram
    participant Thread1
    participant Thread2
    participant Resource

    critical 临界区
        Thread1->>Resource: 请求访问资源
        Resource-->>Thread1: 允许访问
        Thread1->>Resource: 执行操作
        Thread1-->>Resource: 释放资源
    end
    
    Thread2->>Resource: 请求访问资源
    note over Thread2, Resource: Thread2必须等待临界区释放
    Resource-->>Thread2: 允许访问
    Thread2->>Resource: 执行操作
    Thread2-->>Resource: 释放资源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在这个例子中，Thread1首先进入临界区并与资源进行交互，包括请求访问、执行操作及释放资源。在Thread1操作资源的过程中，Thread2也尝试访问同一资源，但它必须等待，直到Thread1完成操作并退出临界区。这确保了Resource不会同时被两个线程操作，从而避免了潜在的冲突和错误。

Critical Region功能在描述需要同步访问共享资源的系统中极为有用，尤其是在多线程环境中。它提供了一种直观的方式来展示系统的同步机制，帮助开发者和系统设计师理解和设计正确的同步策略，避免死锁和竞争条件等并发问题。

2.12 交互中断停止

Mermaid序列图的中断停止（break）功能是一种在序列图中表示流程中断的机制。在软件逻辑和工作流中，流程可能会因为某些条件不满足或发生了特定的事件而提前终止。Mermaid通过提供break关键字，允许我们在序列图中模拟这种流程控制行为。

通常，break块被用来在序列图中表示一个条件判断，当该条件为真时，后续的操作将不会执行，流程将跳出当前执行序列。这与编程中的break语句类似，通常用在循环或选择结构中，用于在特定条件下提前退出循环或跳过剩余的代码块。

在Mermaid序列图中使用break功能的例子如下：

sequenceDiagram
    participant User
    participant System

    User->>System: 发起操作
    alt 是某个特定条件成立吗？
        System-->>User: 条件成立
        break 这里是中断停止
            System->>User: 提前终止操作
        end
    else 条件不成立
        System->>System: 继续执行后续操作
    end
    System-->>User: 操作完成
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个示例中，用户向系统发起了一个操作请求。系统首先检查一个特定条件是否成立，这是通过alt关键字表示的选择结构实现的。如果条件成立，则执行break块中的代码，系统向用户通报条件成立，并执行提前终止操作，然后整个流程结束。如果条件不成立，则跳过break块，继续执行后续的操作直到完成。

使用break功能可以帮助我们在设计复杂的业务流程和系统交互时，清楚地表达在特定条件下的异常处理和流程中断情况。这种表示方法可以提高序列图的可读性，并帮助开发者和利益相关者理解可能的分支和异常流程。

2.13 背景高亮

Mermaid序列图的背景高亮（Background Highlighting）功能是一种视觉上的增强，用于突出显示序列图中的特定部分。这个功能允许开发者和文档编写者在序列图中用不同的颜色或阴影来标记某些交互或时间段，以便更好地指示它们的重要性或区分不同的阶段。

在序列图中，通常会有许多参与者（actors）和消息（messages）的交互。当这些交互复杂或涉及多个步骤时，使用背景高亮可以帮助观众更快地聚焦于关键的流程或理解整个交互的结构。例如，可以通过背景高亮来标记一个事务的开始和结束，或者强调出现问题的交互点，以便分析和讨论。

在Mermaid中使用背景高亮的语法是通过rect关键字来定义开始(rect)和结束(end)。在这对关键字之间的所有交互都将被背景高亮显示。我们可以通过指定颜色来自定义高亮效果。

以下是一个简单的例子，展示了如何在Mermaid序列图中使用背景高亮：

sequenceDiagram
    participant A as 用户
    participant B as 系统

    A->>B: 登录请求
    rect rgb(191, 223, 255)
        B->>B: 验证用户信息
        B-->>A: 发送验证结果
    end
    A->>B: 请求数据
    B-->>A: 返回数据
1
2
3
4
5
6
7
8
9
10
11

在这个序列图中，用户（A）向系统（B）发起登录请求，系统进行用户信息验证后返回验证结果。我们使用rect关键字和绿色（rgb(0, 255, 0)）背景高亮来标记这个登录验证过程，使之更加突出。在验证过程结束后，用户请求数据，系统返回数据，这部分则没有被高亮，以表明它是常规流程的一部分。

如果需要透明背景功能，可以使用rgba(0, 0, 255, .1)语法定义背景颜色。

通过背景高亮功能，Mermaid序列图能够更加直观地传达流程中的关键步骤和状态变化，对于提升交流效率、增强理解和记忆都有积极作用。

2.14 序列号支持(sequenceNumbers)

Mermaid序列图的序列号（sequenceNumbers）功能是一种有助于提升交互逻辑清晰度的特性。在复杂的系统交互中，理解消息的发送顺序尤为重要。为此，Mermaid序列图提供了一种自动为消息交互编号的机制，这个机制可以为每一个交互步骤分配一个唯一的序列号，从而使得观察者可以轻松追踪每一步的执行顺序。

序列号的添加可以让读者一目了然地识别出消息传递的顺序，特别是在多个参与者和复杂交互的场景中，序列号成为了理解整个流程的关键辅助工具。例如，在调试或者分析一个交互过程中的性能瓶颈时，顺序编号可以帮助快速定位到特定步骤，提高效率。

在Mermaid中，启用序列号非常简单，只需在序列图的配置部分添加autonumber关键字。下面是一个开启序列号的Mermaid序列图示例：

sequenceDiagram
    autonumber
    participant User as 用户
    participant Server as 服务器

    User->>Server: 发送请求
    Server-->>User: 返回响应
    Note right of Server: 服务器处理请求
    User->>Server: 再次发送请求
    Server-->>User: 返回响应
1
2
3
4
5
6
7
8
9
10

在这个例子中，autonumber指令被用来启用自动编号功能。随后的交互步骤都将被自动分配一个序列号，例如，在用户发送请求和服务器返回响应的步骤前都会出现一个递增的数字。这些数字以1开始，按照交互的顺序递增。这样的标注方式使得整个交互流程的顺序更加明确，便于阅读和理解。

Mermaid序列图的序列号功能是一个简单而强大的工具，它通过为交互添加清晰的顺序标记，帮助开发者和分析师更好地理解和沟通复杂的交互逻辑。

2.15 角色菜单支持

Mermaid序列图的Actor Menus功能是一项较新的互动性增强特性，它允许在序列图中为参与者（actors）添加上下文菜单。这些菜单可以包含一系列的操作或链接，当点击参与者时会显示出来。这样做的目的是为了提供一个更加直观和交互式的体验，用户可以通过这些菜单快速访问与特定参与者相关的额外信息或执行某些操作。

例如，在一个复杂的系统交互序列图中，可能有多个服务或组件作为参与者。通过使用Actor Menus功能，可以为每个服务添加一个菜单，列出常用的操作，比如访问日志、查看配置信息、或者直接跳转到相关的代码库。这显著提升了序列图的实用性和交互性，使它不仅仅是一个静态的图表，而是一个交互式的导航工具。

在Mermaid中实现Actor Menus的语法是通过在描述参与者的时候添加特定的指令，用于定义菜单项及其对应的操作或链接。这些菜单项点击时会执行预定义的动作或跳转到指定的链接。

下面是一个简单的示例，展示了如何在Mermaid序列图中使用Actor Menus功能：

sequenceDiagram
    participant Alice
    participant Bob
    %% 可以是下面这种列举风格
    link Alice: 配置文件 @ http://example.com/alice/config
    link Alice: 日志文件 @ http://example.com/alice/logs
    link Alice: 编辑 @ http://example.com/alice/edit
    %% 也可以是下面这种json风格
    links Bob: {"配置文件": "http://example.com/alice/config", "日志文件": "http://example.com/alice/logs"}
    Alice->>Bob: Hi Bob!
    Bob-->>Alice: Hello Alice!
1
2
3
4
5
6
7
8
9
10
11

在这个例子中，我们定义了两个参与者Alice和Bob，并且为他们分别定义了一个菜单。Alice的菜单包括查看配置文件，查看日志（带有链接），以及一个编辑的链接。Bob的菜单结构相同，但链接指向不同的资源。

这样，当序列图被渲染并展示在支持交互的环境中时（如支持Mermaid的Markdown编辑器或Web界面），用户可以通过点击参与者名字来访问这些菜单项。