Mac上のVSCodeでMermaid.jsが書けるように環境を整えてからER図を書く

概要

みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。

今回は、新たにER図を作成する際に、Mermaid.js の書き心地や、見た目が良さそうだったので、VSCode上で書いたりプレビューできるようにしてからER図を書いてみたので、記事にしようと思います。

Mermaid

公式サイト

mermaid.js.org

mermaid-cli インストール

例によって、Homebrewで入れましょう。

brew install mermaid-cli

VSCode 拡張機能インストール

以下2つの機能を使用しています。

marketplace.visualstudio.com

marketplace.visualstudio.com

ER図作成

sample.mmd みたいな感じでファイルを作成してから、以下のように書きます。

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

右クリックして、Mermaid:Preview diagramをクリックします。

こんな感じで表示されます。

実際には、以下のような感じで使っています。

erDiagram
    customer {
        int id PK
        string name
        string number
        string address
    }

    order {
        int id PK
        int customer_id FK "customer"
        string delivery_address
    }
    customer ||--o{ order : ""

    item {
        int id PK
        int order_id FK "order"
        string product_code
        int quantity
        float price_per_unit
    }
    order ||--|{ item : ""

まず、PK、FKを書くことで、それぞれのカラムの役割を明確に示します。

FKの横には外部キーの先を書いています。外部キー名がきちんと外部キー先のテーブル名を含むように命名されていればいいのですが、そうでないテーブルがあったりすると困るので、コメントで入れています。

あとは、リレーションを定義する際に、上からそのまま持ってくればいいだけなので、便利という点もあります。

画像の生成

右クリックして、Mermaid:Generate imageをクリックすると、画像を生成できます。

画像出力形式はここから変更してください。

生成した図

まとめ

やはりMermaidなどで自動生成した方が、例えばmysqlworkbenchなどで手作業で図の位置などを調整するよりは遥かに利便性が高いなと思いました。今後もMermaidを活用していきたいと思います。