Mermaid flowchart で美しく分かりやすい図を作成したいと思ったことはありませんか。基本的な flowchart は作れるものの、もっと洗練された図を描きたい、複雑な構造を整理して表現したいという声をよく耳にします。

本記事では、Mermaid flowchart の 3 つの重要な機能であるsubgraph、linkStyle、classDefを段階的にマスターし、実践的な 100 の演習を通じて本格的な図作成スキルを身につけていただきます。これらの機能を組み合わせることで、企業の組織図からシステム構成図まで、プロフェッショナルレベルの図を作成できるようになるでしょう。

基礎編：subgraph の基本操作

subgraph は、関連するノードをグループ化し、図に階層構造を持たせる強力な機能です。複雑な処理フローや組織構造を表現する際に欠かせない要素となります。

subgraph の基本構文

subgraph の基本的な書き方をマスターしましょう。最もシンプルな形から始めて、段階的に理解を深めていきます。

mermaidCopy codeflowchart TD
    A["開始"] --> B["処理1"]

    subgraph group1 ["グループ1"]
        B --> C["処理2"]
        C --> D["処理3"]
    end

    D --> E["終了"]

markdownCopy code```mermaid
flowchart TD
    A["開始"] --> B["処理1"]

    subgraph group1 ["グループ1"]
        B --> C["処理2"]
        C --> D["処理3"]
    end

    D --> E["終了"]
```

上の図では、処理 2 と処理 3 を「グループ 1」としてまとめています。subgraph の基本構文は以下の通りです。

markdownCopy codesubgraph ラベル ["表示名"]
ノード間の関係
end

ラベルは図内で一意である必要があり、表示名は省略可能です。表示名を省略した場合、ラベルがそのまま表示されます。

次に、複数の subgraph を並列で配置する例を見てみましょう。

mermaidCopy codeflowchart LR
    Start["開始"]

    subgraph frontend ["フロントエンド"]
        UI["UI層"]
        Logic["ロジック層"]
        UI --> Logic
    end

    subgraph backend ["バックエンド"]
        API["API層"]
        DB["データベース"]
        API --> DB
    end

    Start --> frontend
    Logic --> API
    DB --> End_node["終了"]

markdownCopy code```mermaid
flowchart LR
    Start["開始"]

    subgraph frontend ["フロントエンド"]
        UI["UI層"]
        Logic["ロジック層"]
        UI --> Logic
    end

    subgraph backend ["バックエンド"]
        API["API層"]
        DB["データベース"]
        API --> DB
    end

    Start --> frontend
    Logic --> API
    DB --> End_node["終了"]
```

この例では、フロントエンドとバックエンドという 2 つの独立したグループを作成し、それぞれの内部構造を明確に表現しています。

ネストした subgraph の作成

subgraph は入れ子構造にすることができ、より複雑な階層関係を表現できます。企業の部門構造やソフトウェアのモジュール構成を表現する際に特に有効です。

mermaidCopy codeflowchart TD
    subgraph company ["株式会社サンプル"]
        subgraph tech_div ["技術部門"]
            subgraph dev_team ["開発チーム"]
                dev1["開発者A"]
                dev2["開発者B"]
            end

            subgraph qa_team ["品質保証チーム"]
                qa1["QAエンジニアA"]
                qa2["QAエンジニアB"]
            end
        end

        subgraph sales_div ["営業部門"]
            sales1["営業担当A"]
            sales2["営業担当B"]
        end
    end

markdownCopy code```mermaid
flowchart TD
    subgraph company ["株式会社サンプル"]
        subgraph tech_div ["技術部門"]
            subgraph dev_team ["開発チーム"]
                dev1["開発者A"]
                dev2["開発者B"]
            end

            subgraph qa_team ["品質保証チーム"]
                qa1["QAエンジニアA"]
                qa2["QAエンジニアB"]
            end
        end

        subgraph sales_div ["営業部門"]
            sales1["営業担当A"]
            sales2["営業担当B"]
        end
    end
```

ネストした subgraph を作成する際のポイントは以下の通りです。

• 階層の深さは 3〜4 レベルまでが視認性の観点から推奨されます
• 各レベルで意味のあるグループ分けを心がけましょう
• 内側の subgraph のノードは外側の subgraph からも参照可能です

さらに実用的な例として、Web アプリケーションのアーキテクチャを表現してみましょう。

mermaidCopy codeflowchart TD
    subgraph client ["クライアント層"]
        subgraph browser ["ブラウザ"]
            html["HTML"]
            css["CSS"]
            js["JavaScript"]
        end
    end

    subgraph server ["サーバー層"]
        subgraph app_server ["アプリケーションサーバー"]
            route["ルーティング"]
            controller["コントローラー"]
            service["サービス層"]
        end

        subgraph data_layer ["データ層"]
            cache["キャッシュ"]
            database["データベース"]
        end
    end

    js --> route
    controller --> service
    service --> cache
    service --> database

markdownCopy code```mermaid
flowchart TD
    subgraph client ["クライアント層"]
        subgraph browser ["ブラウザ"]
            html["HTML"]
            css["CSS"]
            js["JavaScript"]
        end
    end

    subgraph server ["サーバー層"]
        subgraph app_server ["アプリケーションサーバー"]
            route["ルーティング"]
            controller["コントローラー"]
            service["サービス層"]
        end

        subgraph data_layer ["データ層"]
            cache["キャッシュ"]
            database["データベース"]
        end
    end

    js --> route
    controller --> service
    service --> cache
    service --> database
```

このように、ネストした subgraph を使うことで、システム全体の構造を分かりやすく表現できます。

subgraph のラベルとスタイリング

subgraph の見た目をカスタマイズして、より魅力的で読みやすい図を作成しましょう。ラベルの配置やスタイルの調整により、情報の伝達効果を高められます。

mermaidCopy codeflowchart TD
    subgraph sg1 ["🏢 本社"]
        direction TB
        office1["総務部"]
        office2["経理部"]
    end

    subgraph sg2 ["🏭 工場"]
        direction LR
        factory1["製造ライン1"]
        factory2["製造ライン2"]
        factory3["品質管理"]
    end

    office1 --> factory1
    office2 --> factory3

