フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。

<script type="text/vnd.graphviz" id="cluster">
  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];
  }
</script>

Viz.jsで解釈することで次のように変換されます。 さらに他のサンプルを見てみましょう。 中間（？）のxdotファイルとして出力もできます。 Viz.jsが面白いと思えるのはCanvasタグへの出力ではなく、SVGであるということです。 SVGであればJavaScriptと絡めたり、一部のノードだけを色を変えたりすることも容易にできそうです。GraphvizとWebの親和性をさらに高めてくれそうなソフトウェアですね。 テキストベースであればノードの組み替えやフローの変更に伴うグラフの修正も容易に行えるようになるでしょう。グラフを利用する際にチェックしたいソフトウェアです。 Viz.jsはJavaScript製、Eclipse Public Licenseのオープンソース・ソフトウェアです。 Viz.js mdaines/viz.js