思考未来

2026年8月12日

Diagram Design：让编码 Agent 画出更像成品的技术图

让 AI 画架构图并不难，难的是摆脱千篇一律的圆角方框，还要让配色、字体和信息层级真正适合文档或演示。Diagram Design 是一个 MIT 开源的 Agent Skill：它用设计规范、类型参考和可编辑模板，指导 Claude Code、Codex 等编码 Agent 生

让 AI 画架构图并不难，难的是摆脱千篇一律的圆角方框，还要让配色、字体和信息层级真正适合文档或演示。Diagram Design 是一个 MIT 开源的 Agent Skill：它用设计规范、类型参考和可编辑模板，指导 Claude Code、Codex 等编码 Agent 生成自包含的 HTML + SVG 图表。

📌 这个项目是干什么的

项目当前覆盖 27 类图，包括架构图、流程图、时序图、状态机、ER 图、泳道图、甘特图、雷达图和数据流图。每类都提供浅色、深色与完整编辑版示例，产物可直接在浏览器打开，不依赖构建流程、JavaScript 或外部图片。

它不是独立绘图应用，而是一套给 Agent 使用的“设计与执行说明”。顶层 SKILL.md 负责选图和检查，具体类型按需读取各自参考文件，避免一次把全部规则塞进上下文。颜色、字体、留白、强调元素等则统一由 style guide 管理。

🔍 为什么值得关注

第一，它把“审美要求”变成可复用约束。项目限制强调色数量、阴影、圆角、边框和信息密度，迫使 Agent 先删掉无效节点，再突出真正重要的 1～2 个元素。相比一句“画得专业一点”，这类规则更容易稳定复现。

第二，它支持品牌适配。用户可以让 Agent 读取网站首页，提取背景、正文、强调色和字体，映射成语义化设计 token；写入前还会检查正文与背景的 WCAG AA 对比度。团队也可以直接修改 style guide，之后生成的图统一继承。

第三，结果仍可继续加工。HTML 与 SVG 便于检查和修改；官方导出命令可以提取 SVG，或借助 Playwright 生成 PNG，适合放进技术文档、方案汇报和社交媒体图片。

🧪 谁适合试，怎么开始

适合经常写技术方案、产品分析或演示材料，又不想每次从 Figma 空白画布开始的开发者和内容团队。Codex 用户可直接安装：

npx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design

Claude Code 用户可克隆仓库并把内部 Skill 链接到 ~/.claude/skills/diagram-design。安装后先打开项目自带的 HTML 图库，选一个最接近目标的类型，再用一段真实的小型架构测试；需要长期使用时，再完成品牌色与字体配置。

⚠️ 使用提醒

品牌抓取结果不是设计审核：复杂 CSS、动态字体或多套主题可能被识别错误，应用前应检查 token 和对比度。PNG 导出还需要额外安装 Playwright 与 Chromium。图表内容本身也必须人工核对，设计规范只能改善表达，不能保证 Agent 理解的系统关系正确。

项目尚未发布正式 GitHub Release，当前更新直接进入主分支；团队落地时应固定 commit，并对模板修改保留版本记录。它更适合生成可编辑初稿，而不是替代专业设计工具处理高精度排版。

🔗 参考资源