状态图可视化系统如何在不同状态间响应事件而转换。对于建模用户界面、订单生命周期、认证流程等具有明确状态和转换的过程至关重要。
Mermaid 状态图让你用文本代码定义这些模型 — 可版本控制、AI 友好、即时渲染。
基础语法
| 元素 | 语法 | 示例 |
|---|---|---|
| 起始状态 | [*] | [*] --> FirstState |
| 结束状态 | [*] | LastState --> [*] |
| 转换 | --> | StateA --> StateB : event |
电商订单状态机示例
复合状态
最佳实践
- 状态名使用 PascalCase
- 转换标签用过去式事件名
- 保持 15 个状态以内
- 用复合状态分组相关转换
- 在 Mermaid2Img 中验证后再嵌入文档
导出状态图
将代码粘贴到 Mermaid2Img 预览并导出 PNG、SVG 或 PDF。
常见问题
状态图和流程图有什么区别？
流程图展示处理步骤和决策。状态图展示实体如何在定义的状态间响应事件转换。
能在 GitHub README 中使用吗？
可以。GitHub 原生支持 Mermaid 状态图渲染。