遷移図生成ツール blockdiag の紹介 at 帰ってきた Python Workshop 2010/12.

1. 遷移図生成ツール blockdiagの紹介 小宮 健 (@tk0miya) 2010-12-08

2. 自己紹介 小宮 健 (@tk0miya) 株式会社タイムインターメディア所属 普段は Web アプリ開発 (PHP, Ruby など)してます Python 歴は約 1年ぐらい 発表するのは初めて！ Sphinx-users とか Python mini hack-a-thon に出没

3. 遷移図作ってますか? プロジェクトで画面遷移図を作ることになった 弊社では Excel、Visio で作ることが多い 画面を箱、遷移を矢印で表現するタイプのもの 実際にやってみると大変！

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

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

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

7. 苦労 その２：ずれる

8. 苦労 その２：ずれる

9. 苦労 その２：ずれる

10. 苦労 その２：ずれる

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

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

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

14. blockdiag(ぶろっくだいあぐらむ) 遷移図生成ツール 定義ファイル(テキスト)から画像(PNG, SVG)を生成 Graphvizっぽい文法 テキストなのでバージョン管理しやすい 自動的にレイアウトしてくれる 追加/削除が簡単 ずれたりしない 日本語 (UTF-8) 対応 easy_installblockdiagでインストール可能

15. blockdiag の使い方 遷移図の定義を作ります diagram { A -> B -> C; B -> D; } blockdiagコマンドで画像を生成 % blockdiag –o sample.png input.diag

16. blockdiag：細かい装飾(1) 各要素ごとに色、画像、矢印の向きなどが設定できる 背景色、線の色、実線/点線 背景画像 矢印の向き

17. blockdiag：細かい装飾(2) そのほかの装飾 ノードのグルーピング 遷移の説明文 (短め)

18. blockdiag：ちょっと複雑な例 diagram { toppage -> add -> add_confirm -> toppage; toppage -> edit -> edit_confirm -> toppage; toppage -> delete_confirm -> toppage; toppage [label = "○○マスタ管理画面トップページ"]; add [label = "○○追加画面"]; add_confirm [label = "○○追加画面(確認)"]; edit [label = "○○編集画面"]; edit_confirm [label = "○○編集画面(確認)"]; delete_confirm [label = "○○削除画面(確認)"]; }

19. blockdiag：ちょっと複雑な例

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

21. blockdiag を使おう blockdiagコマンド % blockdiag –o output.png input.diag % blockdiag –T svg output.svg input.diag オンラインデモ http://tk0miya.bitbucket.org/blockdiag/build/html/demo.html SVG が表示できるブラウザで！ リファレンス http://tk0miya.bitbucket.org/blockdiag/build/html/

22. Sphinx との連携 Sphinx 用プラグイン：sphinxcontrib-blockdiag % easy_installsphinxcontrib-blockdiag reSTの中に埋め込むことができます .. blockdiag:: diagram { A -> B -> C; B -> D; } 使用例 http://tk0miya.bitbucket.org/blockdiag/build/html/sphinxcontrib.html

23. 今後の予定 ノードの形状切り替え ひし形、楕円、角丸の四角、メール、DB (円筒)、ファイル レイアウトエンジンの見直し 遷移図以外のブロック図にも対応したい (妄想) 遷移図以外のドキュメントも補助ツールを作りたい 画面設計書をもっと簡単に！もっと手軽に！ 興味がある方は @tk0miya に声をかけてください

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