遷移図生成ツール blockdiag の紹介

小宮 健 (@tk0miya)2010-12-08

自己紹介小宮 健 (@tk0miya)株式会社タイムインターメディア所属普段は Web アプリ開発 (PHP, Ruby など ) して

ますPython 歴は約 1 年ぐらい

発表するのは初めて！Sphinx-users とか Python mini hack-a-thon

に出没

遷移図作ってますか ?プロジェクトで画面遷移図を作ることになった

弊社では Excel 、 Visio で作ることが多い画面を箱、遷移を矢印で表現するタイプのもの

実際にやってみると大変！

苦労 その１：追加 / 削除が大変ここに 1 画面追加

苦労 その１：追加 / 削除が大変１ . スキマを作る

苦労 その１：追加 / 削除が大変２ . 図形を置く

苦労 その２：ずれる

苦労 その２：ずれる

苦労 その２：ずれる

苦労 その２：ずれる

苦労 その 3 ：その他Excel のバージョンが合わなくて図が壊れた図の微調整ばかりで全然進まないだんだん Excel ( や Visio) が嫌いになってきたSphinx を使ってみたいのに組み合わせづらい

一度画像で保存する必要がある

こんなのメンテナンスしたくない！

というわけでツールを作ってみました

blockdiag ( ぶろっくだいあぐらむ )遷移図生成ツール定義ファイル ( テキスト ) から画像 (PNG, SVG) を

生成Graphviz っぽい文法テキストなのでバージョン管理しやすい

自動的にレイアウトしてくれる追加 / 削除が簡単ずれたりしない

日本語 (UTF-8) 対応easy_install blockdiag でインストール可能

blockdiag の使い方1. 遷移図の定義を作ります

diagram { A -> B -> C; B -> D;}

2. blockdiag コマンドで画像を生成 % blockdiag –o sample.png input.diag

blockdiag ：細かい装飾 (1)各要素ごとに色、画像、矢印の向きなどが設定でき

る背景色、線の色、実線 / 点線背景画像矢印の向き

blockdiag ：細かい装飾 (2)そのほかの装飾

ノードのグルーピング遷移の説明文 ( 短め )

blockdiag ：ちょっと複雑な例diagram { toppage -> add -> add_confirm -> toppage; toppage -> edit -> edit_confirm -> toppage; toppage -> delete_confirm -> toppage;

toppage [label = "○○ マスタ管理画面 \n トップページ "]; add [label = "○○ 追加画面 "]; add_confirm [label = "○○ 追加画面 \n( 確認 )"]; edit [label = "○○ 編集画面 "]; edit_confirm [label = "○○ 編集画面 \n( 確認 )"]; delete_confirm [label = "○○ 削除画面 \n( 確認 )"];}

blockdiag ：ちょっと複雑な例

デモhttp://blockdiag.appspot.com/

blockdiag を使おうblockdiag コマンド

% blockdiag –o output.png input.diag% blockdiag –T svg output.svg input.diag

オンラインデモhttp://tk0

miya.bitbucket.org/blockdiag/build/html/demo.html

SVG が表示できるブラウザで！リファレンス

http://tk0miya.bitbucket.org/blockdiag/build/html/

Sphinx との連携Sphinx 用プラグイン： sphinxcontrib-

blockdiag% easy_install sphinxcontrib-blockdiag

reST の中に埋め込むことができます.. blockdiag::

diagram { A -> B -> C; B -> D;}

使用例http://tk0miya.bitbucket.org/blockdiag/build/ht

ml/sphinxcontrib.html

今後の予定ノードの形状切り替え

ひし形、楕円、角丸の四角、メール、 DB ( 円筒 ) 、ファイル

レイアウトエンジンの見直し遷移図以外のブロック図にも対応したい ( 妄想 )

遷移図以外のドキュメントも補助ツールを作りたい画面設計書をもっと簡単に！もっと手軽に！

興味がある方は @tk0miya に声をかけてください

おしまいご静聴ありがとうございました