["graphviz", "images/sample1.png"] --------------------------------------------------------------------- digraph G { rankdir=LR; Graphviz->AsciiDoc->HTML} ---------------------------------------------------------------------
著者:飯坂 剛一 (いいさか ごういち)
Version: 1.1.4
Graphvizはダイヤグラムやネットワーク図、状態遷移図などのグラフを、 テキストで論理的な記述により表現でき、それを描画することができる ツールです。
Graphvizは非常に便利なツールですが、 グラフに特化しているためテキスト整形には向いていません。
AsciiDoc は「べた書き」に近い簡単な書式で記述したテキストを、 HTMLやDocBookを経由させてPDFなど各種フォーマットに整形する ことができるツールです。 (この資料もテキストをAsciiDocで整形しています)
AsciiDoc自体は作図機能は単独ではもっていませんが、 外部コマンドを呼び出して取り込むフィルタ機能があります。
このフィルタ機能を使って Graphviz をAsciiDoc から使うための フィルタを作成しました。
Graphvizフィルタは AsciiDoc-3.3.1 からマージされています。
Dag Wieers氏がリリースしているRPMをアップディトしたものを用意しましたので、 ダウンロードしインストールしてください。
システムのAsciiDocのバージョンが古いもので、 権限やその他の理由で更新できない場合は、 以下のファイルをダウンロードして、 $HOME/.asciidoc/filter へインストールします。
あと、当然のことながら graphviz がインストールされている必要があります。
Endpoint社がGraphviz-2.20のRPMを配布してくれています。
RedHat系のディストリビューション (CentOS, Unbreakable Linux, Scientific Linux, Lineox)では これをインストールするのが楽でしょう。
「百聞は一見にしかず」なので、 まずはごらんあれ。
論理的なつながりを表現するだけです。
["graphviz", "images/sample1.png"] --------------------------------------------------------------------- digraph G { rankdir=LR; Graphviz->AsciiDoc->HTML} ---------------------------------------------------------------------
これが、次のように描画されます。
次のURLにはとても参考になるGraphvizのサンプルがあります。
http://flickr.com/photos/kentbye/sets/72157601523153827/detail/
Graphvizでは図の大きさや色なども指定することができます。
["graphviz", "images/sample2.png"] --------------------------------------------------------------------- digraph automata_0 { size ="8.5, 11"; node [shape = circle]; 0 [ style = filled, color=lightgrey ]; 2 [ shape = doublecircle ]; 0 -> 2 [ label = "a " ]; 0 -> 1 [ label = "other " ]; 1 -> 2 [ label = "a " ]; 1 -> 1 [ label = "other " ]; 2 -> 2 [ label = "a " ]; 2 -> 1 [ label = "other " ]; "Machine: a" [ shape = plaintext ]; } ---------------------------------------------------------------------
これは次の状態遷移図となります。
基本的には状態遷移図と同じですが、 データツリーの表現することも簡単です。
["graphviz", "images/sample3.png"] --------------------------------------------------------------------- digraph g { node [shape = record,height=.1]; node0[label = " | G| "]; node1[label = " | E| "]; node2[label = " | B| "]; node3[label = " | F| "]; node4[label = " | R| "]; node5[label = " | H| "]; node6[label = " | Y| "]; node7[label = " | A| "]; node8[label = " | C| "]; "node0":f2 -> "node4":f1; "node0":f0 -> "node1":f1; "node1":f0 -> "node2":f1; "node1":f2 -> "node3":f1; "node2":f2 -> "node8":f1; "node2":f0 -> "node7":f1; "node4":f2 -> "node6":f1; "node4":f0 -> "node5":f1; } ---------------------------------------------------------------------
["graphviz", "images/sample4.png"] --------------------------------------------------------------------- digraph G { node [ fontname="Helvetica-Bold", shape="circle", width="0.3", style ="setlinewidth(2),filled" color="black", fillcolor = "pink", label=""]; edge [ fontname="Helvetica-Bold", fontsize="16", style="bold" ]; graph [ rankdir="LR", ranksep="0.4"]; { rank = same; B; D;} A -> B [ label = "3", color="red"]; B -> C [ label = "2"]; B -> E [ label = "1", color="red"]; E -> C [ label = "3", color="red"]; A -> D [ label = "2"]; D -> C [ label = "3"]; } ---------------------------------------------------------------------
日本語も大丈夫です。
フォントの指示でTrueTypeの日本語フォントを指示するために、 フォントファイルを記述します。
Graphvizの古いバージョンではハイフォン(-)が フォント名にあると失敗するとの報告もあるようです。
["graphviz", "images/sample5.png"] --------------------------------------------------------------------- digraph G { fontname="VL-Gothic-Regular"; rankdir=LR; 松->竹->梅 } ---------------------------------------------------------------------
これが、次のように描画されます。