Diagram Design Skill：29 种编辑级图表，让 Claude Code 秒出专业图纸

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

你是不是也遇到过这种情况：让 Claude 生成一张架构图或流程图，它吐出来一个充满圆角方块、阴影模糊的”通用模具图”，跟你的品牌风格格格不入，要么花半小时在 Figma 里修，要么干脆放弃？

Diagram Design Skill 就是要解决这个问题。这是一个专门给 Claude Code 使用的图表技能库，内置 29 种编辑级图表类型——架构图、流程图、时序图、ER 图、甘特图、雷达图、泳道图……全部用自包含 HTML + SVG 渲染，不依赖任何外部图片或 JS 库，也不走 Mermaid 那套”万能但难看”的路线。

功能与原则

这个 Skill 的核心理念是“减法即高级”：每个节点的存在都需要理由；强调色只留给读者最先需要关注的那 1-2 个要素；目标信息密度控制在 4/10，让图表保持呼吸感。

Skill 会读取你的网站，自动映射品牌配色和字体——60 秒内，所有图表都与你的品牌视觉体系一致，不需要手动调色。

所有 29 种图表均提供三种变体：minimal light（简约亮色）、minimal dark（简约暗色）、full-editorial（编辑级全彩）。直接用浏览器打开 HTML 文件即可查看，无需任何构建步骤。

认可度

  • GitHub Star：截至 2026-08-11 约 5,952 ★（今日新增 +1,612，持续攀升中）
  • 今日表现：单日 +1,612 stars，已进入 GitHub Trending 总榜
  • 定位：面向 Claude Code 的垂直图表技能，非通用 Mermaid 替代品

链接

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

原作者

@cathrynlavery（独立开发者），同时运营 littlemight.com，专注于 AI 辅助写作与生产力工具。 Diagram Design 起源于作者自己在写技术博客时”不想为了配图去开 Figma”的真实痛点。

介绍

作者在项目 README 中讲述了一个很真实的场景：每次需要一张架构草图、流程图或金字塔图时，交给 Claude，得到的永远是”通用圆角方块”风格，跟网站其他内容格格不入。最后要么去 Figma 折腾半小时，要么直接放弃配图。

于是他花时间做了这个 Skill。29 种图表类型，覆盖了技术写作中最常见的所有场景：组件关系图、流程决策图、时序消息图、状态机、ER 数据模型、时间轴、泳道图、二维矩阵、嵌套层次、树形结构……

每一种都经过了”去掉多余元素”的设计审视，真正做到让图表说话而不是制造视觉噪音。

特点

  • 29 种图表类型，覆盖技术文档、工程架构、产品分析几乎所有常用场景
  • 自包含 HTML + SVG，无需 JS、无外部图片依赖，浏览器直接打开
  • 三套主题变体：minimal light / minimal dark / full-editorial
  • 60 秒品牌对齐：自动读取网站配色和字体，映射到所有图表
  • 跨平台兼容：既可作为 Claude Code 插件使用，也可用于 Codex CLI
  • 实时 Gallery：打开 skills/diagram-design/assets/index.html 即可在浏览器里翻阅全部 29 种图表

使用方法

第一步：克隆仓库

git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design

第二步：建立软链接到 Claude Code 的 skills 目录

ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

第三步：重启 Claude Code，Skill 即自动加载。

第四步：直接描述需求

# 在 Claude Code 对话框中
帮我画一个高可用架构图，包含 API 网关、两个微服务和数据库

Claude 会调用 Diagram Design Skill，输出对应类型的 HTML + SVG 图表，可直接在浏览器打开或嵌入文档。

使用场景与人群

适用场景：
– 技术文档撰写（API 文档、系统设计文档、架构说明）
– 产品分析报告（ quadrant 图、漏斗图、流程图）
– 博客/文章配图（不需要为了配图开 Figma）
– 团队内部分享材料（架构图、时序图、ER 图等工程图表）

目标用户：
– 技术写作者 / 开发者布道师
– 需要快速出图的产品经理和数据分析师
– 任何不想在 Figma 里耗时间调图表的 Claude Code 用户

输入与输出案例

案例一：架构图
输入（Claude Code 对话）：

帮我画一个微服务架构图，包含 API Gateway、User Service、Order Service 和 PostgreSQL 数据库，用品牌色 #3B82F6 和 #1E40AF

输出：一张架构图 HTML，API Gateway居中向下连接各服务，每个服务节点使用品牌主色和辅色，SVG 矢量，可直接复制到 Notion 或嵌入网页。

案例二：流程图
输入：

画一个决策流程图：用户下单 → 检查库存 → 有货则发货，无货则提示补货

输出：Flowchart 类型的 HTML 页面，菱形判断节点 + 矩形执行节点 + 箭头连线，minimal light 主题，可在浏览器直接预览。

Diagram Design Skill 的出现，解决的不是”能不能画”的问题，而是”能不能画得专业、画得品牌一致”的问题。对于每天要在文档里塞大量图表的工程师来说，这可能是一个打开就不想关掉的效率工具。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 16 阅读