Diagram Design Skill：让 Claude Code 产出编辑级图表的 AI 技能

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

总结

diagram-design 是一个面向 AI 编程 Agent 的编辑级图表技能，让 Claude Code、Codex 等工具告别千篇一律的圆角方块图，输出设计师也认可的专业图表。内置 42 种图表类型，输出自包含 HTML+SVG，无需任何构建工具，上一次 GitHub Trending 引发大量开发者关注。

功能与原则

diagram-design 的核心功能是将专业图表设计规范封装成可被 AI Agent 调用的 Skill，输出符合编辑级品质的独立 HTML/SVG 文件。

设计原则：
– 语义与布局分离：同一个语义模式（如”队列”）可在不同布局下复用，不必为每种画法新增类型
– 品牌自适应：首次运行会读取用户网站 URL，自动提取配色和字体，图表与文档风格统一
– 无障碍优先：静态为默认输出，可选渐进式动画，兼顾可访问性
– 不依赖外部库：纯 HTML+SVG，无 JavaScript、无阴影、无 Mermaid 风格

认可度

  • GitHub Star：约 25,100+（截至 2026-10-08）
  • Forks：215
  • 安装量：2,700+（Claude Skills 目录）
  • Trending：曾在 GitHub Trending 获得大量曝光，引发开发者社区广泛讨论
  • 媒体报道：被多个中文技术社区（头条、CSDN）专题推荐

链接

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

原作者

cathrynlavery（Cathryn Livery），技术写作者，运营 littlemight.com 与 BestSelf.co，专注于让技术内容更美观、更有表达力。

介绍

diagram-design 起源于作者的一个日常痛点：每次需要图表时，让 AI 生成的结果总是通用圆角方框，和自己的网站风格格格不入，要么花半小时去 Figma 调整，要么干脆放弃这个图表。

她把专业图表设计的判断力——哪些元素该保留、哪个颜色是强调色、密度控制在多少合适——全部写进了这个 Skill。现在任何支持 Agent Skills 的编程工具（Claude Code、Codex、Pi、Factory Droid 等）只需加载这个 Skill，就能生成匹配品牌风格的编辑级图表。

项目目前已更新至 2.5+ 版本，图表类型从最初的 13 种扩展到 42 种，覆盖架构图、流程图、时序图、ER 图、甘特图、Sankey、鱼骨图、Wardley 图、UML 类图、数据库 schema 等几乎所有技术写作场景。

特点

  • 42 种图表类型：架构、流程、时序、状态机、ER、Timeline、Swimlane、Radar、Loop/Flywheel、Tree、Org Chart、Wardley Map、Sankey、UML Class、数据库 Schema 等
  • 三种视觉变体：minimal light、minimal dark、full-editorial，可直接在浏览器打开预览
  • 品牌自动适配：输入网站 URL，自动提取主色、辅色、字体，图表与文档风格统一
  • 导入重绘：支持 draw.io、Mermaid、Excalidraw 源文件，按统一设计体系重新绘制
  • 输出格式：自包含 HTML+SVG，无外部依赖，双击浏览器即可离线查看，支持导出 SVG/PNG

使用方法

安装（Claude Code）：

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

启用自动更新：

/plugin → Marketplaces → 选择 diagram-design → Enable auto-update
/reload-plugins

手动安装（其他 Agent）：

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

# 为目标 Agent 创建软链接
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design

基本调用：

/diagram-design

读取网站自动适配品牌：

/diagram-design onboard
（输入网站 URL，完成品牌样式配置）

导入 Mermaid 源文件重绘：

/import-mermaid
（粘贴 Mermaid 代码，指定格式和尺寸）

使用场景与人群

适用场景：
– 技术文档、README、博客文章配图
– 架构说明、流程示意、系统设计图
– 数据可视化（甘特图、Sankey、Wardley Map）
– 导入并统一团队现有的 draw.io/Mermaid 图表风格

目标用户：
– 需要经常写技术文档的工程师
– 关注 AI 辅助写作质量的开发者
– 希望图表与品牌视觉统一的 Tech Writer

输入与输出案例

案例 1：架构图

输入：

生成一个微服务架构图，包含 API Gateway、Auth Service、User Service、Order Service，使用 Mermaid 格式输出

输出（diagram-design 读取 Mermaid 后重绘）：
– 自包含 HTML+SVG 文件
– 匹配目标网站的配色和字体
– 无阴影、无圆角方框，编辑级排版

案例 2：品牌适配

输入：

/diagram-design onboard
→ 输入 https://example.com

输出：
– Skill 自动提取网站主色（#3B82F6）和字体（Inter）
– 后续所有图表使用该品牌配色
– 生成 .diagram-design 配置文件，后续无需重复配置

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 222 阅读