kanachi-blog

notionでの公開記事をastro-notion-blogを使って公開するよ
2024-02-18
Docs

mermaidでのER図・シーケンス図の書き方

📖
目次
はじめに ER図の作成 ER図の例 シーケンス図の作成 シーケンス図の例
はじめに

開発プロジェクトにおいて、システムの設計を視覚的に表現することは、チームメンバーやステークホルダー間でのコミュニケーションを促進し、共通理解を深める上で非常に有効です。このブログでは、Mermaidを使用してER図とシーケンス図を作成する方法について解説します。

ER図の作成

ER図は、データベースの構造を視覚化するために使用されます。エンティティ（データの集まり）とその関係を図式化することで、データモデルの理解を助けます。

ER図の例

以下は、フィットネスアプリのデータモデルを表すER図の例です。ユーザー、種目のデフォルト設定設定、セット、実行された種目、履歴などのエンティティが含まれています。 

erDiagram

user ||--|| exercise_template_setting : ""
user ||--o{ set : ""
user ||--o{ history : ""
set ||--|{ set_exercises : ""
set_exercises ||--|{ exercise : ""
exercise ||--o{ performed_exercise : ""
history ||--|{ performed_exercise : ""

user {
  bigint id "ID"
  varchar email "メールアドレス"
  varchar password "パスワード"
}

exercise_template_setting {
  bigint id "ID"
  bigint user_id "ユーザーID"
  varchar weight "強度"
  int rep_num "回数"
  int set_num "セット数"
  varchar interval "インターバル"
}

set {
  bigint id "ID"
  bigint user_id "ユーザーID"
  varchar set_name "セット名"
}

set_exercises {
  bigint id "ID"
  bigint set_id "セットID"
  bigint exercise_id "種目ID"
}

exercise {
  bigint id "ID"
  bigint user_id "ユーザーID"
  varchar exercise_name "種目名"
  varchar weight "強度"
  int rep_num "回数"
  int set_num "セット数"
  varchar interval "インターバル"
}

performed_exercise {
  bigint id "ID"
  bigint exercise_id "種目ID"
  varchar weight "強度"
  int rep_num "回数"
  int set_num "セット数"
  varchar interval "インターバル"
}

history {
  bigint id "ID"
  bigint user_id "ユーザーID"
  date date "日付"
  time training_duration "トレーニング時間"
}

このER図では、ユーザーは種目のデフォルト設定、セット、トレーニングの履歴を持つことができます。また、セットは複数のエクササイズから構成され、実行された種目はトレーニングの履歴に記録されます。

シーケンス図の作成

シーケンス図は、オブジェクト間のインタラクション（メッセージのやり取り）を時系列に沿って表現するUML図です。システムの動作を理解するのに役立ちます。

シーケンス図の例

以下は、ユーザーが種目を作成するプロセスを示すシーケンス図の簡単な例です。 

sequenceDiagram

participant U as User
participant F as Frontend
participant B as Backend
loop 種目作成処理
    U->>F: 種目作成リクエスト
    F->>B: 種目作成APIをコール
    B->>B: 種目データを検証
    alt 種目データが有効
        B->>F: 種目作成成功
        F->>U: 種目作成成功を表示
    else 種目データが無効
        B->>F: 種目作成失敗
        F->>U: 種目作成失敗を表示
    end
end

このシーケンス図では、ユーザーがフロントエンドを介してセット作成のリクエストを送り、フロントエンドがそのリクエストをバックエンドに転送します。バックエンドはセットデータを検証し、成功メッセージをフロントエンド経由でユーザーに返します。

Docs