MermaidでER図を書いてみました

こんにちは、アルダグラムのエンジニアの金子です。

アルダグラムはノンデスクワーカー向けプロジェクト管理アプリ「KANNA」を提供しています。
https://lp.kanna4u.com/

今回は新しい機能の開発をしていく中で、ER図が欲しくなることがありました。

ツールとしては様々なものがありますが、気軽に作成・編集・管理できるものとして

Mermaidというものが良さげだったので、使い方を学習してみました。

Mermaidとは

Markdown感覚に近い独自記法で様々な図を書けるツールです。

テキストベースなのでプロジェクト内に配置してバージョン管理したりできます。

GithubやNotionもMermaid記法をサポートしているので図を簡単に共有することができます。

書き方

公式サイトのドキュメントを参考にしました。

Webベースのエディタで自動補完やシンタックスチェック、作成した図のダウンロードもできる

Mermaid Live Editor を使って書いていきます。

テーブルの定義

Railsを使って架空のブログサイトを作る例として、ユーザーテーブルの定義する場合は以下のようになります。

erDiagram
  users {
    bigint id PK
    string name "ユーザー名"
    timestamp created_at
    timestamp deleted_at
  }

リレーションの定義

ポストテーブルとの1:Nの関係のリレーションを定義する場合は以下のようになります

erDiagram
  users ||--o{ posts : "1人のユーザーは複数の投稿を持つ"

まとめると

複数のテーブルとリレーションをまとめると以下のようになります

erDiagram
  users ||--o{ posts : "1人のユーザーは0以上の投稿を持つ"
  users ||--o{ comments: "1人のユーザーは0以上のコメントを持つ"
  posts ||--o{ comments: "1つの投稿は0以上のコメントを持つ"

  users {
    bigint id PK
    string name "ユーザー名"
    timestamp created_at
    timestamp deleted_at
  }

  posts {
    bigint id PK
    references user FK
    string title "投稿タイトル"
    text content "投稿内容"
    timestamp created_at
    timestamp deleted_at
  }

  comments {
    bigint id PK
    references post FK
    references user FK
    text content "コメント内容"
    timestamp created_at
    timestamp deleted_at
  }

Githubに貼り付ける方法

コードブロックにmermaidを明示して貼り付けるとプルリク上で図が描画されます

```mermaid　
erDiagram
  users ||--o{ posts : "1人のユーザーは0以上の投稿を持つ"
  users ||--o{ comments: "1人のユーザーは0以上のコメントを持つ"
  posts ||--o{ comments: "1つの投稿は0以上のコメントを持つ"

  users {
    bigint id PK
    string name "ユーザー名"
    timestamp created_at
    timestamp deleted_at
  }

  posts {
    bigint id PK
    references user FK
    string title "投稿タイトル"
    text content "投稿内容"
    timestamp created_at
    timestamp deleted_at
  }

  comments {
    bigint id PK
    references post FK
    references user FK
    text content "コメント内容"
    timestamp created_at
    timestamp deleted_at
  }
```　

Notionに貼り付ける方法

コードブロックで記載してシンタックスハイライトにMermaidを指定するだけです

最後に

今回はER図をかけるツールについて紹介しました。

Mermaid記法ではER図以外にも、フローチャート・シーケンス図・クラス図・円グラフなど様々な図に対応しています。

少しのキャッチアップで気軽に図をかけるので、今後の開発で積極的に取り入れていきたいと思います。