女性向けエンジニアスクール
3秒でわかる
ブラウザだけで使える無料の作図ツール。ER 図やシステム構成図を描け、元データがテキストなのでリポジトリに置いて差分まで管理できます。
もう少し詳しく
どういうものか
draw.io は、ブラウザ上で図を描くツールです。現在は diagrams.net という名前でも配布されています。インストール無しで使え、アカウント登録も要りません。左側の図形パレットから引っ張ってきて線でつなぐ、という操作だけで、フローチャート、ER 図、ネットワーク構成図、クラス図まで描けます。
保存形式は .drawio という XML です。中身がテキストなので、Git に入れれば誰がどこを直したかを差分として追えます。書き出しは PNG、SVG、PDF に対応しています。
なぜ必要か
設計の話し合いは、文章だけだと噛み合いません。テーブルの関係やサーバーの並びは、図にした瞬間に食い違いが見つかります。有償ツールを全員分そろえる必要が無く、共有もリンク 1 本で済むため、学習中や小さなチームで使う作図ツールとして選ばれています。
具体例
ER 図を描く手順は下記のとおりです。
1. 左パネルの検索欄で entity と入れ、テーブルの図形を置く
2. 図形をダブルクリックして、テーブル名と列名を書く
3. 図形の縁からドラッグして線を引き、相手のテーブルにつなぐ
4. 線を選び、右パネルの Line で端の記号を 1 対多の形に変える
VS Code の拡張機能を入れると、エディタ内でそのまま編集できます。
リポジトリの置き方の例
docs/
er.drawio ← 編集する元データ
er.png ← 会議で見せる書き出しつまずきやすいところ
書き出した PNG だけをリポジトリに置くと、次に直す人が元データを失って一から描き直すことになります。.drawio を必ず一緒に置きます。
線を図形の面ではなく、縁の接続点に確実につないでおくことも大事です。面に落とすと、図形を動かしたときに線だけ取り残されます。正しくつながっているとき、接続点は緑色の丸で表示されるので、そこを目印にします。
自動保存の場所も確認が要ります。ブラウザ内に保存する設定のままだと、別の PC から開けず、キャッシュを消した時点で図も消えます。作り始める前に、保存先をローカルのファイルかクラウドドライブに決めておきます。
似た用語との違い
構成図のように、配置そのものに意味がある図は draw.io が向きます。シーケンス図のように機械的に並べてよい図は、テキストから生成するツールのほうがレビューも差分確認も楽です。用途で使い分ければ、どちらか一方に寄せる必要はありません。
