产品文档中的专业图表：ER图与类图方案选型
你会学到什么
上一章我们学了 Mermaid 基础——流程图（flowchart）、甘特图（gantt）、时序图（sequenceDiagram）、状态图（stateDiagram），以及 draw.io 的使用。这些图覆盖了架构设计、开发排期、API交互等场景。
但产品需求文档中还有两种"标配"图表是上一章没讲的：ER图（数据库设计）和类图（代码结构设计）。本节聚焦这两种图该用什么工具画、怎么选型，后续两节分别深入实战。
选型之外，本节还会回答一个更现实的挑战：当 Mermaid 画不出你要的图（比如政企项目里产品经理交付的那种"成熟样式"ER 图），如何借助外部开源项目 + AI 把它批量生产出来——"读图 → 调研 → 选型 → 本地运行 → 改造成 CLI 工具"五步工作流，是本章反复用到的方法论。
为什么产品文档需要 ER 图和类图
上一章讲的流程图回答"业务怎么流转"，时序图回答"谁调用谁"。但产品需求文档还需要回答另外两个问题：
| 问题 | 对应图表 | 举例 |
|---|---|---|
| 数据怎么存储？实体之间什么关系？ | ER 图 | 用户和订单是一对多，订单和商品是多对多 |
| 代码怎么组织？类型之间怎么依赖？ | 类图 | Button 继承 BaseComponent，Form 聚合 FormItem |
这两种图在产品文档中的位置：
产品需求文档
├── 业务分析
│ ├── 用户操作流程图 ← 上一章已学（flowchart）
│ ├── 页面跳转图 ← 上一章已学（flowchart）
│ └── 状态流转图 ← 上一章已学（stateDiagram）
├── 数据设计
│ └── ER 图 ← 本节选型，下节实战
├── 技术设计
│ ├── 类图 ← 本节选型，03节实战
│ └── 时序图 ← 上一章已学（sequenceDiagram）
└── 项目排期
└── 甘特图 ← 上一章已学（gantt）
text
上一章的工具链（Mermaid + draw.io + 国内AI绘图工具）完全适用于 ER 图和类图，不需要换工具。区别在于语法不同：ER 图用 erDiagram，类图用 classDiagram。
ER 图和类图的工具选择
Mermaid：首选方案
Mermaid 原生支持 ER 图和类图，上一章已经掌握了 Mermaid 的基本用法（预览方式、导出方法、Claude Code prompt 技巧）。ER 图和类图只是换了语法关键词，工具链完全复用：
| 图表类型 | Mermaid 关键字 | 上一章是否学过 |
|---|---|---|
| 流程图 | graph / flowchart | ✅ 已学 |
| 甘特图 | gantt | ✅ 已学 |
| 时序图 | sequenceDiagram | ✅ 已学 |
| 状态图 | stateDiagram-v2 | ✅ 已学 |
| ER 图 | erDiagram | ❌ 本节+下节 |
| 类图 | classDiagram | ❌ 本节+03节 |
预览方式不变：VS Code Markdown Preview Enhanced 插件、mermaid.live 在线编辑、mermaid-cli 导出 PNG/SVG。详见上一章 02 节的"渲染与导出"部分。
Claude Code 对 erDiagram 和 classDiagram 的支持质量与 flowchart/sequenceDiagram 一致，训练数据充足，可以直接生成可用代码。
PlantUML：补充方案
Mermaid 的 ER 图和类图能覆盖 80% 的场景，但有些需求它处理不好：
| 场景 | Mermaid 够不够 | PlantUML 优势 |
|---|---|---|
| 基础 ER 图（实体+关系+属性） | ✅ 够用 | 无明显优势 |
| 复杂样式（自定义颜色、字体） | ❌ 有限 | skinparam 完全控制 |
| 用例图、组件图、部署图 | ❌ 不支持 | 支持 60+ 种图表 |
| 包图（Package Diagram） | ❌ 不支持 | 原生支持 |
| 中文别名 + 注释 | ⚠️ 部分支持 | 更好的中文排版 |
选择建议：先用 Mermaid，画不出来或效果不满意时切 PlantUML。
PlantUML 的渲染方式与上一章讲的略有不同——需要 Java 11+ 运行时（当前稳定版 1.2026.9，2026-10-17 发布，月度更新节奏，2026-11-07 核实）。最简单的方案是通过 Kroki 在线渲染，不用装 Java：
# 通过 Kroki API 渲染 PlantUML（无需本地 Java）
curl -X POST \
-H 'Content-Type: text/plain' \
--data '@diagram.puml' \
https://kroki.io/plantuml/png \
-o output.png
bash
VS Code 安装 PlantUML 插件也可以本地预览，但需要 Java 运行时。
Kroki：统一渲染服务
上一章介绍过 Kroki，这里补充说明它在 ER 图和类图场景的价值：
Kroki 是一个 HTTP API 服务，支持 Mermaid、PlantUML、Graphviz、D2 等所有主流图表格式的渲染。它的优势在于：
- 不需要安装任何渲染工具：不需要 Java（PlantUML）、不需要 Chrome（mermaid-cli）
- 统一 API：所有格式用同一个端点，只是路径不同
- 可 Docker 自部署：内网环境友好
# Python 调用 Kroki 渲染 Mermaid ER 图
import requests
mermaid_code = """
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
"""
response = requests.post(
'https://kroki.io/mermaid/svg',
data=mermaid_code.strip(),
headers={'Content-Type': 'text/plain'}
)
with open('er-diagram.svg', 'w') as f:
f.write(response.text)
python
适用场景：CI/CD 流水线中自动生成图表、批量渲染、内网环境。
D2 和 Graphviz：暂不推荐用于 ER 图和类图
| 工具 | ER 图支持 | 类图支持 | 不推荐原因 |
|---|---|---|---|
| D2 | 无专用语法，需手动拼 | 无专用语法 | Claude 训练数据少，生成质量不稳定 |
| Graphviz DOT | 无专用语法 | 无专用语法 | 语法底层，适合网络拓扑，不适合 ER/类图 |
这两个工具更适合其他场景（D2 适合架构图、Graphviz 适合学术图），不在本节讨论范围内。
当 Mermaid 画不出你要的图：借助外部开源项目
前面的选型覆盖了"自己画图"的场景。但真实工作中还有一类需求更棘手：甲方/产品经理给定了一张成熟样式的图（政企项目常见——带配色、带边框、带实体分组的 ER 图），这种图 Mermaid 的 erDiagram 语法表达不出来，PlantUML 也要写大量 skinparam 才能勉强接近。图少可以手动画，图多（几十张表、海量 SQL）就必须让 AI 批量生产。
先排除一条走不通的路：AI 操作 Visio
第一反应可能是"让 AI 去操作 Visio"（那张图本来就是 Visio 画的）。去 GitHub 搜 "MCP Visio"，能搜到的 server（如 office-visio-mcp-server 一类）2026-10 实测大多已经 archived 停更，剩下的可用性也不理想。直接控制桌面绘图软件这条路目前不通，因为 Visio 没有官方 AI/MCP 接口。
破题关键：先让 AI 读懂图
要让 AI 画图，先要让 AI 能"看"图：
- 把目标图截图保存到本地
- 发给具备视觉能力的模型（Claude Code 的 Coding Plan 自带读图能力；GLM Coding Plan 同理）
- 让它分析图中元素：实体框样式、关系连线、配色、分组方式
如果你的模型没有视觉能力怎么办？本节先用一句话带过：可以用本地 OCR 模型把图中的文字信息提取出来交给模型——完整方案见本章 08-给AI装上眼睛：本地化GLM-OCR模型集成。
五步工作流：读图 → 调研 → 选型 → 本地运行 → CLI 化
第一步：读图 + 提出调研需求。 把截图发给 Claude Code 后，关键的一句提示词是：
分析一下这张 ER 图。然后使用 local search，搜索 GitHub 上有没有类似的开源 ER 图生成方案，
重点关注：支持从 SQL 生成 ER 图、前端渲染效果接近这张图、仍在维护中。
markdown
这句提示词的信息量在于：给出目标（效果像这张图）+ 给出输入形态（SQL）+ 给出筛选条件（仍在维护）。AI 会调用本地搜索工具在更大范围内检索，最后产出一份带项目清单、技术栈、许可证、演示地址和选型建议的调研报告。
第二步：按调研报告选型。 2026-10 实测这类调研的产出中，GitHub 上活跃的开源 ER 图工具主要有（也是 Bytebase 2026 年度盘点的 Top 4）：
| 项目 | 特点 | 适合场景 |
|---|---|---|
| drawDB | 浏览器内免费 ERD 编辑器，导入/导出 SQL，MIT 许可，纯前端 | 快速编辑 + SQL 双向转换 |
| ChartDB | 一条查询即可可视化数据库表结构 | 从现有库反向生成 ER 图 |
| Azimutt | 面向大型数据库的探索式设计 | 表多的复杂库 |
| Liam ERD | 专注 ERD 的现代渲染 | 文档化展示 |
选型时看四个信号：技术栈是否纯前端（MIT 许可的纯前端方案改造起来最省事）、有没有在线演示（先把 SQL 粘进去看效果，符合预期再动手）、更新时间（三周内还有提交说明活跃）、前后端复杂度。有演示地址的项目先验证效果，不符合预期就让 AI 读它的源码做调整——这就是"站在开源项目肩膀上"的含义。
第三步：本地运行。 选定项目后，直接把仓库地址交给 Claude Code：
初始化 https://github.com/xxx/xxx 到本地环境并运行起来
markdown
AI 会自己 clone、装依赖、处理端口冲突、启动 dev server。你要做的只是打开生成器页面，粘贴 SQL，验证出图效果。
第四步：CLI 化。 单张图用浏览器粘贴就够了，但海量 SQL 需要批量。继续对 AI 提需求：
我有海量的 SQL 文件，需要批量生成 PNG 图片。
请把这个项目改造成为可以使用命令行调用的工具：
输入一个目录下的所有 .sql 文件，输出对应的 ER 图 PNG 到 output 目录。
markdown
实测（2026-10，Claude Code）这个改造任务耗时约 18 分钟：AI 经过多轮调试、安装本地依赖、自己验证。执行这类长任务时老师使用了 --dangerously-skip-permissions（跳过每条命令的授权确认），让整个过程无需人工干预——只建议在自己机器上、且改动都在可 review 的项目目录里时使用。改造完成后得到一条批量命令，一次跑完全部 SQL；输出效果不满意的（比如想要彩色），继续用提示词提需求（"给 CLI 加一个去色/配色参数"），迭代到你想要的样子。
同样的思路可以复用
PlantUML 和 Kroki 也能用同样的方式做成 CLI 批量渲染工具——下一节就以 PlantUML 为例，讲两件更通用的事：让 AI 快速配置复杂工具链的本地环境（Java + ASDF），以及把这些工具沉淀成可复用的 skill。
方案推荐总结
ER 图 / 类图的工具选择
│
├── 80% 场景：Mermaid（erDiagram / classDiagram）
│ ├── 预览：VS Code 插件 / mermaid.live
│ ├── 导出：mermaid-cli（mmdc）
│ └── Claude 支持度：⭐⭐⭐⭐⭐
│
├── 复杂样式 / 特殊图表：PlantUML
│ ├── 预览：VS Code PlantUML 插件（需 Java）
│ ├── 渲染：Kroki API（无需 Java）
│ └── Claude 支持度：⭐⭐⭐⭐
│
└── 特殊样式 / 海量批量：借助外部开源项目
├── 调研：local-search 搜 GitHub（drawDB / ChartDB / Azimutt / Liam ERD）
├── 落地：AI 初始化环境并运行，读源码改造样式
└── CLI 化：要求 AI 把 Web 工具改造成命令行批量出图
text
工具链不需要换——上一章学的 Mermaid 预览、导出、Claude Code prompt 技巧全部复用。接下来两节分别深入 ER 图和类图的语法与实战。
本节要点
- 上一章学了 flowchart/gantt/sequenceDiagram/stateDiagram，本章补上 erDiagram 和 classDiagram，产品文档的图表就齐全了
- 工具链不变：Mermaid 首选（当前 12.3.0），PlantUML 补充（当前 1.2026.9，需 Java 11+）（2026-11-07 核实），Kroki 做统一渲染
- Claude Code 对 erDiagram 和 classDiagram 的支持质量与其他图表类型一致
- 不需要学新工具，只需要学新语法——这正是选择 Mermaid 作为主力方案的好处
- 当 Mermaid 画不出目标样式时，走"读图 → local-search 调研 → 选型 → AI 初始化运行 → CLI 化"五步工作流，把开源项目变成自己的批量出图工具；"AI 操作 Visio"这条路因为缺官方接口、MCP server 停更而走不通
↑