编写技术方案或梳理业务时，大家经常会有绘制流程图、类图、时序图等需求，然而 传统的 Microsoft Visio 要付费，Process On 虽然可以免费体验，但无法集成在 Markdown 文档中，无法用 GitHub、Gitlab 协作。
今天就给大家介绍大厂也在用的几款绘图工具和他们的优缺点。分别是
darw.io, Mermaid, graphviz, Excalidraw
Draw.io(现在的地址是 app.diagrams.net)
强大的在线绘图工具（也有 App 可下载）
优点
- 上手快：提供直观和友好的用户界面，支持丰富的自定义，使不同经验水平的用户都能使用。
- 支持多种图表：包括流程图、UML 图表、网络图等。
- 轻松导入： 支持图片导入为图表
- 实时协作： 提供协作功能，允许多个用户同时在同一图表上工作。
- **集成和导出： ** 可与各种平台（Google Drive、Dropbox）集成，并可轻松导出为不同的文件格式，可直接嵌入在飞书文档中。
- 离线使用：有离线 App，也可以自动保存在浏览器。
缺点
- 代码协作困难：虽然支持导出 XML 格式，但是编辑难度很大。
- 集成功能有限：集成功能可能不如更专业的工具多。
适合的图表
- 流程图
- UML 图表
- 网络图
- 组织结构图
样例
-
编辑器
编辑器
Mermaid
当下开源界最流行的绘图框架 https://mermaid.js.org/
GitHub、Gitlab、飞书等官方支持直接嵌入的绘图框架，Sentry 等顶流项目均有它的身影。
优势：
- 语法简单：简单易读，无编码知识即可轻松创建图表，且可实时预览。
- 集成协作方便： 与 Markdown 无缝集成，方便在文档、README 文件和其他基于文本的环境中编辑和协作。
- 支持多种图表：包括流程图、序列图、甘特图等。
- **开源免费： **有活跃的社区提供支持和开发。
缺点
- 自定义功能有限
适合的图表
- 流程图
- 时序图
- 甘特图
- 类图
样例
- Sentry 架构图(部分代码)
Sentry 架构图
graph TD
app[Your Application] --> |SDK| lb{{Load Balancer}}
lb --> |"sentry.example.com/api/\d+/store/"| relay
lb --> |"sentry.example.com"| sentry_web["Sentry (web)"]
symbolicator --> sentry_web
relay --> kafka
relay --> redis
sentry_web --> snuba
sentry_web --> memcached
sentry_web --> postgres
sentry_web --> redis
snuba --> kafka
snuba --> redis
snuba --> clickhouse
...
-
实时预览编辑器
编辑器
Graphviz
文本绘图鼻祖 https://graphviz.org
早在 mermaid 之前就风靡技术圈，现在仍有它独特的使用场景
优点：
- 自动布局：Graphviz 提供自动布局算法，简化了创建美观可视化的过程。
- 广泛采用：拥有庞大的用户社区并与各种平台集成。
- DOT 语言：使用简单的基于文本的 DOT 语言来描述图形。
缺点：
- 学习曲线：理解和掌握 DOT 语言可能需要时间。
- 进阶复杂：与具有图形界面的工具相比，高级定制可能具有挑战性。
适合的图表：
- 有向图
- 无向图
- 流程图
- 组织结构图
样例
-
Go 包依赖（仅展示部分代码）
image.png
digraph regexp {
fontname="Helvetica,Arial,sans-serif"
node [fontname="Helvetica,Arial,sans-serif"]
edge [fontname="Helvetica,Arial,sans-serif"]
n0 [label="regexp", URL="https://godoc.org/regexp", tooltip="Package regexp implements regular expression search."];
n1 [label="bytes", URL="https://godoc.org/bytes", tooltip="Package bytes implements functions for the manipulation of byte slices."];
n2 [label="io", URL="https://godoc.org/io", tooltip="Package io provides basic interfaces to I/O primitives."];
n3 [label="regexp/syntax", URL="https://godoc.org/regexp/syntax", tooltip="Package syntax parses regular expressions into parse trees and compiles parse trees into programs."];
n4 [label="sort", URL="https://godoc.org/sort", tooltip="Package sort provides primitives for sorting slices and user-defined collections."];
n5 [label="strconv", URL="https://godoc.org/strconv", tooltip="Package strconv implements conversions to and from string representations of basic data types."];
n6 [label="strings", URL="https://godoc.org/strings", tooltip="Package strings implements simple functions to manipulate UTF-8 encoded strings."];
n7 [label="sync", URL="https://godoc.org/sync", tooltip="Package sync provides basic synchronization primitives such as mutual exclusion locks."];
....
n0 -> n1;
n0 -> n2;
n0 -> n3;
n0 -> n4;
n0 -> n5;
n0 -> n6;
....
}
Excalidraw
手绘风格的简单绘图工具。https://excalidraw.com/
优点
- 实时协作：Excalidraw 擅长实时协作，允许多个用户同时处理同一个图表。
- 用户友好：直观且易于使用的界面，使具有各种图表经验水平的用户都可以使用它。
- 支持多种图表：适用于各种图表类型，包括流程图、图表、思维导图等。
- 无需注册：用户无需创建帐户即可开始创建图表
缺点：
- 导出格式有限：和 Draw.io 相比选项较少
- 无法从图片导入为可编辑文件
适合的图表
- 流程图
- 思维导图
- 协作白板
样例
-
编辑器
编辑器 -
ClickHouse 文档中的存储结构
ClickHouse
