📌 项目地址：cathrynlavery/diagram-design | ⭐ 6,266 颗星 | 🔧 HTML | 📜 未标注
这个项目解决什么问题
用 Claude 生成图表时，最常见的产物是千篇一律的圆角方框加箭头：没有品牌感、没有编辑设计感，放进自己的网站或文档里非常突兀。随后你不得不在 Figma 里花半小时重配色、调字体，或者干脆放弃图表。
diagram-design 是一个 Claude Code skill，让 Claude 在生成图表时直接输出「编辑级」标准的 HTML+SVG。不需要 Figma，不需要构建步骤，不需要外部图片或 JS 依赖。它还能读取你的网站，自动把配色和字体映射到每一张图表上——按作者的说法，60 秒内完成品牌匹配。
README 里有一段设计原则，体现了这个项目的美学立场：
Every node earns its place. The accent color is reserved for the 1–2 things the reader should look at first. Target density: 4/10.
也就是说：删除才是最高级的动作，每张图都有明确的视觉重心，而不是信息堆砌。这正好对应作者批判的 Mermaid 式「泛化圆角框」。
安装与使用
首先把仓库 clone 到本地，然后把 skill 符号链接到 Claude Code 的 skills 目录：
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design
安装后，这个 skill 就会被 Claude Code 加载。因为 README 没有给具体 prompt 示例，实际如何在对话中触发，建议参考 Claude Code 官方 skill 文档或查看 skill 内置的说明文件。
安装完成后，所有图表都支持三种变体：minimal light、minimal dark、full-editorial。你可以直接打开 skills/diagram-design/assets/index.html 浏览在线图库：
open skills/diagram-design/assets/index.html
在浏览器里切换标签，就能看到全部图表类型在不同配色方案下的效果。
内置了哪些图表类型
官方描述称有 29 种编辑级图表类型，README 中列出的类型包括：
- 架构与系统：Architecture、IT current-state、High-Level、Data flow、DP integration
- 流程与逻辑：Flowchart、Process、Swimlane、Sequence、State machine
- 数据与关系：ER/data model、Medallion、DP security matrix
- 比较与布局：Quadrant、Consultant 2×2、Radar/Spider、Venn、Tree、Org chart、Nested
- 时间与统计：Timeline、Gantt、Bar chart、Line chart、Scatter plot
- 其他：Pyramid/funnel、Layer stack、Loop
其中 2.0 版本新增的 Loop 值得单独说：它用来画飞轮图，带一个「共享内存」的中心枢纽，虚线代表写回路径。这种表达在系统设计和增长模型里很实用，而且视觉上比普通循环箭头更清晰。
和 Mermaid / Figma 的区别
Mermaid 的问题不是功能弱，而是输出样式高度雷同：默认圆角矩形、固定配色，几乎无法融入专业文档的视觉体系。diagram-design 的输出是自包含的 HTML+SVG，你在浏览器打开就能用，同时保留了完整的编辑空间，不像 Mermaid 只能依赖渲染引擎。
Figma 能做出更好的图，但要手动完成每一步。这个 skill 的价值是直接让 Claude 学会编辑设计规则：强调色只留给 1–2 个核心元素、密度控制在 4/10、组件间连接线有编辑级排版。换句话说，它把设计师的排版标准压缩进了 skill 里。
另一个明显区别是品牌识别：skill 会读取你的网站，提取配色和字体，然后应用到所有图表。这一点对给人做内容/产品设计的人非常实用——图表不是孤立的文件，而是整个品牌视觉系统的一部分。
需要注意的地方
- 依赖 Claude Code。你没有安装 Anthropic 的 Claude Code 命令行工具，就无法使用这个 skill。
- 安装方式基于符号链接。如果你想保留仓库在其他位置，请把命令里的路径对应修改。
- README 没有明确许可证信息。如果打算商用，需要先联系作者确认。
- 所有图表都是 HTML+SVG，不是 png/jpg。嵌入博客或文档时要注意目标平台是否支持外部 HTML 文件或 SVG 内联。
适不适合你
这个项目最匹配的作者画像：有自己的网站或内容品牌，频繁需要架构图、流程图或数据分析图，同时对图表的美观度有高于「工具默认样式」的要求。如果你只是随手记个流程，Mermaid 就够；如果你需要让图表放进官网、提案、客户文档里不丢人，diagram-design 值得试一下。
它的设计理念也很明确：不是做一套更花的图表模板，而是让 Claude 学会编辑级的设计判断——每一张图上元素更少、重点更突出，而不是让页面变得更满。