Diagram Design Skill：让 Claude 画图告别”AI 味”的38种专业图表神器

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

让 Claude 画图告别”AI 味”：38 种专业图表一键生成，60 秒匹配品牌色

Diagram Design 是一个专为 AI 编程助手（Claude Code、Codex、Pi）打造的专业级图表 Skill，能够直接输出符合品牌调性、无障碍标准、可直接嵌入文档的 HTML+SVG 图表。自 2026 年 4 月上线以来增长迅猛，截至 2026-08-27 已斩获约 27k GitHub Stars，周均新增维持 1k+ 以上，GitHub Trending 多次上榜，是当前 Agent Skills 生态中视觉类工具增长最快的项目之一。

核心能力围绕”让 AI 画图真正能交付”展开。传统 AI 图表输出的通病——圆角方框加箭头、与品牌风格割裂、无法直接嵌入正式文档——Diagram Design 用一套完整设计系统解决。39 种视觉类型覆盖技术文档常见场景：架构图、流程图、时序图、状态机、ER 图、甘特图、Sankey、鱼骨图、Wardley 图、Kanban、用户旅程图、UML 类图、数据库 Schema 等。每种类型均提供 minimal light、minimal dark、full-editorial 三种视觉变体，全部输出为自包含 HTML+SVG，无需构建步骤、无 JavaScript 依赖、直接浏览器打开即可。

设计原则坚持”每个节点都要有存在的理由”。强调信息密度控制在 4/10 档位、重音色仅用于 1-2 个核心信息、坐标严格按 4 的倍数对齐以防止 AI 漂移。这些不是审美偏好，而是针对 AI 生成视觉劣化的系统性对策，输出质量显著高于 Mermaid 和 draw.io。

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

作者为 Cathryn Lavery（GitHub @cathrynlavery），运营技术博客 littlemight.com 及个人品牌工具 BestSelf.co，具备真实的内容创作与产品背景，而非纯工程师视角——这也是该 Skill 设计品味突出的原因之一。

功能与原则

39 种图表类型分为几大类别：

  • 结构图：Architecture（组件+连接）、High-Level（端到端集群栈）、IT Current-State（遗留系统现状+现代化路径）、Deployment（Zone/Host/Artifact）、Dependency Graph（扇入/层级/循环检测）、Database Schema（物理表+外键）
  • 流程图：Flowchart（决策逻辑）、Process（多角色顺序工作流）、Swimlane（跨职能流程）、Kanban（按状态展示 WIP）、User Journey（阶段+行为+情感）
  • 时序类：Sequence（消息时序）、Timeline（事件轴）、Gantt（任务+阶段时间线）
  • 关系图：State Machine（状态+转换）、ER（实体+字段）、Venn（集合重叠）、Tree（父子层次）、Nested（包含层次）、Org Chart（所有权+路由）、Layer Stack（堆叠抽象）
  • 定量图：Quadrant（双轴定位）、Radar/Spider（多轴对比）、Bar Chart（类别对比）、Treemap（面积占比）、Line Chart（趋势）、Scatter（分布+相关性）、Polar Chart（ cyclic magnitude）
  • 特殊类型：Loop/Flywheel（增强循环+共享中枢）、Pyramid/Funnel（排名层次）、Sankey（分流合并量）、Fishbone（因果归因）、Wardley Map（价值链×演化）、Medallion（多层数据存储）、DP Integration（Source→Core→Consumer）、DP Security Matrix（按角色权限）
  • 导入重绘：支持输入 draw.io XML 或 Mermaid 代码，按指定格式、尺寸、细节级别重新渲染为设计系统风格

设计哲学：信息精简优先、重音色仅用于 1-2 个焦点、坐标按 4 的倍数对齐防止 AI 美学漂移、所有输出 WCAG AA 无障碍对比度验证。

认可度

截至 2026-08-27，GitHub Stars 约 27k，全球排名 #1424。周均新增维持 1k+，多次进入 GitHub Trending 日榜。8 月 14 日单日新增约 2,970 Stars，当天全量排名第 3。8 月上半月从 18k 增长至 21k+，速度在视觉类 Agent Skill 中无出其右。

