区分角色与参与者
用明确的生命线区分用户、应用、服务、数据存储和外部系统。
按时间描述系统交互
Mermaid 时序图在线编辑器
在线创建 Mermaid 时序图，描述用户、服务、API 和数据库之间的消息顺序。实时预览交互过程，并导出 SVG 或 PNG。
在线创建 Mermaid 时序图
编辑包含参与者、同步调用、响应和异常分支的请求流程，并同步查看完整交互时间线。
按照真实发生顺序解释系统交互
时序图把参与者和消息排列在同一时间线上，让评审者快速看清职责、依赖关系和失败路径。
表达分支与循环
使用 alt、opt、loop 和 par 块记录条件、重复动作与并发工作。
实时 Mermaid 预览
源码修改后自动更新图表，并在编辑器旁直接显示语法错误。
导出 SVG 和 PNG
下载适合技术文档的矢量 SVG，或适合演示文稿和分享的高清 PNG。
无需本地安装
直接在浏览器中使用，无需安装 Mermaid CLI、桌面应用或编辑器插件。
继续使用 OnUML
将当前源码带入完整编辑器，继续使用 AI 生成、语法修复、分享和项目管理。
如何创建 Mermaid 时序图
先定义参与者，再按照从开始到结束的顺序，只记录解释一个场景所必需的消息。
- 01
列出参与交互的人和系统：人类角色使用 actor，应用、服务或数据存储使用 participant。
- 02
调整参与者顺序，让最重要的请求路径能够自然地从左向右阅读。
- 03
从上到下添加消息，并用动作、命令、事件或有意义的响应结果作为标签。
- 04
仅在条件或重复行为影响理解时使用 alt、opt、loop 或 par 块。
- 05
检查成功与失败路径，然后导出图表或进入完整编辑器继续处理。
Mermaid 时序图语法与评审要点
一张时序图最好只解释一个明确场景。不要把无关工作流强行塞入同一时间线，必要时拆分为多张图。
按职责命名参与者
源码需要技术标识、读者需要清晰名称时可使用别名。每条生命线应保持在一致的抽象层级。
actor Customer as 客户
participant API as 订单接口
participant DB as 订单数据库区分请求与响应
实线箭头适合请求和命令，虚线箭头可以让响应更易识别。消息标签应描述跨越边界的数据或动作。
Customer->>API: 创建订单
API-->>Customer: 返回订单编号使用 alt 表达互斥结果
互斥结果使用 alt，可选交互使用 opt。条件应使用业务语言命名，使图表脱离具体实现后仍然易懂。
alt 支付成功
API-->>Customer: 发送确认信息
else 支付失败
API-->>Customer: 发送重试说明
end时序图与流程图的区别
参与者之间的消息顺序是重点时使用时序图；决策和可选路径比消息发送者更重要时使用流程图。
Mermaid 时序图示例
默认示例展示请求如何从用户经过 Web 应用、API 和数据库，并分别处理成功与校验失败两种结果。
sequenceDiagram
actor User as 用户
participant Web as Web 应用
participant API as 接口服务
participant DB as 数据库
User->>Web: 提交请求
Web->>API: 发送创建请求
API->>DB: 保存请求
DB-->>API: 返回请求编号
alt 请求已接受
API-->>Web: 创建成功
Web-->>User: 显示确认信息
else 校验失败
API-->>Web: 返回校验错误
Web-->>User: 显示修改建议
end相关 Mermaid 工具
继续使用通用编辑器，浏览本批工具目录，或用相关建模视角对照当前图表。
常见问题
什么是 Mermaid 时序图在线编辑器？
它是一款用于编写 Mermaid sequenceDiagram 语法、预览参与者交互并导出 SVG 或 PNG 的浏览器工具。
actor 和 participant 有什么区别？
两者都会创建生命线。actor 通常显示为人物角色，适合用户或外部角色；participant 通常用于应用、服务和数据存储。
如何表示成功和失败路径？
使用带 else 分支的 alt 块，在 alt 后写明结果条件，并只保留各分支中真正不同的消息。
Mermaid 时序图可以表示循环吗？
可以。把重复消息放入 loop 块，并用控制重复的条件或次数范围标记该循环。
可以把时序图导出为 SVG 或 PNG 吗？
可以。SVG 在任意缩放比例下保持清晰，PNG 适合演示文稿和支持图片附件的系统。
一张时序图应该包含多少细节？
只保留为一个目标读者回答一个交互问题所需的细节。如果无关场景、底层调用或过多参与者遮蔽主路径，应拆分图表。