diagram-design Skill：AI Coding Agent 的专业图表生成方案

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

manim：3Blue1Brown 同款数学动画引擎，代码驱动的视觉叙事神器

27 种图表类型、可导入 draw.io/Mermaid、自动匹配品牌配色——diagram-design 是近期 GitHub Trending 最活跃的 AI Coding Agent 配套 Skill 之一，单周新增 Star 15,600，持续保持在技术社区的讨论热度。

为什么火：它解决了一个长期痛点——AI 生成代码后，工程师和作者仍然需要手动打开 Figma 才能做出”看起来不敷衍”的图表。diagram-design 把这个流程压缩到 60 秒以内：AI 直接输出与你的品牌视觉完全一致的 SVG/HTML 图表，全程不需要 Figma，不需要设计经验，甚至不需要配色直觉。

核心能力：27 种图表类型（架构图、流程图、时序图、状态机、ER 图、甘特图、雷达图……），全部基于语义模式（semantic pattern）而非硬编码模板——同一个「队列+瓶颈」场景，Skill 会自动选择最近似的图表类型，而不需要你指定「画一个流程图」。支持从 draw.io 和 Mermaid 导入并重新绘制到统一的设计系统。

GitHub 数据（截至 2026-08-18）：Star 20,700，Fork 1,300，本周新增约 15,600 星，持续占据 GitHub Trending 头部位置。

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

作者：Cathryn Lavery（@cathrynlavery），独立开发者，同时运营内容站点 LittleMight.com 和效率工具 BestSelf.co，专注于用 AI 工具提升内容生产效率。

项目介绍：diagram-design 最初是作者为自己写作需求而开发。每次需要一张架构图或流程图时，直接让 AI 生成的结果往往”通用但廉价”——圆角矩形、随机配色、和网站整体视觉完全不搭。于是她用 Claude Code 写了一个 Skill，直接在 AI Coding Agent 里完成从「图表需求 → 匹配类型 → 生成品牌化 SVG」的全流程。

27 种图表类型均提供三种风格变体：minimal light、minimal dark、full-editorial，全部输出为静态 HTML + SVG，无外部依赖，无 JavaScript，可直接嵌入任何网页。

核心特点：

  • 27 种图表类型，覆盖架构图、流程图、时序图、状态机、ER 图、甘特图、雷达图、金字塔、2×2 矩阵、KPI 仪表板等所有常见场景
  • 语义模式路由：Skill 先识别行为模式（队列/瓶颈、策略跟踪、安全边界……），再匹配合适的图表类型，而非机械地按名称分类
  • 品牌自动匹配：传入网站 URL，Skill 自动抓取主色、辅色、字体栈，映射到语义角色（paper/ink/accent/muted），生成与你的品牌完全一致的图表配色
  • 支持 draw.io / Mermaid 导入：已有图表资产可一键重绘到统一设计系统，支持控制输出格式（html/svg/png）、尺寸（slide-16:9/doc-inline/social-og）、细节程度（faithful/balanced/simplified）
  • 可选动画：支持 reveal/step/loop 三种渐进动画模式，WCAG 无障碍友好，默认静态输出

安装与使用：

Claude Code 安装：

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

Codex 安装：

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

Pi 安装：

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

品牌匹配（60 秒完成）：

You: "onboard diagram-design to https://yoursite.com"
Agent: → fetches the homepage → extracts dominant palette + font stack → shows proposed diff
You: "yes, apply it"

生成图表：

"Make me an architecture diagram of my app: frontend, backend, database, Redis cache."
"I need a quadrant showing Q2 projects by impact vs effort."
"Give me a sequence of a bearer call with token refresh on 401."

draw.io 导入重绘：

/diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive

使用场景与人群：技术写作者、AI 工程师、内容创作者——任何需要频繁制作图表但没有设计资源的人。适合需要为文档、博客、演讲稿、提案制作高质量配图，同时希望整个流程在 AI Coding Agent 内闭环完成的用户。

输入输出示例：

输入：

"Make me an architecture diagram: Web → API Gateway → Auth Service → PostgreSQL, with Redis as cache"

输出：一张三层架构 SVG 图，节点用语义化标签（无硬编码坐标），配色自动应用当前已 onboard 的品牌色，背景为 paper 色，连接线为 hairline 灰色，关键路径节点用 accent 色高亮。

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

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 11 阅读