时间：2026年8月30日
画流程图的方式和工具很多，很多时候可能只是偶尔使用一下，这里也只是简单提及一些，方便使用的时候选择和继续探索。
流程图工具大致可以分为三个派别，主要由需要和方便决定的:
1. 代码即图表（text-to-diagram）
纯文本描述图的结构，工具自动计算布局。Mermaid、PlantUML、Graphviz 都属于这一类。核心优势是可版本控制、可 diff (e.g., git)、可自动化生成。适合文档和代码库中的图表。
2. 拖拽式绘图（Direct Manipulation）
遵循原则是“所见即所得”，可用鼠标拖放形状、连线、调整位置。draw.io 这类工具的代表。核心优势是视觉可控、精度高、形状库丰富。适合需要精确排版和正式交付的图表。一些可导出为可编辑的文本打码，如draw.io可以直接导出为XML。
3. 手绘风格白板（Sketch / Whiteboard）
Excalidraw是典型代表。手绘风格给人一种“还在讨论中“的临时感，降低了完美主义的心理门槛，让人更愿意快速动笔。适合头脑风暴和设计初稿。
| Mermaid | PlantUML | draw.io | Graphviz | Excalidraw | |
|---|---|---|---|---|---|
| 类型 | 文本→图表 | 文本→图表 | 拖拽式 GUI | 文本→图表（CLI） | 手绘风格白板 |
| 核心语法 | Markdown 风格 | DSL（类似 Java） | XML（拖拽生成） | DOT 语言 | JSON（拖拽生成） |
| Git 友好度 | ⭐⭐⭐⭐⭐ 极佳 | ⭐⭐⭐⭐⭐ 极佳 | ⭐⭐ XML 可 diff 但较乱 | ⭐⭐⭐⭐⭐ 极佳 | ⭐⭐⭐ 可 diff 但较乱 |
| GitHub 原生支持 | ✅ 原生渲染 | (.mmd文件可以) | ❌ | ❌ | ❌ |
| 适用图表类型 | 流程图、时序图、ER 图、类图、甘特图 | 全部 14 种 UML + 线框图、思维导图 | 几乎所有类型（UML、网络、云架构、BPMN） | 大型图结构、依赖图、网络拓扑 | 草图、线框图、架构讨论 |
| 适合场景 | README、ADR、技术文档 | 企业级 UML 文档、Java 项目 | 正式云架构图、对外交付文档 | 大规模自动生成图 | 头脑风暴、设计初稿、 |
| 开源协议 | MIT | GPL v3 | Apache 2.0 | EPL 1.0 | MIT |
| VS Code 插件 | Mermaid Preview | PlantUML | Draw.io Integration | Graphviz Interactive Preview | Excalidraw VS Code |
我们用同一个例子来简单比较不同的实现方式： 用户登录流程（输入账号密码 → 验证 → 成功/失败分支）。
1.Mermaid
demo.mmd
graph TD
A[用户输入账号密码] --> B{验证用户信息}
B -->|验证通过| C[登录成功，跳转首页]
B -->|验证失败| D[提示错误，返回登录页]
2. PlantUML
demo.puml
@startuml
start
:用户输入账号密码;
if (验证用户信息?) then (验证通过)
:登录成功，跳转首页;
stop
else (验证失败)
:提示错误，返回登录页;
stop
endif
@enduml
3. draw.io
demo.drawio
<mxfile host="Electron">
<diagram id="login-flow" name="登录流程">
<mxGraphModel dx="2264" dy="850" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
<root>
<mxCell id="0" />
<mxCell id="1" parent="0" />
<mxCell id="2" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" value="用户输入账号密码" vertex="1">
<mxGeometry height="50" width="160" x="100" y="100" as="geometry" />
</mxCell>
<mxCell id="3" parent="1" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" value="验证用户信息" vertex="1">
<mxGeometry height="80" width="120" x="120" y="200" as="geometry" />
</mxCell>
<mxCell id="4" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" value="登录成功，跳转首页" vertex="1">
<mxGeometry height="50" width="160" x="270" y="320" as="geometry" />
</mxCell>
<mxCell id="5" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" value="提示错误，返回登录页" vertex="1">
<mxGeometry height="50" width="160" x="-70" y="320" as="geometry" />
</mxCell>
<mxCell id="e1" edge="1" parent="1" source="2" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;" target="3">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e2" edge="1" parent="1" source="3" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;" target="4" value="验证通过">
<mxGeometry relative="1" as="geometry" />
</mxCell>
<mxCell id="e3" edge="1" parent="1" source="3" style="edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;" target="5" value="验证失败">
<mxGeometry relative="1" as="geometry" />
</mxCell>
</root>
</mxGraphModel>
</diagram>
</mxfile>
4. Graphviz (DOT语言)
demo.gv
digraph login {
node [
shape=box,
fixedsize=false,
style=filled,
fillcolor="#e8f4f8",
fontname="PingFang SC",
margin="0.35,0.1"
]
A [label="用户输入账号密码"]
B [label="验证用户信息"]
C [label="登录成功跳转首页"]
D [label="提示错误返回登录页"]
A -> B
B -> C [xlabel="验证通过"]
B -> D [label="验证失败"]
}
5. Excalidraw (JSON描述)
Excalidraw是拖拽工具，示意如下：
根据自己的需求和场景，以及时间来选择，实际过程用，也许用PowerPoint简单画一下很快很方便，也许需要选用多个工具的组合，比如：
Mermaid 写 README 小图 + draw.io 画正式架构图 + Excalidraw 做讨论草图每个工具都有其擅长的功能和场景。