使用Graphviz繪圖（一）

---

前言

平常開發或者編寫課程論文時，除了代碼文檔的編寫，其中一個很重要的部分就是須要繪製流程圖、示意圖

繪製流程圖有不少工具，通常常見的就有以下幾種：

• Word、PPT等辦公軟件
• Viso以及開源的Dia
• 畫圖（MSPaint）、PS、AI
• PicPicke
• 在線流程圖繪製（eg. www.processon.com）

對於這些軟件不管功能強大與否，適合與否，方便與否，都具備一個特色——所見即所得。你製做過程當中看到的就是最終獲得的結果。圖中形式、佈局在製做過程當中都由本身設置，其實還有一類繪圖系統的存在，其思想是——所思即所得。其中具備表明性的軟件就是——Graphviz。Graphviz是貝爾實驗室開發的一個開源的工具包，它使用一個特定的DSL（領域特定語言）——Dot做爲腳本語言，而後使用佈局引擎解析腳本並完成自動佈局。Graphviz的設計初衷是對圖進行自動佈局（有向圖、無向圖、），可使用dot腳原本定義圖形元素，選擇必定的算法進行佈局，經過對輸入腳本的解析，分析出其中的點，邊以及子圖，而後根據屬性進行繪製，繼而將結果以本身須要的格式導出來。

相對於其餘的繪圖軟件，Granphviz的特色有以下幾個方面：

• 代碼控制，所思即所得
• 佈局引擎自動佈局
• （導出格式很是豐富）

以下即爲Graphivz官網上的一些示例效果：

一個生成有向圖的小例子

咱們先來看一個小例子來看一下使用Graphviz繪製一張圖的完整流程（我使用的是Ubuntu 14.04 LTS，在其它系統上的使用應該差很少，下面再也不標註了）。

要使用Graphviz，先要在系統上安裝Graphviz。在Ubuntu上可使用命令sudo apt-get install graphviz進行安裝，在其餘系統安裝的方法能夠查看Graphviz官網進行查看。程序安裝好以後咱們就可已使用了。

Step 1：首先，須要編輯dot腳本

可使用你熟悉的純文本編輯器進行腳本編寫（必須是純文本編輯器，如vim、notepad++，像word這樣的富文本編輯器是不行的），只需設置編碼爲UTF-8。

編輯下面的腳本代碼，保存爲test.dot（先不用管其具體的意思，直接複製就好了）：

digraph G{
    main -> parse -> execute;
    main -> init;
    main -> cleanup;
    execute -> make_string;
    execute -> printf;
    init -> make_string;
    main -> printf;
    execute -> compare;
}

Step 2:隨後，選用佈局生成結果

使用以下命令生成結果：
dot -Tpng sample.dot -o sample.png

對於這條命令，dot表示用dot佈局，-Tpng表示生成png圖片格式，sample.dot是腳本文件名，-o sample.png表示生成輸出的圖片名稱。

改命令也能夠寫成dot -Kdot -Tpng sample.dot -o sample.png,其中-Kdot表示使用dot佈局。

Graphviz支持幾種佈局引擎：

• dot ： 默認佈局方式，主要用於有向圖
• neato ： 主要用於無向圖
• twopi ： 主要用於徑向佈局
• circo ： 圓環佈局
• fdp ： 主要用於無向圖
• sfdp ： 主要繪製較大的無向圖
• patchwork ： 主要用於樹哈希圖（tree map）

Graphviz支持的輸出圖片格式更是至關的多，經常使用的有如下幾種：

• pdf ：
• gif
• png ：
• jpeg ： 一種有損壓縮圖片格式
• bmp ： 一種位圖格式
• svg ： 矢量圖，通常用與Web，，能夠用瀏覽器打開
• ps ： 矢量線圖，多用於打印
  更多的輸出格式能夠瀏覽Graphviz輸出格式進行查看。

Step 3：查看生成結果

輸出的圖片，能夠用支持相應圖片格式的軟件打開。Graphviz軟件安裝好以後，有一個圖片瀏覽器能夠進行圖片預覽，只需輸入命令display sample.png便可（sample.png爲生成的圖片文件名），該示例預覽結果以下(你能夠在上一步使用不一樣的佈局方式，查看一下結果有什麼不一樣)：

正確完成三個步驟獲得結果說明Graphviz已經能夠在你的系統中正確安裝可使用了。後續我會介紹Graphviz Dot腳本的具體編寫方法。