【2026年版】Mermaid記法 完全ガイド - 図解でわかるダイアグラム作成

【2026年版】Mermaid記法 完全ガイド - 図解でわかるダイアグラム作成¶

GitHubやNotionでドキュメントを書いていて「図を入れたいけど画像作成が面倒…」と思ったことはありませんか？Mermaidなら、コードを書くだけで美しい図が自動生成されます。

この記事で分かること¶

• Mermaidの基本構文と10種類のダイアグラム
• 開発現場でよく使うパターンとテンプレート
• ツール別（GitHub/Notion/VS Code）の使い方

どの図を使う？早見表¶

やりたいことから最適なダイアグラムを見つけましょう。

基本構文¶

すべてのMermaidダイアグラムは、ダイアグラムタイプの宣言から始まる。

```mermaid
[ダイアグラムタイプ]
    [ダイアグラムの内容]
```

ダイアグラムタイプ一覧¶

1. フローチャート (flowchart)¶

こんな時に使う
- システムの処理フローを説明したい
- 条件分岐のあるロジックを可視化したい
- アーキテクチャ構成図を作りたい

基本構文¶

flowchart [方向]
    ノードID[ラベル] --> ノードID2[ラベル2]

方向の指定¶

ノードの形状¶

記号と形状の対応表

コード

```mermaid
flowchart LR
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G>Flag]
    H{Diamond}
    I{{Hexagon}}
    J[/Parallelogram/]
    K[\Parallelogram Alt\]
    L[/Trapezoid\]
    M[\Trapezoid Alt/]
```

プレビュー

矢印の種類¶

記号と線種の対応表

コード

```mermaid
flowchart LR
    A --> B
    C --- D
    E -.- F
    G -.-> H
    I ==> J
    K -- text --> L
    M -->|text| N
```

プレビュー

サブグラフ¶

コード

```mermaid
flowchart TB
    subgraph Group1
        A --> B
    end
    subgraph Group2
        C --> D
    end
    B --> C
```

プレビュー

例: システム構成図¶

コード

```mermaid
flowchart TB
    subgraph Frontend
        Web[Webアプリ]
        iOS[iOSアプリ]
    end

    subgraph Backend
        API[APIサーバー]
        Worker[バックグラウンドワーカー]
    end

    subgraph Database
        DB[(PostgreSQL)]
        Cache[(Redis)]
    end

    Web --> API
    iOS --> API
    API --> DB
    API --> Cache
    Worker --> DB
```

プレビュー

2. シーケンス図 (sequenceDiagram)¶

こんな時に使う
- API間の通信順序を説明したい
- ログイン/認証フローをドキュメント化したい
- マイクロサービス間のやり取りを可視化したい

基本構文¶

コード

```mermaid
sequenceDiagram
    参加者A->>参加者B: メッセージ
    参加者B-->>参加者A: 応答
```

プレビュー

参加者の定義¶

コード

```mermaid
sequenceDiagram
    participant A as ユーザー
    participant B as サーバー
    actor C as 管理者
```

プレビュー

矢印の種類¶

典型的な使い分け
- リクエスト送信: ->> （実線矢印）
- レスポンス返却: -->> （点線矢印）
- エラー発生: -x または --x

アクティベーション¶

コード（簡略記法）

```mermaid
sequenceDiagram
    participant A as Client
    participant B as Server

    A->>+B: リクエスト
    B-->>-A: レスポンス
```

プレビュー

コード（明示的記法）

```mermaid
sequenceDiagram
    A->>B: リクエスト
    activate B
    B-->>A: レスポンス
    deactivate B
```

プレビュー

ループ・条件分岐¶

コード

```mermaid
sequenceDiagram
    participant U as User
    participant S as Server

    loop 毎秒
        U->>S: ポーリング
    end

    alt 成功
        S-->>U: データ返却
    else 失敗
        S-->>U: エラー返却
    end

    opt オプション処理
        U->>S: 追加リクエスト
    end
```

プレビュー

ノート¶

コード

