开源工具评测：diagram-design 让 AI 画出杂志级图表，告别 Mermaid 丑图
开篇痛点
每次让 AI 帮你画个架构图、流程图，出来的是不是都这样——圆角方框、灰色渐变、带阴影、配色土气？你花半小时在 Figma 里手调，或者干脆把图删掉不画了。
问题不在 AI 不会画图，而在它没有审美约束。没有规则的模型，输出的就是全网图表的"平均值"——一个带阴影的灰色圆角框。
diagram-design 解决的就是这件事：它把设计师的判断写成一份 Agent Skill，告诉 AI"不要阴影、不要 Mermaid 默认样式、所有坐标对齐 4px 网格、只用一个焦点色"，然后输出一个双击就能打开的 HTML 文件。
项目基础
diagram-design 是一个开源的 Agent Skill（不是应用，不是库），安装到 Claude Code、Codex、Cursor 等 AI 编程助手里后，直接用自然语言说"帮我画个 XX 图"，它就会按杂志排版标准生成一个自包含 HTML 文件。
| 项 | 值 |
|---|---|
| 作者 | Cathryn Lavery（BestSelf.co 创始人） |
| Star | 57,000+ |
| 创建时间 | 2026 年 4 月 |
| 协议 | MIT |
| 输出格式 | 单文件 HTML（内嵌 SVG） |
| 图型数量 | 45 种 |
| 支持导入 | .drawio / .mmd(Mermaid) / .excalidraw |
核心理念：模型已经懂内容，缺的是品味。这个 Skill 不教 AI 画图，而是砍掉错误选项——一个焦点色、1px 发丝线、零阴影、最大 10px 圆角、信息密度控制在 4/10。
为什么推荐它
1. 它约束的是"品味"，不是"能力"
大多数 AI Skill 描述的是"你能做什么"，diagram-design 描述的是"你不能做什么"。它直接写死：
- 不要阴影——任何 drop shadow 都是品味事故
- 不要 Mermaid 默认样式——那是统计平均值，不是设计
- 4px 网格——每个坐标、间距、宽度都必须是 4 的倍数，消除"差 3px 看起来不对"的不适感
- 一个焦点色——全图最多 1-2 个节点用强调色，其余全部墨色
- 信息密度 4/10——最高级的设计动作通常是删除
2. 渐进式加载，不浪费上下文
45 种图型，但 Agent 每次只读它需要的那一种：
| 你说 | Agent 加载 |
|---|---|
| "画个流程图" | SKILL.md + type-flowchart.md |
| "画个架构图" | SKILL.md + type-architecture.md |
| "画个时间线" | SKILL.md + type-timeline.md |
新增图型不会影响其他图型的上下文成本。
3. 自动匹配你的品牌色
安装后第一次画图，它会问你要不要接入网站品牌。你只需说：
onboard diagram-design to https://yourblog.com它会抓取你的首页，提取主色、字体、背景色，映射成语义角色（paper/ink/accent），还会检查 WCAG AA 对比度。画出来的图跟你的网站天然一体。
核心优势对比
| 维度 | Mermaid | draw.io 手画 | diagram-design |
|---|---|---|---|
| 输出格式 | 文本渲染 | XML + 画布 | 单文件 HTML/SVG |
| 视觉风格 | 默认模板，丑 | 取决于画功 | 杂志排版，统一规范 |
| 字体 | 系统默认 | 手动选 | Instrument Serif + Geist |
| 阴影/装饰 | 有 | 有 | 零阴影，1px 发丝线 |
| 品牌匹配 | 不支持 | 手动调 | 自动读网站提取 |
| 可维护性 | Git 友好 | XML 可 diff | 渲染产物，不适合频繁改 |
| 导出 | SVG/PNG | SVG/PNG/PDF | SVG/PNG（2x Playwright） |
| 无障碍 | 无 | 无 | role/aria/title/desc 齐全 |
三个差异化亮点：
- 渲染级校验——CI 里用 Chromium 实际渲染输出，检查标签重叠、节点裁剪，不只是读源码
- 四档细节控制——faithful（≤24 节点）/ balanced（≤12）/ simplified（≤7），按受众自动精简
- 可复现——自带
self_check.py，跑完输出OK才交付
手把手实操
环境要求
- 一个 AI 编程客户端：Claude Code / Codex / Cursor / Cline / Windsurf 等
- Node.js（用于 npx 安装）
- 无需 Python、无需 Docker、无需构建步骤
第一步：安装
npx -y skills add cathrynlavery/diagram-design -y它会自动识别你装了哪些 AI 客户端，把 Skill 链接到对应目录。安装后在 Claude Code 或 Codex 里输入：
帮我画一个博客发布流程的架构图第二步：品牌定制（推荐）
第一次画图时它会触发 style guide gate，问你是否定制风格。选网站 URL 方式：
onboard diagram-design to https://yourblog.com它会输出一份"fidelity receipt"——采样了哪些 URL、提取了什么颜色、用了什么字体、哪些做了降级。
第三步：画图
直接用自然语言描述即可：
画一个用户登录流程的时序图，包含前端、API 网关、认证服务、数据库四个参与者，
用我的品牌色，输出 HTML 格式。它会生成一个 diagram.html，双击浏览器打开就能看。
第四步：导出
把上面这张图导出为 SVG，我要放到 Figma 里。或导出 PNG（2x 分辨率，用 Playwright 渲染）。
常用命令速查
| 操作 | 说法 |
|---|---|
| 品牌定制 | onboard diagram-design to <url> |
| 画架构图 | "画一个 XX 的架构图" |
| 导入 Mermaid | "把这个 .mmd 文件重绘成你的风格" |
| 导入 draw.io | "把这个 .drawio 文件转成杂志风格" |
| 导出 SVG | "导出为 SVG" |
| 导出 PNG | "导出 2x PNG" |
| 系统字体 | "用系统字体，不要 Google Fonts" |
适用场景
- 技术博客配图——你写文章需要一张架构图、流程图，直接让 AI 生成，风格跟网站统一
- 技术文档——README、Wiki 里的示意图，比 Mermaid 好看十倍
- PPT/演示——导出 16:9 slide 尺寸，直接放幻灯片
- 重绘旧图——把已有的 Mermaid/draw.io 文件丢给它，用新风格重画
客观优劣
优势：
- ✅ 审美约束写得非常具体，不是"画好看点"这种废话
- ✅ 45 种图型覆盖大部分技术文档需求
- ✅ 单文件输出，无依赖，双击即开
- ✅ 自动品牌色匹配，省掉手动调参
- ✅ 无障碍属性齐全
- ✅ 渐进式加载，上下文效率高
- ✅ MIT 协议，随便用
局限：
- ⚠️ 输出是渲染产物，不像 Mermaid 那样适合 Git 频繁修改
- ⚠️ 需要 AI 编程客户端，纯手动用户用不上
- ⚠️ 默认配色（橙+灰）偏冷静，需要 onboarding 才会好看
- ⚠️ 45 种图型不是每种都有完整示例，部分需要自己迭代
- ⚠️ PNG 导出依赖 Playwright，首次使用需下载 Chromium
结尾
diagram-design 的核心洞察很简单：AI 不缺画图的能力，缺的是品味。 它把"不要什么"写得比"要画什么"还清楚，用约束而非指令产出设计感。
npx -y skills add cathrynlavery/diagram-design -y仓库地址：github.com/cathrynlavery/diagram-design
如果你经常写技术博客、做技术文档，值得装一个。给作者点个 Star。