ER図を作るためのツールまとめ

ER 図を作るためのツール

• Mermaid
• PlantUML
• TablePlus
• dbdiagram.io
• draw.io
• Rails ERD

サンプルの DB スキーマ

この記事では以下のような簡単なタスクアプリを想定したエンティティ関係の ER 図を書くことを想定します

• users
  • id
  • email
• tasks
  • id
  • name
  • user_id
• tags
  • id
  • name
• task_tags
  • id
  • task_id
  • tag_id

Mermaid

Mermaidは Markdown でフローチャートやガントチャートなどのグラフを書ける記法です
今回は ER 図を書きたいので Entity Relationship Diagram の書き方で作ります

表示方法

Live Editor で試すことができます
https://mermaid-js.github.io/mermaid-live-editor

また VSCode で拡張機能「Markdown Preview Mermaid Support」をインストールすることで Mermaid をプレビューすることができます

書き方

mermaid.mdファイルを作成し、コードブロックに mermaid を指定して記述します

```mermaild
%%{init:{'theme':'neutral'}}%%

erDiagram
  users {
    int id PK
    string email "メールアドレス"
  }

  tasks {
    int id PK
    int user_id FK
    string name "タスク名"
  }

  tags {
    int id PK
    string name "タグ名"
  }

  task_tags {
    int id PK
    int task_id FK
    int tag_id FK
  }

  users ||--|{ tasks : ""
  tasks ||--|{ task_tags : ""
  tags ||--|{ task_tags : ""
```　

個人的な好みでテーマを nautral に変更しています

%%{init:{'theme':'neutral'}}%%

表示

特徴

• 書き方が簡単でわかりやすい
• GitHub や esa でプレビューされる

PlantUML

PlantUMLも Mermaid のようにさまざまな種類のグラフをテキストで記述できるものです

表示方法

java をインストールする

$ brew install java
$ sudo ln -sfn $(brew --prefix)/opt/openjdk/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk.jdk

必要なライブラリをインストールする

$ brew install graphviz
$ brew install plantuml

VSCode に PlantUML プラグインをインストールする

VSCode で拡張子.puのファイルを作成し、option+dを押すと PlantUML のプレビューが表示されます

書き方

plantuml.puファイルを作成し、PlantUML の ER 図の記法に従って記述します

@startuml
hide circle

skinparam class {
    BackgroundColor snow
    BorderColor black
    ArrowColor black
}

entity users {
    id int (PK)
    --
    email varchar not null
}

entity tasks {
    id int (PK)
    --
    user_id int (FK)
    name varchar
}

entity tags {
    id int (PK)
    --
    name varchar
}

entity task_tags {
    id int (PK)
    --
    task_id int (FK)
    tag_id int (FK)
}

users ||-|{ tasks
tasks ||-|{ task_tags
tags ||--|{ task_tags
@enduml

個人的な好みでスタイルを変更しています

skinparam class {
    BackgroundColor snow
    BorderColor black
    ArrowColor black
}

表示

特徴

• PlantUML は Mermaild に比べ記法がやや複雑ですが、その分細かなスタイルの表示に対応することができる
• GitHub でプレビューされない
  • esa ではプレビューされる

TablePlus

TablePlusは MySQL や PostgreSQL などのデータベースの GUI ツールです

ER 図を作るための機能も備わっています
以下のリンクで画面上で ER 図を作成することができます
https://diagramplus.com/

また、すでに migrate されているデータベースと接続していれば、そのスキーマから ER 図を自動生成することもできます

• TablePlus を起動しデータベースに接続する
• メニューから「Plugins」>「Manage Plugins」を開く

• 「Diagram Generator」をインストールする

• テーブル一覧メニューで右クリックして、「Generate Diagram」をクリックする

特徴

• 画面上で簡単に ER 図を作ることができる
• テーブルの移動ができる
• SQL を export できる
• 既存の DB から ER 図を自動生成できる

dbdiagram.io

dbdiagram.ioはブラウザ上で ER 図を作れるツールです
アカウント登録すればシェア URL を発行できます

書き方

Table users {
  id int [pk]
  name varchar [not null]
}

Table tasks {
  id int [pk]
  name varchar [not null]
  user_id int [not null]
}

Table tags {
  id int [pk]
  name varchar [not null]
}

Table task_tags {
  id int [pk]
  task_id int [not null]
  tag_id int [not null]
}

Ref: users.id < tasks.user_id // one to many
Ref: tasks.id < task_tags.task_id
Ref: tags.id < task_tags.tag_id

特徴

• 補完が効いて書きやすい
• 制約やインデックスなど DB 設計に必要な情報を記述できる
• テーブルの移動ができる
• シェアできる
• SQL から import できるほか、Rails の schema.rb も import できる

draw.io

draw.ioは言わずもがな、フリーの作図ツールです
手軽に自由に図が書けて、ER 図を書くためのさまざまな図形も用意されています

特徴

• 手軽に自由に ER 図を書くことができる
• シェアできる
• import, export ができない
• 大規模なスキーマの場合、管理が大変になる

Rails ERD

Rails ERDは Rails のアプリケーションから ER 図を自動生成する gem です

Gemfile にgem 'rails-erd', group: :developmentを追加し、bundle exec erdを実行することでerd.pdfが生成されます
また~/.erdconfigで設定を変更することができます

特徴

• Rails で定義した型やアソシエーションなどの情報を ER 図に表示できる
• migrate した時に ER 図の PDF を更新することができる