diagram-design

Diagram Design Skill 是由开发者 Cathryn Lavery 发起并持续维护的开源 Claude Code 图表设计技能，核心定位是“为架构、流程与数据模型提供一套兼具编辑审美与工程规范的自包含 SVG 图表设计系统”——它不满足于做一份通用的图表生成提示词或零散的绘图代码片段，而是将 27 种图表类型、共享设计系统、品牌风格引导、5 条强制性连接器规则、7 种核心 SVG 图元、丰富的图标库、手绘与终端变体、HTML 内联 SVG 导出等 10 余项核心能力整合于一套即插即用的技能体系中，全部配有 SKILL.md 一键触发、references/ 目录下的类型专属规范、品牌风格引导（首次运行门禁）和 MIT 开源协议。市面大多 AI 图表生成工具要么是泛泛的“画一个架构图”式提示（缺乏设计规范），要么是只能输出纯文本或 Mermaid 代码的轻量工具（缺乏视觉定制力）——但很少有项目能将“编辑级的设计系统”与“27 种图表类型的工程化规范”同时做到，Diagram Design Skill 解决的正是这个问题。

一、Diagram Design Skill 是什么

Diagram Design Skill 采用“设计系统 + 类型规范 + 品牌引导”三位一体的使用体验，通过 GitHub 在 Cathryn Lavery 的 diagram-design 仓库中免费开源发布，采用 MIT 许可证。技能由开发者 Cathryn Lavery 发起并持续维护，最后更新于 2026 年 7 月 15 日。技能定位为“创建技术和产品图表——架构图、IT 现状图、流程图、时序图、状态机图、ER/数据模型图、时间线、泳道图、象限图、雷达/蜘蛛图、循环/飞轮图、嵌套图、树图、组织架构图、层级堆叠图、维恩图、金字塔/漏斗图、柱状图、折线图、甘特图、散点图、高层级图、流程图、奖章图、数据流图、数据平台集成图、数据平台安全矩阵图”——27 种图表类型，以自包含的 HTML 文件形式输出，内联 SVG 与 CSS。

Diagram Design Skill 的运作机制与市面常见的“通用绘图提示”或“Mermaid 代码生成器”有本质区别。它不是一句“帮我画一个架构图”的泛泛指令，也不是一个只能输出文本描述或外部依赖图表的轻量工具，而是一套设计系统驱动、类型规范约束、品牌风格可定制的图表工程框架。技能的核心设计包含三大层次：共享设计系统——统一的颜色令牌、字体配对（两套字体家族）、间距与圆角规范、复杂度预算和品味门禁；类型专属规范——27 种图表类型各自独立维护在 references/type-*.md 中，仅在用户选定类型时加载；品牌风格引导——技能在首次运行时强制触发风格引导门禁，询问用户是否从网站 URL、已安装技能、本地设计系统目录或手动粘贴令牌来定制配色与字体，确保输出的图表不会以默认的“中性石材+锈色”皮肤出现在品牌项目中。技能还内置了 5 条强制性连接器规则——强制使用圆角直角正交连接器（半径 r=8）、禁止对角线、标签与连接器保持 6–10px 间距、禁止重叠连接器、交叉时使用桥接跳转——以及 7 种核心 SVG 图元（标注、手绘变体、图标集、终端/CLI 窗口等）。

二、Diagram Design Skill 能做什么

Diagram Design Skill 的核心能力可以精炼地概括为：选、定、绘、校、出，围绕这五大维度提供了从图表类型选择到品牌化交付的完整路径，覆盖技术与产品图表创作的全方位需求，具体包括：

27 种图表类型的精准选择（选） ——不是“随便画个图”，而是“为你的需求匹配最合适的图表类型”。技能覆盖了架构图、IT 现状图、流程图、时序图、状态机图、ER/数据模型图、时间线、泳道图、象限图、雷达/蜘蛛图、循环/飞轮图、嵌套图、树图、组织架构图、层级堆叠图、维恩图、金字塔/漏斗图、柱状图、折线图、甘特图、散点图、高层级图、流程图、奖章图、数据流图、数据平台集成图、数据平台安全矩阵图等 27 种类型。每一种类型都有独立的规范文件（references/type-*.md），按需加载，确保图表既符合类型惯例又遵循统一的设计系统。

品牌风格引导与设计系统定制（定） ——不是“默认皮肤”，而是“你的品牌语言”。技能在首次运行时强制触发风格引导门禁：检测到风格指南仍为默认值时，主动暂停并询问用户是否要定制。用户可通过四种方式定制：从网站 URL 自动提取调色板与字体、从已安装技能中读取令牌、从本地设计系统目录中解析、或手动粘贴令牌。定制完成后，风格指南的 accent 值会从默认的 #b5523a 变为自定义值，后续运行自动跳过门禁。这种“品牌优先”的设计哲学，确保每一张图表都是为项目量身定制的，而非千篇一律的默认皮肤。

