Mermaid記法 完全チートシート

## 目次

1. [基本構文](#基本構文)
2. [フローチャート](#フローチャート)
3. [シーケンス図](#シーケンス図)
4. [クラス図](#クラス図)
5. [状態遷移図](#状態遷移図)
6. [ER図](#ER図)
7. [ユーザージャーニー図](#ユーザージャーニー図)
8. [ガントチャート](#ガントチャート)
9. [円グラフ](#円グラフ)
10. [Git図](#Git図)
11. [要件図](#要件図)
12. [C4図](#C4図)
13. [マインドマップ](#マインドマップ)
14. [タイムライン図](#タイムライン図)
15. [象限図](#象限図)
16. [サンキー図](#サンキー図)
17. [スタイリング](#スタイリング)
18. [コメント](#コメント)
19. [サブグラフ](#サブグラフ)

## 基本構文
Mermaidはテキストベースの図表作成ツールで、マークダウンに似た簡単な記法でさまざまな図表を作成できます。
Mermaidコードは常に `mermaid` 宣言で始まり、その後に図の種類を指定します。マークダウンでは次のように使用します：

```
graph TD
    A[開始] --> B[処理]
    B --> C[終了]
```

## フローチャート

### 基本的な方向設定

```
graph TD    // Top to Down（上から下）
graph BT    // Bottom to Top（下から上）
graph LR    // Left to Right（左から右）
graph RL    // Right to Left（右から左）
```

### ノードの形状

```
graph LR
    id1[四角形]
    id2(丸括弧付き)
    id3([角丸四角形])
    id4[[サブルーチン]]
    id5[(データベース)]
    id6((円形))
    id7>非対称]
    id8{ひし形}
    id9{{六角形}}
    id10[/平行四辺形/]
    id11[\逆平行四辺形\]
    id12[/台形\]
    id13[\逆台形/]
```

### 接続線の種類

```
graph LR
    A --> B    // 矢印
    C --- D    // 線
    E -.-> F   // 点線矢印
    G -.- H    // 点線
    I ==> J    // 太い矢印
    K === L    // 太い線
    M --テキスト--> N    // テキスト付き矢印
    O --テキスト--- P     // テキスト付き線
    Q ==テキスト==> R    // テキスト付き太い矢印
    S ==テキスト=== T    // テキスト付き太い線
    U -.テキスト.-> V    // テキスト付き点線矢印
```

### 複雑な接続

```
graph TD
    A --> B & C --> D       // 1対多
    E & F --> G             // 多対1
    H --> I --> J & K       // 連鎖と分岐
```

### サブグラフ

```
graph TB
    subgraph サブグラフ名
        a1 --> a2
    end
    subgraph サブグラフ2
        b1 --> b2
    end
    a1 --> b2
```

### クリック可能なリンク

```
graph LR
    A[リンク] --> B
    click A href "https://example.com" _blank
    click B callback "callbackFunction"
```

## シーケンス図

### 基本構文

```
sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: こんにちは Bob, 元気?
    B->>A: 元気だよ Alice!
```

### 矢印の種類

```
sequenceDiagram
    A->B: 実線（開いた矢印）
    A-->B: 点線（開いた矢印）
    A->>B: 実線（閉じた矢印）
    A-->>B: 点線（閉じた矢印）
    A-xB: 実線（X付き）
    A--xB: 点線（X付き）
```

### アクティベーション（活性化）

```
sequenceDiagram
    Alice->>+John: Hello John
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```

### ノート

```
sequenceDiagram
    participant J as John
    participant A as Alice
    note right of J: テキストノート
    note over A,J: 両者に関するノート
```

### ループ

```
sequenceDiagram
    Alice->John: Hello
    loop 毎分
        John-->Alice: 元気？
    end
```

### 代替パス

```
sequenceDiagram
    Alice->>Bob: Hello
    alt 正常ケース
        Bob->>Alice: Hello back
    else 異常ケース
        Bob->>Alice: Error
    end
```

### オプション

```
sequenceDiagram
    Alice->>Bob: Hello
    opt オプションのステップ
        Bob->>Alice: Hello back
    end
```

### 並行処理

```
sequenceDiagram
    par Alice to Bob
        Alice->>Bob: Hello
    and Alice to John
        Alice->>John: Hi
    end
```

## クラス図

### 基本構文

```
classDiagram
    class Animal {
        +String name
        +int age
        +makeSound() void
    }
```

### 関係性

```
classDiagram
    Animal <|-- Duck : 継承
    Animal <|-- Fish : 継承
    Animal <|-- Zebra : 継承
    Animal : +String name
    Animal : +int age
    Animal : +makeSound() void
    class Duck{
        +String beakColor
        +swim() void
        +quack() void
    }
    class Fish{
        -int sizeInFeet
        -canEat() bool
    }
    class Zebra{
        +bool is_wild
        +run() void
    }
```

### 関係性の種類

```
classDiagram
    classA <|-- classB : 継承
    classC *-- classD : コンポジション
    classE o-- classF : 集約
    classG <-- classH : 関連
    classI <.. classJ : 依存
    classK <|.. classL : 実装
    classM -- classN : リンク(実線)
    classO ..> classP : リンク(点線)
```

### 可視性

```
classDiagram
    class MyClass {
        +publicMethod()
        -privateMethod()
        #protectedMethod()
        ~packagePrivateMethod()
    }
```

### ジェネリック型

```
classDiagram
    class List~T~ {
        +add(T) bool
        +remove(T) bool
        +size() int
    }
```

## 状態遷移図

### 基本構文

```
stateDiagram-v2
    [*] --> 待機中
    待機中 --> 処理中 : 開始
    処理中 --> 完了 : 終了
    完了 --> [*]
```

### 遷移と説明

```
stateDiagram-v2
    [*] --> 待機中
    待機中 --> 処理中 : 開始ボタン押下
    処理中 --> 待機中 : キャンセル
    処理中 --> 完了 : 処理完了
    完了 --> [*]
```

### 複合状態

```
stateDiagram-v2
    [*] --> 起動中
    起動中 --> アイドル
    
    state アイドル {
        [*] --> 準備完了
        準備完了 --> 実行中 : 開始
        実行中 --> 準備完了 : 停止
    }
    
    アイドル --> [*] : シャットダウン
```

### フォーク

```
stateDiagram-v2
    state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State1
    fork_state --> State2
```

### 結合

```
stateDiagram-v2
    state join_state <<join>>
    State1 --> join_state
    State2 --> join_state
    join_state --> State3
```

### 選択

```
stateDiagram-v2
    state choice_state <<choice>>
    [*] --> choice_state
    choice_state --> 条件1 : if n < 0
    choice_state --> 条件2 : if n == 0
    choice_state --> 条件3 : if n > 0
```

### 注釈

```
stateDiagram-v2
    待機中 --> 処理中 : 開始ボタン押下
    note right of 処理中 : ここで処理が実行されます
    note left of 待機中 : システムは待機中です
```

## ER図

### 基本構文

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

### 関係性

```
erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string email
        string address
    }
    ORDER {
        int id
        date created_at
        float total_amount
    }
```

### 関係性の種類

```
erDiagram
    A ||--o{ B : "1対多"
    C }o--|| D : "多対1"
    E }|--|| F : "1対1"
    G }o--o{ H : "多対多"
    I ||--|| J : "1対1（実線）"
    K ||..|| L : "1対1（点線）"
    M }|..|| N : "1対1（点線、カーディナリティ）"
```

## ユーザージャーニー図

### 基本構文

```
journey
    title マイユーザージャーニー
    section 登録
      アプリを見つける: 5: Me
      サインアップ: 3: Me
      プロフィール入力: 1: Me
    section 使用
      タスク作成: 5: Me, Cat
      統計の確認: 4: Me
```

### 満足度レベル

```
journey
    title 満足度レベル
    section 例
      レベル 1: 1: Me
      レベル 2: 2: Me
      レベル 3: 3: Me
      レベル 4: 4: Me
      レベル 5: 5: Me
```

## ガントチャート

### 基本構文

```
gantt
    title プロジェクトスケジュール
    dateFormat  YYYY-MM-DD
    section 計画フェーズ
    要件定義           :a1, 2023-01-01, 7d
    設計               :a2, after a1, 10d
    section 開発フェーズ
    コーディング       :a3, after a2, 15d
    テスト             :a4, after a3, 5d
```

### タスクの依存関係

```
gantt
    title 依存関係の例
    dateFormat YYYY-MM-DD
    タスクA :a, 2023-01-01, 3d
    タスクB :b, after a, 2d
    タスクC :c, after b, 1d
```

### マイルストーン

```
gantt
    title マイルストーンの例
    dateFormat YYYY-MM-DD
    section マイルストーン
    計画完了      :milestone, m1, 2023-01-15, 0d
    開発完了      :milestone, m2, 2023-02-15, 0d
    プロジェクト完了:milestone, m3, 2023-03-01, 0d
```

### セクション

```
gantt
    title セクション例
    dateFormat YYYY-MM-DD
    section 計画
    タスクA      :a1, 2023-01-01, 4d
    タスクB      :a2, after a1, 3d
    section 開発
    タスクC      :a3, after a2, 5d
    タスクD      :a4, after a3, 6d
    section テスト
    タスクE      :a5, after a4, 4d
```

### 除外日

```
gantt
    title 除外日の例
    dateFormat YYYY-MM-DD
    excludes weekends
    タスクA :a, 2023-01-01, 5d
    タスクB :b, after a, 5d
```

## 円グラフ

### 基本構文

```
pie
    title 言語使用率
    "JavaScript" : 40
    "Python" : 30
    "Java" : 20
    "C++" : 10
```

### パーセント表示

```
pie showData
    title 予算配分
    "開発" : 45
    "マーケティング" : 25
    "運用" : 20
    "その他" : 10
```

## Git図

### 基本構文

```
gitGraph
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
```

### コミットオプション

```
gitGraph
    commit id: "1"
    commit id: "2" tag: "v1.0.0"
    branch develop
    checkout develop
    commit id: "3" type: HIGHLIGHT
    checkout main
    commit id: "4" type: REVERSE
    merge develop
```

### ブランチ操作

```
gitGraph
    commit
    branch feature
    checkout feature
    commit
    checkout main
    commit
    merge feature
    branch bugfix
    checkout bugfix
    commit
    checkout main
    commit
    merge bugfix
```

## 要件図

### 基本構文

```
requirementDiagram
    requirement test_req {
        id: 1
        text: 必要条件
        risk: high
        verifyMethod: test
    }

    element test_entity {
        type: 例
    }

    test_entity - satisfies -> test_req
```

### 関係性

```
requirementDiagram
    requirement req1 {
        id: 1
        text: システム要件
    }
    element elem1 {
        type: システム
    }
    elem1 - satisfies -> req1
    elem1 - contains -> elem2
    elem2 - derives -> req2
```

## C4図

### コンテキスト図

```
C4Context
    title システムコンテキスト図
    Person(customer, "顧客", "システムを使用するユーザー")
    System(system, "システム", "主要システム")
    System_Ext(mail, "メールシステム", "メール通知")
    
    Rel(customer, system, "使用する")
    Rel(system, mail, "メール送信")
```

### コンテナ図

```
C4Container
    title コンテナ図
    Person(customer, "顧客", "システムを使用するユーザー")
    Container(web, "Webアプリケーション", "提供するWebインターフェース")
    Container(api, "APIサーバー", "データ処理")
    ContainerDb(db, "データベース", "データ保存")
    
    Rel(customer, web, "アクセス")
    Rel(web, api, "API呼び出し")
    Rel(api, db, "読み書き")
```

## マインドマップ

### 基本構文

```
mindmap
    root((マインドマップ))
        開発
            フロントエンド
                HTML
                CSS
                JavaScript
            バックエンド
                Java
                Python
                Node.js
        デザイン
            UI
            UX
```

### 形状

```
mindmap
    root[四角形]
        [角丸四角形]
        (丸括弧)
        ((円))
        ))雲((
        {中括弧}
```

## タイムライン図

### 基本構文

```
timeline
    title タイムライン例
    section 2023年
        1月 : 企画立案
        2月 : 要件定義
        3月 : 設計
    section 2024年
        1月 : 開発
        3月 : テスト
        5月 : リリース
```

## 象限図

### 基本構文

```
quadrantChart
    title 優先度マトリックス
    x-axis 難易度 → 
    y-axis 重要度 →
    quadrant-1 重要・簡単
    quadrant-2 重要・難しい
    quadrant-3 あまり重要でない・簡単
    quadrant-4 あまり重要でない・難しい
    タスクA: [0.3, 0.8]
    タスクB: [0.6, 0.4]
    タスクC: [0.1, 0.1]
    タスクD: [0.9, 0.7]
```

## サンキー図

### 基本構文

```
sankey-beta
    アクセス元,Webサイト,100
    Webサイト,登録ページ,40
    Webサイト,情報ページ,60
    登録ページ,登録完了,30
    登録ページ,離脱,10
    情報ページ,登録ページ,30
    情報ページ,離脱,30
```

## スタイリング

### テーマ設定

```
%%{init: {'theme': 'forest'}}%%
graph LR
    A[開始] --> B[終了]
```

### 利用可能なテーマ
- default
- forest
- dark
- neutral
- base

### カスタムスタイル

```
graph LR
    A[開始] --> B[終了]
    
    style A fill:#f9f,stroke:#333,stroke-width:2px
    style B fill:#bbf,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5
```

### クラススタイル

```
graph LR
    A[開始]:::greenClass --> B[終了]:::redClass
    
    classDef greenClass fill:#9f6,stroke:#333,stroke-width:2px
    classDef redClass fill:#f96,stroke:#333,stroke-width:2px
```

## コメント

```
%% これはコメントです
graph LR
    A --> B
```

## サブグラフ

### 基本構文

```
graph TB
    subgraph サブグラフ1
        a1 --> a2
    end
    subgraph サブグラフ2
        b1 --> b2
    end
    a1 --> b2
```

### 方向設定

```
graph LR
    subgraph TOP
        direction TB
        A --> B
        B --> C
    end
    subgraph BOTTOM
        direction TB
        X --> Y
        Y --> Z
    end
    A --> Z
```

## 実用的なTips

1. **VSCode拡張機能**: Mermaid Previewを使うと編集しながらプレビューできます
2. **オンラインエディタ**: [Mermaid Live Editor](https://mermaid.live/)で簡単に図を作成できます
3. **GitHub対応**: GitHub MarkdownはMermaidをネイティブサポートしています
4. **実装時の注意点**: 図が複雑になりすぎないよう、適切に分割しましょう
5. **バージョン確認**: Mermaidは頻繁に更新されるため、使用する環境のバージョンを確認しましょう

## 参考リンク

- [Mermaid 公式ドキュメント](https://mermaid.js.org/intro/)
- [Mermaid Live Editor](https://mermaid.live/)
- [GitHub Mermaid サポート](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)