遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12
•Download as PPTX, PDF•
5 likes•6,490 views
遷移図生成ツール blockdiag の紹介 at 帰ってきた Python Workshop 2010/12.
Recommended
Recommended
More Related Content
What's hot
What's hot (11)
Similar to 遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12
Similar to 遷移図生成ツール blodkdiag の紹介 / Python Workshop 2010/12 (20)
More from Takeshi Komiya
More from Takeshi Komiya (20)
Recently uploaded
Recently uploaded (9)
遷移図生成ツール blodkdiag の紹介 / 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 画面追加
- 7. 苦労 その２：ずれる
- 8. 苦労 その２：ずれる
- 9. 苦労 その２：ずれる
- 10. 苦労 その２：ずれる
- 11. 苦労 その3：その他 Excel のバージョンが合わなくて図が壊れた 図の微調整ばかりで全然進まない だんだん Excel (や Visio)が嫌いになってきた Sphinx を使ってみたいのに組み合わせづらい 一度画像で保存する必要がある
- 12. こんなのメンテナンスしたくない！
- 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 = "○○削除画面(確認)"]; }
- 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 に声をかけてください