Graphviz 周りの用語

色々な単語が出てくるので、整理しておく。

用語 内容
diagrammeR R におけるグラフ(Graphviz)描画のためのパッケージ
grViz diagrammeR のグラフ描画用の関数。Graphvizにはない @@ 等の機能が追加されている。
Graphviz グラフ描画の本家本元。
dot グラフ記述用の言語。dot 自体は有向グラフ描画用。他に無向グラフ用に NEATO などもある。
viz.js JavaScrit 用のライブラリ。
full.render.js JavaScrit 用のライブラリ。V 2.0 より前はviz.jsだけをインクルードするだけだったが、V 2.0 からはこのライブラリもインクルードしなければならない。

Viz.js – HTMLでGraphviz

前置きはさておき、ここでは「Viz.js」の使用方法を例を持って示していきます。

【js ライブラリの取得】

GitHubから、

  • full.render.js
  • viz.js

をダウンロードして、好みの場所に配置します。

【実行サンプル】

viz-examplesscript-tagをクリックしてディレクトリを開き、その中のno-worker.htmlを開らいてソースコードをコピーします。それを、テキストエディタに貼付け、保存します。

ここでは、「01-original.html」として保存しました。
これを実行すれば、次の様なグラフが表示されるハズです。

【改善 その1】

グラフ記述部分(以下「Dot」)「digraph { a -> b; }」を外出しにします。

更に、(1) を次のように書き換えて見ます。
残念ながら「SyntaxError: ” string literal contains an unescaped line break」
Dot内に「改行」が使えない模様。

【改善 その2】

複雑な Dot を記述する時に、改行やタブが使えないようでは話になりません。
そこで、新たな改善策。

script タグ内に Dot を単独で定義するようにしました。
それを HTML ソースとして入力すれば、改行や余分なスペースが無視されることを利用しています。
これで、Dot 内でも改行が使用できるようになりました。

【改善 その3】

ここまで来ると、Dot を外部ファイルにしたくなるのは当然の成り行き。
ついでに、jQuery と Bootstrap も導入し DOM の操作や style の改善をしておきましょう。

【サンプル集】

  1. Cluster
  2. Data Struct
  3. Crazy
  4. multi_layout

Graphvizのテスト

Graphvizがwordpressでも使えるらしいのでテストしてみます。プラグインには「TFO Graphviz」を使用します。

おお、素晴らしい!

TFO Graphviz 使用方法

ショートコードの一般形式は次の通り。

のリストは下表の通り。

options 説明
height=”<image_height>” イメージタグに height 属性を設定する。SVG に有効
href=”self|<URL>” 画像をクリックした時に表示する URL を指定する。デフォルト:href=””、self:同じウィンドウ、<URL:指定のURL
id=”<id>” 生成された画像をイメージマップにリンクするために使用する識別子を指定する。これを指定しない場合は、”tfo_graphviz_N”(N:1からの連番)が自動生成される。
imap=”yes|no”
imap=”yes|no”
lang=”<dot|neato|twopi|circo|fdp>” 使用する Graphviz インタープリタを指定する。デフォルトは dot
output=”<png|gif|jpg|svg>” 生成する画像フォーマットを指定する。デフォルトは png
simple=”yes|no” コードの周りに非常に基本的な DOT ラッパーが適用される。

このコードは、次のコードが生成される。

title=”<title>” 画像のタイトル。画像を参照するための alt および title 属性で使用する
width=”<image_width>” イメージタグに width 属性を設定する。