diagram-design

让 AI 一句话画出杂志级图表，告别 Mermaid 塑料感

diagram-design 是一套面向 AI 编程助手（Claude Code、Codex、GitHub Copilot、Factory Droid、Pi）的图表设计技能包，目标是让 AI 生成的图表摆脱 Mermaid 默认样式带来的廉价感。它提供 42 种图表类型，覆盖流程图、架构图、时间线、对比图、数据可视化等常见编辑级排版需求。核心做法是输出自包含的 HTML + SVG：不依赖外部 CDN、不引入运行时库，打开即看、复制即用，方便嵌入文档、博客或演示稿。设计上强调编辑杂志式的排版语言——克制的配色、清晰的层级、无阴影、无多余装饰，让图表看起来像专业设计师手工绘制，而不是机器默认产物。对经常用 AI 写技术文档、做方案汇报、写 README 的人来说，它把“画图”这一步从反复调样式变成一句话生成，显著降低出图成本，同时保持风格统一。

开源 free 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 43311

维护状态活跃

是否开源是

定价模式 free

项目预览

项目数据

分类设计创意

开发团队cathrynlavery

所属国家

官网地址https://cathrynlavery.github.io/diagram-design

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

定价模式free

价格说明开源免费使用

访问状态

是否开源是

开源协议MIT

主要语言HTML

技术栈/模型agent-skills,claude-code,codex,data-visualization,diagrams,drawio,mermaid,svg

GitHub 星标★ 43311

30天Star增速

HF 下载量

上线时间2026-04-16 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-05

浏览次数0

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 8 分钟部署方式：本地安装 8 步

环境要求

本机已安装任一受支持的宿主：Claude Code、Codex、GitHub Copilot、Factory Droid 或 Pi
网络可访问 GitHub，以便拉取插件市场与仓库内容
如需直接定制工作风格指南，需本地有 git 和可写目录（如 ~/code/diagram-design）
可选：对 ~/.diagram-design/profiles/ 有读写权限以保存 profile

安装与启动步骤

1确认宿主环境

先确认本机已装好某个受支持的 AI 编码助手，再按对应小节安装，不要混用多种安装方式。
2Claude Code 安装

两条命令依次执行：先添加插件市场，再安装 diagram-design 到该市场。
```
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design
```
3开启自动更新

运行 /plugin，打开 Marketplaces，选中 diagram-design 并选择 Enable auto-update；第三方市场默认关闭自动更新。
```
/plugin
```
4Codex 安装

在终端依次执行添加市场与安装命令；Codex 会在启动时刷新已配置的 Git 市场。
```
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design
```
5Copilot 安装

依次添加市场并安装，会同时装入共享的 Diagram Design 技能及其 doctor、export、import、profile 能力。
```
copilot plugin marketplace add cathrynlavery/diagram-design
copilot plugin install diagram-design@diagram-design
```

6Factory Droid 安装

添加市场后安装，注意安装命令需带 --scope user 参数。

droid plugin marketplace add https://github.com/cathrynlavery/diagram-design
droid plugin install diagram-design@diagram-design --scope user

7Pi 安装

直接安装仓库地址；在已打开的 Pi 会话中运行 /reload，之后可用 /skill:diagram-design 显式调用。
```
pi install https://github.com/cathrynlavery/diagram-design
```
8克隆定制安装

若打算直接改工作风格指南，克隆仓库到本地目录再做本地路径安装，避免被包更新覆盖。
```
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
```

关键配置

配置项	必填	说明	示例
`skills/diagram-design/references/style-g`	否	默认工作风格指南，可定制以锁定品牌化排版	`skills/diagram-design/references/style-guide.md`
`.diagram-design`	否	项目标记文件，带此标记的项目不受包更新影响	`.diagram-design`
`~/.diagram-design/profiles/`	否	已保存 profile 的目录，可跨版本更新保留	`~/.diagram-design/profiles/`

如何确认成功

Copilot 运行 copilot skill list（或 /skills）能看到 diagram-design；Claude Code 执行 /reload-plugins、Pi 执行 /reload 后即可用自然语言要图。

常见问题

Q：首次在新项目里画图时技能为什么暂停询问？

A：这是 first-run gate：它检查 style-guide.md 是否被定制，未定制会问你跑 onboarding、手动粘贴 tokens，还是直接用默认样式。

Q：以前用 npx skills add 装过要怎么办？

A：独立副本不会自动跟随 Codex 市场更新，需先删除该独立副本，再改用上面的 Codex 市场命令重新安装。

Q：如何拉取已合并的更新？

A：Codex 运行 codex plugin marketplace upgrade diagram-design；Copilot 运行 copilot plugin marketplace update 与 copilot plugin update，然后开新会话。

Q：Claude Code 里第三方市场为什么不自动更新？

A：Claude Code 默认对第三方市场关闭自动更新，需在 /plugin 的 Marketplaces 中为 diagram-design 手动启用一次。

Q：组织环境（Claude Cowork）怎么装？

A：组织类 GitHub 市场需私有或内部仓库，先把本公开仓库镜像到组织仓库，再在 Organization settings → Plugins 添加并开启自动同步。

注意事项

官方构建只来自本仓库；LittleMight（Cathryn Lavery 的公司）发布插件目录列表，以其他名称出现的列表均为非官方副本。
输出为自包含 HTML + SVG，不依赖外部 CDN、不引入运行时库；静态输出是默认形态，动效为可选。
Kiro 需导入仓库子目录 skills/diagram-design 的 URL；OpenCode 需手动把 skills/diagram-design/ 复制或软链接到其 skills 目录。
定制 style-guide.md 可能被包更新覆盖，保存的 profile 与带 .diagram-design 标记的项目不受影响。

核心亮点

内置 42 种图表类型，覆盖流程、架构、时间线、对比等高频场景，开箱即用
输出自包含 HTML + SVG，无外部依赖、无阴影，可直接嵌入文档或网页
适配 Claude Code、Codex、Copilot、Factory Droid、Pi 多个主流 AI 编程助手

不足之处

以技能包形式分发，需先接入对应 AI 助手才能发挥价值，独立使用门槛较高
图表类型虽多，但复杂交互或动态数据绑定能力有限，偏静态展示

适用场景

用 Claude Code 写技术方案时，直接生成架构图与流程图嵌入文档
为 README 或博客快速产出风格统一的示意图，免去手动调样式
做产品汇报或竞品对比时，一句话生成编辑级对比图与时间线

替代项目

Mermaid、draw.io、Excalidraw

项目介绍

diagram-design 是设计创意领域的开源项目，由 cathrynlavery 开发，是 2026 年新上线的项目。

在全站 13,655 个收录项目中，它的 GitHub 星标数（43,311）位列前 1%，在设计创意分类的 166 个项目里位列前 2%。

项目目前处于活跃维护状态，最近一次代码更新于 2026-10-01。开源免费使用。

它主要面向的使用场景是：用ClaudeCode写技术方案时，直接生成架构图与流程图嵌入文档。同类可对比的替代方案包括 Mermaid、draw.io、Excalidraw。

上一篇：transitions.dev

下一篇：没有了！