markdownCopy code```mermaid
flowchart TD
    subgraph sg1 ["🏢 本社"]
        direction TB
        office1["総務部"]
        office2["経理部"]
    end

    subgraph sg2 ["🏭 工場"]
        direction LR
        factory1["製造ライン1"]
        factory2["製造ライン2"]
        factory3["品質管理"]
    end

    office1 --> factory1
    office2 --> factory3
```

subgraph 内でのノードの配置方向はdirectionキーワードで制御できます。

direction	説明
TB または TD	上から下（Top to Bottom）
BT	下から上（Bottom to Top）
LR	左から右（Left to Right）
RL	右から左（Right to Left）

次に、より高度なスタイリング例を見てみましょう。

mermaidCopy codeflowchart LR
    subgraph production ["🚀 本番環境"]
        direction TB
        prod_app["Webアプリ"]
        prod_db["本番DB"]
        prod_app --> prod_db
    end

    subgraph staging ["🧪 ステージング環境"]
        direction TB
        stage_app["Webアプリ"]
        stage_db["ステージングDB"]
        stage_app --> stage_db
    end

    subgraph development ["💻 開発環境"]
        direction TB
        dev_app["Webアプリ"]
        dev_db["開発DB"]
        dev_app --> dev_db
    end

    development --> staging
    staging --> production

markdownCopy code```mermaid
flowchart LR
    subgraph production ["🚀 本番環境"]
        direction TB
        prod_app["Webアプリ"]
        prod_db["本番DB"]
        prod_app --> prod_db
    end

    subgraph staging ["🧪 ステージング環境"]
        direction TB
        stage_app["Webアプリ"]
        stage_db["ステージングDB"]
        stage_app --> stage_db
    end

    subgraph development ["💻 開発環境"]
        direction TB
        dev_app["Webアプリ"]
        dev_db["開発DB"]
        dev_app --> dev_db
    end

    development --> staging
    staging --> production
```

この例では、絵文字を使って subgraph の性質を視覚的に表現し、開発からデプロイまでの流れを明確に示しています。絵文字を活用することで、技術者以外の方にも理解しやすい図になります。

中級編：linkStyle で線を自在に操る

linkStyle は、ノード間を結ぶ線（エッジ）の見た目をカスタマイズする機能です。線の色、太さ、スタイルを変更することで、データの流れや重要度、処理の種類を視覚的に表現できます。

linkStyle の基本記法

linkStyle の基本的な書き方から始めましょう。線にスタイルを適用するには、まず線の番号を特定する必要があります。

mermaidCopy codeflowchart LR
    A["開始"] --> B["処理1"]
    B --> C["処理2"]
    C --> D["終了"]

    linkStyle 0 stroke:#ff0000,stroke-width:3px
    linkStyle 1 stroke:#00ff00,stroke-width:2px
    linkStyle 2 stroke:#0000ff,stroke-width:4px

markdownCopy code```mermaid
flowchart LR
    A["開始"] --> B["処理1"]
    B --> C["処理2"]
    C --> D["終了"]

    linkStyle 0 stroke:#ff0000,stroke-width:3px
    linkStyle 1 stroke:#00ff00,stroke-width:2px
    linkStyle 2 stroke:#0000ff,stroke-width:4px
```

linkStyle の基本構文は以下の通りです。

markdownCopy codelinkStyle リンク番号 プロパティ:値,プロパティ:値

リンク番号は 0 から始まり、図に現れる順番で自動的に割り当てられます。上の例では、A→B が 0 番、B→C が 1 番、C→D が 2 番となります。

主要なプロパティとその値は以下の表の通りです。

プロパティ	説明	値の例
stroke	線の色	#ff0000, red, rgb(255,0,0)
stroke-width	線の太さ	1px, 2px, 3px
stroke-dasharray	破線のパターン	5,5（5px の線と 5px の間隔）
fill	矢印の塗りつぶし色	#00ff00, blue

色とスタイルのバリエーション

様々な線のスタイルを組み合わせて、情報の種類や重要度を表現してみましょう。以下の例では、データフローの種類に応じて線のスタイルを変えています。

mermaidCopy codeflowchart TD
    User["ユーザー"] --> Frontend["フロントエンド"]
    Frontend --> API["API"]
    API --> Database["データベース"]
    API --> Cache["キャッシュ"]
    Cache --> API
    API --> Frontend
    Frontend --> User

    %% 通常のリクエスト（青、太線）
    linkStyle 0 stroke:#2196F3,stroke-width:3px
    linkStyle 1 stroke:#2196F3,stroke-width:3px

    %% データベースアクセス（緑、実線）
    linkStyle 2 stroke:#4CAF50,stroke-width:2px

    %% キャッシュアクセス（オレンジ、破線）
    linkStyle 3 stroke:#FF9800,stroke-width:2px,stroke-dasharray:5,5
    linkStyle 4 stroke:#FF9800,stroke-width:2px,stroke-dasharray:5,5

    %% レスポンス（紫、点線）
    linkStyle 5 stroke:#9C27B0,stroke-width:2px,stroke-dasharray:2,2
    linkStyle 6 stroke:#9C27B0,stroke-width:2px,stroke-dasharray:2,2

markdownCopy code```mermaid
flowchart TD
    User["ユーザー"] --> Frontend["フロントエンド"]
    Frontend --> API["API"]
    API --> Database["データベース"]
    API --> Cache["キャッシュ"]
    Cache --> API
    API --> Frontend
    Frontend --> User

    %% 通常のリクエスト（青、太線）
    linkStyle 0 stroke:#2196F3,stroke-width:3px
    linkStyle 1 stroke:#2196F3,stroke-width:3px

    %% データベースアクセス（緑、実線）
    linkStyle 2 stroke:#4CAF50,stroke-width:2px

    %% キャッシュアクセス（オレンジ、破線）
    linkStyle 3 stroke:#FF9800,stroke-width:2px,stroke-dasharray:5,5
    linkStyle 4 stroke:#FF9800,stroke-width:2px,stroke-dasharray:5,5

    %% レスポンス（紫、点線）
    linkStyle 5 stroke:#9C27B0,stroke-width:2px,stroke-dasharray:2,2
    linkStyle 6 stroke:#9C27B0,stroke-width:2px,stroke-dasharray:2,2
```

