Mermaid 时序图 #

时序图（Sequence Diagram）用于展示对象之间的交互时序和消息传递顺序，是UML交互图的一种。

基本语法 #

1. 参与者定义 #

时序图的核心是参与者（Participant），可以是对象、角色或系统组件。

mermaid 
sequenceDiagram
  participant A
  participant B
  participant C
  A->>B: 消息1
  B->>C: 消息2
  C-->>B: 响应2
  B-->>A: 响应1

2. 参与者别名 #

可以为参与者设置别名，提高可读性：

mermaid 
sequenceDiagram
  participant Client as 客户端
  participant Server as 服务器
  participant DB as 数据库
  
  Client->>Server: 请求数据
  Server->>DB: 查询数据
  DB-->>Server: 返回结果
  Server-->>Client: 返回响应

消息类型 #

1. 同步消息（实线箭头） #

表示阻塞式的消息传递，发送方等待接收方响应：

mermaid 
sequenceDiagram
  participant A
  participant B
  A->>B: 同步消息

2. 异步消息（虚线箭头） #

表示非阻塞式的消息传递，发送方不等待接收方响应：

mermaid 
sequenceDiagram
  participant A
  participant B
  A-->>B: 异步消息

3. 带返回值的消息 #

mermaid 
sequenceDiagram
  participant A
  participant B
  A->>B: 请求()
  B-->>A: 响应(结果)

4. 自引用消息 #

参与者可以向自己发送消息：

mermaid 
sequenceDiagram
  participant A
  A->>A: 内部处理

激活状态 #

激活状态用于表示参与者正在处理消息：

1. 手动激活/停用 #

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  activate B
  B->>B: 内部处理
  B-->>A: 响应
  deactivate B

2. 自动激活 #

使用+和-符号可以自动激活和停用参与者：

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>+B: 请求（自动激活B）
  B->>-A: 响应（自动停用B）

3. 嵌套激活 #

mermaid 
sequenceDiagram
  participant A
  participant B
  participant C
  
  A->>+B: 请求1
  B->>+C: 请求2
  C-->>-B: 响应2
  B-->>-A: 响应1

注释与说明 #

1. 注释 #

可以在参与者上方添加注释：

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  Note over A,B: 处理中...
  B-->>A: 响应

2. 单边注释 #

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  Note right of A: 等待响应
  B-->>A: 响应
  Note left of B: 处理完成

3. 框注 #

可以使用rect和end创建框注：

mermaid 
sequenceDiagram
  participant A
  participant B
  
  rect rgb(191, 223, 255)
    A->>B: 安全请求
    B-->>A: 安全响应
  end

循环与条件 #

1. 循环 #

mermaid 
sequenceDiagram
  participant A
  participant B
  
  loop 10次
    A->>B: 请求
    B-->>A: 响应
  end

2. 条件分支 #

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  alt 条件1
    B-->>A: 响应1
  else 条件2
    B-->>A: 响应2
  else 其他
    B-->>A: 默认响应
  end

3. 可选部分 #

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  opt 可选处理
    B->>B: 额外处理
  end
  B-->>A: 响应

并行处理 #

使用par和and可以表示并行处理：

mermaid 
sequenceDiagram
  participant A
  participant B
  participant C
  participant D
  
  A->>B: 请求1
  par 并行处理
    B->>C: 子任务1
  and
    B->>D: 子任务2
  end
  B-->>A: 响应1

高级功能 #

1. 生命线样式 #

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  B-->>A: 响应
  
  %% 设置生命线样式
  style A fill:#f9f,stroke:#333,stroke-width:2px;
  style B fill:#bbf,stroke:#333,stroke-width:2px;

2. 延迟 #

可以使用...表示延迟：

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>B: 请求
  ... 等待5秒 ...
  B-->>A: 响应

3. 损坏消息 #

使用x符号表示消息传递失败：

mermaid 
sequenceDiagram
  participant A
  participant B
  
  A->>xB: 失败的消息
  A--x B: 另一种失败表示

最佳实践 #

  1. 保持清晰：避免在单个时序图中包含过多参与者和消息
  2. 合理命名：为参与者和消息使用清晰、简洁的名称
  3. 使用激活状态：通过激活状态清晰展示处理流程
  4. 适当分组：使用循环、条件和并行等结构组织复杂逻辑
  5. 添加注释：对复杂流程添加说明，提高可读性

常见问题 #

问题：参与者顺序混乱 #

解决方案：在时序图开头显式定义所有参与者的顺序

问题：激活状态显示不正确 #

解决方案：确保每个activate都有对应的deactivate，或使用+/-符号

问题：循环和条件不生效 #

解决方案：确保循环和条件结构正确嵌套，使用正确的语法

完整示例 #

下面是一个完整的用户登录时序图示例：

mermaid 
sequenceDiagram
  participant User as 用户
  participant Client as 客户端应用
  participant Server as 服务器
  participant DB as 数据库
  participant Cache as 缓存
  
  User->>Client: 输入用户名密码
  Client->>Server: POST /login {username, password}
  
  rect rgb(200, 255, 200)
    Server->>Server: 验证请求
    Server->>DB: SELECT * FROM users WHERE username = ?
    DB-->>Server: 返回用户信息
    
    alt 用户存在且密码正确
      Server->>Cache: SET user:session:{sessionId} {userId, role}
      Server-->>Client: 200 OK {sessionId, userInfo}
      Client->>Client: 存储sessionId
    else 用户不存在或密码错误
      Server-->>Client: 401 Unauthorized {message: "用户名或密码错误"}
    end
  end
  
  Client-->>User: 显示登录结果
最后更新：2026-02-08