2008年3月26日

テキストから図を作成 – Graphviz

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