diagram-design Skill：29 种编辑级图表让 AI 画图告别 Mermaid 垃圾输出

Skill超级捕获手 技术创作者 2026-08-14 11 阅读

diagram-design Skill：29 种编辑级图表，把 AI 图表从”通用垃圾”变成”品牌定制”｜日增 4,475 星

diagram-design 是专为 Claude Code（同样支持 Codex / Pi）打造的图表生成 Skill——它不调用任何外部 API，不依赖 Figma 或 Mermaid，直接在对话里输出自包含的 HTML/SVG 文件，风格走编辑级设计路线。项目在 GitHub Trending 日榜单日狂拦 4,475 颗星，精准命中”AI 画图太丑不能用”这个全网痛点。

功能与原则

核心能力是 27 种可视化类型的按需生成：架构图、流程图、序列图、状态机、ER 图、时间线、泳道图、四象限图、雷达图、飞轮/循环图、嵌套图、树状图、组织图、层级堆叠图、Venn 图、金字塔/漏斗图，以及柱状、折线、甘特、散点、高阶堆叠、流程、奖章式、数据流、DP 集成、DP 安全矩阵等。

设计原则高度鲜明：信息密度 4/10，强调减法——每个节点代表一个独立概念，两个总是一起出现的概念就合并成一个，连接线本身要承载信息，否则删掉；珊瑚色（accent）只留给读者最需优先看的 1-2 个节点。AI 生成的图不会被风格绑架：支持从任意网站 URL 提取配色和字体，直接生成匹配品牌调性的输出。

认可度

指标 数据（截至 2026-08-14）
GitHub 总星数 15,444
Fork 数 934
今日新增星 4,475（GitHub Trending 日榜）
许可证 MIT
技能版本 v2.3

GitHub Trending 日榜当日排名靠前，Trendshift 页面 badge 显示强劲上升趋势。作为一个单一用途 Skill，日均 4,475 星的增速说明图表生成是 Claude Code 用户真实的高频需求。

链接

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

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

技能路径：skills/diagram-design/

原作者

Cathryn Lavery（GitHub @cathrynlavery），独立设计师兼技术写作者，运营 littlemight.com。其背景是”每次需要图表都得和 Figma 纠缠 30 分钟或直接放弃”——所以自己动手做了这个 Skill，另一面经营 BestSelf.co 个人品牌。

介绍

diagram-design 起源于一个具体的日常痛苦：技术博主、写作者和开发者需要配图时，让 Claude 生成图表往往得到一堆通用圆角方块，颜色刺眼、毫无品牌感。要么花半小时在 Figma 里手调，要么干脆放弃。

Skill 解决了这个矛盾——让 AI 生成自包含 HTML + SVG 文件，语义层（什么类型图表）和视觉布局（颜色、字体、细节程度）完全解耦。27 种视觉类型，背后由语义模式（semantic patterns）驱动：先判断”传达的是什么信息”（行为、状态、安全风险、信任边界……），再匹配到最合适的图表类型。

v2.3 新增了语义系统模式（semantic system patterns）和可选的无障碍动效，同时静态输出仍是默认。还能把已有的 .drawio/.mmd (Mermaid) 源文件重新绘制为 editorial 风格——很多团队积累了大量 Mermaid 图表，这个功能可以直接升级它们的视觉质量。

特点

  • 27 种图表类型，覆盖技术文档、工程架构、产品分析、运营可视化几乎所有场景
  • 语义优先：先判断信息类型（行为/状态/数据/安全），再匹配合适的视觉形式
  • 品牌自动匹配：给一个网站 URL，就能提取配色和字体，生成与你的品牌调性一致的图表
  • 零外部依赖：输出是自包含 HTML + SVG，不需要 Figma、JavaScript 运行时或任何 API 调用
  • Mermaid / draw.io 兼容：能把现有 .mmd 或 .drawio 文件升级为 editorial 风格，不需要重画
  • 可选动效：有序解释可加无障碍动效；默认静态，不强制

使用方法

第一步：安装

# 克隆仓库
git clone https://github.com/cathrynlavery/diagram-design.git

# 复制 skill 到 Claude Code 技能目录
cp -r diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

第二步：首次使用——品牌风格初始化

第一次在项目里生成图表前，Skill 会自动触发风格引导（style guide gate）：打开 references/style-guide.md，如果还是默认配色（#f5f5f5 / #2d3142 / #eb6c34），会停下来问你：

“这是这个项目里第一张图，风格配置还是默认的。要不要先定制品牌配色？可选：从网站 URL 提取 / 从已有 skill 提取 / 从本地文件夹提取 / 手动粘贴配色 token / 直接用默认”

  • 选网站 URL → 自动拉取配色 + 字体，写入 style-guide.md
  • 选手动 token → 直接写入文件

第三步：生成图表

直接在 Claude Code 对话里描述你需要的图表，例如：

给我画一个微服务架构图，包含 API Gateway、Auth Service、User Service、Order Service 和 PostgreSQL，用珊瑚色标注 Auth Service

Skill 会根据你的 style-guide.md 生成匹配品牌的 HTML 文件。

使用场景与人群

适用场景：

  • 技术博客、文档、 README 的配图
  • 产品功能解释、架构说明、技术方案展示
  • 工程团队流程图、系统现状（IT current-state）分析
  • 运营数据可视化（Gantt、timeline、quadrant 等）

目标用户：

  • 技术写作者 / 技术博主
  • 开发者 Advocate / DevRel
  • 产品经理（需要清晰表达系统逻辑）
  • 任何被 AI 生成图表”丑哭了”困扰的人

输入与输出案例

案例 1：架构图

输入（Claude Code）：

Draw a high-level architecture diagram for a SaaS app: browser → CDN → Load Balancer → 3x API Servers → PostgreSQL + Redis

输出：
自包含 HTML 文件，CDN 和 Load Balancer 用较小节点，API Servers 用 3 个并列框，数据库层在最下方，连接线标注协议（HTTPS/WebSocket）。accent 色（如珊瑚色）落在 Load Balancer 上——读者第一眼知道流量入口在哪。

案例 2：Mermaid 升级

输入（Claude Code）：

Redraw this Mermaid at editorial quality, 1200px wide, brand from https://stripe.com

sequenceDiagram
  Client->>API: POST /pay
  API->>Stripe: Create PaymentIntent
  Stripe-->>API: client_secret
  API-->>Client: 200 + secret
  Client->>Stripe: Confirm Payment

输出：
同一条序列，但视觉升级为 editorial 风格——配色和字体跟随 Stripe 品牌官网，自动调整节点间距和连接线曲率，字体大小符合目标密度（4/10）。

diagram-design 的出现填补了 Claude Code 图表生成的空白——不是”能用”，而是”可以直接放进你的博客/文档/演示文稿”。日增 4,475 星的增速背后，是每一个被 AI 生成图丑哭过的技术写作者。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 11 阅读