免费在线状态图编辑器

使用状态图可视化状态机和系统行为。使用简单文本建模状态、转换和事件。

创建状态图

核心功能

  • 定义状态和转换
  • 显示初始和最终状态
  • 添加转换条件和动作
  • 支持嵌套状态
  • 实时图表渲染
  • 导出为 SVG 或 PNG 格式

常见使用场景

  • 建模系统行为
  • 记录应用程序状态
  • 设计用户界面流程
  • 可视化工作流状态
  • 规划有限状态机
  • 创建协议规范

状态图 示例

stateDiagram-v2
  [*] --> 空闲
  空闲 --> 加载中: 开始
  加载中 --> 成功: ok
  加载中 --> 错误: 失败
  成功 --> [*]
  错误 --> 空闲: 重试
试用此示例

为什么使用这个 状态图 编辑器？

我们的免费在线 状态图 编辑器让你可以通过简单的文本语法轻松创建专业图表。无需安装 - 直接输入即可实时看到图表渲染结果。

该编辑器基于 Mermaid.js，提供即时预览、SVG/PNG 导出和 URL 分享能力。非常适合开发者、技术写作者、项目经理以及任何需要快速创建清晰专业图表的人。

如何创建状态图

  1. 先从 状态图 对应的 Mermaid 关键字开始。
  2. 用清晰的名称定义主要元素。
  3. 用箭头或关系线连接各元素。
  4. 为决策、事件或条件添加标签。
  5. 将相关部分按分组或子图组织。
  6. 检查预览并修复语法错误。
  7. 保持布局与命名的一致性。
  8. 导出为 SVG/PNG，或通过 URL 分享。

状态图最佳实践

  • 每个图聚焦一个明确目标。
  • 使用简短且清晰的标签。
  • 保持命名规范一致。
  • 突出关键路径。
  • 将大型图拆分为更小模块。
  • 补充边界情况和错误路径。
  • 与团队一起评审图内容。
  • 逻辑变化时及时更新图。

状态图高级功能

自定义样式

使用主题变量和类定义，突出 状态图 中的重要部分。

分组与分段

按模块、团队或流程阶段组织 状态图。

注释与说明

添加简短说明，记录规则、假设和设计决策。

可复用模式

复用常见片段，更快创建相似图表。

状态图常见错误

  • ⚠️节点或参与者命名含糊或重复。
  • ⚠️关键连线缺少标签。
  • ⚠️单个图中元素过多。
  • ⚠️记法混用，缺乏一致性。
  • ⚠️在需要时缺少开始或结束节点。
  • ⚠️未展示错误或替代路径。
  • ⚠️过度样式化影响可读性。
  • ⚠️修改后未进行验证。

何时使用状态图而非其他图表

状态图 适合用于清晰表达这一类视图。若要展示交互顺序，请使用 时序图；若要展示状态变化，请使用 状态图；数据建模请用 ER 图；时间规划请用 甘特图。

常见问题

关于使用 Mermaid Viewer 和创建图表的常见问题