diagram-design Skill：让 AI 画出编辑级专业图表的视觉 Skill

Skill超级捕获手 技术创作者 2026-09-09 24 阅读

让 AI 画图不再「丑得千篇一律」——diagram-design Skill 评测

核心功能与设计原则

AI 生成图表的最大痛点不是「画不出来」，而是「画出来都是同一种丑」：圆角白框、蓝绿渐变、毫无品牌感。diagram-design 是专为 AI 编码助手设计的 Skill，解决的正是这个问题：让 Claude Code / Codex 等 Agent 能输出一眼就显「专业感」的编辑级图表，且完全匹配你的品牌配色——不需要 Figma，不需要 30 分钟调色。

核心设计哲学是把「语义层」和「布局层」分开描述。比如你告诉它「画一个队列」，Skill 不会生硬套模板，而是找最近的现有类型（Sankey、Flowchart 或其他）来渲染——这样 39 种图类型其实覆盖了远更多语义场景，不会因类型扩张而失控。所有输出均为纯 HTML + SVG，可在浏览器直接打开，无构建步骤，无 JS 依赖。

认可度

  • GitHub Star：35,200 ⭐（截至 2026-09-09）
  • Forks：2,215
  • GitHub Trending：今日新晋 trending（第 1 页）
  • GitHub Topics：agent-skills、claude-code、codex、data-visualization、diagrams
  • 维护状态：最近一次 push 2026-09-08，持续活跃
  • License：MIT（可商用）

链接

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

原作者

cathrynlavery（GitHub username: @cathrynlavery），独立开发者，运营技术写作博客 littlemight.com，同时经营 BestSelf.co。作者背景是内容创作圈，对「专业感视觉」有真实需求——这是从真实痛点生长出来的 Skill，而非追热点的玩具项目。

详细介绍

diagram-design 起源于作者的真实困境：每次需要画架构图、流程图时，让 AI 生成的结果都是「圆角白框 + 蓝绿渐变」，和专业设计差太远；要么就花 30 分钟在 Figma 里手动调。

解决思路是：让 Skill 内置 39 种「编辑级」视觉模板，Claude Code 根据你的描述（语义层）自动匹配到最合适的模板（布局层），然后读取目标网站的 CSS 变量 / 品牌色板，60 秒内输出与你的品牌视觉系统一致的图表。

39 种图类型覆盖：Architecture（组件连接图）、IT Current-State（现状+现代化路径图）、Flowchart（决策逻辑）、Sequence（时序图）、State Machine（状态机）、ER/Data Model（实体关系）、Timeline（时间轴）、Swimlane（跨职能流程）、Loop/Flywheel（飞轮图）、Sankey（桑基图）、Fishbone（鱼骨图）、Wardley Map、Kanban、User Journey（用户旅程图）、Deployment（部署图）、Dependency Graph、UML Class、Story Map、Database Schema，以及更多。

每种类型均有 3 个静态变体：minimal light（简约亮色）、minimal dark（简约暗色）、full editorial（全编辑风格）。默认输出静态 HTML，可选开启动画效果。

核心特点：语义层与布局层解耦 + 品牌色自动推断 + 自包含 HTML/SVG（零外部依赖）。

特点

  • 39 种编辑级图类型，覆盖架构、流程、数据、时序、战略图等场景
  • 品牌色自动匹配：读取目标 URL 的 CSS 变量，60 秒生成品牌一致的配色方案
  • 零依赖输出：纯 HTML + SVG，无 JS，无外部图片，可直接嵌入任意页面或导出 PDF/PNG
  • 支持 draw.io / Mermaid 导入重绘：已有图表也可以转成 Skill 的编辑风格
  • 语义路由：描述语义（queue、trust boundary），Skill 自动找最近图类型，不需要用户懂图论
  • 可选动画：ordered explanations 可开启平滑动画，静态为主保兼容性
  • 多 Agent 兼容：Claude Code、Codex、Factory Droid、Pi 及所有 Agent Skills 兼容宿主

使用方法

安装（Claude Code）：

npx skills add cathrynlavery/diagram-design

或在 Claude Code 内直接粘贴安装命令，它会自动发现 Skill。

基础调用：

/diagram-design
画一个用户注册流程的 flowchart，包含表单验证、邮件确认和登录三个阶段

指定配色来源网站：

/diagram-design
用 https://stripe.com 的配色画一个微服务架构图

最小示例：

用户：帮我画一个简单的 sequence 图：客户端 → API → 数据库
diagram-design：
[生成 sequence.html，包含 minimal light 变体，
 配色读取自目标网站（若未指定则用默认单色系），
 浏览器直接打开即为完整图表]

使用场景与人群

  • 技术写作者 / 博主：需要为文章配专业架构图，不想花时间在 Figma
  • 工程团队：用 AI 生成文档图表，需要品牌视觉一致性（员工培训、技术文档、RFC）
  • AI 开发者：在 Agent 对话中实时生成可嵌入的技术图，不需要切工具
  • 产品经理：快速画用户旅程图、流程图，配合 Agent 工作流
  • 演示场景：将图表导出为 PNG/GIF，直接插入幻灯片

目标用户是对视觉品质有要求、但不想手动用设计工具的专业人士。Skill 让「让 AI 画图」从「凑合看」升级到「专业发布级」。

输入与输出案例

案例 1：架构图

  • Input（用户）：「用深色主题画一个 microservices 架构图，包含 API Gateway、Auth Service 和两个微服务，用 https://vercel.com 的配色」
  • Output：生成 architecture-dark.html，包含 4 个节点、VPC 边界、连接箭头，品牌色读取自 Vercel 网站主色调，浏览器打开即为完整 SVG 图表

案例 2：流程图 + 品牌重绘

  • Input（用户）：「把这段 Mermaid 代码转成 editorial 风格，配色用我的网站 https://linear.app」「
    mermaid
    graph TD
    A[User] → B{Auth?}
    B →|Yes| C[Dashboard]
    B →|No| D[Login]    」
  • Output：生成 flowchart-editorial.html，保留原有逻辑结构，但用 editorial 字体、粗细线条、强调色（来自 Linear 的蓝紫色系），替换掉 Mermaid 默认的圆润风格

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

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 24 阅读