この図では、以下の色分けルールを適用しています。

• 青色・太線：ユーザーからのリクエスト
• 緑色・実線：データベースへの問い合わせ
• オレンジ色・破線：キャッシュとのやり取り
• 紫色・点線：ユーザーへのレスポンス

次に、エラーハンドリングのフローを表現した例を見てみましょう。

mermaidCopy codeflowchart TD
    Start["処理開始"] --> Check["入力チェック"]
    Check -->|正常| Process["メイン処理"]
    Check -->|エラー| Error1["入力エラー"]
    Process -->|成功| Success["処理完了"]
    Process -->|失敗| Error2["処理エラー"]
    Success --> End_node["終了"]
    Error1 --> End_node
    Error2 --> Retry["リトライ"]
    Retry --> Process

    %% 正常系（緑）
    linkStyle 0 stroke:#4CAF50,stroke-width:2px
    linkStyle 1 stroke:#4CAF50,stroke-width:3px
    linkStyle 4 stroke:#4CAF50,stroke-width:3px
    linkStyle 5 stroke:#4CAF50,stroke-width:2px

    %% エラー系（赤）
    linkStyle 2 stroke:#F44336,stroke-width:2px
    linkStyle 3 stroke:#F44336,stroke-width:2px
    linkStyle 6 stroke:#F44336,stroke-width:2px

    %% リトライ（黄色、破線）
    linkStyle 7 stroke:#FFC107,stroke-width:2px,stroke-dasharray:3,3

markdownCopy code```mermaid
flowchart TD
    Start["処理開始"] --> Check["入力チェック"]
    Check -->|正常| Process["メイン処理"]
    Check -->|エラー| Error1["入力エラー"]
    Process -->|成功| Success["処理完了"]
    Process -->|失敗| Error2["処理エラー"]
    Success --> End_node["終了"]
    Error1 --> End_node
    Error2 --> Retry["リトライ"]
    Retry --> Process

    %% 正常系（緑）
    linkStyle 0 stroke:#4CAF50,stroke-width:2px
    linkStyle 1 stroke:#4CAF50,stroke-width:3px
    linkStyle 4 stroke:#4CAF50,stroke-width:3px
    linkStyle 5 stroke:#4CAF50,stroke-width:2px

    %% エラー系（赤）
    linkStyle 2 stroke:#F44336,stroke-width:2px
    linkStyle 3 stroke:#F44336,stroke-width:2px
    linkStyle 6 stroke:#F44336,stroke-width:2px

    %% リトライ（黄色、破線）
    linkStyle 7 stroke:#FFC107,stroke-width:2px,stroke-dasharray:3,3
```

条件分岐を表現する線の使い分け

条件分岐や異なる処理パスを視覚的に区別することで、フローチャートの理解を深められます。

mermaidCopy codeflowchart TD
    Login["ログイン"] --> Auth["認証チェック"]
    Auth -->|認証成功| Dashboard["ダッシュボード"]
    Auth -->|認証失敗| LoginError["ログインエラー"]
    Dashboard --> UserType["ユーザー種別判定"]
    UserType -->|管理者| AdminPanel["管理者パネル"]
    UserType -->|一般ユーザー| UserPanel["ユーザーパネル"]
    UserType -->|ゲスト| GuestPanel["ゲストパネル"]
    LoginError --> Login

    %% 成功パス（緑、太線）
    linkStyle 0 stroke:#4CAF50,stroke-width:3px
    linkStyle 1 stroke:#4CAF50,stroke-width:4px
    linkStyle 3 stroke:#4CAF50,stroke-width:3px

    %% 失敗パス（赤、太線）
    linkStyle 2 stroke:#F44336,stroke-width:3px
    linkStyle 7 stroke:#F44336,stroke-width:2px,stroke-dasharray:5,5

    %% 権限別パス（青系、太さで権限レベルを表現）
    linkStyle 4 stroke:#2196F3,stroke-width:4px
    linkStyle 5 stroke:#03A9F4,stroke-width:3px
    linkStyle 6 stroke:#81D4FA,stroke-width:2px

markdownCopy code```mermaid
flowchart TD
    Login["ログイン"] --> Auth["認証チェック"]
    Auth -->|認証成功| Dashboard["ダッシュボード"]
    Auth -->|認証失敗| LoginError["ログインエラー"]
    Dashboard --> UserType["ユーザー種別判定"]
    UserType -->|管理者| AdminPanel["管理者パネル"]
    UserType -->|一般ユーザー| UserPanel["ユーザーパネル"]
    UserType -->|ゲスト| GuestPanel["ゲストパネル"]
    LoginError --> Login

    %% 成功パス（緑、太線）
    linkStyle 0 stroke:#4CAF50,stroke-width:3px
    linkStyle 1 stroke:#4CAF50,stroke-width:4px
    linkStyle 3 stroke:#4CAF50,stroke-width:3px

    %% 失敗パス（赤、太線）
    linkStyle 2 stroke:#F44336,stroke-width:3px
    linkStyle 7 stroke:#F44336,stroke-width:2px,stroke-dasharray:5,5

    %% 権限別パス（青系、太さで権限レベルを表現）
    linkStyle 4 stroke:#2196F3,stroke-width:4px
    linkStyle 5 stroke:#03A9F4,stroke-width:3px
    linkStyle 6 stroke:#81D4FA,stroke-width:2px
```

この例では、線の太さで権限レベルを表現し、色で処理の成功・失敗を区別しています。こうした視覚的な工夫により、複雑な条件分岐も直感的に理解できるようになります。

上級編：classDef でノードを美しく装飾

classDef は、ノードの見た目を統一的にカスタマイズする機能です。色、形、フォントなどを定義することで、ノードの種類や重要度を視覚的に表現できます。

classDef の定義と適用

classDef の基本的な使い方から始めましょう。まずクラスを定義し、その後ノードにクラスを適用します。

