draw.ioはインストールや会員登録なしで使えるブラウザのダイアグラムツールです。ER図用の図形とカラスの足のコネクタが標準で用意されています。
draw ioの使い方をER図に絞り、掲示板の会員・投稿・コメントを描きます。図形を有効にしてカラムを入れ、カラスの足でリレーションを結び、PNGまたはSVGへ書き出す順です。
はじめに：保存先を決める
ブラウザでapp.diagrams.netを開くと、最初にファイルの保存先を聞かれます。Google Drive、OneDrive、デバイス、ブラウザから選びます。
一人で描いて画像だけ取り出すならデバイス保存が手軽で、チームでファイルをやり取りするならDriveやOneDriveを選ぶほうが後が楽です。ブラウザ保存はいま使っているブラウザの中だけに残るので、閲覧データを消すとファイルも一緒に消える点は覚えておいてください。
保存先を決めて新しいダイアグラムを作ると、空のキャンバスが開きます。左が図形の一覧、中央がキャンバス、右が書式パネルです。
ER図用の図形を出す
初期状態の図形一覧には四角形と矢印しか見えませんが、ER図用の図形は自分で出します。方法は二つあります。
早いのは検索です。左の図形検索ボックスに table と入力すると、カラム行を持つエンティティ図形がすぐ出てきます。そのままキャンバスにドラッグすれば置けます。
ライブラリごと有効にするなら、図形一覧のいちばん下の More Shapes を押し、Software の中の Entity Relation にチェックを入れて Apply を押します。こうするとER図用のテーブル図形と一緒に、カラスの足のコネクタが左の一覧に追加されます。リレーション線を毎回設定し直さずに済むので、ER図をよく描くなら有効にしておくと快適です。
draw.ioでテーブルを描く
図形をキャンバスに置いたら、中身を入れていきます。
テーブル名を入れる。 図形のタイトル部分をダブルクリックすると名前を入力できます。掲示板の例ならmembers、posts、commentsです。
行の選び方。 draw.ioのテーブル図形は、クリックの回数で選択範囲が変わります。一度クリックするとテーブル全体、行の上をもう一度クリックするとその行のセル、三度目で行全体が選択されます。最初は戸惑いますが、この規則を覚えるとカラムの編集が一気に速くなります。
カラムを追加する。 行を選択した状態で右の書式パネルの Arrange タブを開くと、Insert Row Above と Insert Row After のボタンがあります。キーボードなら、行を選択して Ctrl+Enter を押すとその行が複製されます。カラムを続けて足すときはこちらが速いです。
カラムを削除する。 ここで一つ注意があります。行を選択してDeleteキーを押すと行の中身だけが消えて、空の行はそのまま残ります。行そのものを消すにはArrangeタブの行削除ボタンを使います。
主キーの表示。 draw.ioのテーブル図形には主キー専用の印がないので、カラム名の横にPKやFKを書くか、文字を太字にして区別します。チームの中で書き方さえ揃えておけば読むのに困りません。
掲示板の例の会員テーブルなら、id（PK）、email、nickname、created_atの四行が入ります。同じ手順で投稿とコメントのテーブルも作っておきます。
リレーション線を引く：カラスの足の指定
テーブルが三つそろったら関係をつなぎます。
線を引くときは、始点にする図形にマウスを重ね、枠に出る矢印や青い点からドラッグして相手の図形で離します。このとき、どこで離すかで二通りになります。テーブル名の上で離すとテーブルの外側に付く接続になり、特定の行の上で離すとその行に固定され、テーブルを動かしても線がそのカラムに付いてきます。外部キーのカラムを正確に指したいなら、行に接続するほうがよいです。
記号をカラスの足に変える方法は二つあります。Entity Relationライブラリを有効にしてあるなら、一覧にあるカラスの足のコネクタをそのままドラッグして使います。すでに引いた線を変えるなら、線を選択して右の Style タブで始点と終点のリストを開いて選びます。カラスの足の形はリストの下のほうにまとまっています。
記号は三つの要素の組み合わせでできています。丸が0、短い線が1、枝分かれした足が多数です。会員と投稿なら、会員側は線が二本（ちょうど1）、投稿側は丸とカラスの足（0以上）になります。どの組み合わせが何を表すのかはER図の記号まとめに四通りすべて整理してあります。
SQLからテーブル図形をまとめて作る
カラムの多いテーブルを一行ずつ入力する代わりに、CREATE TABLE文を貼り付けて図形を作る方法もあります。
メニューの Arrange → Insert → Advanced → SQL を選ぶか、ツールバーの + アイコンから Advanced → SQL を選ぶと入力欄が開きます。ここにSQLを貼り付けて実行すると、カラムまで入ったエンティティ図形が一度に作られます。
CREATE TABLE members (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(255) NOT NULL UNIQUE,
nickname VARCHAR(50) NOT NULL,
created_at DATETIME NOT NULL
);
CREATE TABLE posts (
id BIGINT AUTO_INCREMENT PRIMARY KEY,
member_id BIGINT NOT NULL,
title VARCHAR(200) NOT NULL,
content TEXT NULL,
created_at DATETIME NOT NULL
);作られた図形はカラムまで埋まっていますが、リレーション線は引かれません。配置を整えて、線は上で説明した手順で自分でつなぎます。カラムを手で打ち込む時間を減らすための機能と考えておくとよいです。
見やすく整える
テーブルとリレーション線がひととおり入ったら、配置を整えます。
整列と等間隔。 複数の図形を選択してArrangeタブを開くと、左揃えや中央揃えのボタンと、間隔を均等にする配分のボタンがあります。目分量で合わせるよりきれいに仕上がります。
書式のコピー。 テーブル一つの色と枠線を決めたら、その図形を選択して Alt+C で書式をコピーし、別の図形を選んで Alt+V で貼り付けると同じ書式になります。テーブルが十を超えるあたりから、このショートカットで時間がかなり変わります。
既定の書式にする。 気に入った書式の図形を選択して Ctrl+Shift+D を押すと、以降に作る図形がその書式で作られます。最初に一度決めておけば、図形ごとに色を選び直さずに済みます。
細かい調整。 図形を選択して Ctrl+E を押すと、スタイルの文字列を直接編集できます。書式パネルにない値を調整したり、同じスタイルを別の図形へそのまま移したりするときに使います。
PNG・SVGで書き出す
仕上げたダイアグラムは File → Export as から形式を選んで書き出します。PNG、JPEG、SVG、PDFに対応しているので、Wikiや会議資料ならPNG、拡大や印刷が必要ならSVGかPDFを選べば十分です。
書き出しのダイアログには、ダイアグラムのデータをファイルに含めるオプションがあります。これを有効にすると、PNGやSVGのファイル自体をdraw.ioで開き直して編集できます。画像ファイルだけをやり取りするチームなら、元ファイルを別に管理しなくて済むので有効にしておくとよいです。
ファイルの共有は保存先によって変わります。Google DriveやOneDriveに保存しているならそのサービスの共有機能を使い、デバイスに保存しているならファイルを直接渡します。
時間を節約する三つのコツ
図形の複製。 同じ形のテーブルをいくつも作るときは、図形を選択して Ctrl+D を押すと複製されます。カラム構成の似たテーブルは、複製してから名前と数行だけ直すほうが速いです。
スクラッチパッドを使う。 図形一覧の上にあるスクラッチパッドによく使う図形をドラッグしておくと、次のダイアグラムでもそこから取り出せます。チームの標準書式を当てたテーブル図形を一つ入れておけば、毎回書式を合わせる必要がなくなります。ただしスクラッチパッドの内容はブラウザに保存されるので、閲覧データを消すと一緒に消えます。
カスタムライブラリとして保存する。 スクラッチパッドの編集ボタンからExportを選ぶと、XMLファイルとして書き出せます。このファイルをチームで共有すれば、全員が同じ図形セットで描けます。
テーブルが増えたら：ページで分ける
キャンバスの下にはページのタブがあります。プラスボタンでページを追加すれば、一つのファイルの中に複数のダイアグラムを置けます。
テーブルが二十を超えるあたりからは、一枚に全部描くより、会員・注文・精算のようにドメインごとにページを分けるほうが読みやすくなります。ファイルは一つのままなので、共有するときも渡すのは一つだけです。ページをまたぐリレーションは、各ページに短いメモを書いてどのページのどのテーブルにつながるのかを残しておくと、後から迷いません。
よく使うショートカット
drawio データベース 図の作業で繰り返す操作には、たいていショートカットがあります。ER図を描くときに実際によく使うものだけを挙げると、このくらいです。
| ショートカット | 動作 |
|---|---|
| Ctrl+Enter | 選択した行を複製 |
| Ctrl+D | 選択した図形を複製 |
| Alt+C / Alt+V | 書式のコピー / 貼り付け |
| Ctrl+E | スタイルの文字列を直接編集 |
| Ctrl+Shift+D | いまの図形の書式を既定にする |
| Ctrl+Shift+R | 既定の書式を解除 |
行の複製と書式のコピー、この二つが手に馴染むだけで、テーブル十個のダイアグラムを作る時間がはっきり変わります。
drawio でER図を描くときによくある場面
行を消したのに空の行が残る。 Deleteキーは中身だけを消すためです。Arrangeタブの行削除ボタンを使えば行そのものが消えます。
テーブルを動かしたらリレーション線が変な場所に付く。 線をテーブル名の上で離すとテーブルの外側に接続され、行の上で離すとその行に付いてきます。外部キーのカラムを正確に指したいときは、線の端をその行に置き直します。
図形ごとに書式がばらばらになる。 基準にするテーブルを一つ決めてCtrl+Shift+Dで既定の書式にし、すでに描いた図形はAlt+CとAlt+Vで揃えると、すぐに整います。
よくある質問
draw.ioは無料で使えますか？
無料で使えます。ブラウザでapp.diagrams.netを開けば会員登録なしでそのまま描き始められて、図形ライブラリにも書き出し機能にも追加の料金はかかりません。デスクトップ版も無料で配布されています。
ER図専用の図形はありますか？
あります。左の図形検索ボックスにtableと入力すればカラム行を持つエンティティ図形がすぐ出てきますし、図形一覧の下のMore ShapesからSoftware内のEntity Relationライブラリを有効にすると、ER図用の図形とカラスの足のコネクタがまとめて追加されます。
カラスの足の記法はどう指定しますか？
Entity Relationライブラリにカラスの足のコネクタが用意されているので、そのままドラッグして使えます。すでに引いた線を変えるときは、線を選択してStyleタブの始点と終点のリストから選びます。カラスの足の形はリストの下のほうにまとまっています。
描いたファイルはどこに保存されますか？
最初に選んだ保存先に保存されます。Google Drive、OneDrive、デバイス、ブラウザから選べて、あとから別名保存で変更もできます。クラウドに保存しておけば、そのサービスの共有機能でチームに共有できます。
手で描く場合はEntity Relationライブラリを有効にし、テーブル図形へカラムを入れてカラスの足で結びます。カラムが多ければSQLから図形を先に生成し、リレーション線だけ追加できます。結果はPNGまたはSVGへ書き出せます。
すでにCREATE TABLE文が手元にあるなら、WorksCove ERDに貼り付けてリレーション線まで自動で描かれたダイアグラムとテーブル定義書を作る方法もあります。手順はSQLからER図を自動生成するにまとめてあり、ほかの無料ツールが気になるなら無料のER図ツール比較も参考になります。