事件与转换
用命令、事件或条件标注状态之间的转换。
生命周期与状态转换建模
Mermaid 状态图在线编辑器
在线创建 Mermaid 状态图，描述生命周期状态、转换、事件或条件标签、选择节点和终止结果，实时预览并导出 SVG 或 PNG。
在线创建 Mermaid 状态图
编辑包含事件、选择节点和终止结果的订单生命周期，并检查每条转换是否清晰。
在实现前明确生命周期规则
状态图展示接下来允许发生什么、哪个事件触发转换，以及对象或流程从哪里开始和结束。
选择与终止状态
使用文字标注条件结果、分支判断以及明确的进入和完成节点。
实时 Mermaid 预览
修改源码时同步查看渲染结果，并在源码旁直接检查语法反馈。
无需本地安装
直接在现代浏览器中使用，无需安装 Mermaid CLI、桌面应用或编辑器插件。
继续使用 OnUML
将当前源码带入完整编辑器，继续使用 AI 生成、修复、分享和项目管理。
如何创建 Mermaid 状态图
先定义稳定状态，再添加合法转换，并标注触发转换的事件或条件。
- 01
选择一个需要解释生命周期的对象。
- 02
列出稳定状态，而不是短暂的实现动作。
- 03
添加转换，并用有意义的事件、命令或条件文字标注。
- 04
在影响生命周期含义时标记初始、终止、选择和复合状态。
- 05
导出前检查不可达状态和缺失的恢复路径。
Mermaid 状态图语法与生命周期设计
有效的状态图会区分持续状态与动作，并在设计评审中暴露无效或缺失的状态转换。
用状态表示稳定条件
状态应持续到事件发生；动作和命令应放在转换上，而不是都变成状态。
标明转换触发条件
提交、批准、超时或取消等标签能说明生命周期为何变化，并暴露缺失规则。
使用选择节点展示条件结果
当一次转换会根据不同条件进入多个状态时，可以使用 choice 节点和条件标签；Mermaid 只显示标签，不会执行或校验条件。
状态图与流程图的区别
一个对象的生命周期使用状态图；工作经过的步骤、判断和路径使用流程图。
Mermaid 状态图示例
示例从草稿进入提交和审核，再根据审核结果进入批准或驳回修改。
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : 提交
Submitted --> Review
state Review <<choice>>
Review --> Approved : 校验通过
Review --> Rejected : 校验失败
Approved --> [*]
Rejected --> Draft : 修改比较状态建模
Mermaid 与 PlantUML 状态图对比
比较语法、嵌套状态、生命周期表示和两种文本图表工具的建模深度。
阅读状态图对比 →相关 Mermaid 工具
继续使用通用编辑器，浏览本批工具目录，或用相关建模视角对照当前图表。
常见问题
什么是 Mermaid 状态图在线编辑器？
它是在浏览器中编写 stateDiagram-v2 语法、预览生命周期并导出 SVG 或 PNG 的工具。
如何表示初始状态？
使用 [*] 连接第一个状态；把 [*] 作为目标可以表示终止结果。
可以给状态转换添加标签吗？
可以，在目标状态后添加冒号，再写事件、命令或条件说明。它们是显示文本，Mermaid 不会执行或校验这些条件。
Mermaid 可以表示判断节点吗？
可以，使用 <<choice>> 声明选择状态，再连接到不同条件结果。
可以导出 SVG 或 PNG 吗？
可以，确认实时预览后即可下载 SVG 或 PNG。
状态图和流程图有什么区别？
状态图解释一个对象允许的生命周期转换，流程图解释过程中的步骤和判断。