27
ドドドドドドドドドドド ドドドドド blockdiag Sphinx-users.jp 小小小

ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

Embed Size (px)

Citation preview

Page 1: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ドキュメントを加速する作画ツール

blockdiag

Sphinx-users.jp小宮健

Page 2: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

自己紹介:小宮 健

仕事( 株 ) タイムインターメディア所属テクニカルオフィサ ( 技術責任者 ) として活動

参加コミュニティSphinx-users.jpPython mini hack-a-thon

Sphinx を中心にツールを開発blockdiag シリーズSphinx 拡張機能の開発

sphinxcontrib-googlechart などrst2pdf ( コミッタ )

Twitter: @tk0miya

Page 3: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ドキュメントとは ?

ドキュメント【 document 】1. 資料的な文書。記録。2. 記録映画。記録文学。3. コンピューターで、プログラム開発の際に作る仕様

書や使用説明書。(goo 辞書より )

Page 4: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ドキュメントとは ?

IT 業界では設計書、手順書、利用マニュアルなどを指す

設計書業務の全体像、経緯アーキテクチャやシステム間の連携システム構成、インフラ構成が把握できる

手順書メンテナンス手順、作業手順

利用マニュアル

現代のシステムは複雑でマニュアルは必要不可欠なもの

Page 5: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ドキュメントと図

ドキュメントには図がつきものシステム構成図画面遷移図フローチャートUML 系の図 ( クラス図、シーケンス図など )ネットワーク図

図を更新するのはとても手間がかかる書く内容は決まっていてもレイアウトに苦労する消して、移動して、調整して、の繰り返し

Page 6: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

図を作るときの定番ツールブロック図やシーケンス図を作るときに利用する

ツールExcel, VisioCacooastah*PlantUML

多くのツールは要素を自分で並べていく必要がある意図したとおりに要素を並べることができる変更の際は並べ替え作業がメインになる

Page 7: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

追加 / 削除が大変

ここに 1 画面追加

Page 8: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

追加 / 削除が大変

1 . スキマを作る

Page 9: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

追加 / 削除が大変

2 . 不要な矢印を消す

Page 10: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

追加 / 削除が大変

3 . 図形を配置する

Page 11: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

追加 / 削除が大変

4 . 矢印を調整

Page 12: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ずれる

Page 13: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ずれる

Page 14: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ずれる

Page 15: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ずれる

Page 16: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ずれる

Page 17: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

blockdiag シリーズ

Page 18: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

blockdiag シリーズ

テキストを図に変換するツール群blockdiag :ブロック図、画面遷移図、フローチャー

トseqdiag :シーケンス図actdiag :アクティビティ図nwdiag :ネットワーク図

blockdiag は定義ファイル ( テキスト ) から画像を生成するレイアウトは自動的に行われる多くの図形作成ツール (GUI ベース ) と異なる考え方

細かく並べ替えたい人には向きません

Page 19: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

blockdiag の例このテキストが…

{ トップページ -> ログイン -> マイページ ; トップページ -> 商品一覧 -> 商品詳細 ;}

Page 20: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

seqdiag の例このテキストが…

{ A => B => C;}

Page 21: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

nwdiag の例

このテキストが…

{ network { web01; web02; } network { web01; web02; db01; }}

Page 22: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

blockdiag :三つのキーワードスピード

構成を書くだけで図が生成される配置など余計なことに煩わされない

メンテナンス性自動レイアウトのため並び替えが不要

モチベーション気軽に書いて共有できるスピード感があるので楽しい

Page 23: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

サンプル図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

blockdiag の周辺ツールblockdiag の重要な周辺ツール「 Interactive

Shell 」Web ブラウザを利用してリアルタイムに図を作れるSVG を利用しているため IE 非対応高速に情報を共有するのに向いている

Interactive Shell を利用して、 blockdiag をデモします

Page 25: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

ドキュメンテーションツールとの連携

SphinxWiki

RedmineTracmoinmoinMediawiki

from Web API

既存のドキュメントに対して簡単に図を埋め込める

Page 26: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

今後の展開新たな図、ドキュメントへの対応

システム構成図ネットワーク図 ( ラック、ハブ等の物理層 )画面定義書

他のツールと連携しての自動生成ネットワーク通信のシーケンス図ネットワーク図プログラム構成図

Page 27: ドキュメントを加速する作画ツール Blockdiag 2011/07 #infotalk

まとめ

blockdiag シリーズを使って図を楽に書こう並び替えや位置調整に手間をかけない図を作るのにスピードを与える

Sphinx や Trac, Wiki と組み合わせると便利

楽するためにはもっと知恵と経験が必要意見やアイディアを集めてもっと楽したい

URL: http://blockdiag.com/Twitter: #blockdiagGoogle グループ : blockdiag-discuss