mermaidCopy codeflowchart TD
    A["開始ノード"] --> B["処理ノード"]
    B --> C["判定ノード"]
    C -->|Yes| D["成功ノード"]
    C -->|No| E["エラーノード"]

    classDef startClass fill:#E8F5E8,stroke:#4CAF50,stroke-width:3px
    classDef processClass fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
    classDef decisionClass fill:#FFF3E0,stroke:#FF9800,stroke-width:2px
    classDef successClass fill:#E8F5E8,stroke:#4CAF50,stroke-width:2px
    classDef errorClass fill:#FFEBEE,stroke:#F44336,stroke-width:2px

    class A startClass
    class B processClass
    class C decisionClass
    class D successClass
    class E errorClass

markdownCopy code```mermaid
flowchart TD
    A["開始ノード"] --> B["処理ノード"]
    B --> C["判定ノード"]
    C -->|Yes| D["成功ノード"]
    C -->|No| E["エラーノード"]

    classDef startClass fill:#E8F5E8,stroke:#4CAF50,stroke-width:3px
    classDef processClass fill:#E3F2FD,stroke:#2196F3,stroke-width:2px
    classDef decisionClass fill:#FFF3E0,stroke:#FF9800,stroke-width:2px
    classDef successClass fill:#E8F5E8,stroke:#4CAF50,stroke-width:2px
    classDef errorClass fill:#FFEBEE,stroke:#F44336,stroke-width:2px

    class A startClass
    class B processClass
    class C decisionClass
    class D successClass
    class E errorClass
```

classDef の基本構文は以下の通りです。

typescriptCopy codeclassDef クラス名 プロパティ:値,プロパティ:値
class ノード名 クラス名

主要なプロパティは以下の表にまとめています。

プロパティ	説明	値の例
fill	背景色	#E8F5E8, lightblue
stroke	枠線の色	#4CAF50, red
stroke-width	枠線の太さ	1px, 2px, 3px
color	文字色	#333333, white
font-size	フォントサイズ	14px, 16px
font-weight	フォントの太さ	bold, normal

次に、より実践的な例として、システム監視ダッシュボードの状態を表現してみましょう。

mermaidCopy codeflowchart LR
    CPU["CPU使用率<br/>45%"] --> Memory["メモリ使用率<br/>78%"]
    Memory --> Disk["ディスク使用率<br/>92%"]
    Disk --> Network["ネットワーク<br/>正常"]

    classDef normal fill:#E8F5E8,stroke:#4CAF50,stroke-width:2px,color:#2E7D32
    classDef warning fill:#FFF8E1,stroke:#FFC107,stroke-width:2px,color:#F57F17
    classDef critical fill:#FFEBEE,stroke:#F44336,stroke-width:2px,color:#C62828

    class CPU normal
    class Memory warning
    class Disk critical
    class Network normal

markdownCopy code```mermaid
flowchart LR
    CPU["CPU使用率<br/>45%"] --> Memory["メモリ使用率<br/>78%"]
    Memory --> Disk["ディスク使用率<br/>92%"]
    Disk --> Network["ネットワーク<br/>正常"]

    classDef normal fill:#E8F5E8,stroke:#4CAF50,stroke-width:2px,color:#2E7D32
    classDef warning fill:#FFF8E1,stroke:#FFC107,stroke-width:2px,color:#F57F17
    classDef critical fill:#FFEBEE,stroke:#F44336,stroke-width:2px,color:#C62828

    class CPU normal
    class Memory warning
    class Disk critical
    class Network normal
```

この例では、システムリソースの使用状況に応じて色分けを行い、一目で状態が分かるようにしています。

複数クラスの組み合わせ技

複数のクラスを組み合わせることで、より柔軟で表現力豊かなスタイリングが可能になります。

mermaidCopy codeflowchart TD
    Frontend["フロントエンド<br/>React"] --> API["API Gateway<br/>Express"]
    API --> Auth["認証サービス<br/>JWT"]
    API --> UserService["ユーザーサービス<br/>Node.js"]
    API --> OrderService["注文サービス<br/>Python"]
    UserService --> UserDB["ユーザーDB<br/>PostgreSQL"]
    OrderService --> OrderDB["注文DB<br/>MongoDB"]

    %% 技術別クラス定義
    classDef reactTech fill:#61DAFB,stroke:#20232A,stroke-width:2px,color:#20232A
    classDef nodeTech fill:#68A063,stroke:#333333,stroke-width:2px,color:#333333
    classDef pythonTech fill:#3776AB,stroke:#FFD43B,stroke-width:2px,color:#FFD43B
    classDef dbTech fill:#336791,stroke:#FFFFFF,stroke-width:2px,color:#FFFFFF

    %% レイヤー別クラス定義
    classDef frontendLayer font-weight:bold,font-size:16px
    classDef apiLayer font-weight:bold,font-size:14px
    classDef serviceLayer font-weight:normal,font-size:12px
    classDef dataLayer font-weight:normal,font-size:12px

    %% 技術スタック別の適用
    class Frontend reactTech,frontendLayer
    class API,Auth nodeTech,apiLayer
    class UserService nodeTech,serviceLayer
    class OrderService pythonTech,serviceLayer
    class UserDB,OrderDB dbTech,dataLayer

markdownCopy code```mermaid
flowchart TD
    Frontend["フロントエンド<br/>React"] --> API["API Gateway<br/>Express"]
    API --> Auth["認証サービス<br/>JWT"]
    API --> UserService["ユーザーサービス<br/>Node.js"]
    API --> OrderService["注文サービス<br/>Python"]
    UserService --> UserDB["ユーザーDB<br/>PostgreSQL"]
    OrderService --> OrderDB["注文DB<br/>MongoDB"]

    %% 技術別クラス定義
    classDef reactTech fill:#61DAFB,stroke:#20232A,stroke-width:2px,color:#20232A
    classDef nodeTech fill:#68A063,stroke:#333333,stroke-width:2px,color:#333333
    classDef pythonTech fill:#3776AB,stroke:#FFD43B,stroke-width:2px,color:#FFD43B
    classDef dbTech fill:#336791,stroke:#FFFFFF,stroke-width:2px,color:#FFFFFF

    %% レイヤー別クラス定義
    classDef frontendLayer font-weight:bold,font-size:16px
    classDef apiLayer font-weight:bold,font-size:14px
    classDef serviceLayer font-weight:normal,font-size:12px
    classDef dataLayer font-weight:normal,font-size:12px

    %% 技術スタック別の適用
    class Frontend reactTech,frontendLayer
    class API,Auth nodeTech,apiLayer
    class UserService nodeTech,serviceLayer
    class OrderService pythonTech,serviceLayer
    class UserDB,OrderDB dbTech,dataLayer
```

