2007-05-12

オープンソースのグラフ描画ツール Graphviz を試す

tool Graphviz

Graphviz はAT&Tが開発しているオープンソースのグラフ生成ツール。グラフはdotという独自言語で記述しする。psやgifなどさまざまなフォーマットで出力することができる。Doxygenの中ではクラス図の生成に使用されている。

dotファイル自体はシンプルなテキストなので、いろいろと応用できそう。学生時代だったら確率モデルの実験結果の可視化に使っただろう。

シンプルなdotファイルはこんな感じ：

digraph G {
	a -> b -> c;
	a -> c;
	a -> d;
}

これを、sample.dot のようなファイル名で保存して、

dot -Tpng sample.dot -o sample.png

とすると、こんなファイルが生成される。とても簡単。

もちろん、色・線の太さ・フォント・ノードの形状などの指定も可能。公式サイトのサイトGalleryを見ると、生成したグラフのサンプルととソースが公開されている。なお、dot言語の仕様についてはこのあたりが参考になる。

メモ：

先頭に node [shape = record, height = .1]; のような記述をすることで、デフォルトのスタイルを定義できる
ラベル中の改行は「\n」
「shape = record」のとき、ラベル内に「|」を記述すると領域を分割することができる-このとき、label= "{a | b | c}"のように{}で囲んだ場合、領域は縦に分割される
日本語を出力するためには、ファイルをutf-8で保存し、フォントを指定する必要がある

参考URL

2007-05-12

Graphvizでテキストから画面遷移図を自動生成してみる

tool

ありがちな画面遷移図をGraphvizで生成してみた。画面遷移図のもとネタは「Webプログラミング2.0」に掲載されていたid:hyukiさんによるサンプルアプリから拝借。

dotのソースはこんな感じ：

digraph G {
    node [shape = record, height = .1,fontname="MSGOTHIC.ttc", fontsize=10]; 
    edge [fontname="MSGOTHIC.ttc", fontsize=8];

    /* 画面情報の定義 */
    PageTop     [label = "{<id>P0000 |<title>トップページ |<file>Root.pm}"];
    PageCreate  [label = "{<id>P0001 |<title>作成画面  |<file>Create.pm}"];
    PageEdit    [label = "{<id>P0002 |<title>編集画面  |<file>Edit.pm}"];
    PageList    [label = "{<id>P0003 |<title>一覧画面  |<file>List.pm}"];
    PageSearch  [label = "{<id>P0004 |<title>検索画面  |<file>Search.pm}"];
    
    PageUpload  [label = "{<id>P0005 |<title>アップロード画面  |<file>Upload.pm}"];
    PageView    [label = "{<id>P0006 |<title>表示画面  |<file>View.pm}"];
    
    /* 画面遷移定義 */
    PageTop     -> PageTop      [label=" clearHistory"];
    
    PageTop     -> PageCreate   [label=" linkCreate"];
    PageTop     -> PageList     [label=" linkList"];
    PageTop     -> PageSearch   [label=" linkSearch"];
    PageTop     -> PageUpload   [label=" linkUpload"];
    PageUpload  -> PageUpload   [label=" doUpload\n(POST)"];
    
    PageCreate  -> PageView     [label=" doCreate\n(POST)"];
    PageList    -> PageView     [label=" selectWord"];
    PageSearch  -> PageView     [label=" selectWord"];
    PageSearch  -> PageSearch   [label=" doSearch\n(POST)"];
    
    PageView    -> PageEdit     [label=" linkEdit "];
    PageEdit    -> PageView     [label=" doEdit\n(POST)"];
}

で、出力結果はこんな感じ：

所感

特に装飾していないが、意外にきれい。
同じものをVisioで作成するよりは上のdotファイルを作成するほうが簡単かな。特にレイアウトに悩む必要がないところがよい。TeXと一緒。（一方でレイアウトの微調整ができないというのは欠点でもある。これもTeXと一緒）
Visioよりはdotの方が後続工程での再利用性は高い。後工程でありがちな以下のようなことも容易に実現できるだろう：
- 画面遷移に漏れがないか、画面一覧と照合したい
- 画面の名称が変更になったので、一括置換したい
- テストケース作成のためにすべてのリンクを抽出したい
あとは、コメントとして作成日や作成者、機能名などを決まった書式で記述しておけば、見栄えのよいヘッダをつけてHTMLを生成とかも簡単。
この程度のソースならExcelからの出力も簡単そう。