diagram-design Skill：让 AI 画出专业编辑级图表的 Claude Code 技能

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

总结

cathrynlavery/diagram-design 是一款专为 Claude Code、Codex、Pi 等 AI 编程 Agent 打造的专业图表 Skill，收录 28 种编辑级图表类型（Architecture、Flowchart、Sequence、ER、Quadrant、Loop……），全部输出为独立的 HTML + SVG，完全不依赖外部图片或 JavaScript，打破「AI 画图只会生成通用圆角方块」的魔咒。2026 年 8 月空降 GitHub Trending 周榜，当前约 22,012⭐，本周新增高达 15,812⭐，是近一个月图表/可视化类开源项目里最炙手可热的新星。

功能与原则

该项目解决的核心痛点是：AI 生成的图表太丑、没有设计感。作者 cathrynlavery 在 README 中直言：「Every time I needed a diagram, I’d ask Claude and get back a generic rounded-box thing that looked nothing like the rest of the site.」

diagram-design 的设计哲学：

  • 语义模式分离：行为描述与布局结构解耦，同一类型可承载 Queue、Policy Trace、Trust Boundary 等多种语义，无须为每种场景新建图表类型
  • 最小主义 + 编辑质量：目标密度「4/10」，留白充足，强调色只用于读者最需要优先关注的 1-2 个节点
  • 零依赖输出：每个图表都是自包含的 HTML + SVG，浏览器直接打开，无构建步骤、无 CDN 依赖、无 JavaScript
  • 品牌色自动匹配：读取目标网站的配色方案，60 秒内生成与产品风格一致的图表

认可度

  • GitHub stars：约 22,012⭐（截至 2026-08-19）
  • 本周新增：15,812⭐（GitHub Trending 周榜，数据截至 2026-08-19）
  • GitHub Trending：空降周榜，排名第一
  • Forks：1,346
  • Trendshift 排名：Trendshift.io 仓库热度榜 Top 200
  • 支持平台：Claude Code、Codex、Pi 等主流 AI 编程 Agent

链接

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

原作者

cathrynlavery（littlemight.com）

  • 独立写作者，运营 BestSelf.co
  • 在 littlemight.com 输出大量 AI + 写作/生产力领域内容
  • GitHub 多个项目围绕 AI 编程工具的可视化与文档体验
  • 专注于「让 AI 输出更专业、更具出版品质」的工具链

介绍

传统 AI 生成图表的局限在于：LLM 缺乏设计训练，输出多为通用圆角方块 + 连线，既不匹配品牌风格，也缺乏信息层次感。diagram-design 从根本上重新思考了这一问题——不是让 AI「画图」，而是让 AI 从一套经过设计的语义模板库中选择最适合的图表类型，再根据用户指定的配色和内容填充。

项目收录 28 种图表类型，覆盖软件架构、数据建模、流程控制、组织管理、战略分析等多个维度：

  • 架构类：Architecture（组件+连接）、High-Level（端到端集群栈）、IT Current-State（遗留系统景观）
  • 流程类：Flowchart（决策逻辑）、Sequence（时序消息）、Swimlane（跨职能流）、Loop（飞轮+共享内存Hub）
  • 数据类：ER/Data Model、State Machine、Timeline、Bar Chart
  • 结构类：Tree、Org Chart、Nested（层级包含）、Layer Stack
  • 分析类：Quadrant（双轴定位）、Pyramid/Funnel、Radar/Spider、Venn、Consultant 2×2

每种图表提供三种变体：Minimal Light、Minimal Dark、Full Editorial，用户可按场景直接选用。

特点

  • 28 种图表类型，覆盖软件设计、流程、数据、组织、战略分析等主要场景
  • 品牌色自动匹配：读取目标网站 CSS 配色，60 秒生成风格一致的图表
  • 零外部依赖：纯 HTML + SVG，浏览器直开，无 CDN、无 JS、无图片请求
  • 支持 Mermaid/draw.io 转换：可将现有 Mermaid 或 draw.io 源文件按指定格式/尺寸/细节重绘
  • 语义解耦：同一图表类型可承载多种业务语义，无需为每种场景新增类型
  • 静态优先，可选动效：默认输出静态 SVG，可选无障碍友好动效用于有序解释场景

使用方法

安装（Claude Code）

# 在 Claude Code 会话中安装
/plugin install cathrynlavery/diagram-design

# 或通过 skills 命令安装
npx skills add cathrynlavery/diagram-design

基础调用示例

生成一个 Architecture 类型图表：
组件包括：Frontend (React)、Backend (Node.js API)、Database (PostgreSQL)、Cache (Redis)
配色读取自：https://your-brand-site.com

查看全部图表类型

项目 docs/screenshots/ 目录包含所有 28 种图表的截图，可直接访问：
https://github.com/cathrynlavery/diagram-design/tree/main/docs/screenshots

将现有 Mermaid 转换为 diagram-design 格式

将以下 Mermaid 转换为 Architecture 格式，尺寸 1200x800，配色匹配 https://example.com：
[mermaid source here]

使用场景与人群

适用场景：

  • 软件架构文档（System Design、API 架构、微服务图）
  • 技术博客与文章配图（Architecture、Sequence、Flowchart）
  • PRD / 设计稿中的流程与数据模型图
  • 团队内部知识库的标准化图表生成
  • 将 Mermaid / draw.io 旧图迁移至高质量 HTML/SVG 输出

目标用户：

  • 使用 Claude Code / Codex 的技术写作者和工程师
  • 需要为技术文档/博客配高质量图表的内容创作者
  • AI 编程工具重度用户（不想在 Figma 里手动调图）
  • 技术博主、开发者布道师、DevRel 从业者

输入与输出案例

案例 1：Architecture 图表

输入（Claude Code 触发 diagram-design Skill）：

生成一个 Architecture 类型图表：
组件：Frontend (React SPA) → Backend API (Node.js/Express) → PostgreSQL (主数据库)
Backend 同时连接 Redis（缓存）和 S3（文件存储）
配色读取自：https://vercel.com

输出（Claude Code 生成）：

<!-- Minimal Light 变体，自包含 HTML + SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
  <!-- Vercel 品牌色提取：#000000 主色，#FFFFFF 背景 -->
  <!-- Frontend 节点：React 图标 + 标签，#000 边框 -->
  <!-- Backend 节点：Node.js 图标 + 标签，圆角矩形 -->
  <!-- Database 节点：PostgreSQL 大象图标 -->
  <!-- 箭头：SVG path，#000 描边，虚线箭头表示异步 -->
  <!-- 强调色：#F5A623（Vercel 橙）标注 S3 存储 -->
</svg>

案例 2：Quadrant 图表

输入：

创建一个 Quadrant 类型图表，2×2 矩阵：
- X轴：实现难度（低→高）
- Y轴：业务价值（低→高）
- 标注四个象限名称：
  - 左上：Quick Wins（高价值+低难度）
  - 右上：Strategic Projects
  - 左下：Fill-ins
  - 右下：Avoid
配色读取自：https://stripe.com

输出：Stripe 品牌配色的 Quadrant SVG，四个象限分别标注，可直接嵌入 Stripe 官方博客文章。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读