はじめに

データベース設計のER図について、VSCodeなどで作成する以下３つの方法を比較した記事です。

Draw.io
PlantUML
Mermaid

以前、Webアプリケーションを作成した際には、 Draw.io を使用して、作図しました。
（そのアプリのER図を今回サンプル図としています）

最近、 PlantUML を利用するようになり、ER図や、シーケンス図、クラス図の作図に利用しているのですが、とても編集しやすいと感じています。

ただ、どのツールにも、一長一短あるかと思いますので、それぞれ以下目次の内容を書いて、ご紹介したいと思います。

環境

macOS Big Sur バージョン: 11.6
Visual Studio Code バージョン: 1.68.1

1. Draw.io

Webアプリ作成当時は、 draw.io というフローチャートやダイアグラムの作図ツールを利用して作成しました。

1-1. VSCodeでの使い方

拡張機能「Draw.io Integration」のインストール

draw.io は、拡張機能「Draw.io Integration」をインストールするだけで使い始められます。

参考（draw.io 導入後の編集中画面）

1-2. ER図

Webアプリ作成当時のER図です。

1-3. 感想

作業としては、ER図用のパーツ（エンティティ）を手動で配置して、そこにデータを入力、線（リレーションシップ）を追記していく、というそこそこ地道な作業をする必要があります。

Webアプリの作成中、変更箇所を都度編集しながら、ER図がわかりやすく、収まり良く見えるように配置を考えたりしました。

例えば、機能追加によりテーブルが追加される場合には、エンティティの配置を手動でずらしてスペースを調整する必要があり、かなり面倒だと感じていました。（Excel などよりは百倍楽だったと思いますが…）

自由度はその分高いため、図を変更する必要がなくなった段階で、完成形を綺麗な図を書きたいときに使用するのにはいいかと思います。

2. PlantUML

PlantUMLは、以下のようなダイアグラムを素早く作成するためのコンポーネントです。

シーケンス図、ユースケース図、クラス図などのUMLを簡単な記法で作成できます。

UMLではない ER図もサポートしており、コードでテーブルの情報、関係性を書いておくと、その通り図を表示してくれます。

2-1. VSCodeでの使い方

拡張機能「PlantUML」のインストール

そして、draw.ioと同じく、VSCodeの拡張機能としてもインストールできます。

VSCodeの拡張機能「PlantUML」を検索した後、「インストール」ボタンをクリックして、インストール成功した後、Macの場合、下記のインストールをする必要があります。

brew install --cask temurin
brew install graphviz

※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」

参考（PlantUML 導入後の編集中画面）

2-2. ER図

今回作成したER図

Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています）

今回作成したER図のPlantUMLの表記

@startuml yonde
' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity "families" as families {
  id
  --
  name
  nickname
  introduction
  created_at
  updated_at
}

entity "users" as users {
  id
  --
  family_id<<FK>>
  name
  nickname
  email
  email_verified_at
  password
  remember_token
  icon_path
  relation
  created_at
  updated_at
  deleted_at
}

entity "children" as children {
  id
  --
  family_id<<FK>>
  name
  gender_code
  birthday
  created_at
  updated_at
}

entity "picture_books" as picture_books {
  id
  --
  family_id<<FK>>
  user_id<<FK>>
  google_books_id
  isbn_13
  title
  authors
  published_date
  thumbnail_url
  five_ster_rating
  read_status
  review
  created_at
  updated_at
}

entity "read_records" as read_records {
  id
  --
  picture_book_id<<FK>>
  family_id<<FK>>
  user_id<<FK>>
  memo
  read_date
  created_at
  updated_at
}

entity "child_read_record" as child_read_record {
  id
  --
  read_record_id<<FK>>
  child_id<<FK>>
  created_at
  updated_at
}

entity "tags" as tags {
  id
  --
  name
  created_at
  updated_at
}

