介紹一下 graphviz/dot 的一些學習資料

摘要： 最近一直在用 dot 來畫圖，如果你不知道 dot 這個東西，那麼 graphviz 應該聽說過吧，graphviz 是 dot 語言的一個實現。dot 是一個繪圖語言，可以表達有向圖和無向圖，用 dot 語言描述的圖可以 render 成 png、jpeg、pdf、svg 等等各種格式，非常...

最近一直在用 dot 來畫圖，如果你不知道 dot 這個東西，那麼 graphviz 應該聽說過吧，graphviz 是 dot 語言的一個實現。dot 是一個繪圖語言，可以表達有向圖和無向圖，用 dot 語言描述的圖可以 render 成 png、jpeg、pdf、svg 等等各種格式，非常方便。

比如下面這個 dot 檔案：

digraph G {
 
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
 
subgraph cluster_1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
 
start [shape=Mdiamond];
end [shape=Msquare];
}

可以渲染成下面這個檔案:

Mac 的 graphviz 提供了命令列的工具可以渲染 dot 檔案。可以通過 brew 來安裝： brew install graphviz 。

但是每次編輯然後切換到命令列渲染，再用 Preview 開啟瀏覽，非常繁瑣，這種檔案修修改改是比較頻繁的，預覽體驗很不好，比較合適的方法是用 jupyter 這樣的 notebook 來實時渲染。Graphviz 目前沒有可以直接在 jupyter 裡面跑的 kernel，不過 ofollow,noindex" target="_blank">Python 的封裝 是支援在 jupyter 看到結果的。這個缺點是你要寫 Python 語言，呼叫 Python 的函式和方法，show 函式等等。不能寫原生的 dot 語言。

我在這上面包了一層，呼叫這個包可以直接在 jupyter 的 cell 裡面寫 dot 了，專案的地址如下：

https://github.com/laixintao/jupyter-dot-kernel

這個 kernel 其實挺好寫的，去看了一下文件，基本複用一下 IPython 的 kernel 就可以了。但是傳送二進位制資料回前端的 Response 結構很妖嬈，文件也看不怎麼明白，網上的資料也比較少…… 算是一個小坑吧，在這上面花了不少時間。最後是一拍腦袋，去找了其他 kernel 的程式碼看了一下才弄清楚的。貼在下面讓大家感受下……

            stream_content = {
                "metadata": {"image/png": {"width": width, "height": height}},
                "data": {"image/png": data},
            }
 
            self.send_response(self.iopub_socket, "display_data", stream_content)

然後我還在 jupyter 裡面寫了一個教程（WIP），目前寫了基礎的教程， 看完之後基本都知道怎麼樣了。後面打算繼續完善一些一些更高階的用法。教程的地址如下：

https://github.com/laixintao/learn-dot

我參考的主要是一些手冊和文件，其實目前找到的也不是很多。那個 dot 文件竟然沒有一個目錄，有必要整理一下。

1. dot 文件：
   1. The DOT Language
   2. Command-line Usage
   3. Output Formats
   4. Graph Attributes  這個文件比較關鍵，列舉了所有可以用的屬性
   5. Node Shapes
   6. Colors
   7. Arrow Shapes
2. graphviz manual: man dot
3. dot guide 官方 PDF