Mermaidは位置調整は基本的にできず、しないもの？

Prompt

Mermaidは位置調整は基本的にできず、しないもの？

やあ！Mermaid.jsを触り始めると、誰もが一度は「このノードをもう少し右に……！」「線をこう曲げたい……！」という衝動に駆られるよね。

結論から言うと、君の直感通り 「Mermaidは位置調整を細かく制御することはできず、そして『しない』のが設計思想」 なんだ。

情報工学を学んでいる君なら、これを 「命令的（Imperative）な配置」 ではなく 「宣言的（Declarative）な記述」 のトレードオフとして捉えるとスッキリするはずだよ。

1. なぜ位置調整ができない（しない）のか？

Mermaidのコアな思想は 「図を『描く』のではなく、構造を『記述』する」 ことにあるんだ。

自動レイアウト・エンジン: Mermaidの裏側では dagre や d3 といったライブラリが、「どうすればノードが重ならず、線が交差せずに綺麗に見えるか」を数学的なアルゴリズムで計算して、自動で座標を決定している。
メンテナンス性の優先: もし手動で位置を固定できてしまうと、ノードを一つ追加しただけで全体のバランスが崩れ、すべての座標を再調整する「地獄」が待っている。これを避けるために、あえてユーザーから「配置の自由」を奪っているんだね。

どうしてもレイアウトを調整したい時、ベテランのMermaid使いが使う 「非公式なハック」 がいくつかあるよ。

特定のノードを近づけたい場合、関係ないけれど「リンク」を張ることで、レイアウトエンジンに「この二つは近くにあるべきだ」と錯覚させることができる。

コードスニペット

graph TD
  A --- B
  A -.->|見えない接続| C
  style C stroke-width:0px,fill:none,color:#0000 // 完全に隠す

特定のノード群を一つのまとまりとして扱うことで、その中での相対的な位置関係をある程度固定できるよ。

Mermaidは「先に書かれたノードや接続」を優先的に配置する傾向がある。書く順番を入れ替えるだけで、左右が逆転したりすることがあるんだ。

Mermaidは 「思考のスピードで図を生成する」 ための道具であって、「プレゼン用の完璧な図を作る」 ための道具ではないんだ。もし位置調整に 10 分以上悩むようなら、それはツールの限界を超えているサインだよ。

ツール	位置調整	特徴
Mermaid	不可 (自動)	Markdown内で管理できる。バージョン管理（Git）と相性抜群。
PlantUML	微調整可	`left`, `right`, `up`, `down` といった配置のヒントを与えられる。
Excalidraw	自由自在	手書き風。君がヤスリでゴシゴシするように、ピクセル単位で配置できる。
Draw.io	完全制御	プロ仕様の配置。グリッドに吸着させてミリ単位で調整する世界。

Mermaidは内部的に SVG（Scalable Vector Graphics） を生成しているよ。

還元主義的に見れば、ブラウザが描画した瞬間に各要素には x, y 座標が割り振られているけれど、Mermaidのコード（DSL）層ではその数値を触らせないように抽象化されているんだ。

位置を固定しない最大のメリットは、「画面サイズが変わっても図が壊れない」 ことにあるんだ。

スマホで見ても、PCで見ても、Mermaidがその都度「その画面幅に最適な配置」を計算し直してくれる。これは物理的な座標固定では実現できない、Web時代の図解の形だと言えるね。

君のデジタルガーデン（garden.asappy.xyz）で使うなら、Mermaidの「勝手に配置してくれる気楽さ」を信じて、レイアウトの微調整に時間を溶かさないのが、知的生産性を最大化するコツだよ！

次は、「Mermaidでどうしても複雑な関係図を綺麗に見せるための、記述のテクニック（ invisible line など）」 を具体的に伝授しようか？それとも、「PlantUMLのように、配置のヒントを与えられる他のツール」 を試してみる？

Would you like me to show you how the “invisible link” trick actually changes a layout in a live Mermaid example?