Diagram Design：让 AI 画出不像 AI 画的图

本周 GitHub 榜首，单周涨 16,260 星。

它不是画图工具，是一包写给 AI 看的设计规范——让 Claude Code 和 Codex 停止吐出「圆角灰盒子 + 紫色渐变」那种一眼假的示意图。

单周新增星	图表类型	运行时依赖	许可	版本
16,260	27 种	0	MIT	v2.4.3

零行渲染代码的「画图工具」

我把仓库拉下来翻了一遍，最反直觉的一点是：整个项目里没有渲染引擎。没有 canvas、没有布局算法、没有 npm 包。它的全部内容是 Markdown 文档：

SKILL.md — 画图哲学、选型决策树、反面清单（564 行）
references/type-*.md — 27 份布局语法说明书，每种图一份
references/style-guide.md — 颜色和字体的唯一真源
assets/example-*.html — 每种图 3 个变体的成品参考（约 90 个文件）

工作方式是：你说「画个架构图」→ AI 读 SKILL.md 选类型 → 只加载那一份 type-architecture.md → 亲手写出 HTML + 内联 SVG → 存成一个文件。双击就能在浏览器打开，无构建、无 JS、无外链图片。

为什么这招管用

AI 画图丑，不是能力问题，是没有约束。这个 skill 干的事就是给它上枷锁：单一强调色、每张图只允许 1–2 个焦点、所有坐标必须能被 4 整除、圆角上限 10px、禁止任何阴影、节点数超过 9 个就必须拆成两张图。目标密度写死在文档里：4/10。

它甚至专门列了一张「AI slop 反面清单」——深色背景配青紫辉光、所有节点等宽等高、图例飘在画布里、箭头文字压在线上、JetBrains Mono 当万能「技术字体」用。命中即返工。

和你可能已经在用的东西比

维度	Mermaid	draw.io	Diagram Design
谁排版	渲染器自动布局，你控制不了	你自己拖，拖多久都不够齐	AI 按栅格规则算坐标，全部对齐 4px
长相	一眼「这是 Mermaid」	取决于你的审美	编辑排版风格，可换成你的品牌色
产物	需要渲染环境	`.drawio` 私有格式	单个自包含 `.html`，可导出 SVG/PNG
改一版	改代码重渲染	回去接着拖	跟 AI 说一句「把缓存那块去掉」
存量迁移	—	—	能读 drawio / mermaid 源文件重画

注意最后一行的措辞是「重画」不是「转换」——它明确丢弃源文件的坐标、配色、字体和 draw.io 那种斜线连接面条，只保留组件、关系、分组和方向，然后按自己的规则重新排。

27 种图，全部真图

下面全部是仓库里官方发布的实际渲染结果（docs/screenshots/），不是宣传稿。每种图都另有浅色 / 深色 / 完整编辑排版三个变体。

图片点击可看大图。

架构图 · Architecture — 组件 + 连接关系，系统怎么搭的

流程图 · Flowchart — 带分支的判断逻辑

时序图 · Sequence — 参与方之间按时间排的消息往来

状态机 · State machine — 状态、迁移、守卫条件

实体关系图 · ER / Data model — 实体、字段、表间关系

时间轴 · Timeline — 事件在时间上的位置

泳道图 · Swimlane — 跨部门流程和交接点

四象限 · Quadrant — 两轴定位 / 优先级排序

咨询 2×2 · Consultant 2×2 — 麦肯锡式场景矩阵，四个具名格子

雷达图 · Radar / Spider — 多个对象在 3–5 个维度上打分对比

飞轮图 · Loop — 自我强化循环，中心枢纽累积状态

嵌套图 · Nested — 靠包含关系表达层级和作用域

树状图 · Tree — 父 → 子关系

组织架构图 · Org chart — 归属、汇报、路由、升级路径

分层堆栈 · Layer stack — 堆叠的抽象层级

韦恩图 · Venn — 集合之间的重叠部分

金字塔 / 漏斗 · Pyramid / Funnel — 排序层级或转化流失

IT 现状图 · IT current-state — 遗留系统全景，改造方案里的 before 状态

全景总览 · High-Level — 端到端技术栈跑在集群上

多方流程图 · Process — 多角色顺序流程 + 数据交接

分层存储 · Medallion — 多层数据存储，含质量等级和访问策略

数据流图 · Data flow — 管道每一步谁负责做什么

集成拓扑 · DP integration — 数据源 → 核心 → 消费方

权限矩阵 · DP security matrix — 按角色 / 组件的访问权限表

