遷移図生成ツール blockdiag の紹介 @ Pycon mini JP 2011/01

1. 遷移図生成ツールblockdiagの紹介
小宮健 (@tk0miya)
2011-01-29

2. おまえ誰よ？
小宮健 (@tk0miya)
株式会社タイムインターメディア所属
技術者募集中らしいです
Python 歴は約 1年ぐらい
Sphinx-users とか Python mini hack-a-thon に出没
LT開始 30分前まで資料作ってました
ドラが鳴らないようがんばります

3. 遷移図、書いてますか？

4. blockdiagの紹介
テキストから画面遷移図を生成するツール
コマンドライン / Sphinx 拡張として動作
悪名高きExcel 方眼紙がイヤで作った
並べ替えるのが面倒、ずれる、etc…

5. Excel 方眼紙時代の思い出

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

１.スキマを作る

２.図形を置く
３.矢印を調整

9. 苦労その２：ずれる

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

14. というわけでblockdiagを作りました

15. blockdiagの特徴
遷移図生成ツール
コマンドライン / Sphinx
定義ファイル(テキスト)から画像(PNG, SVG)を生成
Graphvizっぽい文法 (DOT like 文法)
自動的にレイアウトしてくれる
追加/削除が簡単
ずれたりしない
日本語 (UTF-8) 対応
easy_installblockdiagでインストール可能

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

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

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

19. 新機能：ノードの形状変更
ノードのshape 属性を指定する
node1 [shape = “roundedbox”]
基本系

フローチャート系

その他

22. 新機能：文法/属性の拡張
矢印の折り返し (folded 属性)
mail -> login [folded]
図が横長になったときに手動で調整する

23. 新機能：文法/属性の拡張
グループ表現のネスト
単純にネストするだけ
group { A -> B; group { B -> C } }

24. 出力サンプル
基本系
フローチャート
クローラー
Web ブラウザ上でのデモ

25. 出力サンプル：基本系

26. 出力サンプル：フローチャート系

27. 出力サンプル：クローラ
クローラで生成する
デザイナーさんは画像を使って遷移図を作ってるらしい
PyCon mini JP サイトをクロールしてみた
urllib + PyQt (スナップショット取得) で適当なクローラ作成

28. 出力サンプル：Web デモ
Web デモ
GoogleAppEngine上で動くように書き換えたもの
http://blockdiag.appspot.com/
ぬるぬる動くよ！
Ajax で書き換える度に SVG を生成しまくってます

29. 今後の予定
ばぐつぶし(´・ω・｀)
Sphinx 連携の強化
単なる図からドキュメントとして整備できるように
遷移図以外のブロック図にも対応する
フローチャートとかモジュール配置図とか
遷移図以外のドキュメントツールを作る
テーマ：簡単でメンテナンスできるくらいを書こう
興味がある方は @tk0miya まで
Twitter で blockdiagってつぶやくと喜びます。

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

遷移図生成ツール blockdiag の紹介 @ Pycon mini JP 2011/01

Takeshi Komiya

Transcript