编辑级的设计系统与 SVG 图元（绘） ——不是“能看就行”，而是“经得起放大”。技能内置了完整的编辑设计系统：排版遵循“自信的克制”——一种强调色、两套字体家族、每个元素都要经过论证才能保留；颜色使用语义化的令牌系统（paper、ink、accent、muted、link-blue 等）；连接器强制执行 5 条不可妥协的规则——圆角直角正交、禁止对角线、标签与连接器保持 6–10px 间距、禁止重叠、交叉时使用桥接跳转。技能还提供了 7 种核心 SVG 图元：编辑标注、手绘变体、图标集（笔记本电脑、服务器、数据库、K8s、Docker、AWS 等）、终端/CLI 窗口变体、以及可选的点状网格背景。

强制性质量检查与自我校正（校） ——不是“画完就交”，而是“画完再审”。技能在输出任何图表之前，强制运行 9 步预输出检查清单（§9），逐条验证连接器规则、标签间距、颜色令牌、字体配对等关键质量指标。如果发现连接器重叠或对角线，技能会要求重新设计布局。这种“画完必审”的质量文化，确保输出的每一张图表都经得起专业推敲。

自包含 HTML 文件导出（出） ——不是“依赖外部渲染器”，而是“一个文件，随处打开”。技能输出的图表是自包含的 HTML 文件，所有 SVG 与 CSS 内联其中。用户无需安装任何外部工具或依赖网络，双击 HTML 文件即可在浏览器中打开、查看、分享。这种“零依赖”的交付方式，让图表从“需要特定环境才能查看”升级为“一个文件走天下”。

三、Diagram Design Skill 适合谁用

Diagram Design Skill 的内容设计使其适配各类需要通过系统化的设计规范创建专业图表的开发者、架构师与产品经理，核心聚焦那些“Mermaid 图表太简陋、Draw.io 图表太随意、PPT 画图太耗时”，希望从“随手画图”升级为“设计系统驱动的专业图表创作”的人群，主要涵盖以下几类：

软件架构师与技术负责人——需要绘制系统架构图、IT 现状图、数据流图、部署拓扑图等专业图表，用于技术文档、架构评审或对外分享。技能提供的 27 种图表类型和编辑级设计系统，让架构图从“能看”升级为“经得起放大和打印”。

产品经理与产品设计师——需要绘制产品路线图、功能流程图、用户旅程图、高层级产品图等，用于产品文档、PRD 或向利益相关者汇报。技能的编辑设计语言和品牌风格引导，让产品图表与品牌视觉保持一致。

技术文档工程师与开发者布道师——需要为技术文档、API 文档、博客文章或演讲 PPT 配图。技能输出的自包含 HTML 文件可直接嵌入文档或截图使用，无需依赖外部图表工具。

数据工程师与数据科学家——需要绘制 ER/数据模型图、数据流图、奖章图（Medallion）、数据平台集成图等数据相关图表。技能覆盖了数据领域的多种图表类型，并提供了统一的视觉语言。

希望从“随手画图”升级为“设计系统驱动绘图”的工程师——不满足于用 Mermaid 或 Draw.io 画“能看就行”的图表，希望理解“好的图表设计应该是什么样的”。技能的设计哲学、连接器规则和类型规范本身就是一份浓缩的图表设计最佳实践教材。

四、Diagram Design Skill 的应用场景是什么

基于其内容设计与定位，Diagram Design Skill 的应用场景主要围绕技术文档配图、架构评审材料、产品文档图表和数据模型可视化，覆盖从个人创作到团队交付的多个场景，具体包括：

技术架构文档配图场景——团队需要为系统设计文档、ADR（架构决策记录）或技术方案评审准备架构图。Diagram Design Skill 提供了一条“选择架构图类型→风格引导定制品牌→按类型规范绘制→预输出检查清单验证→导出自包含 HTML”的完整路径。输出的图表既符合架构图的专业规范，又与品牌视觉保持一致。

产品需求文档与 PRD 图表场景——产品经理需要在 PRD 中插入流程图、泳道图、时间线或高层级产品图。技能覆盖了产品文档中最常用的图表类型，且输出的 HTML 文件可直接嵌入文档或截图使用，无需依赖第三方图表工具的授权或网络。