entity "read_record_tag" as read_record_tag {
  id
  --
  read_record_id<<FK>>
  tag_id<<FK>>
  created_at
  updated_at
}

entity "follows" as follows {
  id
  --
  follower_user_id<<FK>>
  followee_family_id<<FK>>
  created_at
  updated_at
}

entity "likes" as likes {
  id
  --
  user_id<<FK>>
  picture_book_id<<FK>>
  created_at
  updated_at
}

entity "invites" as invites {
  id
  --
  family_id<<FK>>
  email
  token
  created_at
  updated_at
}

entity "contacts" as contacts {
  id
  --
  email
  nickname
  name
  title
  body
  created_at
  updated_at
}

entity "password_resets" as password_resets {
  --
  email
  token
  created_at
}

families ||--|{ users
families ||--|{ children
families ||--o{ follows
families ||--o{ picture_books
families ||--o{ read_records
families ||--o{ invites
users ||--o{ follows
users ||--o{ likes
users ||--o{ picture_books
users ||--o{ read_records
children ||--o{ child_read_record
picture_books ||--o{ read_records
picture_books ||--o{ likes
read_records ||--o{ child_read_record
read_records ||--o{ read_record_tag
tags ||--o{ read_record_tag

@enduml

2-3. 感想

こちらの図のお互いのエンティティ（テーブル）の位置は、コードの修正をすれば適当な配置にエンティティが移動してくれるので、非常に編集しやすいと感じました。

例えば、機能追加により、テーブルが追加される場合でも、 PlantUML ならコードを追加、修正するだけで、あとは勝手にエンティティとリレーションシップを調整してくれるのでかなり楽です。

自分で draw.io で作成したER図よりもリレーションシップ（線）の重なりが少なくて見やすいと感じ、出来としても申し分なしだと思いました。

また、 Git で変更履歴もコードとして確認できるのもメリットの一つだと思います。

3. Mermaid

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。

こちら Mermaid は、検索していて Notion でも使えるということで、私はパソコン上では Notion を基盤に生活しているような感じなので、こちらはぜひ試してみたいと思い、使ってみました。

3-1. VSCodeでの使い方

Mermaid は、拡張機能をインストールするだけで使い始められます。

拡張機能「Markdown Preview Mermaid Support」のインストール

プレビュー用の拡張機能です。

拡張機能「Mermaid Markdown Syntax Highlighting」のインストール

コードの色付け用の拡張機能です。

参考（Mermaid の拡張機能導入後の編集中画面）

.md ファイル内で記述しています。

3-2. ER図

今回作成したER図

Mermaid についても、Qiita記事にも構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています）

ただ、 Qiita のコードブロック内では、2000文字を超えると表示されませんでした。（そのため、上記の図は2000文字以内になるように一部省略しました…）

ちなみに、Notionでのプレビュー表示はこのような感じです。

今回作成したER図のMermaidのマークダウン構文

erDiagram
	families ||--|{ users : ""
	families ||--|{ children : ""
	families ||--o{ follows : ""
	families ||--o{ picture_books : ""
	families ||--o{ read_records : ""
	families ||--o{ invites : ""
	users ||--o{ follows : ""
	users ||--o{ likes : ""
	users ||--o{ picture_books : ""
	users ||--o{ read_records : ""
	children ||--o{ child_read_record : ""
	picture_books ||--o{ read_records : ""
	picture_books ||--o{ likes : ""
	read_records ||--o{ child_read_record : ""
	read_records ||--o{ read_record_tag : ""
	tags ||--o{ read_record_tag : ""
	families {
	  bigint id PK
	  varchar100 name
	  varchar255 nickname
	  varchar255 introduction
	  timestamp created_at
	  timestamp updated_at
	}
	users {
	  bigint id PK
	  bigint family_id FK
	  varchar255 name
	  varchar255 nickname
	  varchar255 email
	  timestamp email_verified_at
	  varchar255 password
	  varchar100 remember_token
	  varchar255 icon_path
	  varchar100 relation
	  timestamp created_at
	  timestamp updated_at
	  timestamp deleted_at
	}
	children {
	  bigint id PK
	  bigint family_id FK
	  varchar100 name
	  int gender_code
		date birthday
	  timestamp created_at
	  timestamp updated_at
	}	
	picture_books {
	  bigint id PK
	  bigint family_id FK
	  bigint user_id FK
	  varchar100 google_books_id
	  varchar100 isbn_13
	  varchar255 title
	  varchar255 authors
	  varchar100 published_date
	  varchar1000 description
	  varchar1000 thumbnail_url
	  int five_star_rating
	  int read_status
	  varchar1000 review
	  timestamp created_at
	  timestamp updated_at
	}
	read_records {
	  bigint id PK
	  bigint picture_book_id FK
	  bigint family_id FK
	  bigint user_id FK
	  varchar1000 memo
	  date read_date
	  timestamp created_at
	  timestamp updated_at
	}
	child_read_record {
	  bigint id PK
	  bigint read_record_id FK
	  bigint child_id FK
	  timestamp created_at
	  timestamp updated_at
	}
	tags {
	  bigint id PK
	  varchar255 name
	  timestamp created_at
	  timestamp updated_at
	}
	read_record_tag {
	  bigint id PK
	  bigint read_record_id FK
	  bigint tag_id FK
	  timestamp created_at
	  timestamp updated_at
	}
	follows {
	  bigint id PK
	  bigint follower_user_id FK
	  bigint followee_family_id FK
	  timestamp created_at
	  timestamp updated_at
	}
	likes {
	  bigint id PK
	  bigint user_id FK
	  bigint picture_book_id FK
	  timestamp created_at
	  timestamp updated_at
	}
	invites {
	  bigint id PK
	  bigint family_id FK
	  varchar255 email
	  varchar16 token
	  timestamp created_at
	  timestamp updated_at
	}
	contacts {
	  bigint id PK
	  varchar255 email
	  varchar255 nickname
	  varchar255 name
	  varchar255 title
	  varchar255 body
	  timestamp created_at
	  timestamp updated_at
	}

	password_resets {
	  string email
	  string token
	  timestamp created_at
	}

3-3. 感想

図の見た目は Mermaid よりも　PlantUML の方が個人的には好きです。 Mermaid はまだ見慣れないからかもしれませんが… Mermaid にはデザインのオプション設定はあるんですかね？

PlantUML の記法とそれほど書き心地は変わりませんので、 PlantUML を使用している方はすぐに書き慣れると思います。

まとめ

今後ER図を書くときには PlantUML をメインで利用しようと考えています。（今のところは…）
Notion でさっと書きたい時があれば、 Mermaid で書くようにしてみようかな、とも考えています。

他にも良い方法があると耳にした時には、今後も柔軟に試していきたいです。
（こんなのもあるなど教えていただけますと幸いです）

記事は以上です！ありがとうございました。

ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など）

はじめに

目次

環境

1. Draw.io

1-1. VSCodeでの使い方

拡張機能「Draw.io Integration」のインストール

参考（draw.io 導入後の編集中画面）

1-2. ER図

1-3. 感想

2. PlantUML

2-1. VSCodeでの使い方

拡張機能「PlantUML」のインストール

※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」

参考（PlantUML 導入後の編集中画面）

2-2. ER図

今回作成したER図

今回作成したER図のPlantUMLの表記

2-3. 感想

3. Mermaid

3-1. VSCodeでの使い方

拡張機能「Markdown Preview Mermaid Support」のインストール

拡張機能「Mermaid Markdown Syntax Highlighting」のインストール

参考（Mermaid の拡張機能導入後の編集中画面）

3-2. ER図

今回作成したER図

今回作成したER図のMermaidのマークダウン構文

3-3. 感想

まとめ