皆さんは、ちょっとした図が必要になったとき、どうされてますか？
エクセルを使って作成したり、文字を駆使してテキストで作成したりでしょうか。ただ、エクセルだとちょっと大仰だったり、テキストだとちょっと面倒だったりといった場合もあるかと思います。
今回はそんな時に便利な Graphviz をご紹介します。
Graphviz - Graph Visualization Softwareは、AT&T研究所が開発したフリーソフトウェアで、DOT言語というグラフ記述言語で書かれたテキストファイルから図を出力することができます。
それでは、早速インストールして使ってみましょう。
Windowsの場合は、
http://www.graphviz.org/Download_windows.php
からダウンロードしてインストールします。
ただ、私の環境ではmsi版は動作しませんでしたので、exe版のほうをインストールしました。
Linuxの場合は、
http://www.graphviz.org/Download_linux.php
からダウンロードしてインストールします。
なお、お使いのディストリビューションがFedoraであれば、
# yum install graphviz
Debianであれば、
# apt-get install graphviz
で簡単にインストールできます。
では、次のような画面遷移図を作成する場合を例に進めていきます。
+----------------------+
| 会員情報入力画面 |
+----------------------+
↑↓
+----------------------+
| 会員情報入力確認画面 |
+----------------------+
↓
+----------------------+
| 会員情報入力完了画面 |
+----------------------+
まずは下記の内容のファイルを作成します。
sample1.dot
digraph sample1 {
form -> confirm;
confirm -> finish;
}
では、図に変換してみましょう。コマンドラインから次のように実行します。
$ dot -Tpng -o sample1.png sample1.dot
ここではpng形式で出力していますが、jpegやsvgなど、他にもいろいろな形式で出力することができます。
さて、出力されたpngファイルを見てみると、次のような感じになると思います。
なお、sample1は下記のように書くこともできます。
digraph sample1 {
form -> confirm -> finish;
}
次に、formとconfirmの矢印を両向きにします。
sample2.dot
digraph sample2 {
form -> confirm [ dir = both ];
confirm -> finish;
}
最後に、枠を四角にして、日本語の名称をつけます。日本語を使う場合は、日本語が表示できるフォントを指定し、dotファイルの文字コードをUTF-8で保存する必要があります。
sample3.dot
digraph sample3 {
node [ fontname = "meiryo" shape = box ];
form [ label = "会員情報入力画面" ];
confirm [ label = "会員情報入力確認画面" ];
finish [ label = "会員情報入力完了画面" ];
form -> confirm [ dir = both ];
confirm -> finish;
}
完成！！
蛇足ですが、ステートチャート図っぽくするとこんな感じでしょうか。
sample4.dot
digraph sample4 {
graph [];
node [
fontname = "meiryo"
shape = record
style = rounded
];
edge [ arrowhead = vee ];
first [
label = ""
height = 0.2
shape = circle
style = filled
fillcolor = black
];
form [ label = "{会員情報入力画面|}" ];
confirm [ label = "{会員情報入力確認画面|}" ];
finish [ label = "{会員情報入力完了画面|}" ];
last [
label = ""
height = 0.2
shape = doublecircle
style = filled
fillcolor = black
];
first -> form;
form -> confirm [ arrowtail = vee ];
confirm -> finish -> last;
}
さすがにこれはやりすぎですが、例えばsample3へ会員情報一覧画面を追加したいといった場合も、ちょっと修正するだけで簡単に追加できます。
sample5.dot
digraph sample5 {
node [ fontname = "meiryo" shape = box ];
list [ label = "会員情報一覧画面" ];
form [ label = "会員情報入力画面" ];
confirm [ label = "会員情報入力確認画面" ];
finish [ label = "会員情報入力完了画面" ];
list -> form -> confirm [ dir = both ];
confirm -> finish -> list;
}
どうでしょうか。ちょっと繋ぎ先を変更したいといった場合も簡単に修正できますし、もとはテキストファイルですので、Subversionなどのバージョン管理システムで変更箇所の履歴を追うことも簡単です。
Wikiとの親和性も高いと思われますので、各種Wiki用のプラグインもあります。
・MediaWiki用エクステンション Extension:GraphViz
・Trac用プラグイン Graphviz Plugin
・PukiWiki用プラグイン graphviz.inc.php
また、PHPからGraphvizを扱うことが出来る PEAR::Image_GraphViz というPEARパッケージもありますので、PHPを使って大量のデータを可視化することもできます。
使いこなせばとても強力なツールになると思いますので、皆さんもぜひ使ってみてはいかがでしょうか。