diagram-design 开源：Claude Code 里画出设计师不嫌弃的图，60 秒品牌定制

Cathryn Lavery，一位资深的技术写作者和产品设计师。她在自己的博客上撰文吐槽：“每次我找 Claude 画图，得到的都是那种 generic rounded-box 的玩意儿，跟我网站的其他部分毫无关联。”
于是，她做了一个决定：自己造一个专门用于生成高质量图表的 AI 工具。这个决定诞生了一个 GitHub 上正在快速走红的开源项目——diagram-design。

这个项目一经推出，就在开发者圈子里引起了不小的反响。目前已获得5.9K Star，而且在 GitHub 上持续保持活跃更新。
它的 slogan 很直接：Editorial diagrams your designer won't hate（你的设计师不会讨厌的编辑级图表）。

项目介绍

diagram-design不是一款独立的画图软件，而是一个为Claude Code设计的 Skill（技能插件）。

可帮助大家在编写代码或文档的过程中，快速生成编辑级品质（editorial-quality）的图表。
与传统的画图工具（如 Figma、Draw.io）不同，diagram-design的输出格式是自包含的 HTML 文件，内嵌 SVG 和 CSS。这意味着：
•无需安装任何软件：只要你有 Claude Code，就能用
•无需构建步骤：生成的 HTML 文件直接在浏览器里打开就能看
•无外部依赖：不需要 JavaScript，不需要加载任何外部图片
•所见即所得：生成什么样，打开就是什么样
更重要的是，这个项目的背后有一套严格的设计哲学。Cathryn 在项目文档中明确写道：

"The highest-quality move is usually deletion."
（最高品质的设计动作，通常是删除。）
这句话贯穿了整个diagram-design的设计理念：克制、精炼、不堆砌。每一个节点都必须有存在的理由，强调色只留给最重要的 1-2 个元素，目标密度控制在 4/10——宁可留白，也不拥挤。

核心亮点

📊 27 种图表类型

diagram-design在 2.0 版本中提供了27 种图表类型，涵盖了技术文档、产品演示、战略规划等各种场合。让我们来看看都有哪些：
技术类图表：
•架构图（Architecture）：展示系统组件和连接关系
•流程图（Flowchart）：描述决策逻辑和分支
•时序图（Sequence）：展示按时间顺序的消息传递
•状态机图（State Machine）：展示状态和转换关系
•ER 图/数据模型（ER / Data Model）：展示实体、字段和关系
•数据流图（Data Flow）：展示数据在系统中的流动路径
产品与战略类图表：
•时间线（Timeline）：在时间轴上展示事件
•泳道图（Swimlane）：跨职能流程展示
•象限图（Quadrant）：二维定位分析（如影响 × 难度矩阵）
•金字塔/漏斗图（Pyramid / Funnel）：展示层次结构或转化漏斗
•雷达图（Radar / Spider）：多维度对比分析
•循环图（Loop）：飞轮效应、闭环系统（2.0 新增！）
图表类：
•柱状图（Bar Chart）：分类对比
•折线图（Line Chart）：趋势变化
•甘特图（Gantt）：项目时间规划
•散点图（Scatter Plot）：分布与相关性
还有很多其他类型，如嵌套图、树状图、组织架构图、维恩图、分层图、咨询师 2×2 矩阵、IT 现状架构图、Medallion 数据存储图等，几乎涵盖了你能想到的所有图表需求。

🎨 60 秒品牌定制

这是diagram-design最惊艳的功能——品牌 Onboarding（入职引导）。
传统 AI 画图工具生成的图表，配色和字体都是固定的默认值，跟你的品牌完全无关。而diagram-design做到了一件前所未有的事情：让 AI 读取你的网站，自动提取品牌视觉元素，应用到所有图表中。
整个过程只需要 60 秒：

你: "onboard diagram-design to https://yoursite.com"
Claude: → 抓取你的网站首页
       → 提取主色调和字体栈
       → 将检测到的值映射到语义角色：
           paper（纸张）, ink（墨迹）, muted（弱化）, accent（强调）, link（链接）
       → 展示一个变更提案
       → 将你的 Token 写入 style-guide.md
你: "yes, apply it"

具体来说，Skill 会检测你网站上的这些元素：

🖼️ 三种视觉变体

每一种图表类型都提供了三种视觉变体，适应不同的使用场景：
1.Minimal Light（极简浅色）：白底深字，适合嵌入技术文档和博客
2.Minimal Dark（极简深色）：深色背景，适合夜间模式或深色主题的演示
3.Full Editorial（完整编辑版）：带有摘要卡片和页脚的增强版，适合正式报告和演示文稿
你可以根据需求随时切换，也可以直接从模板开始：

# 从极简浅色模板开始
cp assets/template.html my-diagram.html

# 从编辑版模板开始
cp assets/template-full.html my-diagram.html

快速上手

diagram-design提供了两种安装方式：
方式一：克隆 + 软链接（推荐）

# 克隆仓库到本地
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design

# 将 inner skill 软链接到 Claude Code 的 skills 目录
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

重启 Claude Code 后，diagram-design技能就会自动注册并激活。
方式二：作为插件安装
更快速的方式，但 Skill 位于插件缓存中，更新时手动修改会丢失：

# Claude Code
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

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

写在最后

diagram-design之所以能在短时间内获得近 6000 星标，核心原因只有一个：它真正解决了 AI 画图的审美痛点。
27 种图表类型、60 秒品牌定制、三种视觉变体、渐进式加载架构、语义化设计系统——这些加在一起，构成了一套完整的"AI 图表设计系统"。它不是在教 AI 怎么画图，而是在教 AI 怎么画出有品味的图。
如果你是一个技术写作者、产品经理、架构师，或者任何需要频繁制作图表的人，diagram-design值得一试。
**项目地址：**https://github.com/cathrynlavery/diagram-design