【draw.io】ER図の作り方｜テーブルの配置からカラス足の線、整列、保存のしかたまで

データベースを設計するときは、テーブルとそのつながりを ER 図（実体関連図）で描いておくと、全体が把握しやすくなります。この記事では、無料の作図ツール draw.io（ドローアイオー）で ER 図を作る手順を、実際の画面で紹介します。

draw.io とは

draw.io は、ブラウザで使える無料の作図ツールです。draw.io のアプリを開くだけで、アカウントを作らずに使い始められます。ER 図に向いているのは、次の点です。

「ユーザー（users）」と「注文（orders）」の2つのテーブルを例にします。orders には、どのユーザーの注文かを表す user_id（外部キー）を持たせます。

テーブル	主なカラム
`users`	`id`（主キー）、`name`、`email`
`orders`	`id`（主キー）、`user_id`（外部キー）、`total`、`ordered_at`

1人のユーザーは注文をいくつも持ち、注文は必ず1人のユーザーのものです。この関係を「1対多」といいます。

画面の左側の図形の一覧から「実体関係」（ER）を開きます。見当たらないときは、一覧のいちばん下の「その他の図形」から追加します。

行が分かれたテーブルの形を、ドラッグしてキャンバスに置きます。

テーブルのいちばん上をダブルクリックしてテーブル名（users）を入れ、各行をダブルクリックして、主キー（PK）やカラム名、データの型を入れます。同じように orders も作り、user_id には外部キー（FK）と書いておきます。

行を増やすときは、行を選んで Ctrl + Enter（Mac は Cmd + Enter）で複製します。消すときは、行を選んで Delete キーを押します。

テーブルの端にマウスを合わせると、つなぐための印（矢印や小さな丸）が出ます。そこから、つなぎたい相手の行までドラッグすると、線で結ばれます。users の id と orders の user_id を結びます。

ER 図では、線の端の形で「1対多」などの関係を表します。よく使われるのが、鳥の足のように分かれた「カラス足（Crow’s foot）」の記号です。

今回の例では、users の側を「必ず1つ」、orders の側を「0個以上」（注文していないユーザーもいる）にします。

引いた線をクリックして選び、画面右側の「スタイル」タブを開きます。

線の始点と終点の形を選ぶプルダウンを開き、それぞれの端の形を選びます。

テーブルが増えると、並びがバラバラになって線も交差しやすくなります。そろえたいテーブルをまとめて選び、画面右側の「配置」タブにある整列のボタンを使うと、端をそろえたり、間隔を等しくしたりできます。

ユーザーや商品のようにあまり変わらないデータ（マスター）と、注文や履歴のように増えていくデータ（トランザクション）で色を分けると、構造がひと目で分かります。色は、テーブルを選んで右側の「スタイル」タブで変えられます。

「ファイル」→「保存」で保存すると、.drawio のファイルになります。これがあとから直せる元のファイルです。資料に貼るときは、「ファイル」→「エクスポート」で PNG、SVG、PDF などに書き出します。

PNG に書き出すときに「図のコピーを含める」にチェックを入れると、画像の中に図のデータが入り、その PNG を draw.io で開いてまた直せます。

VS Code を使っているなら、拡張機能「Draw.io Integration」を入れると、.drawio のファイルを VS Code の中で開いて直せます。プロジェクトのフォルダーに入れておけば、コードと一緒に Git で管理できます。

ER 図は設計図なので、このあと実際のテーブルを作ります。Laravel なら、ER 図のテーブルごとにマイグレーションを書き、user_id のような外部キーは foreignId() で作ります。

ER 図に描いた表を、実際に CREATE TABLE で作る話は、データベース編第2回の記事に書いています。