# diagram-design 🎨 让 Claude Code 告别 Mermaid-slop 的 29 种编辑级图表方案

如果你最近用 AI 辅助编程工具生成过架构图或流程图，大概率见过那种千篇一律的 Mermaid 输出——圆角矩形、默认配色、箭头生硬，仿佛从同一个模子里刻出来的。有人给这种现象起了个精准的名字：Mermaid-slop。今天要介绍的这个项目，就是来终结它的。

🔍 先说痛点：AI 生成图表的审美危机

在 Claude Code 或其他 AI 编程助手中，当你请求"画一个系统架构图"时，默认行为通常是生成一段 Mermaid 代码。这本身没有错——Mermaid 是优秀的图表 DSL。但问题在于，AI 几乎总是用同样的默认配置：同样的字体、同样的配色、同样的节点形状。结果就是，每个项目生成的图表都长得一模一样，毫无个性可言。

更糟的是，这些图表往往缺乏编辑级的细节考量：没有信息层级、没有视觉节奏、没有为阅读者优化布局。它们只是"能表达逻辑"，但远谈不上"设计过的图表"。

而 cathrynlavery/diagram-design 的出现，正是为了解决这个尴尬局面。它提供了 29 种编辑级（editorial）图表类型，全部是自包含的 HTML + SVG 实现，没有任何外部依赖。

🛠️ 这个项目如何解决痛点

这个项目的核心思路非常巧妙：它把"设计能力"打包成了可以直接放入 Claude Code 上下文的 HTML/SVG 模板。与其让 AI 从零开始生成 Mermaid 代码，不如给它一套精心设计过的视觉范式，让它在这些范式的基础上进行内容填充。

这就好比：你不让 AI 用 MS Paint 自己画图，而是给它一套专业设计师做的 InDesign 模板。AI 只需要填入内容，输出的自然是编辑级质量的图表。

项目的"反 Mermaid-slop"宣言体现在几个具体的设计决策上：

  • ❌ 无阴影（No shadows）——去掉那些毫无意义的 CSS box-shadow，让图表干净利落，适合印刷和文档嵌入
  • ❌ 无 Mermaid 默认审美——不用圆角矩形 + 默认蓝色的组合套路
  • ✅ 自包含（Self-contained）——每个图表就是一个完整的 HTML 文件，打开即用，不需要构建工具
  • ✅ SVG 原生——直接操作 SVG 元素，可以无损缩放、精准控制每个像素

📐 29 种图表类型一览

29 种图表类型覆盖了从技术文档到产品说明的各种场景。它们不是随意的变体，而是每类都有明确的适用场景和设计意图。这里列举几个有代表性的：

流程与架构类

  • 时序图（Sequence Diagram）——但不再是 Mermaid 那种呆板的竖直排列，而是有更灵活的横向时间轴布局
  • 系统架构图（System Architecture）——分层结构清晰，信息密度可控
  • 数据流图（Data Flow）——强调数据流向的视觉引导线
  • 状态机（State Machine）——状态节点和转换箭头有明确的视觉权重区分

决策与对比类

  • 决策树（Decision Tree）——分支路径用颜色编码，降低认知负担
  • 对比矩阵（Comparison Matrix）——适合多方案选型的场景
  • SWOT 分析图——四个象限的布局经过精心调整，不再是简单的 2x2 表格

叙事与说明类

  • 时间线（Timeline）——支持里程碑标注和事件密度变化
  • 环形图（Donut/Circular）——不仅是数据展示，更是视觉焦点
  • 流程图解（Exploded View）——适合展示组件之间的层级分解关系

每一类图表都是一个独立的 HTML 文件，其中 SVG 结构经过精心设计——不是 AI 随机拼凑的坐标和线条，而是有人工设计感的空间布局和视觉层次。

⚡ 快速上手：在 Claude Code 中使用

使用方式出奇简单。核心思路是：把项目中的 HTML/SVG 模板作为上下文提供给 Claude Code，然后告诉它你要什么。

典型的工作流如下：


# 1. 克隆项目到本地
git clone https://github.com/cathrynlavery/diagram-design.git

# 2. 查看可用的图表类型
ls diagram-design/
# 输出示例：
# architecture-layered.html
# sequence-diagram.html
# decision-tree.html
# ...

然后在 Claude Code 中，你可以这样使用：


请参考 diagram-design/sequence-diagram.html 中的图表风格，
为我生成一个订单处理流程的时序图。
要求：
- 参与者：用户、前端、API 网关、订单服务、支付服务
- 展示从下单到支付完成的完整流程
- 保持该模板的视觉风格和布局方式

Claude 会读取模板的 HTML/SVG 结构，理解其设计语言，然后生成符合该风格的定制内容。关键在于——模板提供的不仅是"画图的方法"，更是一种视觉范式。

🚀 进阶技巧：模板的组合与定制

这些图表模板真正的威力在于组合使用。一个完整的项目文档可能需要多种图表类型的配合：

  • 用 架构图 展示系统整体结构
  • 用 时序图 说明关键交互流程
  • 用 决策树 解释业务规则
  • 用 时间线 展示版本演进计划

因为所有图表都是自包含的 HTML + SVG，你可以自由嵌入到任何支持 HTML 渲染的文档系统中——Notion、Obsidian、GitHub Pages 乃至 Markdown 渲染器都可以直接展示。

另一个值得注意的技巧是颜色和尺寸的自定义。模板中的 SVG 元素使用 CSS 变量或明确的属性值，你可以通过简单的替换来调整配色方案，以匹配你的品牌色或文档主题：


/* 在模板的