↔️

mermaid.js のフローチャートに見えない線を引く

2025/08/18に公開

Mermaid

Gemini

tech

引いてどうすんねん　とか言われそうですが、まぁそう言わずに読んでってください。

(...という記事を Gemini2.5Pro に書かせてみた 記事になります)

mermaid.js のフローチャートに見えない線を引く

Mermaid.js を使ってフローチャートを作成する際に、ノード（要素）の配置を微調整したい場面があります。しかし、通常、ノードの配置は Mermaid.js が自動的に行います。このような時に役立つのが
見えない線（invisible link） です。

この記事では、見えない線を引く構文と、その具体的な活用方法について解説します。

見えない線を引く構文

Mermaid.js のフローチャートで見えない線を引くための構文は非常にシンプルです。2つのノードIDを ~~~ でつなぐだけです。

A ~~~ B

これは、ノード A とノード B の間に見た目上は表示されないけれども、レイアウト計算上は存在する線（リンク）を定義します。

基本構文:

flowchart TD
    A[ノードA]
    B[ノードB]
    C[ノードC]

    A --> B
    A ~~~ C

上記の例では、A から B への線は表示されますが、A と C の間の ~~~ は表示されません。しかし、Mermaid.js はこの見えない線の存在を考慮してレイアウトを決定します。

どういう時に使うか

見えない線の主な目的は、ノードの自動配置を制御し、意図した通りのレイアウトに近づけることです。特に、階層や左右の位置関係を整える際に強力なツールとなります。

活用例1：ノードの縦の階層を揃える

複数の分岐があるフローチャートで、特定のノードを同じ階層（レベル）に表示したい場合があります。

例えば、以下のコードでは D と E が B と同じ階層に表示されてしまいます。

修正前のコード


flowchart TD
    A[開始] --> B[処理B]
    A --> C[処理C]
    B --> D[処理D]
    C --> E[処理E]

ここで、D と C を同じ階層に揃えたい場合、B と C の間に見えない線を引くことで、B より C が下位ノードとして扱われ、結果としてD と C が同じ階層に揃うことになります。

修正後のコード

flowchart TD
    A[開始] --> B[処理B]
    A --> C[処理C]
    B --> D[処理D]
    C --> E[処理E]

    B ~~~ C

この見えない線によって、B と C のレイアウト上の関連性が生まれ、チャート全体が (場合によっては)より見やすく整理されます。

活用例2：直接つながらないノードの位置を調整する

直接的な親子関係はないものの、意味的に関連のあるノードを近くに配置したい場合にも有効です。
こちらの例の方が活用しやすいかもしれないです。

以下の例では、Step1 から Step3 と、SubA から SubC という2つの流れがあります。この2つの流れを左右に並べて表示したいと考えます。

修正前のコード

flowchart LR
    subgraph メインフロー
        A[Step1] --> B[Step2] --> C[Step3]
    end
    subgraph サブフロー
        SA[SubA] --> SB[SubB] --> SC[SubC]
    end

このままでは、2つのフローがどのように配置されるかは Mermaid.js 次第です。ここで、対応するノード間、または subgraph 間に見えない線を引くことで、それらの相対的な位置関係を指定できます。

修正後のコード

flowchart LR
    subgraph メインフロー
        A[Step1] --> B[Step2] --> C[Step3]
    end
    subgraph サブフロー
        SA[SubA] --> SB[SubB] --> SC[SubC]
    end

    メインフロー ~~~ サブフロー

このようにすることで、2つのフローが横並びで表示されやすくなります。

まとめ

以上、mermaid.js のフローチャートで見えない線を引く方法とその活用法についての記事でした。
自動調整されるノードの位置調整に役立つかもしれないので、覚えておくと地味に便利です。
個人的には、特に　subgraph を使う時に利用場面が多い気がします。

ここまでは、Gemini2.5Pro に書かせたものを手動で色々修正しています。

指示プロンプト

以下の記事を書いてください。
題名：mermaid.js のフローチャートに見えない線を引く
見出し1：見えない線を引く構文

見出し2：どういう時に使うか

まとめ：ここは空でいい(後で追記)

Gemini2.5Proの出力

 mermaid.js のフローチャートに見えない線を引くMermaid.js を使ってフローチャートを作成する際に、ノード（要素）の配置を微調整したい場面があります。しかし、通常、ノードの配置は Mermaid.js が自動的に行います。このような時に役立つのが**見えない線（invisible link）**です。
この記事では、見えない線を引く構文と、その具体的な活用方法について解説します。

 見えない線を引く構文Mermaid.js のフローチャートで見えない線を引くための構文は非常にシンプルです。2つのノードIDを ~~~ でつなぐだけです。
A ~~~ B
これは、ノード A とノード B の間に見た目上は表示されないけれども、レイアウト計算上は存在する線（リンク）を定義します。
基本構文:
上記の例では、A から B への線は表示されますが、A と C の間の ~~~ は表示されません。しかし、Mermaid.js はこの見えない線の存在を考慮してレイアウトを決定します。

 どういう時に使うか見えない線の主な目的は、ノードの自動配置を制御し、意図した通りのレイアウトに近づけることです。特に、階層や左右の位置関係を整える際に強力なツールとなります。

 活用例1：ノードの縦の階層を揃える複数の分岐があるフローチャートで、特定のノードを同じ階層（レベル）に表示したい場合があります。
例えば、以下のコードでは D と E が B と同じ階層に表示されてしまいます。
修正前のコード
ここで、D と E を同じ階層に揃えたい場合、B と C の間に見えない線を引くことで、B と C が同じ階層に配置されやすくなり、結果としてその下の D と E も揃いやすくなります。
修正後のコード
この見えない線によって、B と C のレイアウト上の関連性が生まれ、チャート全体がより見やすく整理されます。

 活用例2：直接つながらないノードの位置を調整する直接的な親子関係はないものの、意味的に関連のあるノードを近くに配置したい場合にも有効です。
以下の例では、Step1 から Step3 と、SubA から SubC という2つの流れがあります。この2つの流れを左右に並べて表示したいと考えます。
修正前のコード
このままでは、2つのフローがどのように配置されるかは Mermaid.js 次第です。ここで、対応するノード間に見えない線を引くことで、それらの相対的な位置関係を指定できます。
修正後のコード
このようにすることで、A と SA、B と SB、C と SC がそれぞれ近い位置に配置されるようになり、2つのフローが意図通りに並んで表示されやすくなります。

 まとめ

invisible Link についてはまっとうなことを言っていますが、フローチャートと記載内容がいまいちかみ合っていません(最初の方の記事では手動で直してます)。確かに文字の上ではまっとうなことを言っていそうですが...テキスト情報しか持たないLLM の限界でしょうか？画像系の MCP を組み込んだ Gemini2.5Pro なら少し変わるのかもしれないですね。

ちなみに、本記事中では触れませんでしたが見えない線の他に見えないノードを追加することでさらに高度な(?)位置調整をすることが可能ですが場合によりけりなので気が向いたらまた書きます。
(今度は GeminiCLI に書かせてみようかな...)

mermaid.js のフローチャートに見えない線を引く

見えない線を引く構文

どういう時に使うか

活用例1：ノードの縦の階層を揃える

活用例2：直接つながらないノードの位置を調整する

まとめ

mermaid.js のフローチャートに見えない線を引く

見えない線を引く構文

どういう時に使うか

活用例1：ノードの縦の階層を揃える

活用例2：直接つながらないノードの位置を調整する

まとめ

Discussion