cathrynlavery/diagram-design

TL;DR

这是一个专为 Claude Code、Codex 等 AI Agent 设计的图表生成技能（Agent Skill），通过纯 HTML + SVG 输出“编辑级”视觉质量的架构图。它摒弃了 Mermaid 的通用样式，强调品牌一致性、语义化布局和零依赖渲染。

它解决什么问题

AI Agent（如 Claude Code）生成的图表通常存在“通用圆角矩形”泛滥、缺乏设计感且难以融入特定品牌调性的问题。作者 Cathryn Lavery 指出，与其在 Figma 中耗费半小时调整配色，不如让 Agent 直接读取网站品牌色并生成符合出版级标准的静态 SVG。该项目解决了 AI 绘图“能用但不好看”以及手动调整成本高的痛点。

核心做法

项目本质是一个标准化的 Agent Skill，包含 SKILL.md、参考文档和资产库。核心机制包括： 1. 语义与布局分离：行为模式（如扇入队列、策略追踪）独立于视觉类型，确保逻辑准确。 2. 品牌自动提取：通过读取目标网站主页的 CSS 变量和字体栈，自动生成 paper、ink、accent 等语义化 Token。 3. 静态优先：默认输出无 JS、无阴影的纯 SVG，确保在任何环境中可渲染；可选支持无障碍动画。 4. 格式转换：内置解析器，可将 draw.io、Mermaid 或 Excalidraw 源文件重绘为当前设计系统下的图表。

作者

Owner 是 Cathryn Lavery，她是技术博客 littlemight.com 和 BestSelf.co 的运营者。从 README 来看，她主要是一位技术写作者和产品思考者，而非大型开源基础设施的维护者。该项目更像是一个针对自身写作需求打造的“工具化”解决方案，随后开源给社区。

社区反应

该项目在极短时间内获得了 46,500+ Stars，这是一个非常惊人的数据（通常意味着它在 Hacker News 或 Twitter/X 上引发了病毒式传播）。Forks (2,959) 和 Open Issues (54) 的比例表明，大多数用户是“收藏”或作为 Skill 引用，而非深度参与代码贡献。语言生态以 HTML/CSS 为主，但核心价值在于其作为 Agent Skill 的通用性。

怎么上手

无需编译，直接通过各 AI 工具的插件市场安装： - Claude Code: /plugin marketplace add cathrynlavery/diagram-design - Codex/Copilot: 使用对应的 plugin marketplace add 命令。 - 通用安装: 通过 npx skills add cathrynlavery/diagram-design 适配 Cursor、Cline 等支持 Agent Skills 的工具。安装后，在对话中直接请求图表（如“画一个架构图”），或运行 /diagram-design:onboard 绑定品牌色。

争议与局限

静态输出为主：虽然支持可选动画，但核心优势在于静态 SVG。对于需要复杂交互或动态数据可视化的场景（如实时 Dashboard），它不如 D3.js 或 ECharts。
品牌提取的准确性：依赖对目标网站 HTML/CSS 的结构化解析，如果网站使用动态生成的样式或复杂的 CSS-in-JS，提取的品牌 Token 可能会出错（README 提及了 WCAG AA 对比度检查作为补救）。
依赖 Agent 能力：图表质量高度依赖于宿主 AI Model 的指令遵循能力和空间推理能力，Model 幻觉可能导致拓扑结构错误。