diagram-design：给 AI 智能体装上”编辑部级”画图能力，45,500 星

每次让 Claude 画个架构图，出来的都是一堆圆角方块加箭头，跟你的网站毫无关系。diagram-design 解决了这个问题：一个 45,500 星的开源技能包，让 Claude Code、Codex、GitHub Copilot 等 AI 智能体生成”编辑部级”的 SVG 图表——42 种图表类型，自动匹配你的品牌色，60 秒完成。

为什么是 42 种，而不是 10 种

diagram-design 的 42 种图表类型覆盖了几乎所有技术文档场景：架构（组件 + 连接）、流程图、时序图、状态机、ER 数据模型、时间线、泳道图、四象限、雷达图、循环/飞轮、树形图、组织架构图、层级栈、文氏图、金字塔/漏斗、柱状图、树图、折线图、甘特图、散点图、部署图、依赖图、UML 类图、故事地图、数据库 schema、桑基图、鱼骨图、Wardley 地图、看板图、用户旅程图等。每种类型有三种变体：极简浅色、极简深色、完整编辑部风格——直接在浏览器打开，无构建步骤、无 JavaScript、无外部依赖，纯 HTML + SVG。

更聪明的是”语义模式”设计：队列、策略追踪、信任边界这类概念可以复用最近的图表类型，不需要为每个新概念发明一个新类型。”最高的质量动作通常是删除——每个节点都要挣得自己的位置。强调色只留给读者应该最先看到的 1-2 个元素。目标密度：4/10。”这套设计哲学直接写进了技能文档里。

自动匹配品牌：读你的网站，60 秒出图

diagram-design 的杀手级功能是品牌匹配：技能会读取你的网站（比如 littlemight.com），提取主色、字体风格、设计语言，然后生成的图表自动匹配。你不需要在 Figma 里花 30 分钟选颜色，不需要手动调 SVG 样式。”没有 Figma。没有通用圆角方块。没有 30 分钟的颜色选择会话。”2.0 版本新增了 Loop 图表（带共享内存中心的飞轮），2.5.10 版本新增了 10 种布局语法（桑基图、鱼骨图、Wardley 地图、看板、用户旅程、部署、依赖图、UML 类图、故事地图、数据库 schema）。

还能重绘现有图表

diagram-design 不只是生成新图表——它还能重绘现有的 draw.io、Mermaid、Excalidraw 文件。你有一个用 Mermaid 写的丑流程图？给它一个 draw.io 文件？diagram-design 会以你选择的格式、尺寸和详细程度重新绘制，输出统一的编辑部风格。这对维护技术文档的团队特别有价值：不需要统一所有图表工具的样式，只需要在发布前跑一次 diagram-design 重绘。

项目有 265 次提交、2.9k fork、130 人在 watch，由 Cathryn Lavery（littlemight.com 作者、BestSelf.co 运营者）维护。MIT 许可证，支持 Claude Code、Codex、Factory Droid、Pi 和所有 Agent Skills 兼容的主机。45,500 星说明它解决的是一个普遍痛点：AI 生成的图表质量参差不齐，而技术文档的视觉质量直接影响可信度。当你的架构图看起来像 Figma 默认模板的产物时，读者对内容本身的信任度也会打折扣。

核心观点：如果你用 Claude Code 或 Codex 写技术文档，diagram-design 是目前最完整的开源图表生成方案——一条命令安装，42 种图表类型自动匹配品牌。如果你维护的文档里还有 Mermaid 或 draw.io 的图表，用它重绘一次，视觉一致性会立刻上一个台阶。