🦓

[VSCode]MermaidでER図を作ってみた

2023/06/21に公開

VS Code

Mermaid

tech

はじめに

Mermaidを使ってER図を書いていきます。

Mermaidとは

Mermaidは、テキストベースの記法を使用してグラフや図を作成するためのオープンソースのライブラリです。Mermaidを使用すると、シーケンス図、フローチャート、ガントチャート、Entity Relationship Diagram（ERD）など、さまざまな種類の図を簡単に作成できます。

MermaidはJavaScriptで実装されており、WebブラウザやNode.js上で動作します。また、Mermaidのプラグインやエディタ拡張も利用できます。
https://github.com/mermaid-js/mermaid
https://mermaid.js.org/#/

Mermaidの導入

Mermaidの基本的な使い方は公式サイトから参考にしてみてください。
方法①：スクリプトタグを追加する

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

# 初期化
<script>
mermaid.initialize({ startOnLoad: true });
</script>

方法②：パッケージとしてインストールする

npm install mermaid

# インポート
const mermaid = require('mermaid');

const diagramCode = `
graph LR
    A-->B
    B-->C
    C-->D
    D-->A
`;

const svg = mermaid.render('diagramId', diagramCode);
console.log(svg);

ライブエディター

Mermaidには公式のライブエディターがあります。
入力したMermaidコードは、右側のプレビューエリアでリアルタイムに描画されます。図が表示されます。
エディターの上部には、描画結果をSVG形式やPNG形式でエクスポートするためのオプションがあります。必要に応じて、図をダウンロードすることもできます。
ドキュメントを参考しながら試してみてください

VSCode

今回ではVSCode上に使いたいためMarkdown Preview Mermaid Supportの拡張機能をインストールし、VSCodeのマークダウンプレビュー機能をを使ってER図を作成していきます。

新しいファイルを作成し、拡張子を.mmdのファイルとして保存します。
拡張機能のMermaidの記述方法を参考しファイルにサンプルコードを入力していきます。
エディターの右上にあるプレビューモードをクリックし、右にMermaidコードが描画された図が表示されます。

準備ができましたので、ER図を書いていきます。
基本の書き方は以下となります。

テーブル

この例では、CustomerとOrder,Itemの間の関連を描画しています。

---
title: Order example
---
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

生成されたER図

アソシエーション

CustomerとOrderの関係性はなしもしくは一対多なので、
一人の客が複数のオーダーを持つことができます。
一つのオーダーは一人の客に紐づいています。

||--o{

||:ひとりの顧客
--：関係性があることを示す
o{：ゼロか対多

OrderとItemの関係性は一対多です。
一つのオーダーに複数の商品があります。
一つの商品は一つのオーダーに関連付けされます。

||--|{

||:一つのオーダー
--：関係性があることを示す
|{：一か多

左	右	意味
`｜o`	`o｜`	ゼロか一対一
`｜｜`	`｜｜`	一か一対一
`}o`	`o{`	ゼロか一対多
`}｜`	`｜{`	一対多か多対多

こちらはER図のドキュメントになります。

CRUDアプリのER図

CRUD機能を持つアプリのテーブル設計を考えていきます。

機能概要

ユーザー登録
- ユーザー名
- メールアドレス
- プロフィール画像
- 自己紹介
- パスワード
- 投稿
投稿できる
- 投稿に画像を一枚添付することができる
コメント
- 一つの投稿に対してコメントを複数投稿できる
いいね機能
- 一つの投稿対していいねを一回押すことができる

ユーザー登録（User）

ユーザー登録のコードを入力していきます

erDiagram
USER ||--o{ POST : has
USER {
    index  id PK
    string name
    string email
    string avatar
    string description
    string password_digest
    datetime created_at
    datetime updated_at
}

投稿（Post）

投稿者の情報をどのように管理すれば良いでしょうか。
関連するテーブルの該当レコードのidを外部キーとして持つです。
ユーザーに関する情報はusersテーブルだけで管理することができ、ユーザー情報を更新する際も該当のレコードを一つ修正するだけで済みます。
ユーザーと投稿の関係はなしもしくは一対多なので、投稿側にユーザーのidを保存します。

POST {
    index id PK
    index user_id FK
    string title
    string body
    string image
    datetime created_at
    datetime updated_at
}

コメント(Comment)

一つの投稿に対してゼロ、一、もしくは複数のコメントを持つとこができますので、投稿とコメントの関係性はゼロもしくは一対多です。
ユーザとコメントの関係性は全く同じです。
user_idを外部キーとしてコメントとコメントを投稿したユーザを紐つけることができます。
コメントと投稿も同じくpost_idを外部キーとしてコメントと投稿を紐つけることができます。

USER ||--o{ COMMENT : has
POST ||--o{ COMMENT : has
COMMENT {
    index id PK
    index user_id FK
    index post_id FK
    string body
    datetime created_at
    datetime updated_at
}

いいね機能(Like)

いいねテーブルにどのユーザがどの投稿に対して「いいね！」を押したのかを記録していきます。
一人のユーザーは複数の投稿にいいねを押すことができます。
また一つの投稿に対して、複数のユーザーからいいねを押されることがあります。
このようにいいねテーブルがユーザと投稿のどちらのテーブルからも一対多の情報を持つ場合は多対多の関係になります。
多対多の関係を表現するには、中間テーブルを使います。
中間テーブルではそれぞれのテーブルへの外部キーを持たせます。今回の例で言うとuser_idとpost_idになります。

ユーザー（idが1）が3つの投稿（idがそれぞれ1,2,3）にいいねを押した場合

user_id	post_id
1	1
1	2
1	3

投稿（idが3）に対し3人のユーザー（idがそれぞれ4,5,6）がいいねを押した場合

user_id	post_id
4	3
5	3
6	3

USER ||--o{ LIKE : has
POST ||--o{ LIKE : has
LIKE {
    index id PK
    index user_id FK
    index post_id FK
    datetime created_at
    datetime updated_at
}

最終的なテーブル設計は上のようになったかと思います。

終わりに

初めてMermaidを使ってみました。
Mermaidの記法は直感的で読みやすく、プレーンテキストで記述することができ、素早く結果を確認できるところは便利です。
これからも使い続けたいと思います。