diagram-design Skill：让 AI 编码助手秒出专业编辑级图表的视觉神器

diagram-design Skill：让 AI 编码助手秒出专业编辑级图表的视觉神器

功能与原则

diagram-design 是一个专为 AI 编码助手（Claude Code、Codex、Pi 等）设计的 Skill，提供 39 种编辑级图表类型。它的核心设计原则是：「设计师不讨厌的图表，AI 也能画」——无需 Figma，无需 30 分钟配色，直接在终端里生成匹配品牌风格的专业的图。所有图表均为自包含 HTML + SVG，无阴影、无 Mermaid 风格的俗套感，语义层将图表行为与布局分离，使同一种逻辑类型可复用多种布局而不膨胀类型数。

认可度

GitHub 狂飙式增长：截至 2026-08-28，项目共斩获约 27,990 颗星，仅本周就新增超过 8,000 颗。从 2026-08-17 的 19,628 颗到今日的近 2.8 万颗，11 天狂涨约 8,362 颗星——是当周 GitHub Trending 榜单第一名，且远超第二名一倍以上。Trendshift 页面显示其热度仍在持续攀升，在 AI 编码工具类图中排名靠前。

链接

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

在线画廊：https://cathrynlavery.github.io/diagram-design/

原作者

作者为独立创作者 cathrynlavery，同时运营内容博客 littlemight.com 和品牌周边品牌 BestSelf.co。其创作出发点非常具体：每次需要图表时，Claude 给出的都是通用圆角矩形图，「要么跟 Figma 搏斗 30 分钟，要么直接放弃图表」——于是自己动手做了这个 Skill。

介绍

这个 Skill 的诞生源于一个真实痛点：内容创作者、技术写作者和开发者需要图表来辅助表达，但市面上的 AI 生成工具普遍输出「通用圆角矩形图」——看起来像模板，不匹配任何品牌风格，也不够专业。diagram-design 一次性解决了这个问题：用户给出图表主题，Skill 自动生成编辑级质量的 HTML/SVG 图，且能读取目标网站的主色调，60 秒内匹配品牌。

39 种图表类型覆盖范围极广，从基础的 Architecture（架构图）、Flowchart（流程图）、Sequence（时序图）、State machine（状态机），到专业的 ER / Data Model、UML Class、Deployment、Dependency graph，再到新兴的 Wardley map、Kanban、User journey、Story map、Database schema，以及 Sankey、Fishbone 等分析图表。所有类型均提供 minimal light、minimal dark、full-editorial 三种视觉变体，可直接在浏览器打开预览，无任何构建步骤。

特点

• 39 种图表类型：覆盖架构、流程、数据、UML、地图、甘特图等，几乎涵盖所有常见可视化需求
• 三种视觉风格：minimal light / minimal dark / full-editorial，一键切换，无需重新生成
• 品牌色自动匹配：读取网站 URL 或品牌色代码，60 秒内输出匹配品牌调性的图表
• 零依赖，浏览器直开：自包含 HTML + SVG，无 JavaScript、无阴影、无 Mermaid 风格
• 语义层设计：行为与布局分离，同一逻辑类型（如 queue、policy trace、trust boundary）可复用最接近的现有布局，避免类型爆炸
• 支持导入已有图表：可将 draw.io 或 Mermaid 源文件转换为其他格式/尺寸/详细程度

使用方法

安装步骤（以 Claude Code 为例）：

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

首次安装后运行一次 /plugin，打开 Marketplaces，启用自动更新。

基本调用：进入 Claude Code，直接描述需要的图表，例如：

Draw an architecture diagram showing microservices with a message queue

Skill 会自动选择最合适的图表类型（Architecture + Loop），生成匹配的 HTML 文件。

使用场景与人群

目标用户：技术写作者、内容创作者、开发者 DevRel、架构师、产品经理，以及需要在文档/博客/演示中加入专业图表但不想花大量时间在设计工具上的人群。

适用场景：API 文档里的架构图、技术博客的流程图、团队 wiki 的 ER 图/数据库 Schema、PRD 里的用户旅程图、技术分享的甘特图和部署图等。尤其是需要 AI 辅助写作同时生成配套图表的工作流，diagram-design 可以无缝嵌入，无需切换工具。

输入与输出案例

案例 1：架构图

• 输入（在 Claude Code 中）：
  “`
  Draw a high-level architecture diagram for a microservices app with:
• API gateway
• Auth service
• User service
• Order service
• PostgreSQL and Redis as data layers
  “`
• 输出：一组 minimal light 风格的架构图，展示各服务组件及其连接关系，每节点自带品牌色高亮，无需手动排版。

案例 2：流程图 + 时序图组合

• 输入：
  Draw a flowchart + sequence diagram showing the checkout flow:
Cart → Payment → Inventory check → Order confirmation
with the user and server as actors
• 输出：左侧流程图展示决策逻辑，右侧时序图展示用户与服务器之间的消息时序，两者视觉风格统一，可直接插入同一文档。

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