Graphviz的使用指南

一、簡述

Graphviz 是一款由 AT&T Research 和 Lucent Bell 實驗室開源的視覺化圖形工具，可以很方便的用來繪製結構化的圖形網路，支援多種格式輸出。Graphviz 輸入是一個用 dot 語言編寫的繪圖指令碼，通過對輸入指令碼的解析，分析出其中的點、邊及子圖，然後根據屬性進行繪製。Graphviz layout 以簡單的文字語言描述圖形，並以實用的格式製作圖表，如用於網頁的 images 和 SVG ；用於放入在其它檔案中或顯示在互動式圖形瀏覽器中的 PDF 和 Postscript 。

二、安裝

• 我是使用 語雀 中文件自帶的文字繪圖來使用Graphviz 的。

• 如果你想要了解 Graphviz 工具，你可也以進入 Graphviz 官網 下載。按照安裝嚮導安裝完以後，記得要把 Graphviz 工具的 bin 目錄加到環境變數 PATH 中。例如
  
  接下來測試下是否安裝成功，開啟 cmd 命令視窗，輸入命令dot -version，出現下圖則證明安裝成功

三、使用

接下來講的是在 語雀 中Graphviz的使用。
這是詳細的 Grapviz使用語法介紹

3.1、簡單使用

3.1.1 無向圖

graph {
    a -- b;
    b -- c;
    a -- c;
    d -- c;
    e -- c;
    e -- a;
  }

效果圖：

3.1.2 有向圖

digraph {
    a -> b;
    b -> c;
}

3.2、稍微複雜點的用法

3.2.1 帶標籤

digraph {
    player[label = "player"];
    game[label = "game"];
    player -> game[label = "play"]
}

效果圖：

3.2.2 不同顏色

digraph {
    player[label = "player", color = Blue, fontcolor = Red, fontsize = 24, shape = box];
    game[label = "game", color = Red, fontcolor = Blue, fontsize = 24, shape = ellipse];
    player -> game[label = "play"]
}

效果圖：

3.2.3 形狀

詳細可以見 官方文件

3.2.4 插入圖片

digraph {
    c[shape = none, image = "./pic.png"]
    a -> b -> c;
    c -> d;
}

效果圖：

3.2.5 統一節點和連線

digraph {
    node[shape = box]
    edge[style = "dashed"]
    c[shape = none]
    a -> b -> c;
    c -> d;
}

效果圖：

3.2.6 子檢視

digraph {
    label = visitNet
    rankdir = LR
    node[color = Red, fontsize = 24, shape = box]
    edge[color = Blue, style = "dashed"]
    user[style = "filled", color = "yellow", fillcolor = "chartreuse"]
    subgraph cluster_cd{
        label = "server and browser"
        bgcolor = yellow;
        browser -> server
    }
    user -> computer;
    computer -> browser;
}

效果圖：

3.2.7 結構檢視

digraph {
    node[shape = record];
    struct1[label = "<f0> left|<f1> mid&#92; dle|<f2> right"];
    struct2[label = "<f0> one|<f1> two"];
    struct3[label = "hello&#92;nworld | {b|{c|<here> d|e}|f}|g|h"];
    struct1:f1 -> struct2:f0;
    struct1:f2 -> struct3:here;
}

效果圖：

3.2.8 樹形結構

digraph tree {
  fontname = "PingFang-SC-Light"
  fontsize = 24
  node[shape = "plaintext"]

  1 -> 2;
  1 -> 3;
  2 -> 4;
  2 -> 5;
  3 -> 6;
  3 -> 7;
  4 -> 8;
  4 -> 9;
  5 -> 10;
  5 -> 11;
  6 -> 12;
  6 -> 13;
  7 -> 14;
  7 -> 15;
}

效果圖：

3.2.9 繼承

digraph UML {

    node[fontname = "Courier New", fontsize = 10, shape = record];
    edge[fontname = "Courier New", fontsize = 10, arrowhead = "empty"];

    Car[label = "{Car | v : float\nt : float | run() : float}"]

    subgraph clusterSome{
        bgcolor = "yellow";
        Bus[label = "{Bus | | carryPeople() : void}"];
        Bike[label = "{bike | | ride() : void}"];
    }
    Bus -> Car
    Bike -> Car
}

效果圖：

3.2.10 時序圖

digraph time {

    rankdir = "LR";
    node[shape = "point", width = 0, height = 0];
    edge[arrowhead = "none", style = "dashed"];

    {
        rank = "same"
        edge[style = "solided"];
        APP[shape = "plaintext"];
        APP -> step00 -> step01 -> step02 -> step03 -> step04 -> step05;
    }
    
    {
        rank="same";
        edge[style="solided"];
        SDK[shape="plaintext"];
        SDK -> step10 -> step11 -> step12 -> step13 -> step14 -> step15;
    }
    {
        rank="same";
        edge[style="solided"];
        AliPay[shape="plaintext"];
        AliPay -> step20 -> step21 -> step22 -> step23 -> step24 -> step25;
    }
    {
        rank="same";
        edge[style="solided"];
        Server[shape="plaintext"];
        Server -> step30 -> step31 -> step32 -> step33 -> step34 -> step35;
    }

    step00 -> step10 [label="sends order info", arrowhead="normal"];
    step11 -> step21 [label="open AliPay", arrowhead="normal"];
    step22 -> step12 [label="pay success", arrowhead="normal"];
    step13 -> step03 [label="pay success", arrowhead="normal"];
    step24 -> step34 [label="pay success", arrowhead="normal"];
}

效果圖：

四、參考

• GraphViz Pocket Reference
• Graphviz 官方文件

附：有不足、疏漏歡迎指出，我可以借鑑學習後補充。