システム開発やデータベース設計で欠かせないER図（実体関連図）。
「ツールが多くてどれを使えばいいかわからない」「綺麗に配置するのが難しい」と悩んでいませんか？
そこでおすすめなのが、完全無料でアカウント登録なしでも使える高機能作図ツール「draw.io」です。
この記事では、draw.ioを使って簡単かつ直感的にER図を作成する手順を、実際の画面に沿って解説します！
1. draw.ioとは？なぜER図作成に向いているのか
draw.ioは、ブラウザ上で動作する無料のオープンソース作図ツールです（現在は diagrams.net が正式名称ですが、広く draw.io と呼ばれています）。
ER図作成ツールとして、以下のような圧倒的なメリットがあります。
- 完全無料・アカウント登録不要（すぐに使い始められる）
- 最初からER図専用のメニューが用意されている
- GoogleドライブやGitHubなど、多彩な保存先に対応
- 自動整列機能があり、初心者でも見栄えが良い図が作れる
2. draw.ioでER図を作成する4ステップ
今回は、一般的な「ユーザー（User）」と「注文（Order）」の関係を例に、具体的な手順を解説します。
ステップ1：テーブル（エンティティ）を配置する
１．画面左側のサイドメニューにある「ER」の項目をクリックして展開します。
２．表示される図形の中から、最もよく使われる「行が分かれたテーブル型（リスト形式）」のシェイプをドラッグ＆ドロップでキャンバスに配置します。
ステップ2：テーブル名とカラム名を入力する
- 配置したテーブルのタイトル部分をダブルクリックし、テーブル名（例：
users）を入力します。 - 各行をダブルクリックして、PK（主キー）、カラム名、データ型を入力していきます。
💡 行を追加・削除したいときは？ 行を選択した状態で、キーボードの
Ctrl + Enter（MacはCmd + Enter）を押すと行を下に複製できます。削除したい場合は行を選んでDeleteキーを押すだけです。
ステップ3：テーブル同士を線（リレーション）で結ぶ
- 1つのテーブルの端（接続ポイント）にマウスカーソルを合わせると、小さな「緑色の丸」や「矢印」が表示されます。
- そこから別のテーブルの接続させたい行へドラッグ＆ドロップすると、線が繋がります。
ステップ4：カーディナリティ（多重度）を設定する
ER図では「1対多」などの関係性を示すカーディナリティ（烏の足：Crow’s Foot）の表現が重要です。
１．引いた接続線をクリックして選択します。
２．画面右側のパネルにある 「スタイル（Style）」 タブを開きます。
３．メニュー内にある、線の始まりと終わりを示す2つのプルダウン（始点・終点の形状を選ぶアイコン）を開きます。
４．リストから、1（一本線）や 多（鳥の足記号 Crow's foot）を選択します。
3. draw.ioでER図を綺麗に仕上げる3つのコツ
ツールに慣れてきたら、以下のテクニックを使うことで、誰が見ても見やすいプロ品質のER図になります。
① 「配置」機能で一発自動整列
テーブルが増えてくると線が交差して見づらくなります。 そんなときは、整列したいテーブルを複数選択し、画面右側パネルの 「配置（Arrange）」タブ の最上部にある 「整列」や「配置」のアイコン・ボタン を使うと、等間隔に美しく並び替えてくれます。
② テーブルごとに色分けする
マスターデータ（ユーザー、商品など）と、トランザクションデータ（注文履歴、ログなど）でテーブルの色を変えると、データベースの構造が直感的に理解できるようになります。 （色変更は右側の「スタイル」タブからワンクリックで行えます）
4. まとめ：さっそくdraw.ioで設計を始めよう！
draw.ioを使えば、最初からサイドメニューにある「ER」を開くだけで、直感的かつスピーディに美しいER図を作成できます。
作成した図は、ファイル ＞ エクスポート から PNG、PDF、SVG などの画像形式はもちろん、あとから再編集できる XML形式 で保存することも可能です。
コメント