什么是状态图？
状态图，也称为状态机图，可视化对象或系统可能处于的不同状态以及如何响应事件在状态之间转换。它们对于建模生命周期行为、工作流和复杂条件逻辑至关重要。每个状态代表一个稳定的条件，而转换显示导致状态变化的触发器。
编辑与预览
使用 Mermaid 语法创建 状态图，实时查看效果。
常见使用场景
应用状态管理
建模 UI 状态、表单验证流程和应用程序模式。对于在 React 或 Vue 等前端框架中设计状态机至关重要。
工作流建模
设计审批工作流、订单处理状态和工单生命周期管理。为业务流程映射状态转换和守卫条件。
协议设计
可视化网络协议状态、连接生命周期和通信状态机。对于嵌入式系统和物联网设备编程至关重要。
游戏开发
建模角色状态、游戏模式和关卡进度。为 AI 行为和游戏机制设计有限状态机。
核心功能
状态类型
支持简单状态、复合状态以及初始、最终和选择伪状态等特殊状态。
转换守卫
使用守卫条件和在状态变化期间执行的操作定义条件转换。
嵌套状态
创建具有父状态和子状态的分层状态机，用于建模复杂行为。
并发状态
为具有并发行为的系统建模并行状态机和正交区域。
最佳实践
从简单开始
从高级状态开始，逐步细化。使用复合状态在需要之前隐藏复杂性。
将状态命名为条件
使用形容词或过去分词（例如「活动」、「暂停」、「已完成」）而不是动词。
记录转换
用事件、守卫条件和操作标记所有转换。每个箭头都应该讲述一个清晰的故事。
避免状态爆炸
如果有太多状态，寻找模式来组合它们或使用状态变量。
探索其他图表类型
流程图
用节点和方向箭头可视化流程、工作流和算法。非常适合业务流程和决策树。
时序图
记录不同参与者或系统之间的时序交互。非常适合 API 文档和系统设计。
类图
用类、属性和关系建模面向对象系统。软件架构规划的必备工具。
甘特图
规划和跟踪项目时间线、任务和依赖关系。非常适合项目管理和进度安排。
ER 图
设计包含实体和关系的数据库架构。非常适合数据库建模和文档编写。
用户旅程图
绘制用户在各个接触点的体验和交互。非常适合用户体验设计和客户旅程分析。
Git 图
可视化 Git 分支策略和提交历史。有助于解释版本控制工作流。
思维导图
组织创意、头脑风暴和创建层次化视觉结构。适合规划和知识管理。
饼图
以圆形图表展示数据比例分布。适合显示百分比和市场份额分析。
时间线
沿时间轴可视化事件和里程碑。适合项目历史和路线图展示。
看板
将任务按工作流阶段组织到列中。适合敏捷项目管理和任务追踪。
四象限图
在双轴网格上绘制项目进行比较和优先级排序。适合功能优先级和战略分析。
桑基图
用比例箭头可视化节点间的流量。适合能源流、预算分配和转化漏斗。
XY 图表
创建带有可自定义坐标轴的柱状图和折线图。适合数据可视化和趋势分析。
块状图
用行列排列的块构建结构化布局。适合系统架构和组件概览。
架构图
使用服务图标和连接设计云和系统架构。适合基础设施文档。
数据包图
可视化网络协议数据包结构和位级字段布局。适合网络协议文档。