ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk
-
Upload
takeshi-komiya -
Category
Technology
-
view
2.623 -
download
9
Transcript of ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk
![Page 1: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/1.jpg)
ドキュメントを加速する作画ツール
blockdiag
Sphinx-users.jp小宮健
![Page 2: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/2.jpg)
自己紹介:小宮 健
仕事( 株 ) タイムインターメディア所属テクニカルオフィサ ( 技術責任者 ) として活動
参加コミュニティSphinx-users.jpPython mini hack-a-thon
Sphinx を中心にツールを開発blockdiag シリーズSphinx 拡張機能の開発
sphinxcontrib-googlechart などrst2pdf ( コミッタ )
Twitter: @tk0miya
![Page 3: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/3.jpg)
ドキュメントとは ?
ドキュメント【 document 】1. 資料的な文書。記録。2. 記録映画。記録文学。3. コンピューターで、プログラム開発の際に作る仕様
書や使用説明書。(goo 辞書より )
![Page 4: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/4.jpg)
ドキュメントとは ?
IT 業界では設計書、手順書、利用マニュアルなどを指す
設計書業務の全体像、経緯アーキテクチャやシステム間の連携システム構成、インフラ構成が把握できる
手順書メンテナンス手順、作業手順
利用マニュアル
現代のシステムは複雑でマニュアルは必要不可欠なもの
![Page 5: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/5.jpg)
ドキュメントと図
ドキュメントには図がつきものシステム構成図画面遷移図フローチャートUML 系の図 ( クラス図、シーケンス図など )ネットワーク図
図を更新するのはとても手間がかかる書く内容は決まっていてもレイアウトに苦労する消して、移動して、調整して、の繰り返し
![Page 6: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/6.jpg)
図を作るときの定番ツールブロック図やシーケンス図を作るときに利用する
ツールExcel, VisioCacooastah*PlantUML
多くのツールは要素を自分で並べていく必要がある意図したとおりに要素を並べることができる変更の際は並べ替え作業がメインになる
![Page 7: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/7.jpg)
追加 / 削除が大変
ここに 1 画面追加
![Page 8: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/8.jpg)
追加 / 削除が大変
1 . スキマを作る
![Page 9: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/9.jpg)
追加 / 削除が大変
2 . 不要な矢印を消す
![Page 10: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/10.jpg)
追加 / 削除が大変
3 . 図形を配置する
![Page 11: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/11.jpg)
追加 / 削除が大変
4 . 矢印を調整
![Page 12: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/12.jpg)
ずれる
![Page 13: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/13.jpg)
ずれる
![Page 14: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/14.jpg)
ずれる
![Page 15: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/15.jpg)
ずれる
![Page 16: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/16.jpg)
ずれる
![Page 17: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/17.jpg)
blockdiag シリーズ
![Page 18: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/18.jpg)
blockdiag シリーズ
テキストを図に変換するツール群blockdiag :ブロック図、画面遷移図、フローチャー
トseqdiag :シーケンス図actdiag :アクティビティ図nwdiag :ネットワーク図
blockdiag は定義ファイル ( テキスト ) から画像を生成するレイアウトは自動的に行われる多くの図形作成ツール (GUI ベース ) と異なる考え方
細かく並べ替えたい人には向きません
![Page 19: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/19.jpg)
blockdiag の例このテキストが…
{ トップページ -> ログイン -> マイページ ; トップページ -> 商品一覧 -> 商品詳細 ;}
![Page 20: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/20.jpg)
seqdiag の例このテキストが…
{ A => B => C;}
![Page 21: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/21.jpg)
nwdiag の例
このテキストが…
{ network { web01; web02; } network { web01; web02; db01; }}
![Page 22: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/22.jpg)
blockdiag :三つのキーワードスピード
構成を書くだけで図が生成される配置など余計なことに煩わされない
メンテナンス性自動レイアウトのため並び替えが不要
モチベーション気軽に書いて共有できるスピード感があるので楽しい
![Page 23: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/23.jpg)
サンプル図blockdiag
画面遷移図 : http://bit.ly/lZkszJブロック図 : http://bit.ly/kYpK6Yフローチャート : http://bit.ly/m7fLsM組織図 : http://bit.ly/l6OOhZ
seqdiaghttp://bit.ly/lwvEox
nwdiaghttp://bit.ly/kR5tYFhttp://bit.ly/qZvung (cisco のフリー画像を使用 )
![Page 24: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/24.jpg)
blockdiag の周辺ツールblockdiag の重要な周辺ツール「 Interactive
Shell 」Web ブラウザを利用してリアルタイムに図を作れるSVG を利用しているため IE 非対応高速に情報を共有するのに向いている
Interactive Shell を利用して、 blockdiag をデモします
![Page 25: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/25.jpg)
ドキュメンテーションツールとの連携
SphinxWiki
RedmineTracmoinmoinMediawiki
from Web API
既存のドキュメントに対して簡単に図を埋め込める
![Page 26: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/26.jpg)
今後の展開新たな図、ドキュメントへの対応
システム構成図ネットワーク図 ( ラック、ハブ等の物理層 )画面定義書
他のツールと連携しての自動生成ネットワーク通信のシーケンス図ネットワーク図プログラム構成図
![Page 27: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk](https://reader038.fdocument.pub/reader038/viewer/2022102616/55899626d8b42ad5298b45c8/html5/thumbnails/27.jpg)
まとめ
blockdiag シリーズを使って図を楽に書こう並び替えや位置調整に手間をかけない図を作るのにスピードを与える
Sphinx や Trac, Wiki と組み合わせると便利
楽するためにはもっと知恵と経験が必要意見やアイディアを集めてもっと楽したい
URL: http://blockdiag.com/Twitter: #blockdiagGoogle グループ : blockdiag-discuss