この例では、技術スタック（React、Node.js、Python、DB）と システム層（フロントエンド、API、サービス、データ）の 2 つの観点からクラスを定義し、組み合わせて適用しています。

動的なスタイル切り替え

条件や状態に応じてノードのスタイルを動的に変更する手法を学びましょう。これは、ワークフローの進捗状況や障害の発生状況を表現する際に特に有効です。

mermaidCopy codeflowchart TD
    Plan["計画策定"] --> Design["設計"]
    Design --> Develop["開発"]
    Develop --> Test["テスト"]
    Test --> Deploy["デプロイ"]
    Deploy --> Monitor["監視"]

    %% 進捗状況のクラス定義
    classDef completed fill:#C8E6C9,stroke:#4CAF50,stroke-width:3px,color:#2E7D32,font-weight:bold
    classDef inProgress fill:#FFECB3,stroke:#FFC107,stroke-width:3px,color:#E65100,font-weight:bold
    classDef pending fill:#F5F5F5,stroke:#9E9E9E,stroke-width:2px,color:#616161
    classDef blocked fill:#FFCDD2,stroke:#F44336,stroke-width:2px,color:#C62828

    %% 現在の進捗状況を反映
    class Plan,Design,Develop completed
    class Test inProgress
    class Deploy,Monitor pending

markdownCopy code```mermaid
flowchart TD
    Plan["計画策定"] --> Design["設計"]
    Design --> Develop["開発"]
    Develop --> Test["テスト"]
    Test --> Deploy["デプロイ"]
    Deploy --> Monitor["監視"]

    %% 進捗状況のクラス定義
    classDef completed fill:#C8E6C9,stroke:#4CAF50,stroke-width:3px,color:#2E7D32,font-weight:bold
    classDef inProgress fill:#FFECB3,stroke:#FFC107,stroke-width:3px,color:#E65100,font-weight:bold
    classDef pending fill:#F5F5F5,stroke:#9E9E9E,stroke-width:2px,color:#616161
    classDef blocked fill:#FFCDD2,stroke:#F44336,stroke-width:2px,color:#C62828

    %% 現在の進捗状況を反映
    class Plan,Design,Develop completed
    class Test inProgress
    class Deploy,Monitor pending
```

さらに、障害対応フローでの状態管理例も見てみましょう。

mermaidCopy codeflowchart LR
    Detection["障害検知"] --> Analysis["原因分析"]
    Analysis --> Response["初期対応"]
    Response --> Fix["修正作業"]
    Fix --> Verification["修正確認"]
    Verification --> Recovery["サービス復旧"]
    Recovery --> PostMortem["事後分析"]

    %% 対応状況のクラス定義
    classDef urgent fill:#FFCDD2,stroke:#D32F2F,stroke-width:4px,color:#D32F2F,font-weight:bold
    classDef active fill:#FFF3E0,stroke:#F57C00,stroke-width:3px,color:#E65100,font-weight:bold
    classDef completed fill:#E8F5E8,stroke:#388E3C,stroke-width:2px,color:#2E7D32
    classDef waiting fill:#F3E5F5,stroke:#7B1FA2,stroke-width:2px,color:#4A148C

    %% 現在の対応状況
    class Detection,Analysis,Response completed
    class Fix active
    class Verification urgent
    class Recovery,PostMortem waiting

markdownCopy code```mermaid
flowchart LR
    Detection["障害検知"] --> Analysis["原因分析"]
    Analysis --> Response["初期対応"]
    Response --> Fix["修正作業"]
    Fix --> Verification["修正確認"]
    Verification --> Recovery["サービス復旧"]
    Recovery --> PostMortem["事後分析"]

    %% 対応状況のクラス定義
    classDef urgent fill:#FFCDD2,stroke:#D32F2F,stroke-width:4px,color:#D32F2F,font-weight:bold
    classDef active fill:#FFF3E0,stroke:#F57C00,stroke-width:3px,color:#E65100,font-weight:bold
    classDef completed fill:#E8F5E8,stroke:#388E3C,stroke-width:2px,color:#2E7D32
    classDef waiting fill:#F3E5F5,stroke:#7B1FA2,stroke-width:2px,color:#4A148C

    %% 現在の対応状況
    class Detection,Analysis,Response completed
    class Fix active
    class Verification urgent
    class Recovery,PostMortem waiting
```

このように、classDef を活用することで、プロジェクトの進捗や障害対応の状況を一目で把握できる図を作成できます。

実践編：3 つの機能を組み合わせた応用例

これまで学んだ subgraph、linkStyle、classDef の 3 つの機能を組み合わせることで、プロフェッショナルレベルの図を作成できます。実際のビジネスシーンで活用できる応用例を見ていきましょう。

企業組織図の作成

企業の組織構造を視覚的に表現し、部門間の関係性や役職の階層を明確に示します。

