ITエンジニア/デザイナ向けにオープンソースを毎日紹介

フローチャートなどの高度なグラフを描こうと思った時に使われるのが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で解釈することで次のように変換されます。

変換結果。
変換結果。

さらに他のサンプルを見てみましょう。

さらに複雑なグラフです。
さらに複雑なグラフです。

この手のグラフはER図やクラス図で使えそうですね。
この手のグラフはER図やクラス図で使えそうですね。

中間(?)のxdotファイルとして出力もできます。

xdot出力
xdot出力

Viz.jsが面白いと思えるのはCanvasタグへの出力ではなく、SVGであるということです。

出力内容。
出力内容。

SVGであればJavaScriptと絡めたり、一部のノードだけを色を変えたりすることも容易にできそうです。GraphvizとWebの親和性をさらに高めてくれそうなソフトウェアですね。

テキストベースであればノードの組み替えやフローの変更に伴うグラフの修正も容易に行えるようになるでしょう。グラフを利用する際にチェックしたいソフトウェアです。

Viz.jsはJavaScript製、Eclipse Public Licenseのオープンソース・ソフトウェアです。

Viz.js

mdaines/viz.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2