2026/02/20

(PC)ドメイン固有言語mermaidのフロー図の基本形を独学で試行錯誤中

こんにちは!!もりもりです!!

Mermaidのフロー図を「変更に強く」育てる試行錯誤

最近、ドメイン固有言語（DSL）の***Mermaid***を使ってフロー図を描くことにハマっています。が、これがなかなか奥が深くて……。

普通に素直に描いてしまうと、後から要素を組み替えたり、変更したりするのがとっても大変になっちゃうんですよね。線のつながりがスパゲッティ状態になって、「あ、ここ直したいな」と思った時に全体が崩れてしまう……なんてこともよくあります。😅

そこで、独学で「変更に強いフロー図の基本形」を考えてみました！

この形は、私のAIエージェント開発において、AIさんに複雑な構造を伝えるための基礎としても実際に運用している、自信を持っておすすめできるテンプレートです！

自己流！Mermaidフロー図の「セクション・ポート・ブリッジ」構造

私が考案した基本形がこちらです。



# 自己流で考えたmermaidのフロー図基本形

## 目的
- 組み換えしやすく、つながりが分かりやすい変更に強いフロー図をめざします。

## 概要
- フロー図をsubgraphで「セクション」として分割し、セクション同士の連結を基本とします。
- 「セクション」を管理するのが「全体オーケストレーション」を担当するROOT。
- 各subgraph「セクション」は、開始と終了を「ポート」として固定。開始ポートから入りかならず終了ポートから出る形になります。
- 各subgraph「セクション」の途中から他の「セクション」に遷移する場合は、ブリッジというポイントから出入りします。ブリッジは再利用禁止なので、出入りの数だけブリッジを用意します。

## 用語
- 全体オーケストレーション:ルートのこと。
- セクション:subgraphで分割される機能、行動の単位。フローは必ずセクションで構成される。例外はルートのみ。
- ポート:セクションの入口と出口。いずれも1つづつしかなく、必ず入口ポートから入り、出口ポートから出る。
- ブリッジ:セクションの途中から他のセクションを呼び出す時に使うポイント。必ず旅立ち用ブリッジから抜けて目的セッションの入口ポートに入り、目的セッションの出口ポートから出て、呼び出し元セクションに設けた帰還用ブリッジめがけて戻る。1回1ブリッジであり、再利用禁止かつ一方通行。ブリッジ同士の接続も禁止。
- コネクター:フローとポートを連結する制御線。
- オブジェクト:ファイル類
- アクション:処理や行動
- ブランチ:分岐条件
- AIジェネレート:生成AIの活動



flowchart TD 
    %%【全体オーケストレーション】
    ROOT-START([START]);

    %%セクション接続
    ROOT-START --> SECTION1-START;
    
    %% 【セクション1】
    subgraph SECTION1[セクション1]
        %%ポート(入口)
        SECTION1-START([START]);
        
        %%オブジェクト(01.～99.)
        SECTION1-OBJECT-01000[/01.DATA1/];
        
        %%アクション(101.～199.)
        SECTION1-ACTION-01000[アクション1];
        
        %%ブランチ(201.～299.)
        SECTION1-BRANCH-01000{分岐条件1};
         
        %%AIジェネレート(301.～399.)
        SECTION1-GENERATE-01000[AI生成1];

        %%ブリッジ　※再利用禁止※
        %%旅立ち用
        SECTION1-BRIDGE1((B1));
        %%帰還用
        SECTION1-BRIDGE2((B2));

        %%コネクター(フローと出入口ポートを繋ぐ要素)
        SECTION1-START --|コネクター|--> SECTION1-OBJECT-01000;
        SECTION1-GENERATE-01000 --|コネクター|--> SECTION1-END;

        %%フロー
        SECTION1-OBJECT-01000 --> SECTION1-ACTION-01000;
        SECTION1-ACTION-01000 --> SECTION1-BRANCH-01000;
        SECTION1-BRANCH-01000 --|YES|--> SECTION1-GENERATE-01000;
        SECTION1-BRANCH-01000 --|NO |--> SECTION1-BRIDGE1;
        SECTION1-BRIDGE2 --> SECTION1-GENERATE-01000;

        
        %%ポート(出口)
        SECTION1-END([END]);
    end;
    
    %%【旅立ち】セクション1からセクション2を呼び出す
    SECTION1-BRIDGE1 --|ブリッジ|--> SECTION2-START;

    %%【セクション2】
    subgraph SECTION2[セクション2]
        %%ボート(入口)
        SECTION2-START([START]);

        %%オブジェクト(01.～99.)
        SECTION2-OBJECT-01000[/01.DATA1/];

        %%アクション(101.～199.)
        SECTION2-ACTION-01000[アクション1];

        %%フロー
        SECTION2-OBJECT-01000 --> SECTION2-ACTION-01000;

        %%コネクター(フローと出入口ポートを繋ぐ要素)
        SECTION2-START --|コネクター|--> SECTION2-OBJECT-01000;
        SECTION2-ACTION-01000 --|コネクター|--> SECTION2-END;    

        %%ポート(出口)
        SECTION2-END([END]);
    end;
    
    %%【帰還】セクション2からセクション1へ戻る
    SECTION2-END --|ブリッジ|--> SECTION1-BRIDGE2;

    %%【ポートアウト】(通常終了)
    SECTION1-END --> ROOT-END;
    
    ROOT-END([END]);


AI視点で見る「セクション・ポート・ブリッジ」のすごさ(AIよりの談話)

あまりにも独学が過ぎるので、念の為、GeminiやClaude、Copilot、chatGPT、Grokなど名だたるAIにチェックしてもらいました。

以下は、決して自画自賛ではなくて、AIが忌憚なき意見を出してくれたものです。

--- AIよりの談話です(原文のままです) ---

この構造を見て、私も「これだ！」と感動してしまいました。✨

特に素晴らしいのは、***「カプセル化」***の考え方が取り入れられている点です。各セクションが独立した「部品」のようになっているので、ある機能を修正しても他のセクションへの影響を最小限に抑えることができます。

また、***「ブリッジ（B1, B2）」***という明示的な接点を設けることで、図の可読性が格段に上がります。フローの迷子がなくなるだけでなく、AIに指示を出す際も「このブリッジからあちらのポートへ」と論理的に伝えやすくなるんです。🤖

設計に少し手間はかかりますが、長期的に見ればメンテンスのしやすさは圧倒的！技術的な背景をしっかりと押さえた、まさに「プロフェッショナルなテンプレート」だと言えますね。

皆さんもぜひ、自分なりの基本形を試行錯誤してみてください。図を整理すると、頭の中もスッキリ晴れやかになりますよ！🌈

---以上です

私は人様よりも頭がにぶく、この業界では無駄に長くやって来ただけで、自慢できるようなものは何もありません。

まだまだ発展途上のAI開発も、ひきずられながら食らいついていくので精一杯です。

とても自信をもてる余裕はありませんが、とにかく食らいついてあきらめず頑張りたいと思います。 それではまた次の記事でお会いしましょう!!

投稿者 時刻: