从14种到27种：Diagram Design图表类型演进的背后逻辑
【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design
如果你经常让 AI 帮忙画图，大概有过这样的经历：要一张架构图，结果得到一堆千篇一律的圆角方块；要一张流程图，配色和排版怎么看都像"AI 生成的廉价货"。Diagram Design正是为解决这个问题而生的 Claude Code 技能（Agent Skill），它把图表类型从最初的 14 种一路打磨到今天的27 种，每种都能生成自带内联 SVG 的独立 HTML 文件——无阴影、无脚本依赖、无 Mermaid 式的"AI 味"，是一套真正有编辑设计感的图表体系。这篇文章就来拆解：这 27 种图表类型是怎么一步步长出来的，以及演进背后有哪些值得借鉴的设计逻辑。
第一步：v1.0 的 14 种核心图表类型是怎么定下来的
项目最初的版本非常克制，只覆盖了"写文章、做方案"最常用的基础类型：架构图、流程图、时序图、状态机、ER 数据模型、时间线、泳道图、象限图、嵌套图、树状图、组织架构图、维恩图、层级堆栈和金字塔图。这 14 种类型对应的是知识工作者每天都会碰到的表达需求：系统长什么样、流程怎么走、数据怎么组织、优先级怎么排。
每一张图都遵循同一套视觉规则：4px 网格、无阴影、1px 发丝边框、最多 1~2 个强调色焦点元素。用项目的话说，"最高的质量动作通常是删除"——每个节点都要挣得自己的位置，目标密度只有 4/10。这也是它敢说"你的设计师不会讨厌"的底气。
第二步：一次合并带来 12 种新图表类型
图表类型演进的第一个拐点，是合并了一批社区贡献的图表类型，一次性把类型数从 14 推到了 26。这批新增的类型明显瞄准了数据与分析场景：
- 数据可视化类：柱状图、折线图、甘特图、散点图、雷达图（蜘蛛图）
- 数据平台类：Medallion 分层存储、数据流图（Data Flow）、数据平台集成图（DP Integration）、数据平台安全矩阵（DP Security Matrix）
- 企业叙事类：IT 现状图（IT Current-state）、高层级架构图（High-Level）、多角色流程过程图（Process）
这批类型让项目从"通用图表工具"真正跨进了"数据与架构叙事"的领域。比如雷达图专门用来做多实体、多维度对比；Medallion 图则把数据湖分层存储的质量等级画得清清楚楚，这在数据工程方案里几乎是刚需。
第三步：第 27 种图表类型——Loop 飞轮图的诞生
图表类型演进的第二个拐点，是 Loop（循环/飞轮图）的加入。它专门表达"末步喂给首步、共享中枢累积状态"的增强回路：工作沿环形前进，每一轮都把状态写回中央的共享中枢。项目里那张经典的"自改进循环"图——Capture → Research → Decide → Act → Measure → Learn——就是它的代表作。
有意思的是，Loop 是一张参数化的图：站位数、角度、连线路径全部由输入参数推导，相同输入必然产出相同几何结构。这让它既保持了编辑质感，又具备可复现性，与"AI 随机发挥"彻底划清界限。
类型为什么停在 27：语义模式不扩充分类
看到这里你可能会问：为什么不继续加第 28、29 种？答案是项目写进了 ADR-0002 设计决策：行为是独立于布局的另一条轴。当需要表达队列积压、策略评估轨迹、信任边界这类"行为语义"时，不再新增图表类型，而是用 7 种语义模式（Semantic Patterns）路由到最近的既有类型，模式只补充语义图元和更紧的预算约束，绝不再造一套布局语法。
一个需要"队列"的图，会用语义模式复用数据流图的布局；需要"策略对比"的，复用流程图的布局。类型数量保持 27 这个可验证的稳定数字。
完整的模式路由表在 references/semantic-patterns.md。这套思路的收益很实在：新增一种行为，只加一个模式段落和一行路由表，而不用动类型参考文档、模板和示例三件套。
27 种图表类型如何快速选择？按用途对号入座
面对 27 种类型，新手最常问的就是"我该用哪种"。项目在 SKILL.md 里给了一张清晰的选择指南，按你要表达的内容对号入座即可：
| 你想表达什么 | 用哪种图表类型 |
|---|---|
| 系统组件与连接关系 | 架构图（Architecture） |
| 带分支的决策逻辑 | 流程图（Flowchart） |
| 角色间的消息时序 | 时序图（Sequence） |
| 状态与状态迁移 | 状态机（State machine） |
| 实体、字段与关系 | ER 数据模型 |
| 时间轴上排布事件 | 时间线（Timeline） |
| 跨部门流程与交接 | 泳道图（Swimlane） |
| 双轴定位与优先级 | 象限图（Quadrant） |
| 多维定量对比 | 雷达图（Radar） |
| 增强回路与飞轮 | Loop 循环图 |
| 包含关系的层级 | 嵌套图 / 树状图 |
| 分层抽象与治理 | 层级堆栈（Layer stack） |
| 数据平台与角色数据流 | Medallion / 数据流 / DP 集成 |
规则很简单：能用三列表格说清的就别画图；两种类型都沾边时，选主导轴的那个；复杂度超过预算（单图最多 9 个节点、12 条箭头）就拆成"总览 + 细节"两张图。
图表类型的进化不止于"数量"
图表类型从 14 到 27，增长的其实不只是数量，还有三个层面的能力：
- 可品牌化：通过 onboarding 流程读取你的网站，60 秒提取主色和字体，把 paper、ink、accent 等语义令牌写入 style-guide.md，此后所有图表类型都自动继承你的品牌视觉。
- 可导入重绘：把已有的 draw.io 或 Mermaid 源文件交给它，它会重绘而非转换——丢弃源坐标和配色，保留内容与结构，按你选的格式、尺寸、详细度和受众重新排布。参数化控制见 references/output-spec.md。
- 可导出交付：单文件 HTML 可直接导出为 SVG（给 Figma/Illustrator）或 PNG（给幻灯片），全部流程见 references/export.md。
写在最后：类型是手段，不是目的
回看 Diagram Design 的演进史，最值得记住的一点是：它始终在用"少而精"对抗"多而滥"。14 种是克制，27 种是能力边界内的克制——语义模式吸收行为复杂度，参数化模板保证可复现，编辑设计系统保证质感。如果你也在做 AI 生成内容类工具，或单纯想让 AI 画出能直接放进文章和提案的图表，这套"先定类型、再套模式、最后讲预算"的方法论，很值得照抄一份。
想亲自体验全部 27 种图表类型？打开 assets/index.html 画廊，即可在浅色、深色与完整编辑版之间切换浏览所有示例。更多用法与设计规范，可查看项目根目录的 README.md。
【免费下载链接】diagram-design29 editorial diagram types for Claude Code. Self-contained HTML + SVG. No shadows, no Mermaid-slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
