diagram-design Skill：让 AI 一键生成编辑级插图，设计师看了不皱眉

diagram-design Skill：让 AI 一键生成编辑级插图，设计师看了不皱眉

diagram-design 是一个专为 AI 编程助手（Claude Code、Codex、Pi）设计的 Skill，主打「编辑级品质」图表生成。它内置 29 种图表类型，全部是自包含 HTML + SVG 文件，无阴影、无依赖，打开浏览器即可查看。这个 Skill 的核心卖点很直接：让 AI 生成的图表不再是千篇一律的圆角白盒，而是能与你的品牌视觉融为一体的专业插图。

功能与原则

diagram-design 提供 29 种图表类型，覆盖架构图、流程图、时序图、状态机、ER 图、甘特图、散点图、雷达图、金字塔、泳道图、九宫格等常见场景，以及 Loop（飞轮图）、Medallion（奖章图）等高阶类型。每种图表均提供三种变体：minimal light、minimal dark、full-editorial，用户可根据场景自由切换。

设计的核心原则是「编辑级品质」：强调留白与重点突出，辅助色仅用于标记 1–2 个核心关注点，目标密度控制在 4/10（偏稀疏但信息层次清晰）。这与 AI 通常生成的臃肿图表形成了鲜明对比。

认可度

截至 2026-08-12，diagram-design 在 GitHub 累计斩获 8,613 颗 Stars，当天新增 1,616⭐，稳居 GitHub Trending 总榜前列。项目由独立开发者 cathrynlavery（BestSelf Co 创始人）构建和维护，采用 MIT 许可证。

链接

GitHub：https://github.com/cathrynlavery/diagram-design

原作者

cathrynlavery（Cathryn Lavery）—— Bootstrapped 创业者的典型样本：曾将 BestSelf Co 从零做到 $55M+ 营收，卖给 PE 后又于 2024 年买回，现在全程用 AI 工具（Claude Code、Codex）独立开发产品。她在 GitHub 个人页写道「Becoming AI Native & documenting as I go」，是一个从传统创业者转型为 AI-Native Builder 的活案例。

介绍

diagram-design 最初源于作者自己的痛点：写博客、做产品时需要配图，但 AI 生成的图表要么是丑到离谱的圆角白盒，要么就得花半小时在 Figma 里手动调整。为此她直接为 Claude Code 写了一个 Skill——让 AI 生成的图表从「能用」升级到「设计师看了不皱眉」。

v2.0 新增了 Loop（飞轮图），适合展示循环业务流程或带有共享内存中心的系统架构，图中虚线表示写回路径。Skill 的安装极为简单：Claude Code 用户只需在插件市场搜索添加，Pi 用户一条命令即可安装。装好后 AI 能直接读取你的网站，自动提取品牌色和字体，一键应用到所有图表——整个品牌适配过程不超过 60 秒。

特点

• 29 种图表类型：覆盖架构、流程、时序、状态、数据模型、时间轴、金字塔、飞轮等高中低复杂度场景
• 三种视觉变体：minimal light / minimal dark / full-editorial，一键切换
• 品牌自动适配：读取网站提取主色、辅色、字体，图表自动匹配，无需手动配色
• draw.io / Mermaid 兼容：直接把已有图表文件扔给 Skill，它会按指定格式、大小重新渲染
• 零依赖：自包含 HTML + SVG，打开浏览器即用，无需构建步骤、无 JS、无外部图片

使用方法

Claude Code 安装：

/plugin marketplace add cathryn

Pi 安装：

pi install https://github.com/cathrynlavery/diagram-design

然后运行 /reload 刷新会话，或用 /skill:diagram-design 显式调用。

基本调用示例：

「画一个用户注册流程的流程图」
「把这个 ER 图转成 minimal dark 风格」
「用 Loop 图展示推荐系统的数据流转」

AI 会根据请求生成对应的 HTML 文件，可直接在浏览器打开或嵌入文档。

使用场景与人群

• 技术博主 / 内容创作者：需要配技术架构图、流程图，不想花时间在 Figma
• 产品经理：画功能架构、泳道图、数据流图，直接用自然语言驱动
• 独立开发者 / AI-Native Builder：全程用 Claude Code / Codex 工作流，不离开 IDE
• 设计资源有限的团队：没有专职设计师，又需要专业级别配图

输入与输出案例

案例 1：架构图
输入：「Draw a high-level architecture diagram for a microservices app with API gateway, auth service, and three backend services」
输出：一个 clean 的 minimal light 风格架构图，展示各服务之间的连接关系，辅助色标注 API Gateway，文件为 .html 可直接在浏览器打开。

案例 2：品牌适配
输入：「Redraw this diagram in our brand colors: primary #1a73e8, accent #ea4335, font Inter」
输出：Skill 自动读取网站配色方案后，生成一份主色为蓝色、强调色为红色的新版图表，所有节点字体换为 Inter，整体视觉与产品品牌高度一致。

GitHub: https://github.com/cathrynlavery/diagram-design