participant 和 actor 有什么区别？

participant 渲染为矩形框，actor 渲染为人形图标。在描述用户交互时通常用 actor 表示用户，其余系统组件用 participant。

如何表示异步消息？

使用 ->> 表示异步消息（虚线箭头），使用 -> 或 ->> 的区别在于是否有箭头头部，-->> 表示虚线回复。

如何在时序图中添加备注（note）？

使用 Note right of 参与者: 文本或 Note over 参与者1,参与者2: 文本语法添加备注框。

如何表示条件分支？

使用 alt 条件 ... else 其他情况 ... end 结构表示条件分支，适合描述成功/失败两种响应路径。

时序图

Q: 如何在时序图中添加备注（note）？

使用 Note right of 参与者: 文本 或 Note over 参与者1,参与者2: 文本 语法添加备注框。

使用 Mermaid 语法在线创建时序图，清晰展示系统组件间的交互流程，支持导出 SVG/PNG。

Mermaid 代码

预览

在左侧输入 Mermaid 代码以查看预览

时序图（Sequence Diagram）是 UML 规范中的重要图表，用于描述对象或系统组件之间按时间顺序发生的消息交互。在 API 设计、微服务架构和前后端协作中，时序图能清晰呈现请求-响应流程。Mermaid 的 sequenceDiagram 语法支持参与者声明、同步/异步消息、自调用、激活框、循环（loop）、条件（alt/else）和并行（par）等常用 UML 元素。与手动绘图相比，文本化的时序图可随代码变更同步更新，避免文档与实现脱节。典型应用包括：OAuth 授权流程、支付系统交互、WebSocket 连接生命周期等。本工具支持 Mermaid v11 所有时序图语法。

为什么选择 Zolkit Mermaid 图表生成器？

Zolkit Mermaid 图表生成器是一款纯浏览器工具，无需注册账号、无需安装插件，代码即图，所见即所得。支持 10 种 Mermaid 图表类型，从软件架构图到项目计划甘特图，一键导出 SVG 矢量图或 PNG 位图，满足文档、演示和代码仓库的各种需求。

实时预览

边输入边渲染，无延迟反馈，帮助你快速验证图表语法。

10 种图表类型

支持流程图、时序图、类图、ER 图、甘特图、状态图、思维导图、Git 图、饼图和时间线。

导出 SVG 和 PNG

SVG 无损缩放，PNG 适合截图插入文档，满足不同使用场景。

内置代码示例

每种图表类型均内置可运行示例，一键加载，快速上手。

完全在浏览器中运行

代码和图表数据不离开你的设备，无隐私泄露风险。

免费无限制使用

无需注册，无使用次数限制，随时随地使用。

如何使用

1
在左侧代码框中输入或粘贴 Mermaid 语法，右侧即时显示图表预览。
2
点击「加载示例」快速获取各图表类型的标准代码模板。
3
图表满意后，点击「导出 SVG」或「导出 PNG」保存图表，或点击「复制 SVG」直接粘贴到你的项目中。

时序图

相关图表