数据模型与数据流可视化场景——数据团队需要为数据仓库设计、ETL 流程或数据平台架构绘制 ER 图、数据流图、奖章图（Medallion）或数据平台集成图。技能专门覆盖了这些数据领域的图表类型，并提供了统一的视觉语言。

演讲与博客配图场景——技术布道者或开发者需要为技术演讲或博客文章配图。技能输出的自包含 HTML 文件可以全屏截图后嵌入演讲 PPT 或博客，无需担心字体缺失、颜色偏差或分辨率问题。

设计系统一致性保障场景——团队希望所有技术图表（架构图、流程图、数据模型图等）遵循统一的设计语言。技能的共享设计系统和品牌风格引导门禁，确保团队中每一个成员产出的图表都使用相同的颜色、字体和连接器规范，实现了“图表即设计系统的一部分”。

五、Diagram Design Skill 为什么值得关注

Diagram Design Skill 之所以值得关注，核心在于它将“技术图表创作从依赖零散工具和直觉升级为设计系统驱动、类型规范约束、品牌风格可定制的工程化技能”，并具备“27 种类型覆盖、编辑级设计系统、品牌风格引导、强制性质量检查、自包含 HTML 输出”的独特价值，具体体现在以下几点：

从“通用画图”到“27 种类型精准匹配”的覆盖广度。大多数 AI 图表工具只支持 3-5 种常见类型（流程图、时序图、架构图）。Diagram Design Skill 覆盖了 27 种图表类型——从架构图到 ER 图，从甘特图到雷达图，从维恩图到数据平台安全矩阵。这种“全类型覆盖”让用户无需在多个工具之间切换，一个技能即可满足从产品到技术、从数据到架构的全部图表需求。

从“默认皮肤”到“品牌风格引导”的设计深度。大多数图表生成工具输出的是“通用好看”的默认样式——所有用户看到的图表千篇一律。Diagram Design Skill 在首次运行时强制触发品牌风格引导门禁，主动询问用户是否要从网站、技能或本地目录提取品牌配色与字体。这种“品牌优先、默认仅为后备”的设计哲学，确保每一张图表都是为项目量身定制的，而非“一眼 AI 生成”的模板货。

从“能用就行”到“编辑级设计系统”的质量标准。技能的 SKILL.md 中明确写道：“最高质量的行动通常是删除”——“自信的克制。赢得每一个元素。一种强调色，两套字体家族”。技能还内置了 5 条强制性连接器规则——圆角直角正交、禁止对角线、标签间距 6–10px、禁止重叠、交叉时桥接跳转——每一条都是“画了这么多年图踩过的坑”的显性化。这种“把设计决策写成可执行的规则”的工程文化，让输出的图表从“能看”升级为“经得起专业审视”。

从“画完就交”到“预输出检查清单”的质量闭环。大多数图表工具只负责“生成”，不负责“质量”。Diagram Design Skill 在输出任何图表之前强制运行 9 步预输出检查清单——逐条验证连接器规则、标签间距、颜色令牌、字体配对等关键质量指标。如果发现连接器重叠，技能会要求“重新设计布局——这意味着两个节点靠得太近”。这种“画完必审、审完再交”的质量文化，让图表从“大概没问题”升级为“确定没问题”。

从“外部依赖”到“自包含 HTML”的交付自由。Mermaid 图表需要特定渲染器，Draw.io 图表需要特定编辑器。Diagram Design Skill 输出的图表是 自包含的 HTML 文件，所有 SVG 与 CSS 内联其中。双击即可在浏览器中打开，无需安装任何软件、无需网络、无需特定授权。这种“零依赖”的交付方式，让图表从“需要特定环境才能查看”升级为“一个文件，随处打开，永久可读”。

从“单一规范”到“类型专属 + 共享设计系统”的分层架构。技能的设计系统分为两层：共享设计系统（颜色、字体、间距、圆角、连接器规则）在所有图表类型中保持一致；类型专属规范（references/type-*.md）仅在用户选定类型时加载。这种“共性统一、个性独立”的分层架构，既保证了设计语言的一致性，又为每种图表类型保留了必要的灵活性——是一种兼具工程严谨性与设计灵活性的优雅平衡。

现实挑战与生态成熟度。Diagram Design Skill 并非没有短板。首先，技能的深度高度依赖于 references/ 目录中 27 个类型规范文件的质量和覆盖面——虽然已覆盖主流类型，但某些新兴图表形式或特定领域的图表可能未被收录。其次，技能目前仅以英文 SKILL.md 形式存在，对非英语用户有一定语言门槛。再次，品牌风格引导门禁虽然确保了设计质量，但也意味着首次使用时需要用户主动参与定制流程——对追求“开箱即用”的用户来说可能显得繁琐。