1. ドキュメントを加速する作画ツールblockdiag Sphinx-users.jp 小宮健

2. 自己紹介：小宮 健 仕事 (株)タイムインターメディア所属 テクニカルオフィサ(技術責任者)として活動 参加コミュニティ Sphinx-users.jp Python mini hack-a-thon Sphinx を中心にツールを開発 blockdiagシリーズ Sphinx 拡張機能の開発 sphinxcontrib-googlechartなど rst2pdf (コミッタ) Twitter: @tk0miya

3. ドキュメントとは? ドキュメント【document】 資料的な文書。記録。 記録映画。記録文学。 コンピューターで、プログラム開発の際に作る仕様書や使用説明書。 (goo 辞書より)

4. ドキュメントとは? IT業界では設計書、手順書、利用マニュアルなどを指す 設計書 業務の全体像、経緯 アーキテクチャやシステム間の連携 システム構成、インフラ構成が把握できる 手順書 メンテナンス手順、作業手順 利用マニュアル 現代のシステムは複雑でマニュアルは必要不可欠なもの

5. ドキュメントと図 ドキュメントには図がつきもの システム構成図 画面遷移図 フローチャート UML 系の図 (クラス図、シーケンス図など) ネットワーク図 図を更新するのはとても手間がかかる 書く内容は決まっていてもレイアウトに苦労する 消して、移動して、調整して、の繰り返し

6. 図を作るときの定番ツール ブロック図やシーケンス図を作るときに利用するツール Excel, Visio Cacoo astah* PlantUML 多くのツールは要素を自分で並べていく必要がある 意図したとおりに要素を並べることができる 変更の際は並べ替え作業がメインになる

7. 追加/削除が大変 ここに 1 画面追加

8. 追加/削除が大変 １.スキマを作る

9. 追加/削除が大変 ２.不要な矢印を消す

10. 追加/削除が大変 ３.図形を配置する

11. 追加/削除が大変 ４.矢印を調整

12. ずれる

13. ずれる

14. ずれる

15. ずれる

16. ずれる

17. blockdiagシリーズ

18. blockdiagシリーズ テキストを図に変換するツール群 blockdiag：ブロック図、画面遷移図、フローチャート seqdiag：シーケンス図 actdiag：アクティビティ図 nwdiag：ネットワーク図 blockdiagは定義ファイル(テキスト)から画像を生成する レイアウトは自動的に行われる 多くの図形作成ツール(GUI ベース)と異なる考え方 細かく並べ替えたい人には向きません

19. blockdiagの例 このテキストが… { トップページ -> ログイン -> マイページ; トップページ -> 商品一覧 -> 商品詳細; }

20. seqdiagの例 このテキストが… { A => B => C;}

21. nwdiagの例 このテキストが… { network { web01; web02; } network { web01; web02; db01; } }

22. blockdiag：三つのキーワード スピード 構成を書くだけで図が生成される 配置など余計なことに煩わされない メンテナンス性 自動レイアウトのため並び替えが不要 モチベーション 気軽に書いて共有できる スピード感があるので楽しい

23. サンプル図 blockdiag 画面遷移図: http://bit.ly/lZkszJ ブロック図: http://bit.ly/kYpK6Y フローチャート: http://bit.ly/m7fLsM 組織図: http://bit.ly/l6OOhZ seqdiag http://bit.ly/lwvEox nwdiag http://bit.ly/kR5tYF http://bit.ly/qZvung(ciscoのフリー画像を使用)

24. blockdiagの周辺ツール blockdiagの重要な周辺ツール「Interactive Shell」 Web ブラウザを利用してリアルタイムに図を作れる SVG を利用しているため IE 非対応 高速に情報を共有するのに向いている Interactive Shell を利用して、blockdiagをデモします

25. ドキュメンテーションツールとの連携 Sphinx Wiki Redmine Trac moinmoin Mediawiki from Web API 既存のドキュメントに対して簡単に図を埋め込める

26. 今後の展開 新たな図、ドキュメントへの対応 システム構成図 ネットワーク図 (ラック、ハブ等の物理層) 画面定義書 他のツールと連携しての自動生成 ネットワーク通信のシーケンス図 ネットワーク図 プログラム構成図

27. まとめ blockdiagシリーズを使って図を楽に書こう 並び替えや位置調整に手間をかけない 図を作るのにスピードを与える Sphinx や Trac, Wiki と組み合わせると便利 楽するためにはもっと知恵と経験が必要 意見やアイディアを集めてもっと楽したい URL: http://blockdiag.com/ Twitter: #blockdiag Google グループ: blockdiag-discuss