mermaidCopy codeflowchart TD
    subgraph company ["🏢 株式会社テックイノベーション"]
        CEO["代表取締役<br/>田中 太郎"]

        subgraph executives ["👥 役員"]
            CTO["CTO<br/>佐藤 花子"]
            CFO["CFO<br/>鈴木 次郎"]
            COO["COO<br/>高橋 美咲"]
        end

        subgraph tech_division ["💻 技術部門"]
            subgraph dev_team ["開発チーム"]
                DevManager["開発マネージャー<br/>山田 健"]
                Senior1["シニアエンジニア<br/>青木 達也"]
                Junior1["ジュニアエンジニア<br/>松本 優"]
                Junior2["ジュニアエンジニア<br/>中村 楓"]
            end

            subgraph qa_team ["品質保証チーム"]
                QAManager["QAマネージャー<br/>伊藤 智子"]
                QA1["QAエンジニア<br/>小林 正人"]
                QA2["QAエンジニア<br/>加藤 彩"]
            end
        end

        subgraph business_division ["📊 事業部門"]
            subgraph sales_team ["営業チーム"]
                SalesManager["営業マネージャー<br/>渡辺 隆"]
                Sales1["営業担当<br/>斎藤 真"]
                Sales2["営業担当<br/>田村 愛"]
            end

            subgraph marketing_team ["マーケティングチーム"]
                MarketingManager["マーケティングマネージャー<br/>林 美由紀"]
                Marketing1["マーケター<br/>木村 拓"]
            end
        end
    end

    %% 直属の上下関係（エッジ 0〜14）
    CEO --> CTO
    CEO --> CFO
    CEO --> COO
    CTO --> DevManager
    CTO --> QAManager
    COO --> SalesManager
    COO --> MarketingManager
    DevManager --> Senior1
    DevManager --> Junior1
    DevManager --> Junior2
    QAManager --> QA1
    QAManager --> QA2
    SalesManager --> Sales1
    SalesManager --> Sales2
    MarketingManager --> Marketing1

    %% 横断的な連携（エッジ 15〜17）
    DevManager -.-> QAManager
    Senior1 -.-> QA1
    SalesManager -.-> MarketingManager

    %% スタイル定義
    classDef executive fill:#E1F5FE,stroke:#0277BD,stroke-width:3px,color:#01579B,font-weight:bold
    classDef manager   fill:#F3E5F5,stroke:#7B1FA2,stroke-width:2px,color:#4A148C,font-weight:bold
    classDef senior    fill:#E8F5E8,stroke:#388E3C,stroke-width:2px,color:#2E7D32
    classDef junior    fill:#FFF3E0,stroke:#F57C00,stroke-width:2px,color:#E65100

    %% クラス適用
    class CEO,CTO,CFO,COO executive
    class DevManager,QAManager,SalesManager,MarketingManager manager
    class Senior1,QA1 senior
    class Junior1,Junior2,QA2,Sales1,Sales2,Marketing1 junior

    %% リンクスタイル（存在するエッジ番号だけを指定）
    linkStyle 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14 stroke:#2196F3,stroke-width:2px
    linkStyle 15,16,17 stroke:#9E9E9E,stroke-width:1px,stroke-dasharray:3,3

markdownCopy code```mermaid
flowchart TD
    subgraph company ["🏢 株式会社テックイノベーション"]
        CEO["代表取締役<br/>田中 太郎"]

        subgraph executives ["👥 役員"]
            CTO["CTO<br/>佐藤 花子"]
            CFO["CFO<br/>鈴木 次郎"]
            COO["COO<br/>高橋 美咲"]
        end

        subgraph tech_division ["💻 技術部門"]
            subgraph dev_team ["開発チーム"]
                DevManager["開発マネージャー<br/>山田 健"]
                Senior1["シニアエンジニア<br/>青木 達也"]
                Junior1["ジュニアエンジニア<br/>松本 優"]
                Junior2["ジュニアエンジニア<br/>中村 楓"]
            end

            subgraph qa_team ["品質保証チーム"]
                QAManager["QAマネージャー<br/>伊藤 智子"]
                QA1["QAエンジニア<br/>小林 正人"]
                QA2["QAエンジニア<br/>加藤 彩"]
            end
        end

        subgraph business_division ["📊 事業部門"]
            subgraph sales_team ["営業チーム"]
                SalesManager["営業マネージャー<br/>渡辺 隆"]
                Sales1["営業担当<br/>斎藤 真"]
                Sales2["営業担当<br/>田村 愛"]
            end

            subgraph marketing_team ["マーケティングチーム"]
                MarketingManager["マーケティングマネージャー<br/>林 美由紀"]
                Marketing1["マーケター<br/>木村 拓"]
            end
        end
    end

    %% 直属の上下関係（エッジ 0〜14）
    CEO --> CTO
    CEO --> CFO
    CEO --> COO
    CTO --> DevManager
    CTO --> QAManager
    COO --> SalesManager
    COO --> MarketingManager
    DevManager --> Senior1
    DevManager --> Junior1
    DevManager --> Junior2
    QAManager --> QA1
    QAManager --> QA2
    SalesManager --> Sales1
    SalesManager --> Sales2
    MarketingManager --> Marketing1

    %% 横断的な連携（エッジ 15〜17）
    DevManager -.-> QAManager
    Senior1 -.-> QA1
    SalesManager -.-> MarketingManager

    %% スタイル定義
    classDef executive fill:#E1F5FE,stroke:#0277BD,stroke-width:3px,color:#01579B,font-weight:bold
    classDef manager   fill:#F3E5F5,stroke:#7B1FA2,stroke-width:2px,color:#4A148C,font-weight:bold
    classDef senior    fill:#E8F5E8,stroke:#388E3C,stroke-width:2px,color:#2E7D32
    classDef junior    fill:#FFF3E0,stroke:#F57C00,stroke-width:2px,color:#E65100

    %% クラス適用
    class CEO,CTO,CFO,COO executive
    class DevManager,QAManager,SalesManager,MarketingManager manager
    class Senior1,QA1 senior
    class Junior1,Junior2,QA2,Sales1,Sales2,Marketing1 junior

    %% リンクスタイル（存在するエッジ番号だけを指定）
    linkStyle 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14 stroke:#2196F3,stroke-width:2px
    linkStyle 15,16,17 stroke:#9E9E9E,stroke-width:1px,stroke-dasharray:3,3

```

この組織図では以下の工夫を施しています。

• subgraphで部門やチームをグループ化
• classDefで役職レベルに応じた色分け
• linkStyleで直属関係と横断的連携を視覚的に区別

システム構成図の可視化

クラウドベースの Web アプリケーションのシステム構成を詳細に表現します。

