GraphvizのDOT言語をJavaScriptで実装「canviz」
canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。
フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出してくれます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.19.25.1363861471.png)
例。かなり複雑な関係性を表示しています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.19.39.1363861475.png)
別なグラフ。こちらも関係性が複雑です。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.19.46.1363861478.png)
レイアウトを変更するとグラフも全く別物になります。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.19.52.1363861482.png)
表示の大きさは自由に変えられます。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.19.57.1363861485.png)
こんな図も。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.20.01.1363861488.png)
複数線がつながっている、そんな表示も実現します。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.20.05.1363861492.png)
色付きの枠。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.20.19.1363861495.png)
グルーピング。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.20.23.1363861498.png)
グルーピングでさらに色付き。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.20.40.1363861502.png)
ノード自体が色付き。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.20.58.1363861506.png)
14の頂点で相互につながっています。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-21 12.21.02.1363861509.png)
同じグラフもレイアウトを変えるとこんな感じに。
Graphvizを使う場合は主に個人用途、もしくは変換後の画像を資料に貼付けるというのが一般的でした。そのため再利用性はあまり高くなかったと言えます。canvizはその場で即座に反映されるのでレンダリングエンジンを変えたり、DOTの内容を変えてその結果を確認するのも簡単にできそうです。
canvizはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
ローカルアプリケーションからWebアプリケーションへの流れは続いていますが、大抵は大型なアプリケーションにおいて行われるのが一般的です。それに対してcanvizはGraphvizというそれほど大きくはないコマンドをオンライン化させる面白い試みと言えます。
同様の試みとしてはtailをWeb化するのもあります。他にも普段使っているコマンドでWeb化すると便利と思われる機能はたくさんあるのではないでしょうか。その出力結果をつなげられるようになれば、インターネット時代のパイプにさえなるのではないでしょうか。