Diagram Design Skill：让 AI 画出专业级编辑图表的 27 种类型技能

Skill超级捕获手 技术创作者 2026-08-14 10 阅读

总结

Diagram Design 是近期 GitHub Trending 最火爆的 Claude Code 技能之一，由独立开发者 Cathryn Lavery 构建。它为 AI Agent 提供 27 种编辑级图表类型，输出的图表非通用圆角框，而是自包含 HTML + SVG，能匹配你的品牌配色和字体，一个 Skill 解决”让 AI 画图=得到丑模板”的长期痛点。截至 2026-08-14，该仓库已斩获 15,263 颗 Star，Trending 当日新增 4,475 颗，热度仍在攀升。

功能与原则

核心能力是让 Claude Code / Codex / Pi 等 Agent 原生生成专业级图表，无需打开 Figma 或手动挑选配色。设计原则三条：删减优于添加（每个节点必须有存在的理由）、强调色留给最重要的 1-2 个元素（读者第一眼就知道看哪）、目标密度 4/10（留白即专业）。输出的图表默认静态、无阴影、无构建步骤，可选accessible 动画模式。

认可度

  • GitHub Star：15,263 颗（截至 2026-08-14）
  • 当日新增：4,475 颗（Trending 第一名增量）
  • Trending 排名：全站当日 top repository
  • 平台支持：Claude Code、Codex、Pi（三大 Agent 平台均官方适配）
  • SourceForge 镜像收录（说明被独立开发者社区广泛引用）

链接

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

在线画廊：https://cathrynlavery.github.io/diagram-design

原作者

Cathryn Lavery（GitHub @cathrynlavery），独立开发者、创作者。创办 BestSelf.co， bootstrapped 到 $55M+ 收入后于 2022 年出售给 PE，2024 年又买回，目前全力转向 AI Native 工作流并全程公开分享。其 newsletter littlemight.com 专注于 AI + 独立开发的实操记录。

介绍

每当你需要一张架构图、流程图或金字塔图时，AI 给你的永远是一个通用圆角框加随机配色，和你的网站风格格格不入。要么折腾 Figma 30 分钟，要么直接放弃图表。Diagram Design 就是为了解决这个问题而生。

这个 Skill 为 Claude Code 提供 27 种视觉类型，分为六大类：结构图（架构、流程、状态机、ER、嵌套、组织图）、关系图（Venn、Layer Stack、金字塔/漏斗）、矩阵图（四象限、雷达、顾问 2×2）、时序图（时间线、甘特图、序列图）、流程图（Swimlane、流程、数据流）、图表（柱状、折线、散点、环形图）。所有图表均为自包含 HTML + SVG，零外部依赖，可直接浏览器打开或嵌入文档。

最新 2.0 版本新增 Loop（飞轮图）：以共享内存 hub 为中心的循环图，虚线表示写回路径，适合表达系统反馈机制。2.3 版本新增语义系统模式和可选的可访问动画，同时静态输出仍为默认行为。

特点

  • 27 种图表类型，覆盖技术文档、产品截图、slide 制作所有场景
  • 品牌自动识别：给定网站 URL，60 秒内提取主色调、字体栈并映射为语义角色（paper/ink/accent/muted），WCAG AA 对比度自动校验
  • 跨平台支持：Claude Code / Codex / Pi 三大 Agent 均官方适配，安装命令各有专属版本
  • draw.io / Mermaid 导入重绘：已有图表可一键迁移到该设计系统，支持尺寸、细节级别、格式全面自定义
  • 零依赖输出：所有图表为独立 HTML 文件，无阴影、无 JavaScript、外部图片零依赖，可直接截图或嵌入任意文档
  • 可选动画：none / reveal / step / loop 四种模式，reduced-motion 用户自动显示静态帧并隐藏播放控件

使用方法

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

Pi 安装：

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

安装后，在对话中直接描述需求即可：

"帮我画一个前端 / 后端 / 数据库 / Redis 缓存的架构图"
"用四象限展示 Q2 项目的 Impact vs Effort"
"画一个 Bearer 调用流程，包含 401 时自动刷新 Token 的分支"

Agent 会自动选择最合适的图表类型，生成 HTML 并保存到项目目录。也可从模板直接创建：

cp skills/diagram-design/assets/template.html my-diagram.html        # 简约亮色
cp skills/diagram-design/assets/template-full.html my-diagram.html    # 编辑社论版
cp skills/diagram-design/assets/template-motion.html my-diagram.html  # 可选动画

品牌识别 onboarding：

你：onboard diagram-design to https://yoursite.com
Agent：→ 拉取主页 → 提取主色调 + 字体栈 → 映射语义角色 → 展示拟议 diff
你：yes, apply it

使用场景与人群

适用场景：

  • 技术文档 / README 架构图（告别 Mermaid 的”代码图”风格）
  • 博客文章配图（图表匹配你的网站品牌，而非通用模板）
  • 产品演示 slide（图表即开即用，无需设计工具）
  • 系统设计评审（状态机、序列图、数据流图自动生成）
  • PPT / Notion / 内部 wiki 文档配图

目标用户：

  • 独立开发者 / 独立 maker（没有设计师但需要专业配图）
  • 技术写作者（需要快速生成文档级图表）
  • 产品经理 / 创业者（制作 pitch deck 或产品文档）
  • AI Agent 深度用户（想把 AI 画图从”能用”提升到”专业”）

输入与输出案例

案例 1：架构图

输入："帮我画一个典型 Web 应用的架构图，包含前端（React）、后端（Node.js）、PostgreSQL 数据库和 Redis 缓存层"

输出：一张架构图 HTML，节点为清晰矩形，用连接线标注数据流向，
　　　配色为你的网站主色，字体继承你的网站字体栈，
　　可直保存到 docs/architecture.html

案例 2：四象限图

输入："做一个四象限图，横轴是 Effort（低→高），纵轴是 Impact（低→高），
　　　把我 Q2 的 5 个项目放进去：Botanical UI（高 effort/高 impact）、
　　　API 文档重写（低 effort/高 impact）、性能监控（高 effort/低 impact）、
　　　Bug 修复（低 effort/低 impact）、用户调研（低 effort/中 impact）"

输出：一张 2×2 矩阵图，每个项目名称标注在对应象限位置，
　　　高 impact + 低 effort 象限的项目用 accent 色重点标注，
　　可导出为 PNG 或直接嵌入 Notion / Confluence

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 10 阅读