mermaidCopy codeflowchart TB
    subgraph users ["👥 ユーザー"]
        Browser["ブラウザ"]
        Mobile["モバイルアプリ"]
    end

    subgraph cdn ["🌐 CDN (CloudFront)"]
        CDN["静的コンテンツ配信"]
    end

    subgraph aws_cloud ["☁️ AWS クラウド"]
        subgraph vpc ["🏠 VPC"]
            subgraph public_subnet ["🌍 パブリックサブネット"]
                ALB["Application<br/>Load Balancer"]
                NAT["NAT Gateway"]
            end

            subgraph private_subnet_1 ["🔒 プライベートサブネット (AZ-1)"]
                EC2_1["EC2インスタンス<br/>Web Server 1"]
                EC2_2["EC2インスタンス<br/>Web Server 2"]
            end

            subgraph private_subnet_2 ["🔒 プライベートサブネット (AZ-2)"]
                RDS_Primary["RDS<br/>Primary"]
                RDS_Standby["RDS<br/>Standby"]
            end

            subgraph cache_layer ["⚡ キャッシュ層"]
                Redis["ElastiCache<br/>Redis"]
            end
        end

        S3["S3<br/>静的ファイル"]
    end

    subgraph external ["🔗 外部サービス"]
        Payment["決済API<br/>Stripe"]
        Email["メール配信<br/>SendGrid"]
        Monitoring["監視<br/>CloudWatch"]
    end

    %% ユーザーアクセス
    Browser --> CDN
    Mobile --> ALB
    CDN --> S3
    CDN --> ALB

    %% 内部通信
    ALB --> EC2_1
    ALB --> EC2_2
    EC2_1 --> Redis
    EC2_2 --> Redis
    EC2_1 --> RDS_Primary
    EC2_2 --> RDS_Primary
    RDS_Primary --> RDS_Standby

    %% 外部API連携
    EC2_1 --> Payment
    EC2_2 --> Payment
    EC2_1 --> Email
    EC2_2 --> Email

    %% 監視
    EC2_1 --> Monitoring
    EC2_2 --> Monitoring
    RDS_Primary --> Monitoring

    %% クラス定義
    classDef userClass fill:#E3F2FD,stroke:#1976D2,stroke-width:2px,color:#0D47A1
    classDef cdnClass fill:#E8F5E8,stroke:#388E3C,stroke-width:2px,color:#1B5E20
    classDef lbClass fill:#FFF3E0,stroke:#F57C00,stroke-width:3px,color:#E65100
    classDef serverClass fill:#F3E5F5,stroke:#7B1FA2,stroke-width:2px,color:#4A148C
    classDef dbClass fill:#FFEBEE,stroke:#D32F2F,stroke-width:2px,color:#B71C1C
    classDef cacheClass fill:#E0F2F1,stroke:#00695C,stroke-width:2px,color:#004D40
    classDef storageClass fill:#FFF8E1,stroke:#F9A825,stroke-width:2px,color:#F57F17
    classDef externalClass fill:#FAFAFA,stroke:#616161,stroke-width:2px,color:#212121

    %% クラス適用
    class Browser,Mobile userClass
    class CDN cdnClass
    class ALB lbClass
    class EC2_1,EC2_2 serverClass
    class RDS_Primary,RDS_Standby dbClass
    class Redis cacheClass
    class S3 storageClass
    class Payment,Email,Monitoring externalClass

    %% リンクスタイル
    %% ユーザーアクセス（青）
    linkStyle 0,1,2,3 stroke:#2196F3,stroke-width:3px

    %% 負荷分散（オレンジ）
    linkStyle 4,5 stroke:#FF9800,stroke-width:3px

    %% キャッシュアクセス（緑）
    linkStyle 6,7 stroke:#4CAF50,stroke-width:2px

    %% データベースアクセス（赤）
    linkStyle 8,9,10 stroke:#F44336,stroke-width:2px

    %% 外部API（紫）
    linkStyle 11,12,13,14 stroke:#9C27B0,stroke-width:2px,stroke-dasharray:5,5

    %% 監視（グレー）
    linkStyle 15,16,17 stroke:#607D8B,stroke-width:1px,stroke-dasharray:2,2

このシステム構成図の特徴：

• 階層化された subgraphでクラウドインフラの構造を表現
• 色分けされた classDefでコンポーネントの種類を明確化
• 多様な linkStyleでデータフローの性質を視覚化

フローチャートのベストプラクティス

最後に、業務プロセスの可視化における 3 つの機能の活用例を紹介します。

mermaidCopy codeflowchart TD
    subgraph customer_journey ["🛒 顧客購入フロー"]
        Start["サイト訪問"] --> Browse["商品閲覧"]
        Browse --> AddToCart["カート追加"]
        AddToCart --> Checkout["決済画面"]

        subgraph payment_process ["💳 決済処理"]
            direction LR
            Checkout --> ValidateInfo["情報検証"]
            ValidateInfo -->|有効| ProcessPayment["決済実行"]
            ValidateInfo -->|無効| PaymentError["決済エラー"]
            ProcessPayment -->|成功| PaymentSuccess["決済完了"]
            ProcessPayment -->|失敗| PaymentFailed["決済失敗"]
            PaymentError --> Checkout
            PaymentFailed --> Checkout
        end

        subgraph fulfillment ["📦 配送処理"]
            direction TB
            PaymentSuccess --> CreateOrder["注文作成"]
            CreateOrder --> CheckInventory["在庫確認"]
            CheckInventory -->|在庫あり| PrepareShipment["出荷準備"]
            CheckInventory -->|在庫なし| BackOrder["取り寄せ"]
            PrepareShipment --> Ship["配送開始"]
            BackOrder --> Ship
            Ship --> Delivery["配送完了"]
        end

        subgraph customer_service ["🎧 顧客サポート"]
            direction TB
            SupportRequest["サポート依頼"]
            SupportResponse["サポート対応"]
            SupportRequest --> SupportResponse
        end
    end

    %% 例外フロー
    Browse -->|不明点| SupportRequest
    AddToCart -->|問題発生| SupportRequest
    PaymentFailed -->|サポート必要| SupportRequest
    Delivery --> End_node["プロセス完了"]

    %% クラス定義
    classDef normalProcess fill:#E8F5E8,stroke:#4CAF50,stroke-width:2px,color:#2E7D32
    classDef criticalProcess fill:#FFEBEE,stroke:#F44336,stroke-width:3px,color:#C62828,font-weight:bold
    classDef warningProcess fill:#FFF3E0,stroke:#FF9800,stroke-width:2px,color:#E65100
    classDef supportProcess fill:#E3F2FD,stroke:#2196F3,stroke-width:2px,color:#0D47A1
    classDef successProcess fill:#C8E6C9,stroke:#388E3C,stroke-width:3px,color:#1B5E20,font-weight:bold

    %% クラス適用
    class Start,Browse,AddToCart normalProcess
    class Checkout,ValidateInfo,ProcessPayment criticalProcess
    class PaymentError,PaymentFailed,BackOrder warningProcess
    class SupportRequest,SupportResponse supportProcess
    class PaymentSuccess,CreateOrder,PrepareShipment,Ship,Delivery,End_node successProcess
    class CheckInventory normalProcess

    %% リンクスタイル
    %% 正常フロー（緑、太線）
    linkStyle 0,1,2,3,4,7,10,11,13,15,16,20 stroke:#4CAF50,stroke-width:3px

    %% エラーフロー（赤、破線）
    linkStyle 5,8,9 stroke:#F44336,stroke-width:2px,stroke-dasharray:5,5

    %% 警告フロー（オレンジ、中太線）
    linkStyle 6,12,14 stroke:#FF9800,stroke-width:2px

    %% サポートフロー（青、点線）
    linkStyle 17,18,19,21 stroke:#2196F3,stroke-width:2px,stroke-dasharray:2,2

