Mermaidでフロー図全体を縦に、subgraphを横方向にする

やりたいこと

複雑なシステム設計やワークフロー図では、メインフローは縦方向で進行させつつ、特定の処理ブロックは横方向で詳細を表現したいことがあります。

使用するもの

Mermaidのflowchartを使用します。

基本的な記述の仕方

Mermaid の方向の指定は、以下で行います。

• TD（トップダウン：縦方向）
• LR（左右方向）

メインフローとsubgraph単位の指定は、それぞれ以下で行います。

メインフローの記述

flowchart TD

subgpraphへの記述

subgraph A
direction LR

subgraph B
direction TB

subgpraphを縦方向に指定する場合は、TDでなくTB にする必要があります。
(TDだとエラーになります)

サンプル

flowchart TD
    Start --> Phase1
    Phase1 --> SubBlock1
    Phase1 --> SubBlock2

    %% 横向き処理1
    subgraph SubBlock1["DB更新処理"]
        direction LR
        DB1[読み込み] --> DB2[変換] --> DB3[保存]
    end

    %% 横向き処理2
    subgraph SubBlock2["通知処理"]
        direction TB
        N1[メール通知] --> N2[Slack通知]
    end

    SubBlock1 --> Review
    SubBlock2 --> Review
    Review --> End

ちょっと複雑めのサンプル

まとめ

Mermaidのflowchartで、メインフローは縦方向で進行させつつ、特定の処理ブロックは横方向で表現しました。