馬云曾經(jīng)說過：『一圖勝千言』

graphviz

對于大多數(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 快速入門』）

tmux 架構(gòu)

其對應(yīng)的 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。

再來看一個例子：

run-example

這是一個典型的流程圖，觀察它的結(jié)構(gòu)，可以發(fā)現(xiàn)：

1. 有兩個子圖（客戶端和服務(wù)端）
2. 有一處分叉點
3. 都是單向關(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="儲存抽取卡牌信息"];
}

第二步，繪制子圖（客戶端和服務(wù)端）

subgraph cluster_client{
      label="客戶端";
      bgcolor="mintcream";
      a;
      b;
      c;
      d;
      e;
      f;
      i;
      j;
    }
    subgraph cluster_server{
      label="服務(wù)端";
      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="服務(wù)端";
      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

dist.png

可以看到布局并不如原圖那樣完美，因為 graphviz 本來就是為了讓用戶可以把關(guān)注點放在 node 之間的關(guān)系上而并非布局上，因此做了自動布局，這在關(guān)系比較復(fù)雜的情況下會非常好用。

使用 dot 語言繪圖可以有效提升生產(chǎn)力并且降低維度成本，并且主流編輯器都有相應(yīng)插件，非常推薦程序員和產(chǎn)品經(jīng)理使用。