diagram-design Skill：让 AI 图表从”能用”升级到”能交付”的编辑设计系统

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

把 AI 生成的图表从”能用”提升到”能交付”——这是 diagram-design 正在解决的问题。它是一个 Claude Code / Codex / Pi 专用 Skill，提供 39 种编辑级图表类型（架构图、流程图、时序图、甘特图、Sankey 等），输出为自包含 HTML + SVG，无需任何第三方库，浏览器直接打开即渲染。设计师最头疼的”圆角方框加箭头”AI 图通病，被它用完整设计系统彻底修正：强调色只留给读者最先看的 1-2 个节点，语义模式与布局分离，静态输出默认开启。2026 年 8 月首次上榜 GitHub Trending 即冲至 #1，周新增 star 超 1.3 万，是当前整个 Agent Skills 生态里热度最高的视觉类 Skill。

功能与原则

diagram-design 的核心能力是为 AI 编程助手提供可交付级别的图表输出。它不依赖任何外部渲染引擎，产物是自包含 HTML + 内联 SVG，任何浏览器打开即正确显示，无构建步骤、无 JavaScript、无外部图片依赖。

设计原则三条：

  • 最高质量的动作是删除：每个节点都必须有存在的理由，强调色只留给最需要被读者注意的 1-2 个元素，目标密度 4/10；
  • 语义模式与布局分离：queue、policy trace、trust boundary 等语义类型可映射到最近的基础布局，而不必增加类型数量；
  • 无阴影、无 Mermaid 味：明确拒绝 AI 图表常见的圆角方框、等宽字体、青紫发光风格，用真正的编辑设计系统替代。

认可度

  • GitHub Star：截至 2026-08-21 约 23,800 ★（8 月 16 日快照为 18,627，5 天增长约 5,200）
  • 本周新增：+13,556（GitHub Trending This Week，2026-08-16 数据）
  • Trending 排名：2026-08-13 首次上榜即登顶 GitHub Trending #1
  • Fork：806+
  • 安装方式：支持 Claude Code 插件市场 / Pi / npx skills，覆盖 70+ Agent

链接

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

原作者

cathrynlavery（GitHub 独立创作者），同时运营技术博客 littlemight.com 及副业项目 BestSelf.co。定位为”技术写作者的工具人”——解决写技术文档时 AI 图表质量不过关的长期痛点。

介绍

diagram-design 起源于一个很具体的日常崩溃：每次让 Claude 画架构图或流程图，得到的都是圆角方框加箭头、紫色发光背景，看起来像 2015 年的 PPT 模板。要么花 30 分钟在 Figma 里重新做，要么干脆放弃图。

作者选择第三条路：把一套完整的编辑设计系统封装进 Skill，让 AI 生成时直接遵循专业图表的所有隐性规则。SKILL.md 里写明了五条”不可协商”的连接线规则（如圆角肘部 r=8、箭头标签与连接线保持 6-10px 间距、禁止重叠等），以及 20 条输出前检查清单，覆盖几何可整除性、无外部 HTTP 资源、辅助功能合同等。

当前版本（2.5.10）提供 39 种图表类型，三种风格变体：minimal light、minimal dark、full-editorial。新增的布局语法的包括：Sankey、鱼骨图（ishikawa）、Wardley map、kanban、用户旅程图、部署图、依赖图、UML 类图、故事地图、数据库 ER 图。

特点

  • 零依赖渲染：纯 HTML + SVG，浏览器打开即正确显示，无 Mermaid/Graphviz 的跨平台渲染不一致问题
  • 品牌适配：能读取目标网站的配色与字体，60 秒内映射到图表，输出与团队视觉风格一致
  • 多格式互转：可读取并重绘 draw.io 与 Mermaid 源文件，并按尺寸、细节、受众控制信息密度
  • 语义模式分离：queue、policy trace、trust boundary 等语义类型映射到最近基础布局，无需为每种语义新建布局类型
  • 可访问动画：默认静态输出，可选开启有序解释动画，兼顾展示需求与无障碍访问
  • 多 Agent 支持：Claude Code 插件市场、Pi、npx skills，覆盖 70+ Agent 环境

使用方法

方式一：Claude Code 插件市场（推荐）

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

方式二：Pi 安装

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

方式三：npx 一键安装

npx skills@latest add cathrynlavery/diagram-design

安装后，在 Claude Code 对话框中直接描述需要的图表类型即可触发：

给我画一个微服务架构图，展示 API Gateway、Auth Service、User Service 之间的调用关系

使用场景与人群

适用场景：技术文档撰写、架构设计图、流程图、API 文档、方案汇报、产品 PRD 附图、技术博客配图。

目标用户：用 Claude Code / Codex / Pi 写代码或文档的开发者；需要统一品牌视觉的技术写作团队；希望 AI 直接产出可交付图表而不是草稿的 Agent 用户。

输入与输出案例

案例一：架构图

输入（Claude Code 对话框）：

Draw an architecture diagram showing a three-tier web application:
Frontend (React) → API Gateway → Backend (Node.js)
Backend connects to PostgreSQL database and Redis cache.
Use minimal light style, match the brand colors from example.com.

输出（示意）：自包含 HTML + SVG，包含前端、网关、后端、数据库、缓存五个节点，连接线遵循圆角肘部规则，强调色落在 API Gateway，minimal light 风格，可直接在浏览器打开或嵌入文档。

案例二：Sankey 流量图

输入：

Create a Sankey diagram showing user flow from landing page (1000 visitors)
through signup (300) to paid conversion (50). Dark editorial style.

输出：自包含 HTML 页面，左侧节点（landing page）、中间节点（signup）、右侧节点（paid），流量带宽与数值成比例，支持鼠标悬停显示精确数字，深色编辑风格，MIT 协议。

diagram-design 把”AI 能不能画图”这个问题彻底翻转成”AI 画的图能不能直接交付”。在 Skill 经济爆发式增长的 2026 年，它代表了新一轮趋势：Skill 不只是给 AI 添加功能，而是把专业领域（设计、编辑、工程规范）压缩成可分发、可组合的工作流。对所有用 AI 编程助手写文档、做方案的开发者，这个 Skill 值得优先装上试试。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 9 阅读