Diagram Design学习路线图：从新手到专家的完整进阶路径
项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design 如果你想用 AI 生成媲美专业设计的架构图、流程图和时序图，这篇 Diagram Design 学习路线图值得收藏。它基于开源的 diagram-design 项目——一个专为 Claude Code、Codex 与 Pi 打造的图表设计技能，内置 27 种图表类型，输出自包含的 HTML + SVG 文件，无需构建步骤。下面这份进阶路径将从零开始，带你系统掌握这个 AI 绘图工具。
为什么需要一份 Diagram Design 学习路线图？
用过 AI 画图的人都有同感：让 Claude 画架构图，回来的是千篇一律的圆角框；用 Mermaid 画流程图，布局永远差一口气。diagram-design 的出发点正是"编辑级（editorial）设计"——白色纸张底色、黑色墨色文字、橙色点缀，没有阴影、没有 Mermaid 式的"AI 味"。它更像一位专业设计师，而不是一个绘图插件。
上图为典型架构图输出：组件 + 连接，单色强调焦点，正交连线，底部图例清晰。
第一阶段：快速上手（新手入门）
如何安装 diagram-design 技能
安装方式按你的 AI 客户端选择，整个过程约 1 分钟：
- Claude Code：通过
/plugin marketplace add与/plugin install两条命令完成安装，之后可在插件市场开启自动更新。 - Codex：使用
codex plugin marketplace add与codex plugin add添加技能。 - Pi：直接
pi install后执行/reload，再通过/skill:diagram-design显式调用。
克隆仓库后可自行定制，核心技能文件位于 skills/diagram-design/SKILL.md，官方入口说明见 README.md。
生成第一个图表
安装完成后，直接对 AI 说一句自然语言即可：
"帮我画一张应用架构图：前端、后端、数据库、Redis 缓存。"
AI 会自动选择最合适的图表类型，生成 HTML 文件。也可以直接从模板起步，把 skills/diagram-design/assets/template.html 复制为你的图表文件，再让 AI 填充内容。想预览全部 27 种图表，直接打开 skills/diagram-design/assets/index.html 画廊页面即可，支持亮色 / 暗色 / 完整编辑三种风格切换。
第二阶段：掌握 27 种图表类型（进阶）
这是 Diagram Design 学习路线图的核心关卡：先选对类型，再谈画得好。27 种视觉类型可分为四大类：
| 分类 | 图表类型 |
|---|---|
| 🏗️ 结构与流程 | 架构图、流程图、泳道图、过程图、数据流、时序图 |
| 🧠 状态与数据 | 状态机、ER 图、Medallion、DP 集成、DP 安全矩阵 |
| 📊 层级与对比 | 树图、嵌套图、组织架构图、层级堆栈、维恩图、金字塔、象限图 |
| 📈 统计与周期 | 柱状图、折线图、甘特图、散点图、雷达图、时间线、循环图、High-Level、IT 现状图 |
每种类型的布局规范独立成文，例如 type-flowchart.md、type-sequence.md、type-er.md。选择依据很简单：展示决策逻辑用流程图，展示跨角色协作用泳道图，展示实体关系用 ER 图，展示时间顺序用时序图。
第三阶段：语义模式与设计哲学（高手）
进阶到这一层，你会发现 diagram-design 的独特之处：语义模式描述"系统在做什么"，27 种类型只负责"信息如何排布"。当行为、状态、风险承载含义时，先选择语义模式，再匹配最近的视觉类型。
semantic-patterns.md 定义了 7 种路由模式：扇入队列 / 瓶颈、阶段框架语义槽、非结构化输入转结构化产物、成对策略评估追踪、安全铺装道路、治理 / 控制目录、补偿式安全层。例如"多个生产者争抢一个受限服务"就命中扇入队列模式，AI 会自动画出带队列槽位和容量标签的示意图，而不是一张普通的流程管道。
同时要内化它的设计哲学，规则见 SKILL.md：
- 最高级的操作往往是删除——每个节点都必须有独立含义，两个永远同行的节点就该合并成一个。
- 目标密度 4/10——超过 9 个节点，大概率应该拆成两张图。
- 强调色只给 1~2 个焦点——橙色用在 5 个节点上，信号就消失了。
- 禁止阴影、禁止大圆角、禁止通用等宽字体——边框代替阴影，斜体衬线只留给批注。
第四阶段：品牌定制（专家）
高手与普通用户的差距，往往体现在"让图表长得像自己家"。diagram-design 的设计系统全部收敛在 style-guide.md 这一个文件里，语义角色（paper、ink、muted、accent）是单一事实来源。
品牌定制的标准姿势是运行 onboarding，完整流程见 onboarding.md：
- 告诉 AI"将 diagram-design 适配到我的网站"；
- AI 抓取页面，提取主色调与字体栈；
- 自动映射到语义角色：网站背景色 → paper，主文字色 → ink，CTA 按钮色 → accent；
- 展示差异预览，确认后写入 style-guide.md；
- 此后所有图表自动继承你的品牌皮肤。
更贴心的是，写入前会做 WCAG AA 对比度校验，图表字号（9~12px）下不达标的颜色会被自动调整并说明原因，确保图表既好看又无障碍。
第五阶段：导入导出与工作流集成（终极）
最后一关，是把 diagram-design 接入你的日常工作流。它最强大的能力之一是重绘（redraw）：已有的 draw.io 或 Mermaid 图可以直接导入重绘成编辑级风格。
导入命令支持四种可调参数，详细规范见 import-drawio.md 与 import-mermaid.md：
- 格式：html / svg / png——SVG 给 Figma，PNG 给幻灯片，HTML 给网页；
- 尺寸：文档内嵌、16:9 幻灯片、社交媒体封面、A4 打印等预设；
- 细节：faithful（≤24 节点）/ balanced（≤12）/ simplified（≤7）三档降级；
- 受众：工程师 / 混合 / 高管——同一张图换三种措辞。
每次导入结束还会输出一份保真清单，告诉你合并、折叠、丢弃了哪些内容，全程透明。导出功能则通过 /diagram-design:export 命令完成，规则见 export.md，PNG 导出支持 2× 高清缩放（需提前 pip install playwright）。其余常用命令可参考 commands/export-diagram.md 和 prompts/import-mermaid.md。
写在最后：你的 Diagram Design 进阶计划
回顾这条 Diagram Design 学习路线图，核心脉络只有四步：装好技能 → 用对类型 → 理解语义 → 定制品牌。建议按周推进：第一周熟悉 3~5 种常用类型，第二周吃透语义模式与设计哲学，第三周完成品牌定制并接入导入导出工作流。坚持一个月，你就能用 AI 产出让设计师都挑不出毛病的专业图表——而这，正是这份学习路线图的价值所在。🚀
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
