遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12

10,333 views
10,083 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,333
On SlideShare
0
From Embeds
0
Number of Embeds
3,491
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12

  1. 1. 遷移図生成ツール blockdiagの紹介<br />小宮 健 (@tk0miya)<br />2010-12-08<br />
  2. 2. 自己紹介<br />小宮 健 (@tk0miya)<br />株式会社タイムインターメディア所属<br />普段は Web アプリ開発 (PHP, Ruby など)してます<br />Python 歴は約 1年ぐらい<br />発表するのは初めて!<br />Sphinx-users とか Python mini hack-a-thon に出没<br />
  3. 3. 遷移図作ってますか?<br />プロジェクトで画面遷移図を作ることになった<br />弊社では Excel、Visio で作ることが多い<br />画面を箱、遷移を矢印で表現するタイプのもの<br />実際にやってみると大変!<br />
  4. 4. 苦労 その1:追加/削除が大変<br />ここに 1 画面追加<br />
  5. 5. 苦労 その1:追加/削除が大変<br />1.スキマを作る<br />
  6. 6. 苦労 その1:追加/削除が大変<br />2.図形を置く<br />
  7. 7. 苦労 その2:ずれる<br />
  8. 8. 苦労 その2:ずれる<br />
  9. 9. 苦労 その2:ずれる<br />
  10. 10. 苦労 その2:ずれる<br />
  11. 11. 苦労 その3:その他<br />Excel のバージョンが合わなくて図が壊れた<br />図の微調整ばかりで全然進まない<br />だんだん Excel (や Visio)が嫌いになってきた<br />Sphinx を使ってみたいのに組み合わせづらい<br />一度画像で保存する必要がある<br />
  12. 12. こんなのメンテナンスしたくない!<br />
  13. 13. というわけでツールを作ってみました<br />
  14. 14. blockdiag(ぶろっくだいあぐらむ)<br />遷移図生成ツール<br />定義ファイル(テキスト)から画像(PNG, SVG)を生成<br />Graphvizっぽい文法<br />テキストなのでバージョン管理しやすい<br />自動的にレイアウトしてくれる<br />追加/削除が簡単<br />ずれたりしない<br />日本語 (UTF-8) 対応<br />easy_installblockdiagでインストール可能<br />
  15. 15. blockdiag の使い方<br />遷移図の定義を作ります<br />diagram {<br /> A -> B -> C;<br /> B -> D;<br />}<br />blockdiagコマンドで画像を生成<br />% blockdiag –o sample.png input.diag<br />
  16. 16. blockdiag:細かい装飾(1)<br />各要素ごとに色、画像、矢印の向きなどが設定できる<br />背景色、線の色、実線/点線<br />背景画像<br />矢印の向き<br />
  17. 17. blockdiag:細かい装飾(2)<br />そのほかの装飾<br />ノードのグルーピング<br />遷移の説明文 (短め)<br />
  18. 18. blockdiag:ちょっと複雑な例<br />diagram {<br />toppage -> add -> add_confirm -> toppage;<br />toppage -> edit -> edit_confirm -> toppage;<br />toppage -> delete_confirm -> toppage;<br />toppage [label = "○○マスタ管理画面nトップページ"];<br /> add [label = "○○追加画面"];<br />add_confirm [label = "○○追加画面n(確認)"];<br /> edit [label = "○○編集画面"];<br />edit_confirm [label = "○○編集画面n(確認)"];<br />delete_confirm [label = "○○削除画面n(確認)"];<br />}<br />
  19. 19. blockdiag:ちょっと複雑な例<br />
  20. 20. デモ<br />http://blockdiag.appspot.com/<br />
  21. 21. blockdiag を使おう<br />blockdiagコマンド<br />% blockdiag –o output.png input.diag<br />% blockdiag –T svg output.svg input.diag<br />オンラインデモ<br />http://tk0miya.bitbucket.org/blockdiag/build/html/demo.html<br />SVG が表示できるブラウザで!<br />リファレンス<br />http://tk0miya.bitbucket.org/blockdiag/build/html/<br />
  22. 22. Sphinx との連携<br />Sphinx 用プラグイン:sphinxcontrib-blockdiag<br />% easy_installsphinxcontrib-blockdiag<br />reSTの中に埋め込むことができます<br />.. blockdiag::<br /> diagram {<br /> A -> B -> C;<br /> B -> D;<br /> }<br />使用例<br />http://tk0miya.bitbucket.org/blockdiag/build/html/sphinxcontrib.html<br />
  23. 23. 今後の予定<br />ノードの形状切り替え<br />ひし形、楕円、角丸の四角、メール、DB (円筒)、ファイル<br />レイアウトエンジンの見直し<br />遷移図以外のブロック図にも対応したい (妄想)<br />遷移図以外のドキュメントも補助ツールを作りたい<br />画面設計書をもっと簡単に!もっと手軽に!<br />興味がある方は @tk0miya に声をかけてください<br />
  24. 24. おしまい<br />ご静聴ありがとうございました<br />

×