```mermaid
sequenceDiagram
    A->>B: メッセージ
    Note right of B: 右側にノート
    Note left of A: 左側にノート
    Note over A,B: 両者にまたがるノート
```

プレビュー

例: API認証フロー¶

コード

```mermaid
sequenceDiagram
    participant C as Client
    participant A as Auth Server
    participant R as Resource Server

    C->>A: ログインリクエスト
    activate A
    A-->>C: アクセストークン発行
    deactivate A

    C->>R: APIリクエスト + トークン
    activate R
    R->>A: トークン検証
    A-->>R: 検証結果
    alt トークン有効
        R-->>C: データ返却
    else トークン無効
        R-->>C: 401 Unauthorized
    end
    deactivate R
```

プレビュー

3. クラス図 (classDiagram)¶

こんな時に使う
- オブジェクト指向設計を表現したい
- ドメインモデルをドキュメント化したい
- クラス間の継承・関連を可視化したい

基本構文¶

可視性¶

関係性¶

記号と意味の対応表

コード例

多重度¶

例: ドメインモデル¶

コード

```mermaid
classDiagram
    class User {
        +id: UUID
        +email: String
        +name: String
        +createPost(): Post
    }

    class Post {
        +id: UUID
        +title: String
        +content: String
        +createdAt: DateTime
        +publish(): void
    }

    class Comment {
        +id: UUID
        +body: String
        +createdAt: DateTime
    }

    User "1" --> "*" Post : creates
    User "1" --> "*" Comment : writes
    Post "1" --> "*" Comment : has
```

プレビュー

4. 状態遷移図 (stateDiagram-v2)¶

こんな時に使う
- 注文ステータスなど状態の変化を表現したい
- ユーザーのアクティブ/非アクティブ状態を管理したい
- 有限状態マシンを設計したい

基本構文¶

特殊記号

コード例

状態の説明¶

複合状態¶

分岐・フォーク¶

特殊ノードの種類

コード例

例: 注文ステータス¶

コード

```mermaid
stateDiagram-v2
    [*] --> Pending : Create

    Pending --> Confirmed : Confirm
    Pending --> Cancelled : Cancel

    Confirmed --> Processing : Process
    Confirmed --> Cancelled : Cancel

    Processing --> Shipped : Ship

    Shipped --> Delivered : Deliver
    Shipped --> Returned : Return

    Delivered --> [*]
    Cancelled --> [*]
    Returned --> [*]
```

プレビュー

5. ER図 (erDiagram)¶

こんな時に使う
- データベース設計をドキュメント化したい
- テーブル間のリレーションを可視化したい
- API仕様書でデータ構造を説明したい

基本構文¶

コード

```mermaid
erDiagram
    ENTITY1 ||--o{ ENTITY2 : relationship
```

プレビュー

カーディナリティ（関係性の記号）¶

端点の記号と意味

よく使う組み合わせ

記号の構造

