アシアルブログ

皆さんは、ちょっとした図が必要になったとき、どうされてますか？
エクセルを使って作成したり、文字を駆使してテキストで作成したりでしょうか。ただ、エクセルだとちょっと大仰だったり、テキストだとちょっと面倒だったりといった場合もあるかと思います。
今回はそんな時に便利な 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であれば、

1. # yum install graphviz

Debianであれば、

1. # apt-get install graphviz

で簡単にインストールできます。

では、次のような画面遷移図を作成する場合を例に進めていきます。

1. +----------------------+
2. |   会員情報入力画面   |
3. +----------------------+
4.           ↑↓
5. +----------------------+
6. | 会員情報入力確認画面 |
7. +----------------------+
8.            ↓
9. +----------------------+
10. | 会員情報入力完了画面 |
11. +----------------------+

まずは下記の内容のファイルを作成します。

sample1.dot

1. digraph sample1 {
2.   form -> confirm;
3.   confirm -> finish;
4. }

では、図に変換してみましょう。コマンドラインから次のように実行します。

1. $ dot -Tpng -o sample1.png sample1.dot

ここではpng形式で出力していますが、jpegやsvgなど、他にもいろいろな形式で出力することができます。

さて、出力されたpngファイルを見てみると、次のような感じになると思います。



なお、sample1は下記のように書くこともできます。

1. digraph sample1 {
2.   form -> confirm -> finish;
3. }

次に、formとconfirmの矢印を両向きにします。

sample2.dot

1. digraph sample2 {
2.   form -> confirm [ dir = both ];
3.   confirm -> finish;
4. }

最後に、枠を四角にして、日本語の名称をつけます。日本語を使う場合は、日本語が表示できるフォントを指定し、dotファイルの文字コードをUTF-8で保存する必要があります。

sample3.dot

1. digraph sample3 {
2.   node [ fontname = "meiryo" shape = box ];
4.   form    [ label = "会員情報入力画面" ];
5.   confirm [ label = "会員情報入力確認画面" ];
6.   finish  [ label = "会員情報入力完了画面" ];
8.   form -> confirm [ dir = both ];
9.   confirm -> finish;
10. }

完成！！

蛇足ですが、ステートチャート図っぽくするとこんな感じでしょうか。

sample4.dot

1. digraph sample4 {
2.   graph [];
4.   node [
5.     fontname = "meiryo"
6.     shape = record
7.     style = rounded
8.   ];
10.   edge [ arrowhead = vee ];
12.   first [
13.     label = ""
14.     height = 0.2
15.     shape = circle
16.     style = filled
17.     fillcolor = black
18.   ];
20.   form    [ label = "{会員情報入力画面|}" ];
21.   confirm [ label = "{会員情報入力確認画面|}" ];
22.   finish  [ label = "{会員情報入力完了画面|}" ];
24.   last [
25.     label = ""
26.     height = 0.2
27.     shape = doublecircle
28.     style = filled
29.     fillcolor = black
30.   ];
32.   first -> form;
33.   form -> confirm [ arrowtail = vee ];
34.   confirm -> finish -> last;
35. }

さすがにこれはやりすぎですが、例えばsample3へ会員情報一覧画面を追加したいといった場合も、ちょっと修正するだけで簡単に追加できます。

sample5.dot

1. digraph sample5 {
2.   node [ fontname = "meiryo" shape = box ];
4.   list    [ label = "会員情報一覧画面" ];
5.   form    [ label = "会員情報入力画面" ];
6.   confirm [ label = "会員情報入力確認画面" ];
7.   finish  [ label = "会員情報入力完了画面" ];
9.   list -> form -> confirm [ dir = both ];
10.   confirm -> finish -> list;
11. }

どうでしょうか。ちょっと繋ぎ先を変更したいといった場合も簡単に修正できますし、もとはテキストファイルですので、Subversionなどのバージョン管理システムで変更箇所の履歴を追うことも簡単です。
Wikiとの親和性も高いと思われますので、各種Wiki用のプラグインもあります。

・MediaWiki用エクステンション Extension:GraphViz
・Trac用プラグイン Graphviz Plugin
・PukiWiki用プラグイン graphviz.inc.php

また、PHPからGraphvizを扱うことが出来る PEAR::Image_GraphViz というPEARパッケージもありますので、PHPを使って大量のデータを可視化することもできます。

使いこなせばとても強力なツールになると思いますので、皆さんもぜひ使ってみてはいかがでしょうか。