🎨

MermaidでER図とユースケース図を書いてみた

2023/06/28に公開

最近、設計ドキュメンテーションを書く際にMermaidに出会いました。以前はPlantUMLを使用していましたが、NotionやZennなどではMermaidを使うことで自動的に図が生成されるという利点があります。それにより、私の設計プロセスが大きく改善されました。それでは、Mermaidの使用方法と私が実際に作成した図についてシェアします。

ユースケース図

ユースケース図はシステムの機能を視覚的に表現するのに役立ちます。ただし、Mermaidは厳密にはユースケース図を描く機能は提供していません。しかし、フローチャートの機能を使えばユースケース図に近いものを作成することが可能です。

以下に、「物件管理」システムのユースケース図をMermaidで作成した例を示します：

コードは

graph TB
    subgraph "物件管理"
        User((ユーザー))
        subgraph "物件情報"
            AddPropertyInfo[登録]
            EditPropertyInfo[編集]
            ViewPropertyDetails[閲覧]
        end
        subgraph "物件履歴"
            ViewPropertyHistory[閲覧]
        end
    end
    User --> AddPropertyInfo
    User --> EditPropertyInfo
    User --> ViewPropertyDetails
    User --> ViewPropertyHistory

以下に、このコードの各部分の解説をします。

graph TB: これはフローチャートを作成することを示しています。TBは上から下への流れを示す指定子です。
subgraph "物件管理":サブグラフ（物件管理）を作成します。この部分はフローチャートのセクションを区別するために使用されます。
AddPropertyInfo[登録]:丸括弧はアクター（この場合はユーザー）を表します。
User --> AddPropertyInfo:この矢印はユーザーが物件情報を追加するアクションを示します。

ER図：

次に、ER図（エンティティ関連図）の作成方法を見てみましょう。ER図はデータベースの構造を視覚化するのに役立ちます。

以下は、ユーザー、物件（PROPERTY）エンティティで構成されるER図の一例です：

erDiagram
    USER ||--o{ PROPERTY : owns
    PROPERTY ||--o{ HISTORY : has
    USER {
        id int
        name string
        email string
        password string
    }
    PROPERTY {
        id int
        user_id int
        name string
        location string
        size int
    }

ここで、このコードの各部分について説明します。

erDiagram:これはER図を作成することを示します。
USER ||--o{ PROPERTY : owns:これはユーザーが複数の物件を所有しているという関係を示します。符号の並びはカーディナリティ（関連性の種類）を示しています。
USER { id int name string email string password string }:これはユーザーエンティティの属性を定義しています。

Mermaidは学習曲線が少なく、シンプルで直感的な図を描くのに役立つ素晴らしいツールです。設計やドキュメンテーション作成の際にはぜひ利用してみてください。

ユースケース図

ER図：

Discussion