はじめに

hkob の雑記録の第301回目は、Mermaid のレイアウトが変更になった件を解説します。

気づき

このブログを書こうとして、森高千里DB を表示したところ、Mermaid の表示が変わっていることに気づきました。

Notion の Mermaid の Version が上がったのか、ER 図のレイアウトが変わったようです。線が縦横に整理されるようになっています。#Notion #Mermaid pic.twitter.com/RjOzH3F4WY
— hkob｜Notion Ambassador (@hkob) 2025年10月26日

前回、Notion AI で ER 図を作成するコマンドを作成するブログを書いたときにスクリーンショットを撮っていたので、それと比較してみました。

hkob.hatenablog.com

その時のスクリーンショットがこちらです。

今回、Mermaid で作成した図はこちらです。せっかくなので今回は Mermaid 画像をクリックして拡大表示した後に、右ボタンで「画像をコピーする」でコピーしてみました。この機能も紹介することを忘れていた気がするので、ここで紹介しておきます。この機能も便利ですね。

作成された ER 図はこちらです。以前は、滑らかな線で繋がっていましたが、回路図のような形で縦横に配線されるようになっています。

Flowchart のレイアウト

同じようにフローチャートのレイアウトも変わってしまっています。以前、授業で書いたフローチャートはこんな感じでした。

Mermaid はこんな感じで書いています。

graph TD
  start --> do1[ ] --> init[[初期駒をコピー]] --> ta[Player A をターンに設定] --> db[[画面表示: displayBoard]] --> do2[ ] --> input[[入力_エラー表示あり]] --> move[[駒を動かす]] --> db2[[画面表示: displayBoard]] --> ct[[ターン変更]]  --> u1{{ゲーム終了?}} -- yes --> u2{{再ゲーム?}} -- no --> stop
  u1 -- no --> do2
  u2 -- yes --> do1

今回の変更で、フローチャートはこんな感じになってしまいました。繰り返しループがあるせいで start と stop が真ん中に配置されてしまって、意図と違う感じになってしまいました。これは嬉しくないですね。

start と stop を中に入れないためには、main のコンテンツをsubgraph にするしかなさそうでした。少し面倒なのと、ゲーム終了などが上に来てしまうのは嬉しくないですね。

graph TD
  subgraph main
    do1[ ] --> init[[初期駒をコピー]] --> ta[Player A をターンに設定] --> db[[画面表示: displayBoard]] --> do2[ ] --> input[[入力_エラー表示あり]] --> move[[駒を動かす]] --> db2[[画面表示: displayBoard]] --> ct[[ターン変更]]  --> u1{{ゲーム終了?}} -- yes --> u2{{再ゲーム?}} -- yes --> do1
    u1 -- no --> do2
  end
  
  start --> do1
  u2 -- no --> stop

レイアウトの選択

今回のレイアウトの変更は、mermaid のレイアウトアルゴリズムが Dagre から ELK に変更になったためでした。ELK の方が可読性を向上させるためによく最適化された配置を提供するとのことです。

docs.min87.com

ただし、フローチャートの場合、順序がある程度意味を持つ場合があるので、dagre の方が嬉しい場合があるかもしれません。このため、以下のように config で dagre layout を指定してしまうといいかもしれません。

---
config:
  layout: dagre
---
graph TD
  start --> do1[ ] --> init[[初期駒をコピー]] --> ta[Player A をターンに設定] --> db[[画面表示: displayBoard]] --> do2[ ] --> input[[入力_エラー表示あり]] --> move[[駒を動かす]] --> db2[[画面表示: displayBoard]] --> ct[[ターン変更]]  --> u1{{ゲーム終了?}} -- yes --> u2{{再ゲーム?}} -- no --> stop
  u1 -- no --> do2
  u2 -- no --> do1

このように設定するとこんな感じで、古い dagre レイアウトで表示されました。