夜雨聆风让 AI 画技术架构图，结果我们都熟悉：一堆圆角方框、阴影、斜线乱飞，一股浓浓的「Mermaid 味」，放在正式文档里根本拿不出手。
最近发现一个很有意思的开源项目 diagram-design，专门解决这个问题——它是一个给 Claude Code、Codex、Pi 用的 Agent Skill，提供「编辑级」的图表生成能力，覆盖架构图、流程图、时序图、状态机、ER 图、象限图、甘特图、数据流等 27 种类型。
输出是自包含的 HTML + SVG：无构建步骤、无 JS 依赖、浏览器直接打开，还能导出 SVG / PNG 放进博客、PPT 和 Figma。更贴心的是，第一次使用时它会主动读取你的网站，提取品牌配色和字体写进样式指南，之后生成的每一张图都长在你的品牌上，而不是通用模板。
它和 Mermaid 的本质区别不在类型多少，而在设计哲学。项目里有一条写死在规则里的原则：「最高质量的动作通常是删除」——信息密度目标 4/10，强调色只允许出现在 1-2 个焦点元素上，连线必须是圆角正交肘线，箭头标签必须悬空留 6px 以上间隙，禁止阴影、禁止大圆角、禁止一堆一模一样的方框。这些过去是设计师的手艺，现在变成了 Agent 必须遵守的硬约束。
空谈无益，我装上之后实际让它画了三张，效果如何大家自己判断：
运行时架构图
焦点色只给了 Agent CLI 一个节点和主链路箭头，外部系统、后端、云各自有固定的视觉语义，底部是统一的图例条——层级一眼分明。
带 hooks 拦截的时序图
实线是调用、虚线是返回与失败路径，珊瑚色只标记「需要人介入」的那一步。这张图和我们上一篇讲的 hooks 验收链路是同一个流程，画出来直接能进技术文档。
项目交付甘特图
里程碑用菱形和焦点色标出，阶段切换用虚线闸门表示，中文标签也能正常排版。
如何安装？
1）Claude Code：/plugin marketplace add cathrynlavery/diagram-design 然后 /plugin install；2）Codex 对应 codex plugin add；3）Pi 直接 pi install 仓库地址。已有的 Mermaid 和 draw.io 文件也可以丢给它重新设计。
如果你经常让 AI 帮你画技术图，这个项目值得装进 Codex / Claude Code。GitHub 指引：github.com/cathrynlavery/diagram-design
END