状态图
使用 Mermaid 语法在线创建状态图，描述系统或组件的状态转换逻辑，支持导出 SVG/PNG。
在左侧输入 Mermaid 代码以查看预览
状态图（State Diagram）用于描述系统、组件或业务流程中的有限状态及其转换条件，是行为建模的核心 UML 图表。Mermaid 的 stateDiagram-v2 语法支持初始/终态（[*]）、普通状态、转换条件标注、组合状态（嵌套状态机）和并发状态（using fork/join）。在前端开发中，状态图常用于描述 UI 组件的交互状态（如按钮的默认-悬停-点击-禁用）；在后端系统中，常用于订单状态流转、工单审批流程等业务建模。与代码并行维护的状态图文档，能有效降低新成员理解复杂状态逻辑的成本，是代码审查和架构评审的重要辅助工具。
为什么选择 Zolkit Mermaid 图表生成器？
Zolkit Mermaid 图表生成器是一款纯浏览器工具，无需注册账号、无需安装插件，代码即图，所见即所得。支持 10 种 Mermaid 图表类型，从软件架构图到项目计划甘特图，一键导出 SVG 矢量图或 PNG 位图，满足文档、演示和代码仓库的各种需求。
实时预览
边输入边渲染，无延迟反馈，帮助你快速验证图表语法。
10 种图表类型
支持流程图、时序图、类图、ER 图、甘特图、状态图、思维导图、Git 图、饼图和时间线。
导出 SVG 和 PNG
SVG 无损缩放，PNG 适合截图插入文档，满足不同使用场景。
内置代码示例
每种图表类型均内置可运行示例，一键加载，快速上手。
完全在浏览器中运行
代码和图表数据不离开你的设备，无隐私泄露风险。
免费无限制使用
无需注册，无使用次数限制，随时随地使用。
如何使用
- 1
在左侧代码框中输入或粘贴 Mermaid 语法，右侧即时显示图表预览。
- 2
点击「加载示例」快速获取各图表类型的标准代码模板。
- 3
图表满意后，点击「导出 SVG」或「导出 PNG」保存图表，或点击「复制 SVG」直接粘贴到你的项目中。
常见问题
stateDiagram 和 stateDiagram-v2 有什么区别？
stateDiagram-v2 是推荐使用的版本，支持更多特性包括并发状态和嵌套状态机，语法也更加规范。旧版 stateDiagram 已不推荐使用。
如何表示嵌套状态？
使用 state 名称 { ... } 语法定义复合状态，内部可包含子状态和转换，适合表示具有子流程的复杂状态。
如何表示并发状态（并行区域）？
在复合状态内用 -- 分隔并发区域：state 并发状态 { 区域1状态 -- 区域2状态 }，表示同时处于两个子状态。
如何为转换添加动作（action）？
在转换条件后用斜杠添加动作：A --> B : 事件 / 动作，表示触发事件时执行的操作。这是 UML 标准语法，有助于描述副作用。