柱状图 · Bar chart — 分类之间的量化对比

折线图 · Line chart — 随时间变化的连续趋势

甘特图 · Gantt — 任务和阶段排在时间轴上

散点图 · Scatter plot — 分布和相关性

draw.io 重画 · Import demo — 12 节点 draw.io 源文件按 balanced 详细度重画

装上，然后用大白话说

1. 安装（在 Claude Code 会话里直接敲）

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

装完再敲 /plugin → 进 Marketplaces → 选 diagram-design → Enable auto-update。第三方市场默认不自动更新，这一步要手动开一次。

2. 日常用法：不用记命令

装完之后它是「按需自动触发」的，你正常说话就行：

# 直接说要什么，它自己选类型
画一张数据管道的架构图：本地文件读取 → 解析器 → SQLite 缓存 → 模型分析 → 报告输出

# 指定类型和用途
用 quadrant 画 Q3 项目优先级，横轴投入、纵轴收益，做成 16:9 放进 PPT

# 让它改
把缓存那个节点去掉，模型分析那块标成焦点

画之前它会先用一句话报计划（选了什么类型、什么尺寸、因为复杂度上限砍掉了什么），你可以拦下来改方向，再让它画。

3. 第一次会拦你一道：品牌确认

在一个新项目里第一次画图时，它会停下来问要不要先配品牌色，而不是默默用默认皮肤糊一张给你。给它一个网址，60 秒搞定：

onboard diagram-design to https://call-hh.cn

它会抓首页 → 提取主色和字体栈 → 映射到语义角色（纸底 / 墨色 / 次要文字 / 强调色 / 链接）→ 先给你看 diff → 你同意才写进 style-guide.md。写之前还会跑一次 WCAG AA 对比度检查，颜色在 9–12px 小字号下不达标会自动提调整方案。

4. 四个 slash 命令（需要精确控制时才用）

// 把 draw.io 文件重画
/diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive

// 把 README 里所有 mermaid 代码块重画
/diagram-design:import-mermaid README.md --diagram=all

// 导出成 SVG / PNG
/diagram-design:export path/to/diagram.html --png-only --scale=3

// 管理多客户品牌档案
/diagram-design:profile

导出 PNG 的前置条件：SVG 导出是纯文本抽取，无依赖。PNG 导出走 Playwright 光栅化，默认 2 倍图，需要先装：
pip install playwright
playwright install chromium

同一套文件，Codex CLI 也能用

Codex 已经支持 plugin，并且和 Claude Code 共用 .agents/skills/ 发现路径。这个仓库同时带了 .claude-plugin/ 和 .codex-plugin/ 两套清单，装法几乎一样：

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

# Codex 每次启动会自动刷新 git 市场；想立刻拉更新：
codex plugin marketplace upgrade diagram-design

装完开一个新会话才会加载。用法和 Claude Code 完全一致——自然语言说要什么图。

本地可编辑安装（想自己改规范时用）

托管安装的 style-guide.md 会被版本更新覆盖。要长期改规范就用本地路径装。官方给的是 macOS/Linux 的 ln -s，Windows 下要换成 mklink：

:: 1) 克隆到你想放的地方
git clone https://github.com/cathrynlavery/diagram-design D:\tools\diagram-design

:: 2) 管理员 CMD 里建目录符号链接（需要管理员或开发者模式）
mklink /D "%USERPROFILE%\.claude\skills\diagram-design" "D:\tools\diagram-design\skills\diagram-design"

:: 建不了链接就直接复制，效果一样，只是更新要手动重拉
xcopy /E /I "D:\tools\diagram-design\skills\diagram-design" "%USERPROFILE%\.claude\skills\diagram-design"

另外，存到 ~/.diagram-design/profiles/ 的品牌档案不受版本更新影响，项目根目录放一个 .diagram-design 标记文件写 profile: 客户名，多个客户项目就能各用各的品牌，不打架。

四个旋钮：同一份内容，出到哪就长成哪的样子

这是导入功能里我觉得最有价值的设计——它不做「格式转换」，做的是适配目的地。同一个源文件，配不同旋钮出三张完全不同的图：

