【開発】【設計】Mermaid.jsチートシート - j-komatsu/myCheatSheet GitHub Wiki

Mermaid.js ユースケース チートシート

インデックス

  1. シーケンス図（Sequence Diagrams）
  2. クラス図（Class Diagrams）
  3. ユースケース図（Use Case Diagrams）
  4. フローチャート（Flowcharts）
  5. ガントチャート（Gantt Charts）
  6. ER図（Entity-Relationship Diagrams）
  7. カスタマイズと設定（Customizations and Settings）

詳細

1. シーケンス図（Sequence Diagrams）

コマンドとユースケース系

シーケンス図は、オブジェクト間のメッセージ交換を視覚化します。

シチュエーション

API通信やメッセージフローの可視化に最適です。

サンプル1（シンプルバージョン）

sequenceDiagram
    participant Alice
    participant Bob
    Alice ->> Bob: Hello Bob, how are you?
    Bob -->> Alice: I'm good, thanks!

サンプル2（システム構築を想定したバージョン）

sequenceDiagram
    participant User
    participant WS as Web Server
    participant DB as Database

    User ->> WS: Request Data
    WS ->> DB: Query Data
    DB -->> WS: Return Data
    WS -->> User: Display Data

2. クラス図（Class Diagrams）

コマンドとユースケース系

クラス図は、システム内のクラス構造を視覚化します。

シチュエーション

オブジェクト指向設計の説明に役立ちます。

サンプル1（シンプルバージョン）

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name
    Animal : +makeSound()
    Dog : +bark()
    Cat : +meow()

サンプル2（システム構築を想定したバージョン）

classDiagram
    Vehicle <|-- Car
    Vehicle <|-- Motorcycle
    Vehicle : +String brand
    Vehicle : +move()
    Car : +int numOfDoors
    Motorcycle : +boolean hasSidecar

3. ユースケース図（Use Case Diagrams）

コマンドとユースケース系

ユースケース図は、システムとアクターの相互作用を表現します。

シチュエーション

要求仕様やシステム機能の説明に便利です。

使えない理由

Mermaid.jsでは、ユースケース図を描画するための公式サポートがありません。
そのため、usecaseDiagramといった構文を使用するとエラーが発生します。

GitHubやその他のMermaid.js対応エディタでは、以下のようなエラーメッセージが表示されることがあります：

Unable to render rich display
No diagram type detected matching given configuration for text: usecaseDiagram

これは、Mermaid.jsがユースケース図の構文を認識しないためです。

代替案

1. フローチャートで代替

Mermaid.jsのフローチャート機能を使用して、ユースケース図に近い表現を行う方法です。

サンプルコード

graph TD
    User -->|uses| System
    Admin -->|manages| System

出力例

  • UserはSystemを利用する。
  • AdminはSystemを管理する。

これにより、基本的なユースケースの関係を視覚化できます。

2. PlantUMLを使用

ユースケース図が必要な場合、PlantUMLを使用する方法もあります。PlantUMLはユースケース図を公式にサポートしており、以下のような構文を使用して図を生成できます：

サンプルコード

@startuml
actor User
actor Admin
usecase "View Data" as UC1
usecase "Edit Data" as UC2

User --> UC1
Admin --> UC1
Admin --> UC2
@enduml

手順

  1. PlantUML対応ツールで図を作成し、画像としてエクスポートします。
  2. 生成した画像をMarkdownに埋め込んで使用します：
![ユースケース図](path/to/diagram.png)

推奨方法

  • 簡易な図で十分な場合: Mermaid.jsのフローチャートを使用。
  • 詳細なユースケース図が必要な場合: PlantUMLを使用して画像を生成。

これらの方法を目的に応じて使い分けると良いでしょう。

4. フローチャート（Flowcharts）

コマンドとユースケース系

フローチャートは、プロセスやアルゴリズムを視覚化します。

シチュエーション

業務フローやロジックの説明に最適です。

サンプル1（シンプルバージョン）

graph TD
    A[Start] --> B[Process]
    B --> C[End]

サンプル2（システム構築を想定したバージョン）

graph TD
    Start --> Input[User Input]
    Input --> Validate[Validate Input]
    Validate -->|Valid| Process[Process Data]
    Validate -->|Invalid| Error[Show Error]
    Process --> End[Finish]

5. ガントチャート（Gantt Charts）

コマンドとユースケース系

ガントチャートは、プロジェクトのスケジュールや進捗を視覚化します。

シチュエーション

プロジェクト管理やスケジュールの共有に便利です。

サンプル1（シンプルバージョン）

gantt
    dateFormat  YYYY-MM-DD
    title Project Timeline
    section Development
    Task 1       :done, 2025-01-01, 3d
    Task 2       :active, 2025-01-04, 5d
    Task 3       : 2025-01-09, 4d

サンプル2（システム構築を想定したバージョン）

gantt
    dateFormat  YYYY-MM-DD
    title Software Project Plan
    section Planning
    Requirements Gathering :done, 2025-01-01, 5d
    Design                :active, 2025-01-06, 10d
    section Implementation
    Development           : 2025-01-16, 20d
    Testing               : 2025-02-05, 10d
    section Deployment
    Deployment            : 2025-02-15, 5d

6. ER図（Entity-Relationship Diagrams）

コマンドとユースケース系

ER図は、データベースのエンティティとその関係を表現します。

シチュエーション

データベース設計やリレーションの把握に役立ちます。

サンプル1（シンプルバージョン）

erDiagram
    CUSTOMER {
        int id
        string name
        string email
    }
    ORDER {
        int id
        int customerId
        float total
    }
    CUSTOMER ||--o{ ORDER : places

サンプル2（システム構築を想定したバージョン）

erDiagram
    USER {
        int id
        string name
        string email
    }
    PRODUCT {
        int id
        string name
        float price
    }
    ORDER {
        int id
        int userId
        int productId
        int quantity
    }
    USER ||--o{ ORDER : places
    PRODUCT ||--o{ ORDER : contains

7. カスタマイズと設定（Customizations and Settings）

コマンドとユースケース系

Mermaid.jsでは、図のスタイルやテーマをカスタマイズできます。

シチュエーション

見た目を調整してドキュメントのデザインに合わせたい場合に有効です。

サンプル1（シンプルバージョン）

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#ffcc00', 'edgeLabelBackground':'#cccccc'}}}%%
graph TD
    A[Start] --> B[Process]
    B --> C[End]

サンプル2（システム構築を想定したバージョン）

%%{init: {'theme': 'dark', 'themeVariables': {'primaryColor': '#1f77b4', 'fontFamily': 'Arial'}}}%%
sequenceDiagram
    participant User
    participant Server
    User ->> Server: Request Data
    Server -->> User: Response Data