GitHub：cathrynlavery/diagram-design ⭐ 18K+ | HTML | MIT License
Diagram-Design 是为 Claude Code 量身打造的图解技能包，包含29种编辑型图解模板。与 Mermaid 等传统图表工具不同，它输出的是自包含的 HTML+SVG 文件——无需额外依赖，打开浏览器即可查看和编辑。每种图解类型都经过精心设计，代码生成干净、视觉美观、可直接用于文档和演示。项目在 GitHub 上已获得超过 18,000 颗星。
# 方式1：作为Claude Code Skill安装
# 将技能文件复制到Claude Code技能目录
git clone https://github.com/cathrynlavery/diagram-design.git
cp -r diagram-design/skills/* ~/.claude/skills/
# 方式2：直接引用
# 在Claude Code对话中说：
# "使用diagram-design技能画一个系统架构图"
# 方式3：全局安装
npm install -g diagram-design-cli
diagram-design list # 查看所有可用图解类型| 图解类型 | 用途 | 输出格式 |
|---|---|---|
| 系统架构图 | 展示组件关系和数据流 | HTML+SVG |
| 流程图 | 步骤和决策流程可视化 | HTML+SVG |
| 时序图 | API调用和消息交互 | HTML+SVG |
| 思维导图 | 概念层级和关联展示 | HTML+SVG |
| 甘特图 | 项目计划和进度追踪 | HTML+SVG |
| 对比矩阵 | 多维度方案对比 | HTML+SVG |
| 用户旅程图 | UX流程和触点映射 | HTML+SVG |
共29种图解类型，以上为常用示例。
> 帮我画一个微服务架构图，包含：
> API Gateway, User Service, Order Service,
> Payment Service, Redis, PostgreSQL
Diagram-Design 的自包含特性使其与 ECC Claude Code增强工具 完美搭配——ECC负责优化Claude Code的整体效率，Diagram-Design专门负责图解可视化，两者组合让Claude Code成为强大的技术文档生成工具。
| 场景 | 推荐图解 | 优势 |
|---|---|---|
| 技术文档编写 | 架构图+时序图 | 无需Visio/Draw.io |
| 项目汇报 | 甘特图+流程图 | 直接生成可编辑HTML |
| 产品设计 | 用户旅程+思维导图 | 快速迭代可视化 |
| 教学材料 | 对比矩阵+流程图 | 清晰直观易理解 |
GitHub：cathrynlavery/diagram-design ⭐ 18K+ | HTML | MIT License
Caveman：Token用量压缩工具指南