🧜‍♀️

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

アルダグラム Tech Blog2022/10/20に公開

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

アルダグラムはノンデスクワーカー向けプロジェクト管理アプリ「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図以外にも、フローチャート・シーケンス図・クラス図・円グラフなど様々な図に対応しています。

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

アルダグラム Tech Blog

株式会社アルダグラムのTech Blogです。 世界中のノンデスクワーク業界における現場の生産性アップを実現するプロジェクト管理アプリ「KANNA」を開発しています。 採用情報はこちら https://herp.careers/v1/aldagram0508/

Discussion

ログインするとコメントできます