23K Stars的Diagram Design：让AI画出的图不再有AI味
23K Stars 的 Diagram Design：让 AI 画出的图不再有 AI 味
先收藏，回头一定用得上。
每个用过 AI 编程工具画图的人都有同一个痛苦：你让 Claude 画一个架构图，它给你吐一段 Mermaid，渲染出来全是通用圆角框、默认配色、千篇一律的布局。你看了想删，但又不想打开 Figma 折腾 30 分钟。
Cathryn Lavery 把这个问题解决了。她的开源项目 Diagram Design（23,356 Stars，MIT 协议）提供了 38 种编辑级图表类型，作为 Claude Code、Codex 和 Pi 的 Agent Skill 安装。一句话总结它的态度：「No shadows. No Mermaid slop.」——不要阴影，不要 Mermaid 垃圾。
本文提纲
- 核心问题：AI 画图为什么有「AI 味」
- 38 种图表类型：不只是流程图
- 60 秒品牌匹配：读你的网站，用你的颜色
- 从 draw.io 和 Mermaid 重绘：不是转换是重画
- 四个旋钮：同一张图适配不同场景
- 为什么这是一个 Agent Skill 而不是一个 SaaS
- 对设计生态的三个影响
核心问题：AI 画图为什么有「AI 味」
AI 生成的图表有一个统一的「味道」：通用圆角框、默认蓝紫配色、信息密度要么过高要么过低、没有任何品牌一致性。原因很简单——AI 用 Mermaid 这类声明式图表语言生成图，Mermaid 的布局引擎决定了输出长什么样，你没有控制权。
Diagram Design 的解法不是让 AI 更会画图，而是给 AI 一套设计系统。38 种图表类型每种都有三种静态变体（minimal light、minimal dark、full-editorial），全部是自包含的 HTML + SVG，没有构建步骤、没有 JavaScript、没有外部依赖。
设计哲学只有一句话：
The highest-quality move is usually deletion. Every node earns its place.
最高质量的操作通常是删减。每个节点都要挣得自己的位置。强调色留给读者应该最先看的 1-2 个东西。目标信息密度：4/10。
这个密度控制是关键。AI 生成的图最大的问题就是塞太多——恨不得把所有细节都画上去。Diagram Design 强制你做减法，结果反而更清晰。
38 种图表类型：不只是流程图
大多数图表工具覆盖 5-6 种类型就停了。Diagram Design 给了 38 种，每种都经过编辑级设计：
| 分类 | 类型 |
|---|---|
| 系统设计 | Architecture, Sequence, State machine, ER/data model, Deployment, Dependency graph |
| 流程与逻辑 | Flowchart, Swimlane, Process, Data flow, User journey |
| 结构与层级 | Tree, Org chart, Nested, Layer stack, Pyramid/funnel, Story map |
| 分析与决策 | Quadrant, Consultant 2×2, Radar/spider, Treemap, Wardley map |
| 数据与统计 | Bar chart, Line chart, Gantt, Scatter plot, Sankey |
| 专用场景 | IT current-state, High-level, Medallion, DP integration, DP security matrix, Database schema, UML class, Fishbone, Kanban, Venn, Timeline, Loop |
最后 10 种是 2.5.10 版本新增的：Sankey（桑基图）、Fishbone（鱼骨图）、Wardley map（沃德利地图）、Kanban（看板）、User journey（用户旅程）、Deployment（部署图）、Dependency graph（依赖图）、UML class（类图）、Story map（故事地图）、Database schema（数据库 schema）。
这个覆盖面意味着：不管你要画什么，都有一个专门设计过的图表类型在等着你，而不是把所有东西都塞进流程图。
60 秒品牌匹配：读你的网站，用你的颜色
这是整个项目最聪明的设计。
安装后第一次使用时，你只需要说一句：
onboard diagram-design to https://yoursite.comAgent 会自动：
- 抓取你的网站首页
- 提取主色调和字体栈
- 把检测到的颜色映射到语义角色（paper、ink、muted、accent、link）
- 显示一个 diff 让你确认
- 写入
style-guide.md
之后每一张新图都自动使用你的品牌颜色。你网站的背景色变成图表底色，你的 CTA 颜色变成强调色，你的正文字体变成节点标签字体。
| 从你的网站检测到 | 变成 |
|---|---|
<body> 背景色 |
paper token |
| 主文本颜色 | ink token |
| 次要/标注文本 | muted token |
| 最常用的品牌色 | accent token |
<h1> 字体族 |
title 字体 |
<body> 字体族 |
node-name 字体 |
<code> 字体族 |
sublabel 字体 |
品牌匹配还自动做 WCAG AA 对比度检查——如果你的颜色在图表尺寸（9-12px）下不满足对比度要求，会自动提出调整值并解释原因。
还有一个「首次使用门控」：在新项目中第一次使用时，如果 style-guide 还是默认配置，Agent 会暂停并问你：「这是你在这个项目的第一张图。样式指南还是默认的。要运行 onboarding、手动粘贴 token，还是用默认？」
这个设计防止了一个常见问题：默认配色的图被直接发布到品牌项目中。
从 draw.io 和 Mermaid 重绘：不是转换是重画
已经有一堆 draw.io 或 Mermaid 图？Diagram Design 不是「转换」它们，是重画。
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified --audience=executive
/diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified区别在于：转换保留原始布局和配色，重画只保留内容（组件、关系、分组、方向），丢弃所有视觉噪音——原始坐标、调色板、字体、draw.io 的对角连接线、Mermaid 的自动布局。
重画时提供四个旋钮来控制输出：
| 旋钮 | 选项 | 改变什么 |
|---|---|---|
| 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 · fit | viewBox 和字号——投影幻灯片用 16px 节点名，不是 12px |
| Detail | faithful (≤24节点) · balanced (≤12) · simplified (≤7) | 源图保留多少，通过固定降级阶梯：先删装饰、再删重复、再删叶子集群、最后删基础设施 |
| Audience | engineer · mixed · executive | 措辞不是数量。Auth Service / JWT · RS256 · :8443 → Auth Service / token check → Sign-in |
每次重画结束时输出一份保真度清单——什么被合并了、什么被折叠了、什么被删了。你知道源文件里有什么，你会注意到变化。
同一个源文件，四个旋钮组合可以产生完全不同的图：给工程师看 faithful + engineer，给高管看 simplified + executive。
为什么这是一个 Agent Skill 而不是一个 SaaS
Diagram Design 最大的结构性特点：它不是一个在线工具，是一个 Agent Skill。
这意味着：
第一，跨平台。 同一套 Skill 文件同时支持 Claude Code、Codex 和 Pi。安装方式不同，但核心文件（SKILL.md + references + assets + scripts）完全一样。这验证了 Agent Skills 正在成为一种跨平台的格式标准——就像 npm 之于 JavaScript 生态。
第二，渐进式加载。 SKILL.md 先路由行为，再路由布局。38 个类型参考文件只在被选中时才加载。这意味着 Agent 不会因为装了一个 38 类型的 Skill 而变慢——它只在需要时加载对应类型的参考文件。
第三，本地运行。 没有 API 调用、没有云服务依赖、没有月费。所有图表生成在本地完成，SVG 和 HTML 是自包含的。PNG 导出需要 Playwright，但这是一次性安装。
第四，可定制。 你可以 fork 仓库，修改 style-guide.md，定制任何类型的布局规则。多客户场景支持 profile 系统：每个客户项目放一个 .diagram-design marker 文件指定 profile，不同客户自动用不同品牌。
对设计生态的三个影响
第一，Agent Skills 正在成为设计系统的分发格式。 传统设计系统是 Figma library 或 Storybook——设计师手动应用。Diagram Design 把设计系统编码为 Agent Skill，AI 自动应用。这意味着设计系统不再只服务于设计师，也服务于每一个用 AI 生成内容的开发者。
第二，「AI 味」是可以消除的。 之前我们讨论过 Hallmark 项目（用多层防护消除 AI 生成页面的 AI 味）。Diagram Design 在图表领域做了同样的事：通过强制的密度控制、语义化的颜色角色、品牌匹配的字体和配色，让 AI 生成的图表看不出是 AI 生成的。关键不是让 AI 更聪明，是给它更好的约束。
第三，Mermaid 的定位正在被重新定义。 Diagram Design 明确说「No Mermaid slop」，但它同时提供了 Mermaid 导入功能——把 Mermaid 源码重画成编辑级图表。这说明 Mermaid 的价值不是输出，是输入：它是一种便捷的内容描述格式，但不应该是最终视觉输出。这个定位迁移和整个 AI 工具生态的走向一致——声明式描述 + 智能渲染。
安装和使用
Claude Code：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designCodex：
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-designPi：
pi install https://github.com/cathrynlavery/diagram-design安装后直接用自然语言：「Make me an architecture diagram of my app: frontend, backend, database, Redis cache.」Agent 会自动选择类型、生成 HTML、保存文件。
参考文档与链接
- GitHub: cathrynlavery/diagram-design - 23,356 stars，MIT 协议，HTML + SVG
- 在线画廊 - 38 种图表类型的交互式预览
- SKILL.md 架构 - 渐进式加载设计，行为优先路由
- 作者博客: littlemight.com - Cathryn Lavery 的个人博客
- Claude Code Plugin 文档 - Agent Skills 和 Plugin 体系
你用什么画架构图？Mermaid、draw.io 还是 Figma？评论区聊聊。觉得有用点个赞让更多人看到。
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
本文首发于 AI人工智能时代，转载请注明出处。
