Diagram Design Skill：让 AI 一句话生成 27 种编辑级图表的视觉神器

AI 编程助手正在从”写代码”扩展到”交付成品”——图表、文档、幻灯片，能直接拿去用的才算真正闭环。diagram-design 正是这个趋势里最亮眼的 Skill 之一：它让 Claude Code、Codex、Pi 等 Agent 用自然语言生成 27 种编辑级技术图表，输出 HTML+SVG，无需任何依赖，即开即用。

功能与原则

diagram-design 是一个面向 AI 编码 Agent 的图表生成 Skill 库，核心功能是将自然语言描述转化为专业级技术图表。其设计哲学浓缩为一句话：“每个节点都必须 earned its place”——如果删除一个元素不会损失信息，就删掉它。这与 Dieter Rams 的”少，但更好”、Edward Tufte 的”数据墨水比”原则一脉相承，是对抗 AI 图表审美退化的系统性对策。

支持三大视觉风格：
– Minimal Light：白底黑线单点缀色，适合嵌入深色文档
– Minimal Dark：暗黑主题，适合深色背景
– Full Editorial：完整品牌色，适合博客和演示文稿

认可度

截至 2026-09-10，diagram-design 关键数据：
– GitHub Star：约 31,700+（repo: cathrynlavery/diagram-design）
– 安装量：4,613+（skills.sh registry）
– 今日增长：登 GitHub Trending 单日 +2,951 stars，位列第一
– Fork 数：215
– 最新更新：2026-09-03（持续活跃维护）

链接

GitHub：https://github.com/cathrynlavery/diagram-design

原作者

Cathryn Lavery（GitHub: cathrynlavery），独立开发者，专注 AI 辅助设计与开发者工具链。其维护的 diagram-design 是目前 Claude Code 生态里最完整的图表 Skill。

介绍

传统的 AI 图表方案（如 Mermaid）生成速度快，但视觉质量有天花板——输出的图往往一眼就能看出是”AI 画的”。diagram-design 从根本上解决这个问题：它不是简单调用一个绘图 API，而是内置了一套完整的视觉设计规则系统。

核心能力包括：
– 27 种图表类型：架构图、流程图、时序图、状态机、ER 图、时间轴、泳道图、四象限、嵌套图、树图、分层图、韦恩图、金字塔图
– 三套视觉变体：每个类型都有 minimal-light / minimal-dark / full-editorial 三种风格
– 品牌色自动提取：输入任意网站 URL，Skill 自动读取 CSS 变量，映射为 paper/ink/muted/accent 语义色板，并做 WCAG AA 对比度校验
– 零依赖输出：纯 HTML+SVG，无 JS，无构建步骤，浏览器直接打开，可粘贴进任何文档
– 跨平台兼容：支持 Claude Code、Codex、Pi、Claude Cowork 四个 Agent 平台

设计规则（对抗 AI 审美漂移的系统性对策）：
– 每个节点必须”挣得它的位置”
– 点缀色仅保留给读者最先需要看到的一两个元素
– 所有坐标必须是 4 的倍数（防止 AI 坐标漂移）

特点

• 27 种图表 × 3 种变体 = 81 种可交付成果，几乎覆盖技术文档所有图表需求
• 品牌级视觉质量：输出可以直接进正式文档，无需人工调整
• 自动品牌色提取：输入网站 URL，60 秒内完成全套色板适配，含 WCAG AA 校验
• 零构建步骤：纯 HTML+SVG，复制粘贴到任何地方即用，无外部依赖
• 跨平台：Claude Code / Codex / Pi / Claude Cowork 全部支持，技能文件互通

使用方法

安装（Claude Code）：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

安装（Codex）：

npx skills add cathrynlavery/diagram-design

安装（Pi）：

pi install https://github.com/cathrynlavery/diagram-design

基本调用示例：
在 Claude Code 对话中直接说：

make me an architecture diagram of my app: frontend, backend, database, Redis cache

Agent 自动调用 Skill，生成架构图 SVG 文件。

品牌色提取（可选）：

/diagram-design:brand https://example.com

从旧图重绘（可选）：

/diagram-design:import platform.drawio --size=slide-16x9 --audience=executive

使用场景与人群

适用场景：
– 技术文档撰写（架构图、流程图、API 时序图）
– 团队内部知识分享（PPT 辅助配图）
– 公开文档与博客（高质量配图，无需设计师介入）
– 投标/汇报材料（品牌色一致的图表套件）

目标用户：
– 用 Claude Code / Codex 做开发的工程师，需要快速出专业配图
– 技术文档作者，厌倦了 Mermaid 的粗糙输出
– 设计系统团队，需要图表与品牌视觉保持一致
– 任何需要”图表直接进正式文档”而非”先生成草稿再手动改”的场景

输入与输出案例

案例 1：架构图

输入：

make me an architecture diagram of a content site: reader requests go through Cloudflare edge cache to an Astro origin server, which reads MDX files from a CMS. Include the HTTP response flow and legend.

输出：
一张清晰的架构图，节点包括：Reader Browser → Cloudflare Pages (cache) → Astro Origin (SSR + MDX Bundle) → CMS Content，附带 LEGEND 说明各节点角色，颜色使用 Minimal Light 风格，accent 色仅用于标记边缘缓存命中流程。

---

案例 2：Sprint 燃尽图

输入：

create a bar chart showing story points delivered across sprints S1–S8, with Sprint 5 highlighted as record high. Use minimal dark style.

输出：
暗黑主题柱状图，Y 轴 0-120，S1-S8 八根柱子，S5 柱用 accent 色高亮标注，四周有简洁 LEGEND，节点坐标均为 4 的倍数，整体视觉效果专业且克制。

---

为什么值得重视

diagram-design 的价值不只是”生成好看的图”。它是 Agent Skill 作为独立产品的成熟形态代表：模型负责理解需求，Skill 负责按编辑标准交付——这种分工让 AI 图表从”demo 水准”跨越到”可直接发表”。随着 AI 编程工具从”写代码”扩展到”交付成品”，这类填补审美差距的 Skill 会越来越刚需。

---

GitHub: https://github.com/cathrynlavery/diagram-design