让 Claude Code 画出编辑级图表：diagram-design 怎么把"AI 画图"从笑话变成交付

你让 AI 画过架构图吗？

如果你试过，大概率经历过这一幕：你描述了半天"微服务架构 + 数据流 + 权限层"，Claude 或 GPT 给你吐回一张 Mermaid 图——一堆圆角方框、灰色箭头、字号糊成一片。你拿去给设计师看，设计师嘴角抽搐了一下。然后你打开 Figma，30 分钟过去了，图还没画完。

cathrynlavery/diagram-design 就是从这一幕里长出来的。一个 Claude Code 的 skill，27 种图表类型，全部自包含 HTML+SVG，没有外部依赖，没有 JS，打开浏览器就能看。上线一天拿到 2951 stars，这不是又一个"awesome-xxx"列表，是真实痛点被解决了。

27 种图，不是 27 个模板

关键区别在这里：大多数图表工具给你的是"模板"——改颜色、改文字、改连线，本质还是填空。diagram-design 给的是"语法"——每种图有自己的结构规则，skill 知道什么时候该用泳道、什么时候该用金字塔、什么时候该用飞轮。

看一下这 27 种：

• 架构类：Components、Flowchart、Sequence、State machine、ER model
• 层级类：Tree、Org chart、Nested、Pyramid、Layer stack
• 定位类：Quadrant、Radar、Venn
• 流程类：Swimlane、Process、Timeline、Gantt
• 数据类：Bar、Line、Scatter、Medallion、Data flow
• 特殊类：Loop（飞轮）、IT current-state、Consultant 2×2、DP integration、DP security matrix

最有趣的是 2.0 新加的 Loop——飞轮图，带"共享记忆中心"，虚线是 write-back。这不是传统图表，是动态系统的建模工具。

品牌适配：60 秒认领你的颜色

这是真正解决"编辑级"质感的关键。

你把网站 URL 喂给 skill，它读你的 CSS，提取主色、辅色、字体，然后映射到 27 种图的每一个节点、每条连线、每个标签。60 秒之后，你画的架构图和你网站的设计语言是一致的。

这一步杀死了"AI 画图看起来像 AI 画图"的根本原因——颜色和字体不匹配。不是图本身丑，是图和上下文不协调。diagram-design 把这个协调过程自动化了。

为什么是 Claude Code skill，不是独立工具

这是整个项目最值得琢磨的设计决策。

它不是一个 SaaS，不是一个 Figma 插件，不是一个桌面应用。它是一个 Agent Skill——装在 Claude Code、Codex、Pi 里，由 agent 自己决定什么时候调用。

这意味着什么？

• 你在和 Claude 对话时说"画一个微服务架构图"，Claude 自己去调 skill，自己选图表类型，自己生成 SVG
• 你不需要切换工具、不需要打开另一个应用、不需要复制粘贴
• 图表生成是对话流的一部分，而不是一个独立的"出图任务"

这是 AI 时代工具设计的新范式：工具不再是被人调用的，是被 agent 调用的。skill 就是 agent 的"手"。

"删除是最高质量的动作"

作者 Cathryn Lavery 在 README 里写了一句话，特别值得记住：

The highest-quality move is usually deletion. Every node earns its place.

这句话反 Mermaid、反 PowerPoint、反"多就是好"。编辑级图表的质感来自克制——accent color 只留给 1-2 个读者应该先看的元素，目标密度 4/10，每个节点都要"挣得"自己的位置。

这和好的设计原则完全一致：Dieter Rams 的"少但更好"、John Maeda 的《简单法则》、Edward Tufte 的"数据墨水比"。diagram-design 把这些原则编码进了 skill 的默认行为里。

三种变体：从草稿到交付

每种图都有三个版本：

1. Minimal Light：白底，黑线，一个 accent color
2. Minimal Dark：暗色主题，适合文档内嵌
3. Full Editorial：完整品牌色，适合博客和演示

这意味着你可以在对话里先画一个 minimal 版本快速讨论，定稿后再生成 full editorial 版本直接发布。同一个 skill 覆盖了从"草稿"到"交付"的全流程。

安装方式暴露了生态格局

diagram-design 支持四个平台，安装方式各不相同：

• Pi：pi install https://github.com/cathrynlavery/diagram-design
• Claude Code：/plugin marketplace add cathrynlavery/diagram-design
• Codex：npx skills add https://github.com/cathrynlavery/diagram-design
• Claude Cowork：手动粘贴 URL

这四个平台代表了"Agent Skill 生态"的当前格局——没有统一标准，每个平台有自己的包管理器，但都兼容同一个 skill 文件格式。这像极了早期 npm/pip/gem 各自为政的阶段。

diagram-design 的价值不只是"画图好看"，它是第一批跨平台 agent skill 的参考实现。如果你想知道"agent 时代的插件长什么样"，这就是一个活样本。

数据说话

• +2951 stars today——GitHub Trending 第一名，且远超第二名
• 27 种图表 × 3 种变体 = 81 个交付物
• 0 外部依赖——纯 HTML+SVG，没有 JS，没有 build step
• 60 秒品牌适配——读网站 CSS 自动映射
• 支持 4 个 agent 平台——Pi、Claude Code、Codex、Claude Cowork

一个更深的观察

diagram-design 的爆红不只是一个工具火了，它标志着一个新形态的成熟：agent skill 作为独立产品。

过去两年，AI 工具的形态经历了三轮演化：

1. Prompt 模板（2023-2024）：一段写好的 prompt，复制粘贴用
2. GPTs / Custom Agents（2024-2025）：带系统提示和工具调用的封装
3. Agent Skills（2025-2026）：跨平台、可组合、有自己工作流的能力包

diagram-design 是第三轮的典型代表——它不是"让 AI 学会画图"，是"给 AI 一个画图的工作流"。AI 负责理解你要什么，skill 负责按编辑级标准交付。

这种分工才是 AI 时代工具设计的正确姿势。让模型当诗人，让 skill 当会计——和 Euclid-MCP 的"推理外包"是同一个原则：强项留给模型，弱项外包给专门工具。

仓库：cathrynlavery/diagram-design
语言：HTML
今日增长：+2951 stars
安装：/plugin marketplace add cathrynlavery/diagram-design（Claude Code）