diagrams.net(draw.io)でER図を描く方法 ※画像つき解説
こんにちは。
システム開発時によく作られるER図ですが、普段皆さんは何のツールで書いていますか?Excelでしょうか、または専用の設計ツールでしょうか。何かしらのツールを使っているかと思います。それぞれに良い点はあると思いますが、今回は「割と短時間でササッとかける」、スピード感と手軽さを重視した場合におすすめのツールを紹介します。draw.ioという作図ツールです。
draw.ioとは
フリーの作図ツールです。ブラウザ、デスクトップ版の両方があります。ブラウザ版はインストールしなくても使えるのでお手軽ですが、オフラインでは使うことができません。オフラインで使いたい場合はデスクトップ版を使用したほうが良いでしょう。
今回はデスクトップ版を前提として解説します。
draw.ioでER図を描く
エンティティを配置する
アプリを起動し、「新規ファイルを作成する」を選択します。

画面左のメニューから「ER」を選択します。

ER図の作成に使える図形が表示されています。様々な図形がありますが、まずはエンティティを配置してみましょう。エンティティとして使える図形が何種類かありますので、図形をドラッグして作図エリアに配置しましょう。

配置すると下図のように、テーブルの雛形が作成されます。TableとRowの部分をクリックして実際のテーブルの値を入れると、ちゃんとしたER図のテーブルが完成します。

他にもいくつかテーブルを作ってみます。システムのユーザーを管理するUsersテーブル、ユーザーの役割を管理するRolesテーブル。Userは複数のRoleを持てることにします。UserとRolesは多対多の関係になるので、中間エンティティとしてUser_has_rolesテーブルを作成しました。

これらのテーブルにリレーションを張っていきたいと思います。
リレーションを作成する
UsersエンティティとUser_has_rolesエンティティ間に1対多のリレーションを張ってみましょう。
Usersエンティティの縁にマウスのカーソルを当てると矢印マークが出てきます。

この矢印マークをクリックするとエンティティから関連線を引くことができます。マウスを押し続けたままドラッグすると任意のエンティティに向かって関連線を引くことができます。作成した関連線は以下のようになりました。

UsersからUser_has_rolesに向かって矢印線が引かれています。ER図なのでリレーションシップを表す表記に矢印の種類を変える必要があります。
関連線をクリックして選択し、右のメニューから[スタイル]タブを選択します。関連線の両端の種類を下図のように変更します。

ER図は以下のようになります。

ER図を描くことができました。さらに残りのテーブルともリレーションを張っていきます。最終的に以下のような図となります。

これでER図はひとまず完成です。簡単な操作でまともな図を描くことができます。このような見た目であれば納品するシステムの設計書にも使うことができそうです。※私は結構使っています。
エンティティへの項目追加、削除方法
エンティティへ項目を追加、削除する方法が意外と分かりづらいので説明します。
エンティティのカラムを選択した状態で、画面上部のメニューからテーブルのアイコンを選択します。さらにメニューが開きますので、目的に応じた操作を選択します。

まとめ
今回はdraw.ioでER図を作図する方法を解説しました。draw.ioは作図系のツールではかなり直感的に操作ができる方なので私はちょっとした図を書きたいときによく使用しています。
ER図に関しては考えをまとめるために使うことが多いです。あくまで作図ツールなので大規模なシステムのER図を書きたときにはdraw.ioでは少し苦しくなる印象ですね。モデル同士の整合性を取る機能などは搭載していないので。。
お手軽に使いたい場合ではExcelやパワーポイントではなくて、draw.ioを使ってみると見た目も生産性も良くなると思います。ぜひ使用してみてください。
ディスカッション
コメント一覧
まだ、コメントがありません