📊
让 AI 画出设计师不嫌弃的图
Diagram Design：给 Claude Code / Codex / Cursor 等 AI 编程助手的图表设计 skill——45 种图表类型、一张自包含 HTML+SVG、Editorial 风格、匹配你的品牌，告别"AI 味"图表
MIT
Agent Skill
5.8万 Star
📖 它是什么
Diagram Design（仓库 cathrynlavery/diagram-design）是一个 Agent Skill——给 Claude Code、Codex、GitHub Copilot、Cursor、Factory Droid、Pi 等 AI 编程助手用的图表设计技能。你只要用自然语言对 agent 说一句，它就能把架构图、流程图、时序图等画成一个自包含的 HTML + SVG 文件，双击就能打开，带编辑级的设计感、套用你的品牌配色和字体。
作者 Cathryn Lavery 因为受够了让 AI 画图时拿回来的"圆角盒 + 影子"通用模板，干脆把"审美"写进了 skill 里：一个强调色只留给最该被看到的那 1–2 个东西、1px 细线、无阴影、圆角不超 10px、所有坐标都落在 4px 网格上。这套规则让产出看起来像人精心排过的编辑级图表，而不是 AI 生成的"Mermaid slop"。
关键能力：45 种图表类型（架构图、流程图、时序图、ER 图、时间线、泳道、象限图、雷达图、循环图、树图、组织架构图、分层栈、韦恩图、金字塔、柱状图、热力图、甘特图、桑基图、鱼骨图、Wardley 图、看板、用户旅程、部署图、依赖图、UML 类图、数据库 schema、数据流、Sankey、Waterfall、可动爆炸图、轴测平面图…）；品牌适配（"onboard diagram-design to 你的网址"就能拉取网站的配色和字体并应用）；重绘导入（能把已有的 draw.io / Mermaid / Excalidraw 文件按这套设计系统重绘）；导出（SVG / PNG）。MIT 协议，GitHub 已 57,669 Star，2026-04 建仓仍在活跃更新。
📎 GitHub：github.com/cathrynlavery/diagram-design ｜ 官网：diagramdesign.dev ｜ 画廊：cathrynlavery.github.io/diagram-design
✨ 核心亮点
🗺️
45 种图表类型
架构/流程/时序/ER/象限/雷达/桑基/鱼骨…覆盖几乎所有图表场景
🎨
Editorial 设计感
一个强调色、1px 细线、无阴影、4px 网格——不像 AI 生成的图
🏷️
匹配你的品牌
从你的网站拉取配色/字体，每张图都和你的站点一致
📄
一个 HTML 文件
自包含 HTML+SVG，双击即开、离线可用，可导出 SVG/PNG
🖥️ 环境要求
| AI 助手 | Claude Code / Codex / GitHub Copilot / Cursor / Gemini CLI / Cline / Windsurf / Pi / Factory Droid 等支持 Agent Skills 的工具 |
| 安装方式 | npx skills add cathrynlavery/diagram-design，或各助手 market/plugin 命令 |
| 运行模型 | 输出质量取决于所用模型的审美与执行能力（Claude 系表现佳） |
| 导出 PNG（可选） | Playwright：pip install playwright && playwright install chromium |
| 产物 | 一个 .html 文件，双击即开；无构建步骤、无 JS、无外部图片依赖 |
🚀 上手步骤
① 安装（适用 Cursor / Claude Code / Codex / Copilot 等）
# 通用：任何支持 Agent Skills 的助手
npx skills add cathrynlavery/diagram-design
# Claude Code：用插件市场（可获得自动更新 + 斜杠命令）
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
# Codex
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
② 用自然语言要一张图
"Make me an architecture diagram of my app:
frontend, backend, database, Redis cache."
"I need a quadrant showing Q2 projects by impact vs effort."
"Give me a sequence of a bearer call with token refresh on 401."agent 会先说出它选了哪种图、怎么布局，再写出一个 .html 文件，双击即可打开查看。
③ 品牌适配：让图长得像你的网站
"onboard diagram-design to https://yoursite.com"agent 抓取你的首页 → 提取主色板 + 字体栈 → 映射成 paper/ink/muted/accent/link 语义 token → 展示拟改的 diff → 确认后写入 style-guide.md，之后每张图都用你的配色和字体。首次用会自动做 WCAG AA 对比检查。
④ 重绘已有图（draw.io / Mermaid / Excalidraw）
/diagram-design:import-drawio platform.drawio --size=slide-16x9 --detail=simplified
/diagram-design:import-mermaid architecture.mmd --detail=balanced
/diagram-design:import-excalidraw whiteboard.excalidraw不是简单转换，而是"重绘"：同内容、这套设计系统、适配目标尺寸（slide/doc/social/print）。四个旋钮：格式、尺寸、细节（faithful/balanced/simplified）、受众（engineer/mixed/executive）。
⑤ 导出 SVG / PNG
/diagram-design:export-diagram my-diagram.html --svg-only
/diagram-design:export-diagram my-diagram.html --png-only --scale=3
# 或者直接说 "Export this diagram as SVG and PNG."SVG 给 Figma/Illustrator（会自动注入字体）；PNG 用 Playwright 2× 栅格化（一次性装 playwright + chromium）。
关键信息速查
| 安装 | npx skills add cathrynlavery/diagram-design ｜ 各助手 marketplace 命令 |
| 图表类型 | 45 种（架构/流程/时序/ER/象限/雷达/桑基/鱼骨/甘特…） |
| 产物 | 一个自包含 .html（内联 SVG），双击即开、离线可用 |
| 品牌 | onboard 你的网站 → paper/ink/accent/字体 应用到所有图 |
| 导入 | draw.io / Mermaid / Excalidraw 重绘（不是转换） |
| 导出 | SVG / PNG（Playwright，2×） |
| 协议 | MIT |
🖼️ 效果图与演示
架构图 · Components + connections：
流程图 · Decision logic：
时序图 · Messages over time：
象限图 · Two-axis positioning：
这套"审美规则"是作者特意写死的：一个强调色、1–2 个焦点、1px 细线、无阴影、圆角≤10px、全部坐标落在 4px 网格上。产物不依赖任何 JS、没有构建步骤、不请求外部图片，双击 HTML 就打开。
🎯 典型玩法
🏗️ 架构图：前后端 + 数据库 + 缓存，一张规范的架构图放博客/文档
🔀 流程 / 时序图：决策流程、接口调用时序、OAuth 刷新流程，交代得明明白白
🎯 战略象限 / 雷达：Q2 项目按影响 vs 投入画象限，一眼看出优先级
♻️ 数据 / 依赖图：数据流、依赖图、ER、数据库 schema，给团队评审
📰 博客配图：Editorial 风格和你的站点品牌一致，不再是通用模板图
🗃️ 旧图翻新：把已有的 draw.io/Mermaid/Excalidraw 图重绘成精致版本
📊 和同类做法比
| Mermaid / PlantUML | 写文本；渲染器主题；适合放 Git、经常变、要 diff 的文档 |
| draw.io / Excalidraw | 手动拖形状；可编辑文件；布局看人、风格看手 |
| Diagram Design | 对 agent 描述一句；一个 HTML+SVG、Editorial 风格、4px 网格、匹配品牌；适合要发布的图 |
⚠️ 什么时候别用它：图放 Git 里且每 sprint 都变 → 用 Mermaid（能 diff、GitHub 能渲染）；列表 → 用表格；单框标注 → 直接写一句话。Diagram Design 适合"要发布的图"，不适合"随时改的文档图"。输出质量还取决于你跑的模型——同一句提示布局可能略有差异。
原理一句话：作者把"审美"写成可执行的规则并塞进 skill 的 style-guide.md——单一强调色、1px hairline、无阴影、坐标全在 4px 网格。agent 画图时按这套 token（accent/ink/paper）渲染内联 SVG，并把品牌网站的色板/字体也映射成同一套语义角色，所以产出既有编辑级质感，又和你网站长得像一家人。
❓ 常见问题
Q：这是什么？需要安装什么软件吗？
它是一个 Agent Skill——给 Claude Code / Codex / Cursor 等 AI 编程助手用的技能包。装好后直接用大白话让 agent 画图，产出一个自包含 .html 文件，双击浏览器就能打开，无需额外软件。
Q：支持哪些 AI 助手？
Claude Code、Codex、GitHub Copilot、Cursor、Gemini CLI、Cline、Windsurf、Factory Droid、Pi、Amp 等支持 Agent Skills / 插件市场的主机都行。用 npx skills add cathrynlavery/diagram-design 或对应 marketplace 命令安装。
Q：有哪几种图表？
45 种，含架构图、流程图、时序图、ER/数据模型、时间线、泳道、象限、雷达、循环、树图、组织架构图、分层栈、韦恩、金字塔/漏斗、柱状图、热力图、甘特、桑基、鱼骨、Wardley、看板、用户旅程、部署、依赖图、UML 类图、数据库 schema、数据流、Sankey、Waterfall、可动爆炸图、轴测平面图等，每种还有三档风格。
Q：怎么让图匹配我的品牌？
对 agent 说 "onboard diagram-design to https://你的网站"：它会抓首页、提取主色板和字体栈，映射成 paper/ink/accent 等语义 token 写入 style-guide.md，之后每张新图都用你的配色和字体，还会自动做对比度（WCAG AA）检查。
Q：能导入我已有的 draw.io / Mermaid / Excalidraw 图吗？
能。用 /diagram-design:import-drawio / import-mermaid / import-excalidraw（或直接说"redraw this file for my deck"），它会把原图内容按这套设计系统重绘，并给出 fidelity ledger（哪些合并、折叠、丢弃）。
Q：能导出成 PNG 或 SVG 吗？
能。/diagram-design:export-diagram 支持 --svg-only（给 Figma/Illustrator）和 --png-only（Playwright 2× 栅格化，需 pip install playwright && playwright install chromium）。
Q：输出文件大吗？依赖多吗？
产物是一个自包含 .html（内联 SVG），无构建步骤、无 JS、无外部图片依赖，默认只请求一次 Google Fonts（用系统字体模式则零网络请求）。
Q：免费吗？协议？
免费，MIT 协议。可以商用、二开。作者是 Cathryn Lavery（LittleMight 创始人），项目从她自己给博客画图的需求而来。
📊 GitHub 搜索 cathrynlavery/diagram-design ｜ 官网 diagramdesign.dev
关注「AI工具匠」，获取更多 AI 工具实操教程