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からの出力も簡単そう。