1. 基本信息
| 项目 | 内容 |
|---|---|
| 名称 | Diagram Design |
| 作者/维护者 | Cathryn Lavery（个人开发者） |
| 来源链接 | https://github.com/cathrynlavery/diagram-design |
| 许可证 | MIT（GitHub API 获取） |
| GitHub Stars | 26,315（GitHub API 获取） |
| Forks | 1,630（GitHub API 获取） |
| 最新版本 | 2.6.5（.claude-plugin/plugin.json） |
| 安装方式 | Claude Code 插件市场 / Codex / Factory Droid / Pi 四种官方命令，见第 10 章 |
2. 功能介绍与亮点
Diagram Design 是一个把“技术图表”当作编辑级视觉设计产出的技能，覆盖 39 种图表类型：架构图、IT 现状图、流程图、时序图、状态机、ER/数据模型、时间线、泳道图、象限图、雷达图、极坐标图、飞轮循环图、树状图、组织架构图、层级堆叠图、维恩图、金字塔/漏斗图、树图、条形/折线/散点/甘特图、Sankey 图、鱼骨图、Wardley 地图、看板、用户旅程图、部署图、依赖关系图、UML 类图、数据库 Schema 图等。
核心亮点：
- 产出为自包含 HTML + SVG 文件：无需构建步骤、无 JavaScript 依赖、浏览器直接打开即可查看，也可导出 PNG。
- 60 秒品牌适配：读取用户网站首页，自动提取配色与字体，映射为语义化的 token（paper / ink / muted / accent），并在写入前做 WCAG AA 对比度校验，不达标会自动提出调整建议。
- 语义模式与布局解耦：新增的“语义模式”层描述图表要表达的行为（如“扇入队列/瓶颈”“信任边界”），布局类型只负责排版，二者独立选择，减少为表达新语义而新增图表类型的需要。
- 可重绘外部源：支持导入并按指定尺寸/细节级别重绘
.drawio、.drawio.png/.svg与 Mermaid.mmd源文件。 - 无障碍优先：每个 SVG 都带
role="img"、可解析的aria-labelledby与<title>/<desc>，多图内联在同一页面时 ID 前缀避免冲突。 - 设计哲学强调“删减优先”：每个节点必须承载独立信息，目标信息密度控制在 4/10，避免过度堆砌。
3. 适用场景
所属分类：数据分析与可视化
适用人群与场景：
- 技术文档/架构方案撰写者，需要为设计评审、RFC、技术博客配上专业的架构图与流程图；
- 产品与工程团队在方案汇报、模块讲解时需要组织架构图、泳道图、部署图等结构化图示；
- 内容创作者与个人博主需要为文章、社交媒体配图，且希望图表风格与自己网站的品牌视觉一致；
- 已有 draw.io 或 Mermaid 素材、希望统一升级为编辑级视觉风格的团队。
4. 跨 Agent 兼容性
| Agent | 结论 | 依据 |
|---|---|---|
| Claude Code | ✅ 原生支持 | 官方给出 /plugin marketplace add + /plugin install 命令 |
| Codex | ✅ 原生支持 | 官方给出 codex plugin marketplace add + codex plugin add 命令 |
| OpenClaw | ⚠️ 需适配 | 未见官方针对 OpenClaw 的安装说明；SKILL.md 采用通用 Agent Skills 规范格式，理论可读取但未经作者验证 |
| Hermes Agent | ❓ 未验证 | Hermes 生态的技能收录站未发现该项目被收录的记录，作者文档也未提及 Hermes |
（README 另给出 Factory Droid 与 Pi 的官方安装命令，超出本系统覆盖的四生态范围，仅供参考）
5. 推荐理由
大多数 AI 生成的图表停留在“能看懂”而非“能拿去用”的水准——通用圆角方框、默认配色、与产品视觉脱节。Diagram Design 把图表当作和网站一样需要品牌一致性与可访问性的设计产出：60 秒读取品牌色板、自动做对比度校验、产出可直接内联进网页或演示文稿的 SVG。对经常需要产出技术图示或数据可视化配图、又不想为此专门学 Figma 的用户，这是一个开箱即用、维护活跃、经独立第三方验证过真实增长的选择。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 9 | GitHub 26,315 stars；PyShine、explainx.ai、opensourcedrop.com 等独立第三方均有报道，GitHub issues 中可见非作者用户主动提交功能请求与缺陷报告 |
| 可用性 | 8 | Claude Code/Codex/Factory Droid/Pi 四端官方一键安装命令，产出自包含无需构建；最近一次代码推送为 2026-08-21，持续迭代；但仍有约 30 个未关闭 issue，含真实缺陷（如 SVG 导出到 PowerPoint 时透明度渲染异常） |
| 安全性 | 9 | 附带脚本（drawio_extract.py/mermaid_extract.py/self_check.py）仅做本地文件解析，未发现任何网络请求或子进程调用；无需 API Key；MIT 许可证明确；未发现可疑指令 |
综合评分：8.67
安全检查清单逐项结果：
① Shell 命令与权限范围：脚本仅用于本地 drawio/Mermaid 文件解析与自检，无越权操作 ② 运行时联网外发：品牌适配功能由 Agent 自身发起网页读取（非技能脚本内嵌的隐蔽外联），技能自带脚本本身无网络调用 ③ API Key/凭据：不需要任何密钥或凭据 ④ 可疑指令：SKILL.md 与脚本中未发现 prompt injection 或夹带无关推广的迹象 ⑤ 作者信誉：个人开发者，无造假迹象，GitHub 上有持续、透明的版本迭代记录 ⑥ License：MIT，明确 ⑦ 最近维护：活跃，近期仍在合并新功能（v2.5.10 到 v2.6.5 的迭代）
7. 跟同类 Skills 相比的优势
| 维度 | Diagram Design | drawio-skill（Agents365-ai） |
|---|---|---|
| 产出格式 | 自包含 HTML + SVG，浏览器直接查看，另可导出 PNG | 原生 .drawio 格式，可在 draw.io 应用中继续编辑，另支持导出 PNG/SVG/PDF/JPG |
| 图表覆盖 | 39 种类型，偏重“编辑级”视觉呈现（架构、统计图表、组织图等一体覆盖） | 11 种预设（UML、SysML/MBSE、BPMN、网络拓扑、C4 等），偏工程/架构标准图规范，36 种配套工具（代码库转图、CI/基础设施转图、PR 差异对比机器人等） |
| 品牌一致性 | 内置读取网站配色字体、WCAG 对比度自检的品牌适配流程 | 未见品牌/视觉一致性相关功能，更偏向标准化工程制图 |
| 定位差异 | 面向内容/文档/汇报场景，强调“看起来像设计师做的” | 面向工程团队的标准化架构图生成与 CI 集成场景 |
两者可以互补：需要符合 UML/BPMN/C4 等工程规范、且要在 draw.io 中继续协作编辑的场景更适合 drawio-skill；需要图表本身具备品牌视觉一致性、可直接嵌入文章或演示文稿的场景更适合 Diagram Design。
8. 用户评价
- explainx.ai 博客（作者 Yash Thakker，2026-08）：评价该技能“是同类 AI agent 技能中少见的、经过严格测试打磨的产品”，同时也如实指出局限——PNG 导出依赖额外步骤，并非零配置开箱即用。
- GitHub Issues 中可见多位非作者用户主动提交功能请求（如要求支持 OpenCode 插件）与缺陷报告（如 PowerPoint 导出透明度问题），显示该项目已吸引独立于作者本人的真实使用者与社区反馈。
9. 其他补充
作者在项目 README 中说明该技能最初是为自己撰写技术博客与产品文档所需而开发；仓库同时维护了针对 Claude Code、Codex、Factory Droid、Pi 四个客户端的独立插件清单文件，版本更新通过各客户端原生更新机制分发。
10. 安装使用方式
Claude Code：
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-design安装后需在 /plugin → Marketplaces 中为该市场开启 Auto-update（第三方市场默认关闭自动更新），随后按提示运行 /reload-plugins 或等待下次会话自动加载。
Codex：
codex plugin marketplace add cathrynlavery/diagram-design
codex plugin add diagram-design@diagram-design手动/可编辑安装（便于自定义 style-guide.md）：
git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design
ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design首次在新项目中使用时，若样式表仍为默认配色，技能会主动询问是否读取用户网站进行品牌适配，可选择跳过并使用默认配色。
11. 注意事项
- 已知缺陷：SVG 导出到 PowerPoint 时，部分透明度（
rgba()/transparent）会被渲染为不透明黑色，需留意跨软件导出场景； - PNG 导出依赖独立的转换步骤，不是纯零配置流程；
- 品牌适配功能依赖读取目标网站页面，若网站访问受限或结构特殊，字体/配色提取可能不准确，此时需手动编辑
style-guide.md； - OpenClaw 与 Hermes Agent 上的兼容性未获得官方或第三方验证，两平台用户安装前建议先小范围测试。