这堂关于时序图 (Sequence Diagram) 的课程。如果说流程图关注的是“做什么”，那么时序图关注的就是“谁和谁，在什么时候，说了什么话”。它是一种专门用来描述系统中不同组件之间交互流程和时间顺序的图表。本课程的所有示例都非常简短，强烈建议您打开 Mermaid 官方的在线编辑器 mermaid.live，一边学习一边亲手尝试下面的每一个小步骤。

---

第二部分：常用图表绘制

第4章：时序图 (Sequence Diagram) - 描述交互流程

4.1 时序图声明与参与者

4.1.1 sequenceDiagram 关键字

第一步：声明图表类型

与流程图的graph类似，任何一个时序图都必须以sequenceDiagram这个关键字开头。这行代码告诉Mermaid渲染引擎：“我接下来要画的是一个时序图”。

我们先写下这最基本的第一行：

代码段

sequenceDiagram

第二步：让Mermaid自动创建参与者

Mermaid非常智能。即使你没有明确定义图中的角色，当你开始描述他们之间的对话时，Mermaid也会自动地创建它们。

我们来添加一条简单的消息：

代码段

sequenceDiagram
    Alice->>Bob: 你好，Bob！

• 在这个例子中，Mermaid会自动创建出名为“Alice”和“Bob”的两个参与者。

4.1.2 participant 和 actor 的定义与别名

虽然可以自动创建，但更专业、更清晰的做法是在图表的开头就明确地声明所有参与交互的角色。

好比说：这就像写剧本一样，在剧本的开头先列出一个“角色表”。

第一步：使用 participant 声明普通参与者

participant 关键字用来声明一个普通的系统组件或模块，它在图上通常显示为一个矩形。

我们来明确地定义 Alice 和 Bob：

代码段

sequenceDiagram
    participant Alice
    participant Bob
    
    Alice->>Bob: 你好，Bob！

第二步：使用 actor 声明用户参与者

actor 关键字在功能上与 participant 完全一样，但它在图上会被渲染成一个**“小人”的图标。这通常用来代表一个真实的用户**或外部系统的操作者。

让我们把 Alice 定义为一个用户：

代码段

sequenceDiagram
    actor Alice
    participant Bob
    
    Alice->>Bob: 你好，Bob！

现在图表中的 Alice 就会变成一个小人图标，让图的含义更清晰。

第三步：使用别名 (Alias) 简化代码

有时候，参与者的全名很长，但在代码中反复写这么长的名字会很麻烦。我们可以为它设置一个简短的别名。

语法：participant "很长的名字" as 简称

我们来创建一个复杂的例子：

代码段

sequenceDiagram
    actor U as 用户
    participant Srv as 认证服务器
    participant DB as 用户数据库

    # 在代码中，我们使用简称 U, Srv, DB
    U->>Srv: 请求登录
    Srv->>DB: 查询用户信息

• 发生了什么？

  • 在最终的图表上，你会看到“用户”、“认证服务器”和“用户数据库”这些全名。

  • 但在我们的代码里，只需要使用U, Srv, DB这些简洁的别名即可，大大提高了编写效率。

---

4.2 消息传递详解

消息是时序图的核心，它由不同样式的箭头表示，代表了不同类型的交互。

4.2.1 同步消息 (->) 与返回消息 (-->)

第一步：理解同步消息

同步消息代表一次阻塞式的调用。发送方发出消息后，会停下来一直等待，直到接收方返回响应，它才能继续做别的事情。

好比说：这是一次打电话。你问对方一个问题（发送同步消息 ->），然后你必须举着电话在线等待，直到对方给你答复（返回消息 -->）。

第二步：编写同步消息

我们模拟用户向Web服务器请求一个页面。

代码段

sequenceDiagram
    participant User
    participant WebServer
    
    # User 发送同步消息给 WebServer
    User->WebServer: GET /index.html

这里的实心箭头 -> 代表同步消息。

第三步：编写返回消息

返回消息是对同步消息的响应。它通常使用虚线箭头 -->。

代码段

sequenceDiagram
    participant User
    participant WebServer
    
    User->WebServer: GET /index.html
    # WebServer 返回响应
    WebServer-->User: 这里是HTML页面的内容

4.2.2 异步消息 (->>)

第一步：理解异步消息

异步消息代表一次非阻塞式的调用。发送方发出消息后，不会等待响应，而是立即继续执行自己的后续任务。

好比说：这是一次发短信或发邮件。你把短信发出去后（发送异步消息 ->>），就立刻把手机收起来去做别的事了，你不会傻傻地盯着屏幕等对方回复。

第二步：编写异步消息

它使用一个开放式的箭头 ->>。

代码段

