Mermaidで図を書いたのに、線が交差したりノードが重なったりして読みづらくなる問題を、draw.ioのMermaid機能が「ELK Layout」に対応したことでまとめて解決できます。
複雑なフローチャートやシステム構成図、長文SQLの構造図でも、自動配置でスッと整ったレイアウトに仕上がります。
設定はMermaidコードの先頭に一行追加するだけなので、図の手直しに時間を取られがちなみなさんでも、作図のストレスを減らして「理解・共有・引継ぎ」に集中できます。
はんちゃん（SE）長文SQLをMermaid化すると、いつもレイアウトが崩れて読めなくなります
チャーELK Layoutを有効化すると、複雑な構造でも自動で見やすく整います
- ELK Layoutの概要と、Mermaidのレイアウト崩れが改善する理由
- draw.ioでELK Layoutを有効にする具体的な書き方
- 長文SQL解析で効くポイント（JOIN、CTE、EXISTSなど）
- AIでMermaidを生成してdraw.ioに貼る実用的な流れ
導入
「Mermaidで図を書いているけど、レイアウトがぐちゃぐちゃになる…」
そんな悩みを感じたことはありませんか？
特に、
- 長文SQLの解析
- システム構成図
- フローチャート
- 処理分岐図
- ソースコード解析
などでは、ノード数が増えるほど図が崩れやすくなります。
しかし今回、draw.ioのMermaid機能が「ELK Layout」に対応したことで、複雑な図でも自動的に整理されたレイアウトを作れるようになりました。
ELK Layoutとは？
ELK（Eclipse Layout Kernel）は、
複雑なグラフ構造を“見やすく自動配置”するためのレイアウトエンジンです。
従来のMermaidでは、
- 線が交差する
- ノードが重なる
- 横幅が崩れる
などが発生しやすかったのですが、
ELK Layoutを使うことで、
- 自動整列
- ノード間隔の最適化
- 視認性向上
が実現できます。
draw.ioでの設定方法
draw.ioでは、
Mermaidコードの先頭に以下を追加することで、
ELKレイアウトを利用できます。
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph TD
A[開始] --> B{条件判定}
B -->|YES| C[処理A]
B -->|NO| D[処理B]
実際に使って感じたメリット
① 長文SQL解析との相性が良い
複雑なJOIN構造や、
CTEを含むSQLをMermaid化した際に、
図がかなり整理されやすくなりました。
特に、
- EXISTS
- IN句
- 相関サブクエリ
- UNION
- 多段JOIN
などを含む場合に効果を感じます。
② AIとの組み合わせが強力
ChatGPTやGeminiに、
「このSQLをMermaid形式で出力してください」
と依頼し、
そのままdraw.ioへ貼り付けることで、
構造図を高速生成できます。
③ 保守・引継ぎ資料が作りやすい
仕様書がない現場でも、
- 処理の流れ
- データの流れ
- テーブル依存関係
を可視化しやすくなります。
これは保守SEにとってかなり大きいメリットです。
こんな用途におすすめ
- 長文SQL解析
- システム構成図
- バッチ処理フロー
- JP1ジョブ構成整理
- VBA処理解析
- Python処理フロー
- API連携図
- draw.ioによる設計書作成
まとめ
draw.io × Mermaid × ELK Layout の組み合わせは、
「図を書く」
から、
「構造を自動整理する」
段階へ進化し始めています。
特に、
AIと組み合わせることで、
“コード → Mermaid → draw.io”
という流れが、
かなり現実的になってきました。
今後は、
SQL解析やシステム調査の現場でも、
さらに活用が広がりそうです😽
下記、SQL調査術でも解説しています。
コメント