状态图
使用 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」直接粘贴到你的项目中。