sequenceDiagram
    participant User
    participant AnalyticsService
    
    # 用户的一个操作，触发了一次异步的日志记录
    User->>AnalyticsService: 记录点击事件
    # User不需要等待日志服务的回应，可以立即进行下一步操作

4.2.3 自调用消息

第一步：理解自调用

一个参与者可以给自己发送消息，这代表它在执行一个内部操作，或者调用自己的某个方法。

第二步：编写自调用消息

箭头的起点和终点是同一个参与者。

代码段

sequenceDiagram
    participant Database

    # Database 接收到一个复杂查询请求后，需要先进行内部优化
    Database->Database: 优化查询计划

---

4.3 激活与生命线 (Activations)

1. 核心概念

激活（Activation）是参与者下方生命线上出现的一个小矩形，它清晰地表示出这个参与者正在**“忙碌”**（处理一个消息）的时间段。

好比说：激活就像是聊天软件里的“对方正在输入...”提示，它告诉你对方正在积极地处理你的信息。

4.3.1 activate 和 deactivate

虽然Mermaid通常会自动处理激活，但有时我们需要手动精确控制。

第一步：使用 activate 手动开始

代码段

sequenceDiagram
    A->B: 请求处理
    # 手动激活 B 的生命线
    activate B

执行后，你会看到B的生命线上出现了一个激活矩形的起点。

第二步：使用 deactivate 手动结束

代码段

sequenceDiagram
    A->B: 请求处理
    activate B
    B-->A: 处理完毕
    # 手动结束 B 的激活状态
    deactivate B

执行后，B生命线上的激活矩形就结束了。

4.3.2 嵌套激活

第一步：理解嵌套

一个参与者在“忙碌”期间，可能会调用另一个参与者，这时就会形成嵌套的激活。

第二步：观察自动嵌套

Mermaid会自动为我们画出嵌套的激活层级。

代码段

sequenceDiagram
    actor User
    participant App
    participant Database

    User->App: 获取用户数据
    activate App

    # App在处理期间，又调用了Database
    App->Database: 查询ID=1的用户
    activate Database

    Database-->App: 返回用户信息
    deactivate Database

    App-->User: 返回用户数据
    deactivate App

你会看到，Database的激活矩形完全包含在App的激活矩形内部，非常清晰。

---

4.4 组合片段：构建复杂逻辑

组合片段是时序图中用来表示循环、分支等复杂逻辑的“盒子”。

4.4.1 循环 (loop)

代码段

sequenceDiagram
    participant A
    participant B

    loop 每隔5秒轮询一次
        A->>B: 你好了吗？
        B-->>A: 还没有！
    end

• loop ... end 块内的消息会表现为一个循环。

4.4.2 分支 (alt/else)

这用于表示 if...else... 逻辑。

代码段

sequenceDiagram
    participant A
    participant B

    alt 库存充足
        A->B: 创建订单
    else 库存不足
        A->B: 返回错误
    end

• alt 代表第一个分支，else 代表其他分支。

4.4.3 可选 (opt)

这用于表示一个可能发生也可能不发生的可选流程（一个没有else的if）。

代码段

sequenceDiagram
    participant A
    participant B

    A->B: 保存文件
    
    opt 如果是新用户
        B->B: 额外创建一个欢迎教程
    end

4.4.4 并行 (par)

这用于表示几个同时发生的动作。

代码段

sequenceDiagram
    participant A
    participant B
    participant C

    par
        A->>B: 异步任务1
    and
        A->>C: 异步任务2
    end

• par ... and ... end 块内的消息被认为是并行执行的。

---

4.5 添加注释与说明

4.5.1 Note right of/left of/over 语法

第一步：在参与者右边添加注释

代码段

sequenceDiagram
    participant A
    Note right of A: 这是关于A的注释。

第二步：在参与者左边添加注释

代码段

sequenceDiagram
    participant A
    participant B
    Note left of B: 这是关于B的注释。

第三步：跨越多个参与者添加注释

代码段

sequenceDiagram
    participant A
    participant B
    A->B: 一条重要的消息
    Note over A,B: 这条注释解释了A和B之间的交互。

4.5.2 rect rgb(r,g,b) 为注释添加背景色

你可以为重要的注释添加背景色，使其更醒目。

第一步：使用 rect 关键字包裹

将你的 Note 语句用 rect ... end 包裹起来。

代码段

sequenceDiagram
    participant A
    participant B
    A->B: 关键操作
    
    rect rgb(255, 220, 220) # 使用淡红色背景
        Note over A,B: 警告：此操作不可逆！
    end

• rgb(255, 220, 220) 代表颜色的RGB值。这个例子会给注释添加一个淡红色的背景，起到了很好的警示作用。