旋钮	可选值	改变什么
Format	`html · svg · png · html+png`	交付物形态。SVG 进 Figma，PNG 进幻灯片，HTML 上网页
Size	`doc-inline · doc-wide · slide-16x9 · slide-4x3 · social-og · social-square · print-a4-landscape · fit`	不只改画布，连字号阶梯一起改——投影用的幻灯片节点名 16px，文档内嵌 12px
Detail	`faithful`（≤24 节点）· `balanced`（≤12）· `simplified`（≤7）	源内容保留多少。按固定降级顺序砍：装饰 → 重复项 → 叶子簇 → 基础设施
Audience	`engineer · mixed · executive`	改措辞不改数量：`Auth Service / JWT · RS256 · :8443` → `Auth Service / token check` → `Sign-in`

保真账本

每次导入结束会给一张「删改清单」，明确告诉你什么被合并、折叠、丢弃了：

Detail: balanced · 12 source nodes → 8 drawn
Collapsed: "Token valid?" decision → edge label on Gateway → Auth
Dropped:   1 sticky note ("legacy path, to be retired") — unconnected in source
Kept in full: the request path (Web/Mobile → Gateway → Orders → Postgres)

这条设计值得单独拎出来说：AI 做批量转换最大的风险就是静默丢内容。它选择主动交代删了什么，而不是让你自己去比对。

什么场景值得用

判断标准只有一条：这张图是要给别人看的，而且看的人会拿它做决定。纯自己看的草图不值得用，一句话描述就够了。

按这个标准，我认为下面几类落点最划算：

集成项目售前 — 把「现状烂摊子」画成一张图。 这是最高价值的落点。它专门有个 IT current-state 类型，设计目的就是「在改造方案里记录 before 状态」——按阶段/部门分组的遗留系统全景。给一把手看的东西，就该长这样。搭配用：it-state（现状）+ timeline（分期）+ quadrant（先做什么）+ high-level（目标态）。

评估报告 — 咨询范儿的 2×2。 Consultant 2×2 是标准麦肯锡场景矩阵，四个具名格子，一个格子上强调色。「授权风险 × 治理成熟度」这类判断，画出来比写三段话有说服力。搭配 radar 做多维打分对比。

知识库交付 — 客户要的是流程图，不是目录树。 跨部门流程用 swimlane，权限矩阵用 DP security matrix，团队职责用 org chart。导出 PNG 直接贴进文档，比在协作平台里手动画画板快得多。

数据管道项目 — 顺手补上文档欠账。 Data flow 和 Medallion 就是给数据管道设计的。「谁在哪一步做什么」用 data-flow 一张图说清，比在开发日志里翻十页强。架构设计文档也正好缺这个。

自己的站点 — onboard 一次，配图统一色系。 这是它设计出来的原始用途：作者自己写博客缺配图才做的。onboard 之后出的所有图自动是你的站点配色，可以直接当文章插图和 social-og 分享图用。

如果想拿它做产品

这个 skill 本身是 MIT 的，规范文件全是 Markdown，可以 fork 出行业版。两个我觉得成立的方向：

售前方案自动出图流水线。 做集成项目售前，每次都要画现状图、目标架构图、分期路线图。把「客户调研问卷 → 结构化 YAML → 批量出四张图 → 导出 PNG 塞进方案模板」串成脚本，一个项目省半天。it-state / high-level / timeline / quadrant 这四种正好齐了。
知识库配图服务化。 交付企业知识库时最费时间的就是图。给每个客户 onboard 一次品牌（存成 profile），之后所有图自动是客户 VI 色系。这是可以写进报价单的差异化项，成本几乎为零。

三件事你会撞上

中文字体。 默认字体栈是 Instrument Serif / Geist / Geist Mono，三款都不含中文字形。中文节点名会掉到系统字体渲染——能看，但字重和字距跟设计意图对不上，衬线标题尤其明显。

解法：装完先改 references/style-guide.md 的 font stack，加上 Noto Sans SC / Source Han Sans 兜底。这一步官方文档没提，是我翻 style-guide.md 时发现的。

首次会被拦一道。 新项目第一次画图它一定会停下来问品牌，这是设计如此不是 bug。不想配就回一句「用默认的」，之后不再问。

导出是「只要图」。 SVG/PNG 导出只取 <svg> 节点，完整编辑排版变体里的标题、摘要卡片、页脚都会被丢掉——这是有意的，方便进 Figma 和幻灯片。想要整页效果，用浏览器打印成 PDF 或整页截图。

仓库里 skills/diagram-design/assets/index.html 是一个带标签页的本地画廊，克隆下来双击就能看全部 27 种图的三个变体。

仓库：github.com/cathrynlavery/diagram-design · MIT · v2.4.3 作者：Cathryn Lavery（littlemight.com / BestSelf.co） 截图来源：仓库 docs/screenshots/，未做任何修改