Diagram Design状态机图实战状态迁移与守卫条件的可视化表达【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design状态机图State Machine Diagram是表达有限状态逻辑最直观的可视化工具它能把订单状态、认证流程、连接生命周期这类状态迁移过程画得清清楚楚。Diagram Design 项目为 Claude Code 提供了一整套编辑级图表生成技能其中状态机图类型内置了状态迁移、守卫条件、触发事件等完整表达规范让普通用户也能在几分钟内生成设计感十足的状态机图。本文将以一个文章生命周期实战案例带你掌握状态机图的核心要素、绘制规范和常见反模式。上图是 Diagram Design 内置的状态机图示例展示文章从 Draft 草稿到 Archived 归档的完整状态迁移过程Published 状态用珊瑚色高亮一眼抓住重点。什么是状态机图为什么状态迁移可视化如此重要状态机图描述的是一个对象在有限个状态之间如何流转什么时候进入某个状态、什么事件触发迁移、什么条件允许迁移发生。它的价值在于把if/else 到处飞的业务逻辑收敛成一张可以讨论、可以审查的图。典型场景包括 订单状态待支付 → 已支付 → 已发货 → 已完成 认证状态未登录 → 登录中 → 已认证 → 会话过期 表单向导草稿 → 校验中 → 提交成功 任务队列状态排队中 → 执行中 → 重试 → 失败在这些场景里状态迁移可视化直接决定了团队能不能快速对齐什么条件下允许什么变化这也是状态机图在系统设计文档中经久不衰的原因。状态机图的核心三要素状态、迁移与守卫条件按照 Diagram Design 的状态机图规范见 type-state.md一张标准的状态机图由三个核心要素构成1. 状态State——圆角矩形节点每个状态用一个圆角矩形表示节点名称使用 Geist 无衬线字体下方可用等宽字体补充技术性副标签。图中的起始点用实心墨点r6标记结束点用环形点标记读者一眼就能看出流程的入口和出口。2. 迁移Transition——带标签的箭头状态之间的每一次跳转都是一条迁移用弧形箭头表示箭头标签使用 Geist Mono 等宽字体。自循环状态迁移回自身则画在状态节点的上方。3. 守卫条件Guard——迁移的门禁这是状态机图区别于普通流程图的关键迁移不是想走就走的。规范推荐的标签格式是event [guard] / actionevent触发迁移的事件如SUBMIT提交[guard]守卫条件满足才允许迁移如[余额充足]/ action迁移时执行的动作可省略不需要的部分可以直接省略比如只写SUBMIT或SUBMIT [approved]。正因为如此状态迁移可视化才能同时表达什么时候发生和什么条件下发生两层信息。实战案例文章生命周期状态机图回到开篇那张图它展示的是一个 CMS 的文章生命周期共四个状态、五条迁移迁移标签含义Draft → In ReviewSUBMIT提交审核In Review → DraftREJECT · REVISE虚线驳回修改回到草稿In Review → PublishedAPPROVE审核通过正式发布Published → ArchivedEXPIRE过期归档Archived → 结束PURGE彻底删除这张图有三个非常值得学习的细节珊瑚色只给一个状态。Published 是团队最关注的状态所以它是全图唯一的高亮焦点focal。规范的硬性要求是珊瑚色每图最多 1–2 处用多了就等于没有重点。驳回迁移用虚线。REJECT 是从 In Review 回到 Draft 的绕行不是失败用虚线表示可选/回退路径与主流程实线形成清晰对比。归档保留重定向。Archived 状态的下方标注了noindex · hidden · redirect retained让读者明白归档不等于删除——技术细节藏在副标签里不干扰主流程阅读。完整示例可以在 example-state.html极简亮色、example-state-dark.html极简暗色和 example-state-full.html完整编辑版中直接打开查看。状态机图绘制规范让布局清晰可读Diagram Design 对状态机图的布局有一套强制规范详见 SKILL.md 的 §6 连接器规则核心几条沿主导流向排布默认从左到右或从上到下出现交叉迁移前先重新排布节点。连接器必须正交拐弯节点之间的连线禁止斜线一律使用圆角直角r8折线只有起点终点共享同一 X 或 Y 坐标时才允许直线。标签与连线保持 6–10px 间距标签永远不能压在箭头上否则连线看不清。所有坐标、字号、间距都是 4 的倍数这是防止图表看起来AI 生成感的硬性规则。单图预算最多 9 个节点、12 条迁移、2 处珊瑚色高亮超出就拆成总览图 细节图。常见反模式绘制状态机图最容易踩的坑规范明确列出了三类最容易犯的错画之前先自查迁移数超过状态数×2说明这张图很可能混入了两个状态机需要拆分。从任意状态连线画满全图如果某个迁移适用于所有状态直接用一条注释表达例如* → Error on timeout而不是从每个状态各画一条箭头。迁移没有标签状态机图存在的意义就是说明什么触发了这个变化未标注的迁移等于没画。此外还有两个通用反模式值得记住箭头标签没有不透明遮罩会透出连线多个箭头共用盒子同一边缘的同一个附着点时必须沿边展开间距 ≥12px保证每条线独立可追踪。如何快速生成一张状态机图你可以从模板直接起步也可以用自然语言让 Claude Code 帮你生成复制模板开始template.html极简亮色或 template-full.html编辑版直接对 Agent 说画一张订单状态机图待支付 → 已支付 → 已发货 → 已完成允许退款迁移生成后建议用项目自带的校验脚本做一次品味检查self_check.py 会检查无障碍 SVG 契约和单文件安全性几何校验脚本 verify-geometry.py 会验证标签遮罩是否与节点重叠。如果希望在演示时让状态按顺序逐步显现可以选用可访问动效reveal/step模式但要注意默认输出始终是静态的动效只是可选增强且遵循reveal 是唯一允许的自动播放模式这一设计决策见 0003-reveal-is-the-only-sanctioned-autoplay.md在prefers-reduced-motion下始终显示完整静态画面。状态机图之外的更多选择Diagram Design 共内置 29 种编辑级图表类型状态机图只是其中之一。如果业务场景是时间顺序的消息交互可以用序列图是决策分支逻辑用流程图更合适是跨部门协作流程则建议用泳道图。每种类型都有独立的类型参考文档比如 type-sequence.md、type-flowchart.md全部图表可以直接在浏览器中打开 index.html 画廊预览。一句话总结状态机图的核心不在画几个框而在状态迁移和守卫条件的准确表达。用好 Diagram Design 的这套规范你得到的不仅是一张好看的图更是一份能被团队准确理解的业务契约。【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Diagram Design状态机图实战：状态迁移与守卫条件的可视化表达
Diagram Design状态机图实战状态迁移与守卫条件的可视化表达【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design状态机图State Machine Diagram是表达有限状态逻辑最直观的可视化工具它能把订单状态、认证流程、连接生命周期这类状态迁移过程画得清清楚楚。Diagram Design 项目为 Claude Code 提供了一整套编辑级图表生成技能其中状态机图类型内置了状态迁移、守卫条件、触发事件等完整表达规范让普通用户也能在几分钟内生成设计感十足的状态机图。本文将以一个文章生命周期实战案例带你掌握状态机图的核心要素、绘制规范和常见反模式。上图是 Diagram Design 内置的状态机图示例展示文章从 Draft 草稿到 Archived 归档的完整状态迁移过程Published 状态用珊瑚色高亮一眼抓住重点。什么是状态机图为什么状态迁移可视化如此重要状态机图描述的是一个对象在有限个状态之间如何流转什么时候进入某个状态、什么事件触发迁移、什么条件允许迁移发生。它的价值在于把if/else 到处飞的业务逻辑收敛成一张可以讨论、可以审查的图。典型场景包括 订单状态待支付 → 已支付 → 已发货 → 已完成 认证状态未登录 → 登录中 → 已认证 → 会话过期 表单向导草稿 → 校验中 → 提交成功 任务队列状态排队中 → 执行中 → 重试 → 失败在这些场景里状态迁移可视化直接决定了团队能不能快速对齐什么条件下允许什么变化这也是状态机图在系统设计文档中经久不衰的原因。状态机图的核心三要素状态、迁移与守卫条件按照 Diagram Design 的状态机图规范见 type-state.md一张标准的状态机图由三个核心要素构成1. 状态State——圆角矩形节点每个状态用一个圆角矩形表示节点名称使用 Geist 无衬线字体下方可用等宽字体补充技术性副标签。图中的起始点用实心墨点r6标记结束点用环形点标记读者一眼就能看出流程的入口和出口。2. 迁移Transition——带标签的箭头状态之间的每一次跳转都是一条迁移用弧形箭头表示箭头标签使用 Geist Mono 等宽字体。自循环状态迁移回自身则画在状态节点的上方。3. 守卫条件Guard——迁移的门禁这是状态机图区别于普通流程图的关键迁移不是想走就走的。规范推荐的标签格式是event [guard] / actionevent触发迁移的事件如SUBMIT提交[guard]守卫条件满足才允许迁移如[余额充足]/ action迁移时执行的动作可省略不需要的部分可以直接省略比如只写SUBMIT或SUBMIT [approved]。正因为如此状态迁移可视化才能同时表达什么时候发生和什么条件下发生两层信息。实战案例文章生命周期状态机图回到开篇那张图它展示的是一个 CMS 的文章生命周期共四个状态、五条迁移迁移标签含义Draft → In ReviewSUBMIT提交审核In Review → DraftREJECT · REVISE虚线驳回修改回到草稿In Review → PublishedAPPROVE审核通过正式发布Published → ArchivedEXPIRE过期归档Archived → 结束PURGE彻底删除这张图有三个非常值得学习的细节珊瑚色只给一个状态。Published 是团队最关注的状态所以它是全图唯一的高亮焦点focal。规范的硬性要求是珊瑚色每图最多 1–2 处用多了就等于没有重点。驳回迁移用虚线。REJECT 是从 In Review 回到 Draft 的绕行不是失败用虚线表示可选/回退路径与主流程实线形成清晰对比。归档保留重定向。Archived 状态的下方标注了noindex · hidden · redirect retained让读者明白归档不等于删除——技术细节藏在副标签里不干扰主流程阅读。完整示例可以在 example-state.html极简亮色、example-state-dark.html极简暗色和 example-state-full.html完整编辑版中直接打开查看。状态机图绘制规范让布局清晰可读Diagram Design 对状态机图的布局有一套强制规范详见 SKILL.md 的 §6 连接器规则核心几条沿主导流向排布默认从左到右或从上到下出现交叉迁移前先重新排布节点。连接器必须正交拐弯节点之间的连线禁止斜线一律使用圆角直角r8折线只有起点终点共享同一 X 或 Y 坐标时才允许直线。标签与连线保持 6–10px 间距标签永远不能压在箭头上否则连线看不清。所有坐标、字号、间距都是 4 的倍数这是防止图表看起来AI 生成感的硬性规则。单图预算最多 9 个节点、12 条迁移、2 处珊瑚色高亮超出就拆成总览图 细节图。常见反模式绘制状态机图最容易踩的坑规范明确列出了三类最容易犯的错画之前先自查迁移数超过状态数×2说明这张图很可能混入了两个状态机需要拆分。从任意状态连线画满全图如果某个迁移适用于所有状态直接用一条注释表达例如* → Error on timeout而不是从每个状态各画一条箭头。迁移没有标签状态机图存在的意义就是说明什么触发了这个变化未标注的迁移等于没画。此外还有两个通用反模式值得记住箭头标签没有不透明遮罩会透出连线多个箭头共用盒子同一边缘的同一个附着点时必须沿边展开间距 ≥12px保证每条线独立可追踪。如何快速生成一张状态机图你可以从模板直接起步也可以用自然语言让 Claude Code 帮你生成复制模板开始template.html极简亮色或 template-full.html编辑版直接对 Agent 说画一张订单状态机图待支付 → 已支付 → 已发货 → 已完成允许退款迁移生成后建议用项目自带的校验脚本做一次品味检查self_check.py 会检查无障碍 SVG 契约和单文件安全性几何校验脚本 verify-geometry.py 会验证标签遮罩是否与节点重叠。如果希望在演示时让状态按顺序逐步显现可以选用可访问动效reveal/step模式但要注意默认输出始终是静态的动效只是可选增强且遵循reveal 是唯一允许的自动播放模式这一设计决策见 0003-reveal-is-the-only-sanctioned-autoplay.md在prefers-reduced-motion下始终显示完整静态画面。状态机图之外的更多选择Diagram Design 共内置 29 种编辑级图表类型状态机图只是其中之一。如果业务场景是时间顺序的消息交互可以用序列图是决策分支逻辑用流程图更合适是跨部门协作流程则建议用泳道图。每种类型都有独立的类型参考文档比如 type-sequence.md、type-flowchart.md全部图表可以直接在浏览器中打开 index.html 画廊预览。一句话总结状态机图的核心不在画几个框而在状态迁移和守卫条件的准确表达。用好 Diagram Design 的这套规范你得到的不仅是一张好看的图更是一份能被团队准确理解的业务契约。【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考