← 返回首页

💬在线时序图

示例:
📝 代码
🖱️ 图形
{{ charCount }} 字符 / {{ lineCount }} 行 {{ model.actors.length }} 位参与者 / {{ model.steps.length }} 步
{{ lineNumbers }}
⚠️ {{ parseWarn }}
🎛️ 图表设置
标题
编号
👥 参与者 共 {{ model.actors.length }} 位
还没有参与者,先点击右上角 + 新增
{{ i + 1 }}
📜 步骤 共 {{ model.steps.length }} 步
暂无步骤,点击右上角 + 添加步骤 开始绘制
{{ i + 1 }} {{ '│ '.repeat(stepIndent(i)) }}

📖 Mermaid 时序图语法速查 {{ helpCollapsed ? '▼ 展开' : '▲ 收起' }}

sequenceDiagram 必须以此开头
title: 标题 / autonumber 开启自动编号
participant A as 别名 / actor 用户 声明参与者(stick figure 是 actor)
A->>B: 消息 实线箭头(最常用)
A-->>B: 返回 虚线箭头(返回/异步)
A-xB: 失败 / A--xB 同步/异步失败(×号)
A-)B: 异步 / A--)B 异步消息
Note over A,B: 文本 / Note left of A / Note right of A
activate A / deactivate A,或 A->>+B: / A->>-B: 简写
loop 条件 ... end 循环
alt 成功 ... else 失败 ... end 分支
opt 可选 ... end 可选块
par 并行 ... and ... end 并行块
critical / option / end 关键路径块
rect rgb(255,240,200) ... end 彩色背景区域
box 分组名 ... end 参与者分组
%% 注释
{{ Math.round(zoom * 100) }}%
主题:
请输入 Mermaid 代码
⚠️ {{ parseError }}

在线时序图

基于 Mermaid 的专业时序图编辑器:代码/图形双模式切换,图形模式下点点鼠标即可增删参与者、消息、Note、loop/alt/opt/par 等块,完整支持 Mermaid 全部语法;分栏可调、滚轮缩放、主题切换、分享链接、导出 SVG/PNG

本工具由 在线小工具大全 提供,更多 同类工具 可在站内查看。