Diagram Design：给 Claude Code 配一个专业级图表生成技能

图1：架构图示例，展示组件与连接关系

一款让设计师闭嘴的图表工具：长什么样？

写技术博客、做产品文档、画架构图——这是每一位 AI 工程师和开发者最头疼的时刻。Claude Code 生成的图表要么是千篇一律的圆角方框，要么是 Mermaid 代码的生硬线条，和自己的网站风格完全不搭。于是要么花半小时在 Figma 里手调，要么干脆不画图了。

Diagram Design 正是来解决这个问题的。这是一个专门给 Claude Code（以及 Codex CLI）使用的图表生成 Skill，内置 27 种编辑级图表类型，全部渲染为独立的 HTML + 内联 SVG 文件。无需任何构建步骤、无需 JavaScript 运行时、无外部图片依赖——生成出来的 HTML 文件直接用浏览器打开就行。

核心能力：27 种图表，一个设计系统

这个项目最核心的价值在于它的设计系统（Design System）思维。作者 cathrynlavery 为所有 27 种图表类型设计了一个统一的视觉语言，让图表不再是零散孤立的视觉碎片，而是一个具有一致性的家族产品。

27 种图表类型覆盖了从技术架构到产品分析的全场景：

• 技术图：架构图（Architecture）、IT现状图（IT Current State）、数据流图（Data Flow）
• 流程图：标准流程图（Flowchart）、时序图（Sequence）、泳道图（Swimlane）
• 数据模型：ER 图、状态机（State Machine）
• 时间轴：时间线（Timeline）、甘特图（Gantt）
• 分析图：象限图（Quadrant）、雷达图（Radar）、散点图（Scatter）
• 层级图：嵌套图（Nested）、树形图（Tree）、组织图（Org Chart）
• 高阶图：漏斗/金字塔（Pyramid/Funnel）、维恩图（Venn）、嵌套圆环（Medallion）
• 专业图：循环飞轮（Loop/Flywheel v2.0 新增）、集成图（DP Integration）、安全矩阵（DP Security Matrix）

每种图表都提供三种视觉变体：极简浅色、极简深色和全编辑风格。极简风格适合技术文档，全编辑风格适合对外发布的内容。

图2：流程图示例，清晰展示决策逻辑

核心设计哲学：克制与留白

项目 README 中有一段设计哲学总结得非常到位：

"最高质量的操作通常是删除。每一条边都要有信息量。如果一个节点总是和其他节点一起出现，那它就不是两个节点，而是 一个。强调色（Coral）是为1到2个焦点节点准备的——用多了信号就消失了。"

作者引用了 .impeccable.md 里的设计原则，并将这套原则具体化为几个可量化指标：

1. 密度控制在 4/10：图表要足够完整以传递技术信息，但不要密集到需要阅读指南才能理解。超过 9 个节点时，通常意味着应该拆成两张图。
2. 强调色稀缺原则：Coral 色只留给 1-2 个读者必须首先关注的焦点节点，不能滥用。
3. 连接线的必要性：每一条连接线必须携带信息。如果从布局上就能推断出关系，就删掉那条线。
4. 节点的最小化：两个总是成对出现的节点应该合并为一个。

品牌定制：60 秒匹配你的网站风格

这个 Skill 最实用的功能是首次运行引导（Style Guide Gate）。在生成第一张图之前，Skill 会检查项目内的 references/style-guide.md 是否已定制——如果是默认的 stone + rust 色板，它会停下来询问用户是否需要定制。

定制方式有五种选择： （a）从网站 URL 自动抓取配色和字体 （b）从已安装的 Skill 中提取设计令牌 （c）从本地文件夹或设计系统目录中读取 （d）手动粘贴设计令牌 （e）直接使用默认风格

方式（a）最为强大——输入你的网站地址，Skill 会自动抓取页面中的颜色和字体，生成一份 diff，直接应用到所有后续图表中。整个过程不超过 60 秒，就能让所有图表和你网站的品牌视觉保持一致。

图3：Loop（循环飞轮）图，v2.0 新增类型，适合展示自增长飞轮

技术实现：纯 HTML + SVG，无任何依赖

从技术角度看，这个项目的实现非常干净：

文件结构：

• skills/diagram-design/SKILL.md — 主 Skill 文件，包含完整的图表生成指南（v2.0 版本共约 27KB）
• skills/diagram-design/references/ — 类型特定约定（27种图表各有专属参考）
• skills/diagram-design/references/style-guide.md — 设计令牌配置
• skills/diagram-design/references/onboarding.md — 首次引导流程
• commands/export-diagram.md — 可选导出命令
• .claude-plugin/plugin.json — Claude Code 插件清单

技术栈极简： HTML + CSS + 内联 SVG，没有任何 JavaScript 依赖。生成的图表文件是真正的静态 HTML，可以直接提交到代码仓库、嵌入文档、或发送给他人，完全不依赖任何在线服务。

无障碍设计考虑： SVG 天然支持缩放不失真，内联 SVG 确保图表不会因外部 CDN 故障而失效。

使用门槛：极低，上手即用

部署方式极为简单——将 skills/diagram-design 目录整个复制到 Claude Code 的 skills 目录即可使用。无需安装、无需配置环境变量、无需 Docker。

安装后，用户只需要在 Claude Code 中用自然语言描述想要的图表类型和内容，Skill 就会自动读取 style-guide.md 中的配置，生成对应类型的 HTML 文件。

对于没有安装 Claude Code 的用户，也可以直接下载 skills/diagram-design/SKILL.md，手动将图表模板复制到自己的项目中。

v2.0 新增：Loop 图与共享内存飞轮

2024 年的 v2.0 更新带来了 Loop 图（循环飞轮图），这是项目管理圈和产品增长圈非常熟悉的一种可视化形式——展示一个系统如何通过反馈循环实现自增长。Loop 图的特色是用虚线表示写回（write-back）关系，用实线表示正向输入，清晰区分了飞轮的核心驱动路径和维护路径。

局限与思考

这个项目定位精准，但也有其适用范围：

1. 需要 AI 辅助才高效：虽然 Skill 本身是静态的，但最佳使用体验需要 Claude Code 或 Codex CLI 介入。单独使用 Skill 文件需要手动编辑 HTML/SVG 代码。
2. 复杂图表仍需人工介入：对于超过 9 个节点或涉及复杂数据关系的图表，AI 生成结果可能需要手工调整以达到理想效果。
3. 品牌定制对无设计系统网站效果有限：从 URL 自动抓取设计令牌的准确性取决于目标网站的结构化程度，一些非标准网站可能无法正确提取。

行业意义：AI 写作工具的「最后一公里」问题

Diagram Design 解决的本质问题是 AI 辅助写作工具的「最后一公里」：当 Claude 能帮你写代码、写文档，但在输出可视化内容时却掉链子。

这类问题在 2024 年的 AI Coding 工具生态中非常普遍——模型的文本生成能力已经非常强，但在结构化视觉输出方面仍有明显短板。Diagram Design 通过为 Claude Code 提供一个精心设计的 Skill，将 AI 的文本生成能力和专业的视觉设计系统结合在一起，填补了这个空白。

GitHub 2873 星的关注量说明这不是一个小众需求——它反映的是整个 AI Coding 生态对高质量可视化输出的真实渴望。随着 Claude Code、Cursor 等 AI Coding 工具的普及，这类专注于「让 AI 输出更好看」的辅助工具可能会成为一个值得关注的新品类。