編寫技術(shù)方案或梳理業(yè)務(wù)時，大家經(jīng)常會有繪制流程圖、類圖、時序圖等需求，然而 傳統(tǒng)的 Microsoft Visio 要付費，Process On 雖然可以免費體驗，但無法集成在 Markdown 文檔中，無法用 GitHub、Gitlab 協(xié)作。
今天就給大家介紹大廠也在用的幾款繪圖工具和他們的優(yōu)缺點。分別是
darw.io, Mermaid, graphviz, Excalidraw
Draw.io(現(xiàn)在的地址是 app.diagrams.net)
強大的在線繪圖工具（也有 App 可下載）
優(yōu)點
- 上手快：提供直觀和友好的用戶界面，支持豐富的自定義，使不同經(jīng)驗水平的用戶都能使用。
- 支持多種圖表：包括流程圖、UML 圖表、網(wǎng)絡(luò)圖等。
- 輕松導入： 支持圖片導入為圖表
- 實時協(xié)作： 提供協(xié)作功能，允許多個用戶同時在同一圖表上工作。
- **集成和導出： ** 可與各種平臺（Google Drive、Dropbox）集成，并可輕松導出為不同的文件格式，可直接嵌入在飛書文檔中。
- 離線使用：有離線 App，也可以自動保存在瀏覽器。
缺點
- 代碼協(xié)作困難：雖然支持導出 XML 格式，但是編輯難度很大。
- 集成功能有限：集成功能可能不如更專業(yè)的工具多。
適合的圖表
- 流程圖
- UML 圖表
- 網(wǎng)絡(luò)圖
- 組織結(jié)構(gòu)圖
樣例
-
編輯器
編輯器
Mermaid
當下開源界最流行的繪圖框架 https://mermaid.js.org/
GitHub、Gitlab、飛書等官方支持直接嵌入的繪圖框架，Sentry 等頂流項目均有它的身影。
優(yōu)勢：
- 語法簡單：簡單易讀，無編碼知識即可輕松創(chuàng)建圖表，且可實時預覽。
- 集成協(xié)作方便： 與 Markdown 無縫集成，方便在文檔、README 文件和其他基于文本的環(huán)境中編輯和協(xié)作。
- 支持多種圖表：包括流程圖、序列圖、甘特圖等。
- **開源免費： **有活躍的社區(qū)提供支持和開發(fā)。
缺點
- 自定義功能有限
適合的圖表
- 流程圖
- 時序圖
- 甘特圖
- 類圖
樣例
- Sentry 架構(gòu)圖(部分代碼)
Sentry 架構(gòu)圖
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 之前就風靡技術(shù)圈，現(xiàn)在仍有它獨特的使用場景
優(yōu)點：
- 自動布局：Graphviz 提供自動布局算法，簡化了創(chuàng)建美觀可視化的過程。
- 廣泛采用：擁有龐大的用戶社區(qū)并與各種平臺集成。
- DOT 語言：使用簡單的基于文本的 DOT 語言來描述圖形。
缺點：
- 學習曲線：理解和掌握 DOT 語言可能需要時間。
- 進階復雜：與具有圖形界面的工具相比，高級定制可能具有挑戰(zhàn)性。
適合的圖表：
- 有向圖
- 無向圖
- 流程圖
- 組織結(jié)構(gòu)圖
樣例
-
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/
優(yōu)點
- 實時協(xié)作：Excalidraw 擅長實時協(xié)作，允許多個用戶同時處理同一個圖表。
- 用戶友好：直觀且易于使用的界面，使具有各種圖表經(jīng)驗水平的用戶都可以使用它。
- 支持多種圖表：適用于各種圖表類型，包括流程圖、圖表、思維導圖等。
- 無需注冊：用戶無需創(chuàng)建帳戶即可開始創(chuàng)建圖表
缺點：
- 導出格式有限：和 Draw.io 相比選項較少
- 無法從圖片導入為可編輯文件
適合的圖表
- 流程圖
- 思維導圖
- 協(xié)作白板
樣例
-
編輯器
編輯器 -
ClickHouse 文檔中的存儲結(jié)構(gòu)
ClickHouse
