diagram-design Skill：让AI生成编辑级图解，设计师看了不皱眉

diagram-design Skill：让 AI 生成「编辑级」图解，设计师看了不皱眉

2026年8月，GitHub最炙手可热的Skill之一并非某个复杂的Agent框架——而是一个解决”AI画图太丑”这个看似简单却极度普遍痛点的工具。diagram-design是一个面向Claude Code、Codex和Pi的编辑级图解Skill，能在60秒内生成与品牌风格一致的自包含HTML+SVG图表，一句话概括它的价值：让AI画图从”能用”升级到”能见人”。

功能与原则

diagram-design的核心能力是生成39种编辑级视觉图表类型，涵盖流程图、架构图、因果图、Sankey图、鱼骨图、Wardley地图、Kanban、用户旅程图、部署图、依赖图、UML类图、故事图、数据库Schema等。每一张图都严格遵循一套编辑设计原则：无阴影、无Mermaid风格的通用圆角框、以留白和密度控制（目标密度4/10）保证可读性。语义层与布局层分离——同一个布局类型（如队列、策略追踪、信任边界）可以适配不同语义而无需扩展类型数量。

设计原则的核心三条：删除是最高质量的移动（每个节点都需证明自己的存在价值）、强调色专留给读者最需首先关注的一两件事、静态HTML为默认输出，可选过渡动画用于有序解释场景。

认可度

• GitHub Star：26,407（截至2026-08-25）
• 本周新增：+13,556（8月第二周GitHub Trending多个Agent-Skill仓库上榜，该仓库是本批中视觉类代表）
• 多次进入GitHub Trending周榜
• 在CSDN、MCV技术社区等中文开发者平台被专题盘点，标注为「Claude Code必装图解Skill」

链接

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

原作者

cathrynlavery（GitHub个人账号），同时运营技术博客littlemight.com及副业项目BestSelf.co。其写作背景使其对「内容可视化需匹配编辑品质」有深刻理解——这也是这个Skill诞生的直接动机。

介绍

diagram-design最初源于作者自己的痛点：每次需要架构图、流程图或金字塔图时，让Claude生成的结果要么是通用圆角框，要么需要花30分钟在Figma里手动调整。两者都不可接受。

她因此把20种经过编辑设计训练的视觉类型打包成Claude Code Skill，让AI能读取目标网站的品牌风格，在60秒内输出与现有内容视觉一致的图表。39种类型全部以自包含HTML+SVG交付，读者无需任何渲染依赖。2025年逐步迭代至2.5.10版本，新增Sankey、鱼骨、Wardley地图等10种新布局，语义系统模式（semantic system patterns）和可选无障碍动效也已加入。

这个Skill还支持将已有的draw.io或Mermaid源文件重新绘制为指定格式、尺寸和细节层次的输出——这是对已有图表资产的低成本升级路径。

特点

• 39种编辑级视觉类型，覆盖技术文档、流程梳理、战略图谱等高频场景
• 60秒品牌匹配：读取目标网站CSS/字体，自动套用品牌色和排版风格
• 自包含HTML+SVG：零外部依赖，嵌入任何文档或网页均不破坏布局
• 语义布局分离：同一布局引擎适配多种语义类型，减少Prompt工程复杂度
• 支持draw.io/Mermaid重绘：已有图表资产可一键升级到编辑品质，无需从头生成

使用方法

安装（在Claude Code目录下）：

克劳德项目目录/.claude/commands/ 中放入对应skill文件，或通过Claude Code的skill安装命令直接添加

基础调用示例：

用户：请为这个微服务架构生成一张部署图，突出api-gateway和数据库两个组件
AI（加载diagram-design后）：生成自包含HTML+SVG部署图，强调色应用于api-gateway和数据库节点，其他服务以灰阶呈现

重绘已有图表：

用户：把这段Mermaid代码转成editorial风格，尺寸限制在800x600内
AI（加载diagram-design后）：解析Mermaid AST，按语义类型映射到最近的编辑布局，输出HTML+SVG

使用场景与人群

适用场景：技术文档撰写、产品架构说明、流程规范输出、战略或业务图谱（Wardley地图、金字塔图）、对外PPT附图、开发者关系内容（博客、Changelog、API文档）。

目标用户：已使用Claude Code/Codex进行日常开发或内容创作的技术写作者、产品经理、架构师，以及需要在没有专业设计师介入的情况下快速产出「看起来经过设计」的视觉内容的个人开发者或小团队。

输入与输出案例

案例1：微服务架构图
– Input：一段微服务架构描述（包含api-gateway、auth-service、user-service、postgres、redis等组件及调用关系）
– Output：自包含HTML+SVG部署图，强调色标注api-gateway和postgres，灰阶呈现其他节点，布局为自左向右分层架构图，无阴影，目标密度4/10

案例2：Mermaid重绘
– Input：一段Mermaid流程图代码（描述用户注册→邮箱验证→首次登录的三阶段流程）
– Output：同一流程以编辑级流程图呈现，可选minimal light/minimal dark/full-editorial三种风格之一，支持一键调整尺寸和细节层次，输出即嵌入文档可用

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