ER図を簡単に作成してみよう【DB設計】【Mermaid】
はじめに
図（ダイアグラム）を簡単に作成できる「Mermaid」というツールを使ってER図を作成してみましょう。
Markdown形式（拡張子: .md）のファイルに保存し、「Visual Studio Code」または「GitHub」などで見れるようにしましょう。
用語について既に理解できている方は、「MermaidでER図を作成する 」に進んでください。
対象者
- 「RDB（リレーショナルデータベース）」がある程度、理解できている方
ER図（Entity Relationship Diagram）とは
「ER図（Entity Relationship Diagram）」は、主に基本設計のデータベース設計に使用される図です。
この図を使用することで、エンティティ（テーブル）間のリレーション（関係）を線で表現することができます。
Mermaid（マーメイド）とは
「Mermaid（マーメイド）」は、Markdown形式のテキスト定義をレンダリングして、簡単にダイアグラムを作成できるツールです。
このツールを利用することで、Zennの投稿やGitHubのコメントなどでダイアグラムを表示することができます。
ダイアグラムの作成には、「Mermaid Live Editor」やVSCodeの拡張機能「Markdown Preview Mermaid Support」を利用することができます。
Markdown（マークダウン）とは
「Markdown（マークダウン）」とは、プレーンテキストを簡単なマークアップで装飾することができる軽量マークアップ言語です。
本記事では「見出し」と「コードブロック」のみ使用します。
# 見出し(h1)
## 見出し(h2)
```js
// JavaScriptコード
const num = 1;
```
MermaidでER図を作成する
テーブル一覧
以下の2テーブルのER図を作成します。
| テーブル 物理名 |
テーブル 論理名 |
説明 |
|---|---|---|
| users | ユーザー | ユーザーを管理するテーブル 1ユーザーにつき、1レコードを想定 |
| tweets | ツイート | ツイートを管理するテーブル 1ユーザーにつき、複数レコード（0～n）を想定 |
エンティティ・リレーション
以下のように記述することで、「users」テーブルと「tweets」テーブルの関係性を図で出力することができます。
Mermaid記述方法
Mermaid Live Editor ※ 自由に編集が可能です
---
title: "タイトル"
---
erDiagram
users ||--o{ tweets : "コメント"
上記の例では、「users」テーブルと「tweets」テーブルは 1:n の関係になります。
詳細：テーブル例
usersテーブル
| id | name |
|---|---|
| 101 | taro |
| 102 | hanako |
tweetsテーブル
| id | author_id (users.id) |
tweet |
|---|---|---|
| 1 | 101 | 「taro」のツイート1 |
| 2 | 101 | 「taro」のツイート2 |
| 3 | 102 | 「hanako」のツイート1 |
| 4 | 101 | 「taro」のツイート3 |
| 5 | 102 | 「hanako」のツイート2 |
「users」テーブルの「id」カラムと、「tweets」テーブルの「author_id」カラムが関連しており、
1つの「users」レコードには複数の「tweets」レコードが存在するため、両テーブルは1対多（1:n）の関係になります。
「カーディナリティ」の記述方法と意味について、以下のようになります。
| 記述（左） | 記述（右） | 図 | 意味 |
|---|---|---|---|
|o |
o| |
 |
0 or 1 |
|| |
|| |
 |
1 |
}o |
o{ |
 |
0以上 |
}| |
|{ |
 |
1以上 |
エンティティ属性定義
エンティティには、属性の定義を行うことができます。
定義方法
属性の定義方法は、以下のようになります。
Mermaid記述方法
Mermaid Live Editor ※ 自由に編集が可能です
---
title: "属性定義"
---
erDiagram
entity {
type name PK "comment"
type name FK "comment"
type name UK
type name "comment"
type name
}
- entity: テーブル名
- type: カラムの型
- name: カラム名
- key: キー種別（PK, FK, UK）
- comment: カラム説明など
PK, FK, UKとは
詳細については、本記事では割愛します。
| 略語 | 名称 | 名称（日本語） |
|---|---|---|
| PK | primary key | 主キー |
| FK | foreign key | 外部キー |
| UK | unique key | 一意キー |
users、tweetsテーブル定義
「users」、「tweets」テーブルの定義をしてみましょう。
Mermaid記述方法
Mermaid Live Editor ※ 自由に編集が可能です
---
title: "タイトル"
---
erDiagram
users ||--o{ tweets : ""
users {
bigint id PK "ID"
varchar name "名称"
varchar username "ユーザー名"
varchar description "説明"
timestamp deleted_at "削除日時"
timestamp created_at "作成日時"
timestamp updated_at "更新日時"
}
tweets {
bigint id PK "ID"
bigint author_id FK "オーサーID:users.id"
varchar tweet "ツイート"
timestamp deleted_at "削除日時"
timestamp created_at "作成日時"
timestamp updated_at "更新日時"
}
マークダウンファイル作成
拡張子が .md のファイルを作成し
コードブロック内にMermaidで作成したER図のテキストを貼り付けましょう。
言語識別子は「mermaid」としてください。
# ER図
## tweetデータベース
```mermaid
---
title: "タイトル"
---
erDiagram
users ||--o{ tweets : ""
users {
bigint id PK "ID"
varchar name "名称"
varchar username "ユーザー名"
varchar description "説明"
timestamp deleted_at "削除日時"
timestamp created_at "作成日時"
timestamp updated_at "更新日時"
}
tweets {
bigint id PK "ID"
bigint author_id FK "オーサーID:users.id"
varchar tweet "ツイート"
timestamp deleted_at "削除日時"
timestamp created_at "作成日時"
timestamp updated_at "更新日時"
}
```
このファイルをVSCodeのマークダウンのプレビュー[1]や
GitHub上にアップすることで作成したER図を見る事ができます。
以下は、GitHub Gistにアップしたファイルです。
「Raw」ボタンをクリックすると、テキストで表示されます。
参考サイト
関連書籍
-
VSCode拡張機能「Markdown Preview Mermaid Support」が必要 ↩︎
Discussion