A ||--o{ B : relationship
  ^^  ^^
  │   └─ B側の端点（o{ = 0以上）
  └───── A側の端点（|| = 必ず1）

属性の定義¶

コード

```mermaid
erDiagram
    USER {
        uuid id PK
        string email UK
        string name
        datetime created_at
    }
```

プレビュー

例: ブログシステム¶

コード

```mermaid
erDiagram
    USER ||--o{ POST : creates
    USER ||--o{ COMMENT : writes
    POST ||--o{ COMMENT : has
    POST }o--|| CATEGORY : belongs_to

    USER {
        uuid id PK
        string email UK
        string name
        datetime created_at
    }

    POST {
        uuid id PK
        uuid user_id FK
        uuid category_id FK
        string title
        text content
        boolean is_published
        datetime created_at
    }

    COMMENT {
        uuid id PK
        uuid user_id FK
        uuid post_id FK
        text body
        datetime created_at
    }

    CATEGORY {
        uuid id PK
        string name UK
        string slug UK
    }
```

プレビュー

6. ガントチャート (gantt)¶

こんな時に使う
- プロジェクトのスケジュールを共有したい
- タスクの依存関係を可視化したい
- 進捗状況をドキュメントに残したい

基本構文¶

タスクの状態¶

コード

```mermaid
gantt
    Task1 :done, t1, 2024-01-01, 10d
    Task2 :active, t2, after t1, 10d
    Task3 :crit, t3, after t2, 10d
    Task4 :t4, after t3, 10d
```

プレビュー

例: 開発スケジュール¶

コード

```mermaid
gantt
    title 機能開発スケジュール
    dateFormat YYYY-MM-DD

    section 設計
    要件定義    :done, req, 2024-01-01, 7d
    基本設計    :done, design, after req, 5d
    詳細設計    :active, detail, after design, 5d

    section 開発
    バックエンド :crit, backend, after detail, 14d
    フロントエンド :frontend, after detail, 14d

    section テスト
    単体テスト  :after backend, 5d
    結合テスト  :after frontend, 5d

    section リリース
    デプロイ    :milestone, after frontend, 0d
```

プレビュー

7. 円グラフ (pie)¶

こんな時に使う
- アンケート結果の割合を表示したい
- リソース配分を可視化したい
- シンプルな統計データを共有したい

基本構文¶

コード

```mermaid
pie
    title Title
    "Label1" : 40
    "Label2" : 35
    "Label3" : 25
```

プレビュー

例¶

コード

```mermaid
pie showData
    title Browser Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 8
    "Edge" : 5
    "Other" : 3
```

プレビュー

8. ユーザージャーニー (journey)¶

こんな時に使う
- ユーザー体験の満足度を可視化したい
- カスタマージャーニーをドキュメント化したい
- サービス改善のペインポイントを特定したい

基本構文¶

journey
    title Title
    section SectionName
        TaskName: Score: Actor1, Actor2

スコアは1〜5（1が最低、5が最高）

例: 購入体験¶

コード

```mermaid
journey
    title Shopping Journey
    section Discovery
        See ad: 3: Customer
        Visit site: 4: Customer
    section Consideration
        Browse products: 5: Customer
        Read reviews: 4: Customer
        Add to cart: 5: Customer
    section Purchase
        Checkout: 3: Customer
        Receive email: 5: Customer, System
    section Delivery
        Shipping notice: 4: Customer, Carrier
        Receive item: 5: Customer
```

プレビュー

9. Gitグラフ (gitGraph)¶

こんな時に使う
- チームのブランチ戦略を説明したい
- Git操作の手順をドキュメント化したい
- 複雑なマージの流れを可視化したい

基本構文¶

コード

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

プレビュー

コミットオプション¶

コード

```mermaid
gitGraph
    commit id: "Initial"
    commit id: "Add feature" tag: "v1.0.0"
    branch feature
    commit id: "WIP"
    checkout main
    merge feature id: "Merge feature"
    commit type: HIGHLIGHT id: "Important"
```

プレビュー

例: Git Flow¶

コード

```mermaid
gitGraph
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Add base structure"

    branch feature/auth
    commit id: "Add login"
    commit id: "Add logout"
    checkout develop
    merge feature/auth id: "Merge auth"

    branch feature/api
    commit id: "Add API endpoints"
    checkout develop
    merge feature/api id: "Merge API"

    checkout main
    merge develop id: "Release v1.0" tag: "v1.0.0"
```

プレビュー

10. マインドマップ (mindmap)¶

こんな時に使う
- ブレインストーミングの結果を整理したい
- 技術スタックを一覧化したい
- 階層的な情報を可視化したい

基本構文¶

ノード形状¶

例¶

実務テンプレート集¶

開発現場でそのまま使えるテンプレートを紹介します。

API設計書用シーケンス図¶

REST APIの典型的なCRUD操作を表現するテンプレートです。

コード

```mermaid
sequenceDiagram
    participant Client
    participant API as REST API
    participant Auth as 認証
    participant DB as Database

    %% 認証付きAPIリクエスト
    Client->>+API: POST /api/resources
    API->>Auth: トークン検証
    Auth-->>API: OK

    API->>+DB: INSERT
    DB-->>-API: Created
    API-->>-Client: 201 Created

    %% エラーケース
    Client->>+API: GET /api/resources/999
    API->>+DB: SELECT
    DB-->>-API: Not Found
    API-->>-Client: 404 Not Found
```

プレビュー

マイクロサービス構成図¶

複数サービスの連携を表現するテンプレートです。

コード

```mermaid
flowchart TB
    subgraph Client
        Web[Web App]
        Mobile[Mobile App]
    end

    subgraph Gateway
        LB[Load Balancer]
        GW[API Gateway]
    end

    subgraph Services
        Auth[Auth Service]
        User[User Service]
        Order[Order Service]
        Payment[Payment Service]
    end

    subgraph Data
        AuthDB[(Auth DB)]
        UserDB[(User DB)]
        OrderDB[(Order DB)]
        MQ[[Message Queue]]
    end

    Web --> LB
    Mobile --> LB
    LB --> GW

    GW --> Auth
    GW --> User
    GW --> Order

    Auth --> AuthDB
    User --> UserDB
    Order --> OrderDB
    Order --> MQ
    MQ --> Payment
```

プレビュー

OAuth 2.0 認証フロー¶

Authorization Code Flowを表現するテンプレートです。

コード

```mermaid
sequenceDiagram
    participant User
    participant App as Client App
    participant Auth as Authorization Server
    participant API as Resource Server

    User->>App: 1. ログインボタンクリック
    App->>Auth: 2. 認可リクエスト（client_id, redirect_uri, scope）
    Auth->>User: 3. ログイン画面表示
    User->>Auth: 4. 認証情報入力
    Auth->>App: 5. 認可コード返却（redirect）

    App->>Auth: 6. トークンリクエスト（code, client_secret）
    Auth->>App: 7. アクセストークン + リフレッシュトークン

    App->>API: 8. APIリクエスト（Bearer token）
    API->>App: 9. リソース返却
    App->>User: 10. データ表示
```

プレビュー

スタイリング¶

クラスの定義¶

インラインスタイル¶

コメント¶

よくある質問（FAQ）¶

Q. GitHubで図が表示されない¶

原因と対処法

1. コードブロックの記法が間違っている
   - ❌ ~~~mermaid（チルダ）
   - ✅ ```mermaid（バッククォート）

2. 対応していない機能を使っている
   - GitHubのMermaidは最新版より遅れていることがある
   - mindmapなど新しい図は非対応の場合あり

3. 構文エラーがある
   - Mermaid Live Editor でエラーを確認

Q. Notionで使うには？¶

Notionは現時点でMermaidをネイティブサポートしていません。代替手段：

1. Mermaid Live Editorで画像としてエクスポート → Notionに貼り付け
2. Notion Chartsなどのサードパーティ連携を利用

Q. VS Codeでリアルタイムプレビューするには？¶

以下の拡張機能をインストール：

• Markdown Preview Mermaid Support（おすすめ）
• Mermaid Markdown Syntax Highlighting

設定後、Cmd/Ctrl + Shift + V でMarkdownプレビューを開くと図が表示されます。

Q. 日本語が文字化けする¶

原因と対処法

1. ファイルのエンコーディングを確認
   - UTF-8で保存されているか確認

2. フォントの問題
   - Mermaidの設定でフォントを指定可能：
   %%{init: {'theme': 'default', 'themeVariables': { 'fontFamily': 'sans-serif'}}}%%

Q. 図が大きすぎる/小さすぎる¶

GitHubやNotionでは表示サイズの調整が難しいですが、以下の方法があります：

1. 方向を変える: TB → LR で横長に
2. サブグラフで整理: 要素をグループ化
3. 改行を入れる: ラベルに<br/>を使用

参考リンク¶

• 公式ドキュメント: https://mermaid.js.org/
• ライブエディタ: https://mermaid.live/
• GitHub Mermaid サポート: https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

この記事を書いた人¶

AliveDesign株式会社では、複雑な情報を分かりやすく伝えるための技術ドキュメント作成を支援しています。

#Mermaid #ダイアグラム #技術ドキュメント #開発効率化

更新履歴¶