PlantUML vs Mermaid vs Draw.io：选谁画什么图

不存在「最好」的图工具，只有最合适的那一个。这篇是经过几次切换后的总结。

一句话结论

PlantUML 的强项

时序图是 PlantUML 的王牌。alt / else / opt / loop / par / critical 一套控制流语义清晰：

1
2
3
4
5
6
7
8
9
10

@startuml
participant FE
participant API
FE -> API: POST /login
alt 成功
  API --> FE: 200
else 凭据错
  API --> FE: 401
end
@enduml

类图也是。interface / enum / abstract 都能直接表达：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@startuml
abstract class Animal {
  +name: String
  {abstract} +makeSound()
}
class Dog {
  +bark()
}
class Cat {
  +meow()
}
Animal <|-- Dog
Animal <|-- Cat
@enduml

还有组件图、部署图、用例图、对象图、状态图、时序图……PlantUML 对 UML 标准支持最完整。如果团队里需要画严格 UML，PlantUML 是首选。

Mermaid 的强项

Mermaid 集成度高是杀手锏 —— GitHub、GitLab、Notion、Obsidian、Hexo、Confluence、Slack 编辑框直接解析。Markdown 文档里直接写：

1
2
3
4
5

flowchart LR
  A[用户] --> B{是否登录}
  B -->|是| C[首页]
  B -->|否| D[登录页]
  D --> B

1
2
3
4
5
6
7
8
9
10
11
12

erDiagram
  USER ||--o{ ORDER : places
  USER {
    int id PK
    string email UK
    string name
  }
  ORDER {
    int id PK
    int user_id FK
    date created_at
  }

PR 里加一段 Mermaid，GitHub 渲染，评审者不用切工具。

Draw.io 的强项

Draw.io 永远是「最后的兜底」。当 PlantUML / Mermaid 自动布局满足不了你、或者图太大需要拆开编辑、或者要和真实业务图标混排，上 Draw.io。

它的硬优势：

• 拖拽即所得，所见即所得
• 布局算法可以选择（树状、有机、环形）
• 字体、颜色、阴影自由控制
• 文件是 XML，可以进 git，但人肉 diff 困难
• 支持嵌入 SVG / PNG / base64 图片

但它不是文本优先的，每次改动都要开桌面工具 / Web 界面。评审流程里没有 PR diff，文档会慢慢腐烂。

三者对比表

我的实操配方

• 写代码注释 / PR 描述 / 文档片段 → Mermaid（哪都能渲染）
• 画时序、类图、状态图、组件图、用例图 → PlantUML
• 老板或客户需要的「漂亮的架构图」→ Draw.io
• 一张图里同时出现上面两种 → Draw.io 当画布，PlantUML/Mermaid 当 source 通过插件插入

不要做的事

• 不要在 PlantUML 里硬塞自定义 SVG 形状。SVG 标签最后会被自动布局算法搞乱，反而不好维护。
• 不要把 Mermaid 当成「写流程图的唯一工具」。版本控制友好、集成度高是它的优势，当图需要细致空间布局时就换工具。
• 不要单独用 Draw.io 维护需要评审的图。每次改动没有 diff，没法追责。要么改成 PlantUML/Mermaid 文本，要么接受 Git 历史只看到 XML 的整段变化。