Doxygenに出会ってから、何となくGraphviz推しの私です。
そんなに使ってる訳じゃないんですけどね。(どっちも)

今日はGraphvizのdotを使って画面遷移図を書こう、というお話です。
出来上がるのは画像ファイルなので、エクセル方眼用紙にキッチリ描かれてなきゃ検収出さないぞ!というようなお客様相手のプロジェクトにはマッチしません。あしからず。

画面遷移図の構成要素

画面遷移図を書く上での最低限の構成要素は、

ですかね。

たとえば、
画面ID=S001、画面名=ログイン画面
画面ID=S002、画面名=ホーム画面
という二つの画面があり、S001にてログインするとS002に遷移すると仮定とすると、

こんな感じに書けば、どう遷移するのかが伝わると思います。

dot言語

http://homepage3.nifty.com/kaku-chan/graphviz/index.html

このサイトが日本語で丁寧に解説しているのでわかりやすかったです。

てっとり早く上記例をdotで記述すると、こうなります。

digraph G{
    graph [fontname="meiryo", fontsize=8, ranksep = 1.5];
    node [shape=record, style="rounded", fontname="meiryo", fontsize=10];
    edge [fontname="meiryo", fontsize=8, labelfloat = true];

    s001 [label="{<id>S001|<title>ログイン画面}"];
    s002 [label="{<id>S002|<title>ホーム画面}"];

    s001 -> s002 [label="ログイン"];
}

有向グラフ(digraph)として作成し、s001、s002というノードを定義します。

そしてそれらの関係性を->(エッジ)で繋ぐわけですね。

dot -Tpng test.dot -o test.png

test.dotファイルとして(UTF-8で)保存し、dotコマンドでpng画像を生成すると、こんな画像になります。

とってもカンタンですね!!