Diagram Design：让 AI 生成设计师不讨厌的编辑级图表

这是什么

Diagram Design 是一个专为 AI 编程助手（如 Claude Code、Codex）设计的图表生成技能。它能够生成自包含的 HTML + SVG 图表，具有编辑级的设计质量，避免了常见的“Mermaid 风格”和阴影效果。该技能支持 30 多种图表类型，包括架构图、流程图、时序图、状态机、ER 图等，并且可以自动匹配你的品牌风格。

适合谁

这个技能非常适合需要频繁创建图表的内容创作者、技术写作者、产品经理、架构师以及任何希望快速生成高质量图表的人。无论你是需要为博客文章配图，还是为技术文档绘制架构图，Diagram Design 都能帮你节省大量时间，同时保证图表的专业性和美观度。

能做什么

生成多种图表类型：包括架构图、IT 当前状态图、流程图、时序图、状态机、ER/数据模型、时间线、泳道图、象限图、雷达图、循环/飞轮图、嵌套图、树状图、组织架构图、层叠图、维恩图、金字塔/漏斗图、柱状图、矩形树图、折线图、甘特图、散点图、高级概览图、流程图、奖章图、数据流图、DP 集成图、DP 安全矩阵、桑基图、鱼骨图、Wardley 地图、看板、用户旅程、部署图、依赖图、UML 类图、故事地图、数据库模式、极坐标图、瀑布图等。
品牌风格匹配：通过读取你的网站，在 60 秒内匹配你的品牌风格，使图表与你的网站设计保持一致。
多种变体：每种图表类型都提供三种静态变体：极简浅色、极简深色和全编辑风格。你可以直接在浏览器中打开，无需构建步骤或外部依赖。
重绘现有图表：可以重绘 draw.io、Mermaid 或 Excalidraw 的源文件，并选择格式、大小和详细程度。
语义模式：语义模式将行为与布局分离，使得队列、策略跟踪或信任边界等概念可以使用最接近的现有类型，而无需增加类型数量。

使用前准备

你需要安装支持 Agent Skills 的 AI 编程环境，如 Claude Code 或 Codex。此外，建议具备基本的命令行操作能力。该技能不需要 API 密钥，但需要本地环境支持。

安装方法

对于 Claude Code，使用以下命令安装：

/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design

然后运行 /plugin，打开 Marketplaces，选择 diagram-design，并启用自动更新。对于 Codex，使用以下命令：

codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design

Codex 会在启动时刷新配置的 Git 市场。要立即获取更新，可以运行 codex plugin marketplace upgrade diagram-design 并启动新会话。

使用示例

安装后，你可以通过自然语言向 AI 助手描述你需要的图表，例如：“创建一个系统架构图，展示用户、应用服务器和数据库之间的交互。” AI 助手将使用该技能生成一个符合编辑级设计标准的 HTML+SVG 图表。

风险与注意事项

该技能生成的图表是自包含的 HTML+SVG 文件，没有外部依赖，但需要浏览器才能查看。
虽然技能支持多种图表类型，但某些复杂图表可能需要手动调整细节。
该技能是免费开源的，采用 MIT 许可证，但使用时请遵守许可证条款。
该技能在 GitHub 上拥有 42736 颗星和 2753 个 fork，社区活跃，但请注意开源项目的维护状态。