馬云曾經(jīng)說過：『一圖勝千言』
對于大多數(shù)程序員來說，都不想在樣式方面花太多的時間（至少不是在書寫內(nèi)容的同時去關(guān)心樣式）邑时，這大概就是 markdown 流行的原因之一吧。
同樣的汛闸，在作圖時核无，如果可以不去關(guān)心樣式而把精力集中在圖的內(nèi)容上，那想必是極好的款违。
而繪圖工具 graphviz 和其使用的 dot 語言就是這樣一套『所想即所得』的繪圖工具唐瀑。
dot 語言就是一套 DSL，也就是說插爹，可以把圖片用代碼的形式表現(xiàn)出來哄辣，這樣易于修改请梢，也可以做版本控制。
廢話不多說力穗，下面進入實戰(zhàn)溢陪，首先是安裝，Mac 下：
brew install graphviz
首先看一個例子睛廊，這是一副 tmux 的架構(gòu)圖（出自『tmux 快速入門』）
其對應的 dot 文件如下：
digraph tmux{
node[shape=record]
subgraph cluster_terminal{
label ="terminal";
subgraph cluster_session2{
label = "session2";
subgraph cluster_window3 {
label="window3";
pane6 [label="ls /tmp"];
}
subgraph cluster_window4 {
label="window4";
pane7 [label="pane1"]
pane8 [label="pane2"]
}
}
subgraph cluster_session1{
label = "session1";
subgraph cluster_window1 {
label="window1";
pane2 [label="ls /tmp"];
}
subgraph cluster_window2 {
label="window2";
pane3 [label="pane1"]
pane4 [label="pane2"]
}
}
}
}
這張圖的特點就是其中的內(nèi)容都是簡單的包含關(guān)系形真，所以代碼中使用了大量的 subgraph。
再來看一個例子：
這是一個典型的流程圖超全，觀察它的結(jié)構(gòu)咆霜，可以發(fā)現(xiàn)：
- 有兩個子圖（客戶端和服務端）
- 有一處分叉點
- 都是單向關(guān)聯(lián)
根據(jù)『所想即所得』的原則，我們只要先把要表達的東西寫下來：
第一步嘶朱，創(chuàng)建好 nodes：
digraph run{
edge [style="dashed"];
a [label="開啟App"];
b [label="是否登錄"];
c [label="去登錄"];
d [label="開始跑步"];
e [label="相關(guān)跑步數(shù)據(jù)計算"];
f [label="跑步完成"];
g [label="數(shù)據(jù)儲存"];
h [label="分配卡牌"];
i [label="抽取卡牌"];
j [label="完成抽取"];
k [label="儲存抽取卡牌信息"];
}
第二步蛾坯，繪制子圖（客戶端和服務端）
subgraph cluster_client{
label="客戶端";
bgcolor="mintcream";
a;
b;
c;
d;
e;
f;
i;
j;
}
subgraph cluster_server{
label="服務端";
bgcolor="mintcream";
g;
h;
k;
}
第三步，關(guān)聯(lián)關(guān)系
a -> b;
b -> c;
b -> d;
c -> d;
d -> e;
e -> f;
f -> g;
g -> h;
h -> i;
i -> j;
j -> k;
第四步疏遏，添加關(guān)系描述
a -> b;
b -> c [label="否"];
b -> d [label="是"];
c -> d;
d -> e;
e -> f;
f -> g [label="發(fā)送數(shù)據(jù)"];
g -> h;
h -> i [label="發(fā)送數(shù)據(jù)"];
i -> j;
j -> k [label="發(fā)送數(shù)據(jù)"];
最終代碼如下：
digraph run{
edge [style="dashed"];
a [label="開啟App"];
b [label="是否登錄"];
c [label="去登錄"];
d [label="開始跑步"];
e [label="相關(guān)跑步數(shù)據(jù)計算"];
f [label="跑步完成"];
g [label="數(shù)據(jù)儲存"];
h [label="分配卡牌"];
i [label="抽取卡牌"];
j [label="完成抽取"];
k [label="儲存抽取卡牌信息"];
subgraph cluster_client{
label="客戶端";
bgcolor="mintcream";
a;
b;
c;
d;
e;
f;
i;
j;
}
subgraph cluster_server{
label="服務端";
bgcolor="mintcream";
g;
h;
k;
}
a -> b;
b -> c [label="否"];
b -> d [label="是"];
c -> d;
d -> e;
e -> f;
f -> g [label="發(fā)送數(shù)據(jù)"];
g -> h;
h -> i [label="發(fā)送數(shù)據(jù)"];
i -> j;
j -> k [label="發(fā)送數(shù)據(jù)"];
}
最后使用 dot 命令生成需要的格式即可：
dot -T png source.dot -o dist.png
可以看到布局并不如原圖那樣完美脉课，因為 graphviz 本來就是為了讓用戶可以把關(guān)注點放在 node 之間的關(guān)系上而并非布局上，因此做了自動布局财异，這在關(guān)系比較復雜的情況下會非常好用倘零。
使用 dot 語言繪圖可以有效提升生產(chǎn)力并且降低維度成本，并且主流編輯器都有相應插件戳寸，非常推薦程序員和產(chǎn)品經(jīng)理使用呈驶。