链接

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

原作者

Cathryn Lavery（@cathrynlavery）——技术博客 littlemight.com 作者，兼营个人品牌工具 BestSelf.co。具备真实的内容创作和产品构建背景，而非纯工程师视角，体现在 Skill 的设计品味和文档质量上。

介绍

Diagram Design 源起于一个具体的痛点：每次需要图表（架构草图、流程图、重点金字塔）时，让 AI 生成的结果总是通用圆角方框，跟网站整体风格完全不搭。要么花半小时在 Figma 里改，要么干脆不做图。

作者于是为 Claude Code 构建了这个 Skill——39 种视觉类型，编辑级品质，通过读取目标网站自动匹配品牌配色和字体。整个流程：给一个 URL，Skill 抓取主页、提取主色调+字体栈、映射为 paper/ink/muted/accent 语义 token、写入选定风格配置文件、下次所有图表自动应用新配色。整个品牌适配在 60 秒内完成。

所有输出均为自包含 HTML+SVG，无构建步骤、无外部依赖、无阴影、无 Mermaid 风格的通用感。可直接嵌入博客、文档、PPT 或演示文稿，无需设计师二次加工。

特点

  • 39 种图表类型，覆盖技术文档、架构、数据流、流程、时序、定量分析等几乎所有常用视觉场景
  • 三种视觉变体：minimal light / minimal dark / full-editorial，同一图表按场景切换无需重新生成
  • 60 秒品牌适配：输入网站 URL，自动提取配色+字体并应用到所有后续图表，含 WCAG AA 对比度校验
  • draw.io / Mermaid 导入重绘：将已有图表源文件按设计系统风格重新渲染，适配格式、尺寸和受众
  • 自包含输出：HTML+SVG 无依赖，浏览器直接打开，可直接粘贴进文档，无外部图片请求

使用方法

安装（Claude Code）：

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

启用自动更新：运行 /plugin，打开 Marketplaces，选择 diagram-design，勾选 Enable auto-update。

安装（Codex）：

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

品牌适配（60 秒）：

onboard diagram-design to https://yoursite.com

Claude 自动抓取页面、提取配色字体、提出 diff 方案，确认后写入 references/style-guide.md，所有新图表自动应用新品牌。

创建图表：

直接用自然语言描述所需图表即可，Skill 自动选择最合适的类型：

Make an architecture diagram of my app: frontend, backend, API, PostgreSQL, Redis cache.
I need a quadrant showing Q2 projects by impact vs effort.
Give me a sequence diagram of the OAuth handshake.
Create a timeline of our product milestones.

使用场景与人群

适用场景：

  • 技术文档撰写（架构图、API 流程、数据流）
  • 产品方案与汇报材料（甘特图、Quadrant、Kanban）
  • 博客与知识库建设（品牌化配图，无需设计师介入）
  • 团队知识沉淀（将 draw.io/Mermaid 老图统一升级为品牌风格）

目标用户：

  • 经常需要图表但没有设计资源的技术内容创作者
  • 需要统一品牌视觉的内容团队和个人博主
  • 希望 Claude Code / Codex / Pi 输出可直接交付图示的 AI Agent 用户

输入与输出案例

案例 1：架构图

Input：

Make an architecture diagram: frontend (React) → API Gateway → backend (Node.js) + PostgreSQL + Redis cache

Output：一张 minimal dark 风格的架构图，组件用矩形+箭头连接，重音色标注 Redis cache（关键组件），背景为深色，自包含 HTML+SVG，浏览器直接打开。

案例 2：品牌适配后创建流程图

Input：

onboard diagram-design to https://yoursite.com
yes, apply it
Make a flowchart: user signs up → email verification → subscription plan selection → payment processing → account activated

Output：Skill 先提取网站主色（假设为蓝白配色）、字体，映射为 semantic token，然后生成流程图——所有节点使用网站主色作为背景或边框色，字体与网站一致，可直接作为网站博客文章的配图，无需二次处理。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 14 阅读