diagram-design Skill：让 Claude 一键生成编辑级图表的视觉神器

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

cathrynlavery/diagram-design 是一个 Claude Code 技能包，让 AI 生成图表从”通用圆角框”直接升级为专业编辑级 HTML+SVG 成品。它提供 38 种视觉类型（流程图、架构图、时间轴、四象限、桑基图、鱼骨图、华莱士图等），输出自包含、无阴影、不依赖 Mermaid，60 秒内匹配品牌配色。这个 Skill 在 2026-08-16 一周新增 +13,556 Star，当前总 Star 约 25,635（截至 2026-08-23），是 8 月 AI Coding 生态里图形类 Skill 的现象级项目。

功能与原则

diagram-design 的核心能力是将自然语言图表需求转换为可直接嵌入文档或网页的 HTML/SVG 文件。它不调用任何外部图像服务，不依赖 JavaScript 构建步骤，也不使用 Mermaid 等容易”出框”的库。

设计原则三条：

  • 编辑质量优先：输出密度目标 4/10（留白充足），强调 accent 色只用于 1-2 个核心焦点，避免信息过载。
  • 品牌自动匹配：Skill 读取目标网站配色，在 60 秒内生成符合品牌调性的图表。
  • 类型语义分离：语义层（队列、信任边界、策略追踪）和布局层（网格、泳道、树状）解耦，同一语义可适配多种布局而不增加类型数量。

认可度

  • GitHub Star：约 25,635（截至 2026-08-23），本周（8/16 快照）+13,556
  • Trending 经历：2026-08-16 前后登 GitHub Trending 日榜，位列 AI/Agent 类目前列
  • 视觉类 Skill 稀缺性：目前 GitHub 上大量 Skill 集中在代码生成、测试、文档，图形输出类 Skill 相对稀缺，diagram-design 填补了这个空白

链接

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

原作者

GitHub 用户 cathrynlavery，同时运营技术博客 littlemight.com，副业 BestSelf.co。定位是技术写作者 + 独立开发者，专注于用 AI 工具提升内容生产效率，而非纯工程导向。

介绍

很多技术写作者都遇到过这个场景：需要一张架构图或流程图来让文章更清晰，但让 AI 生成的结果往往是千篇一律的圆角蓝框，和网站整体风格格格不入。要么花半小时在 Figma 里手动调，要么干脆放弃图表。

diagram-design 就是来解决这个问题的。作者把十几年内容创作中积累的 38 种编辑级图表类型打包成 Claude Code 技能，涵盖：架构图、流程图、时序图、状态机、ER 图、时间轴、泳道图、四象限、雷达图、循环图、嵌套图、树状图、组织图、层次图、韦恩图、金字塔、柱状图，以及 2.5.10 版本新增的桑基图、鱼骨图、华莱士图（Wardley Map）、看板、用户旅程、部署图、依赖图、UML 类图、故事图和数据库 Schema 共 39 种。

每个类型都提供三种静态变体：minimal light、minimal dark 和 full-editorial，可直接在浏览器打开，无构建步骤、无外部依赖。2.3 版本还引入了语义系统模式和可选的可访问动效，静态输出保持默认。

它另一个实用功能是能”重绘”已有的 draw.io 或 Mermaid 源文件，按你指定的格式、尺寸和细节层次重新渲染——这对把旧文档图表升级到新版式特别有用。

特点

  • 39 种编辑级视觉类型，覆盖技术文档、产品设计、数据可视、流程梳理全场景
  • 自包含 HTML + SVG，无外部依赖，可直接嵌入博客、文档、PPT 附图
  • 60 秒品牌匹配：读取目标网站配色自动应用，无需手动选色
  • 支持重绘已有图表：draw.io / Mermaid 源文件可一键迁移到编辑级输出
  • 无 Mermaid 味：输出不是代码块渲染结果，而是干净的矢量图形，质感对标专业设计

使用方法

安装（在 Claude Code 项目中）：

npx skills add cathrynlavery/diagram-design

或直接在项目根目录运行，Skill 会引导你选择图表类型并描述需求。

基本调用示例：

/diagram-design
类型：架构图
主题：微服务订单系统，包含 API Gateway、Order Service、Payment Service、库存服务
风格：minimal light，accent 色用 #2563EB

Skill 会输出对应的 HTML 文件路径，可直接在浏览器预览或嵌入文档。

重绘已有图表：

/diagram-design redraw
上传：现有的 draw.io XML 或 Mermaid 代码
目标格式：HTML + SVG，minimal dark，宽度 800px

使用场景与人群

适用场景：技术博客配图、架构文档、API 文档、产品设计稿内部沟通、演讲 PPT 附图、开放文档（README/Handbook）

目标用户：

  • 技术写作者（需要图表提升可读性但不想花时间在设计工具上）
  • AI Coding 爱好者（希望 AI 产出物从”能用”升级到”好看”）
  • 独立开发者 / 小团队（没有专职设计师，需要快速出专业级配图）

输入与输出案例

案例一：架构图

输入：

/diagram-design
类型：架构图
描述：三层架构，前端 Vue.js，中间层 Node.js Express，后端 PostgreSQL + Redis
配色：品牌蓝 #1A56DB，背景白色

输出：一张 minimal light 风格的架构图，组件用矩形加箭头连接，accent 色落在 API Gateway 层，文件为自包含 HTML，直接浏览器打开即可。

案例二：Mermaid 重绘

输入：

graph LR
    A[用户] --> B[登录]
    B --> C{验证成功?}
    C -->|是| D[首页]
    C -->|否| E[错误页]

在 Claude Code 中执行 /diagram-design redraw 并粘贴以上 Mermaid 代码，输出变为一张无阴影、无 Mermaid 代码块感的编辑级流程图 HTML，支持复制嵌入任何网页。

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

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 13 阅读