Mermaid Viewer 文档

简体中文

English
日本語
한국어

简体中文

English
日本語
한국어

Appearance

时序图 ​

时序图用于展示进程之间如何操作，以及操作的顺序。它们非常适合用来记录系统交互过程。

语法 ​

基本元素 ​

  • 参与者: participant A 或 actor A
  • 消息:
    • 实线: ->
    • 虚线: -->
    • 实线带箭头: ->>
    • 虚线带箭头: -->>
  • 激活框: activate 和 deactivate
  • 注释: Note left of, Note right of, Note over
  • 循环: loop [文本]
  • 条件分支: alt [文本] 和 else [文本]
  • 可选路径: opt [文本]
  • 并行路径: par [文本]

基础示例 ​

代码:
mermaid
sequenceDiagram
    participant 浏览器
    participant 服务器
    
    浏览器->>服务器: GET /api/data
    activate 服务器
    服务器-->>浏览器: 返回数据
    deactivate 服务器
Ctrl + Enter|

高级示例 ​

这是一个展示各种特性的复杂时序图：

代码:
mermaid
sequenceDiagram
    actor 用户
    participant 客户端
    participant 服务器
    participant 数据库

    用户->>客户端: 启动应用
    activate 客户端
    
    客户端->>服务器: 请求认证
    activate 服务器
    
    服务器->>数据库: 查询用户
    activate 数据库
    数据库-->>服务器: 返回用户数据
    deactivate 数据库
    
    alt 用户有效
        服务器-->>客户端: 认证成功
        客户端-->>用户: 显示仪表板
    else 用户无效
        服务器-->>客户端: 认证失败
        客户端-->>用户: 显示错误
    end
    
    deactivate 服务器
    deactivate 客户端
Ctrl + Enter|

附加功能 ​

注释 ​

代码:
mermaid
sequenceDiagram
    participant A
    participant B
    Note left of A: 左侧注释
    Note right of B: 右侧注释
    Note over A,B: 跨参与者注释
Ctrl + Enter|

循环 ​

代码:
mermaid
sequenceDiagram
    participant A
    participant B
    loop 每分钟
        A->>B: 心跳检测
        B-->>A: 响应
    end
Ctrl + Enter|

样式设置 ​

你可以使用这些指令来自定义外观：

  • autonumber - 自动为消息编号
  • participant A as "显示名称" - 使用别名
  • 可以通过 CSS 应用颜色和其他样式

实用技巧 ​

  • 保持图表聚焦于关键交互
  • 使用清晰简洁的消息描述
  • 使用循环或 alt/opt 块来分组相关交互
  • 添加注释来解释复杂的交互
  • 考虑使用别名来简化长参与者名称

常见问题解决 ​

  1. 布局问题

    • 减少参与者数量
    • 使用注释代替过长的消息
    • 适当使用分组来组织消息

  2. 可读性问题

    • 使用有意义的参与者名称
    • 保持消息描述简洁
    • 适当使用空间和分组

  3. 复杂性管理

    • 将复杂交互分解为多个图
    • 使用注释说明关键点
    • 使用合适的分组机制

下一步 ​