正在寫一個輔助工作的系統。需要把一堆有順序關係的資料轉換成圖表。
一開始先是找到 arborjs.org 的這個 showcase，我還蠻喜歡它的效果，看著 node 飄來飄去想要找一個比較舒服的位置，很有療癒的效果（謎之聲：WTF？）。但是這個 project 實在找不到文件，正在從 cdoe 裡頭試圖 farm 用法的時候， tkcn 大人給了一個關鍵字：「GraphViz」。
幹，原來有這種東西 [死]
GraphViz 弄了一個叫做 dot 的描述語言，來表達 node 跟 node 之間的關係、以及 node 的形式等等。至於圖會長得怎樣就看 rendering engine 怎麼噴（是說我也不是很 care 啦 XD）。既然知道了這個好東西，就開始找看看有沒有 JS 版的 rendering engine。
一開始找到的是 livizjs 這個 repo，也有 demo 頁面。不過一開始在 Chrome 上頭就炸了 exception 不能順利執行，倒是 Firefox 沒有這個問題。然後… 這也是一個沒有說明文件的東西… 而且一堆路徑、DOM id 還 hardcode 寫死。到這裡也都還撐得住。等到寫完資料轉成 dot 格式，然後用正式資料去 run 的時候就悲劇了。SVG 的大小不知道在那一行程式當中被限定住，node 數少的時候沒有問題，node 數一多就爆邊界、還不知道要怎麼調整。接連 combo 攻擊下我放棄了，重新 survey。
最後找到 viz.js 這個 repo，基本上也是顯示成 SVG，不過不像 livizjs 有提供運算過程、動畫之類的花俏功能。雖然依然沒有文件 [淚目]，不過用起來很簡單，只要把 dot 碼傳進物件中就好：
<script src="viz/viz.js"></script>
<script>
var svg = Viz("digraph { a -> b; }", "svg");
document.getElementById("foo").innerHTML = svg;
<script>
是說不知道還支援什麼輸出 type？
viz.js 唯一的怪哏就是它沒有提供 viz.js 檔。作者把 viz.js 當作 binary 檔案…. [炸]，估計是要自己跑 Makefile？不過也無所謂，直接連範例網頁，抓上頭的 viz.js 檔就可以正常執行。目前看起來都沒啥太大問題，只要你不考究畫出來的圖夠不夠好看…… [遠目]
Update v1：
要在 GWT 當中用也十分簡單，簡單到不想包一個 class 來處理 XD。首先，當然要在 host page 補上 viz.js 檔（同上），然後在 Java 中：
//JSNI 的 method
private native String genGraphViz(String dot) /*-{
return $wnd.Viz(dot, "svg");
}-*/;
//準備一個 HTML widget，這裡直接用 UiBinder 寫了
@UiField HTML svg;
//某個神奇的角落
svg.setHTML(genGraphViz(DOC_CODE));
你看，是不是很簡單呢？ [麥兜母調]
Update V2：
另外找到這個純正 GWT 的 GraphicViz project：Exagraph，不過我（還）很滿意現在的 viz.js，所以就沒有實際去試試看了……
以上簡單報告……
