アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

テキストから図を作成 - 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形式で出力していますが、jpegsvgなど、他にもいろいろな形式で出力することができます。

さて、出力された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を使って大量のデータを可視化することもできます。

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