markdownCopy code```mermaid
flowchart TD
    subgraph customer_journey ["🛒 顧客購入フロー"]
        Start["サイト訪問"] --> Browse["商品閲覧"]
        Browse --> AddToCart["カート追加"]
        AddToCart --> Checkout["決済画面"]

        subgraph payment_process ["💳 決済処理"]
            direction LR
            Checkout --> ValidateInfo["情報検証"]
            ValidateInfo -->|有効| ProcessPayment["決済実行"]
            ValidateInfo -->|無効| PaymentError["決済エラー"]
            ProcessPayment -->|成功| PaymentSuccess["決済完了"]
            ProcessPayment -->|失敗| PaymentFailed["決済失敗"]
            PaymentError --> Checkout
            PaymentFailed --> Checkout
        end

        subgraph fulfillment ["📦 配送処理"]
            direction TB
            PaymentSuccess --> CreateOrder["注文作成"]
            CreateOrder --> CheckInventory["在庫確認"]
            CheckInventory -->|在庫あり| PrepareShipment["出荷準備"]
            CheckInventory -->|在庫なし| BackOrder["取り寄せ"]
            PrepareShipment --> Ship["配送開始"]
            BackOrder --> Ship
            Ship --> Delivery["配送完了"]
        end

        subgraph customer_service ["🎧 顧客サポート"]
            direction TB
            SupportRequest["サポート依頼"]
            SupportResponse["サポート対応"]
            SupportRequest --> SupportResponse
        end
    end

    %% 例外フロー
    Browse -->|不明点| SupportRequest
    AddToCart -->|問題発生| SupportRequest
    PaymentFailed -->|サポート必要| SupportRequest
    Delivery --> End_node["プロセス完了"]

    %% クラス定義
    classDef normalProcess fill:#E8F5E8,stroke:#4CAF50,stroke-width:2px,color:#2E7D32
    classDef criticalProcess fill:#FFEBEE,stroke:#F44336,stroke-width:3px,color:#C62828,font-weight:bold
    classDef warningProcess fill:#FFF3E0,stroke:#FF9800,stroke-width:2px,color:#E65100
    classDef supportProcess fill:#E3F2FD,stroke:#2196F3,stroke-width:2px,color:#0D47A1
    classDef successProcess fill:#C8E6C9,stroke:#388E3C,stroke-width:3px,color:#1B5E20,font-weight:bold

    %% クラス適用
    class Start,Browse,AddToCart normalProcess
    class Checkout,ValidateInfo,ProcessPayment criticalProcess
    class PaymentError,PaymentFailed,BackOrder warningProcess
    class SupportRequest,SupportResponse supportProcess
    class PaymentSuccess,CreateOrder,PrepareShipment,Ship,Delivery,End_node successProcess
    class CheckInventory normalProcess

    %% リンクスタイル
    %% 正常フロー（緑、太線）
    linkStyle 0,1,2,3,4,7,10,11,13,15,16,20 stroke:#4CAF50,stroke-width:3px

    %% エラーフロー（赤、破線）
    linkStyle 5,8,9 stroke:#F44336,stroke-width:2px,stroke-dasharray:5,5

    %% 警告フロー（オレンジ、中太線）
    linkStyle 6,12,14 stroke:#FF9800,stroke-width:2px

    %% サポートフロー（青、点線）
    linkStyle 17,18,19,21 stroke:#2196F3,stroke-width:2px,stroke-dasharray:2,2
```

この統合的なフローチャートでは：

• subgraphで業務プロセスの段階を明確に分離
• classDefで処理の重要度や状態を色分け
• linkStyleで正常フロー、エラーフロー、サポートフローを視覚的に区別

図で理解できる要点：

• 顧客の購入体験が段階的に進行する流れ
• 各段階でのエラーハンドリングとサポート体制
• 決済から配送まで の重要なビジネスプロセス

まとめ

本記事では、Mermaid flowchart の 3 つの重要な機能であるsubgraph、linkStyle、classDefを段階的に学び、それらを組み合わせた実践的な応用例まで探求してまいりました。

subgraphにより関連する要素をグループ化し、階層構造を表現することで、複雑な組織やシステムの構造を整理できます。linkStyleを使って線の色や太さ、スタイルを変更することで、データフローの種類や重要度を視覚的に伝えられるようになりました。そしてclassDefによるノードの装飾で、情報の分類や状態を直感的に理解できる図を作成できます。

これら 3 つの機能を組み合わせることで、単なるフローチャートから、企業の組織図、システム構成図、業務プロセス図まで、様々な場面で活用できるプロフェッショナルレベルの図を作成できるようになります。技術ドキュメントの作成、プレゼンテーション資料の準備、チーム内でのコミュニケーション向上など、幅広い用途でご活用いただけるでしょう。

実際に 100 の演習問題に取り組みながら、これらの技術を身につけ、より効果的な図解コミュニケーションを実現していただければと思います。継続的な練習により、読み手に分かりやすく、視覚的に魅力的な図を作成するスキルが向上していくはずです。

関連リンク

• Mermaid 公式ドキュメント
• Mermaid Flowchart 構文リファレンス
• GitHub での Mermaid 利用方法
• Visual Studio Code Mermaid 拡張機能
• Mermaid Live Editor