【Show HN】Mermaidのレイアウト調整にさようなら！自動整形エンジン「Line9」が凄い

「Line9」は、Mermaidフローチャートのレイアウトを自動で最適化し、手動調整を不要にする新しいレンダリングエンジンです。Mermaidといえば図表作成の定番ツールですが、これまでのDagreやELKベースのエンジンではレイアウトに不満を感じることも少なくありませんでした。私も4年間Mermaidを使ってきましたが、結局納得いく見た目にするために専用エディタで作り直すことがよくありました。Line9は、読みやすさを最大化するように設計されています。グリッド配置の最適化、関連ノードの近接化、エッジの短縮化・直線化を行い、プレゼン資料として映えるアスペクト比で描画します。公式サイトの/diagramページにある「Compare」ボタンから、従来のmermaid.jsとの比較結果を確認してみてください。アカウント不要で無料で使えますが、無料版にはウォーターマークが入ります。商用利用にはCLI版の有料契約が必要で、こちらはウォーターマークが消えます。現在はRust製のCLIツールも提供しており、ブラウザ内レンダリングと併せてプライバシーにも配慮しています。現状、レイアウト計算に負荷がかかるためmermaid.jsより少し動作が重いですが、その分クオリティは自信があります。出力はSVG/PNGに対応。URLでMermaidテキストを共有することも可能です。今後はサブグラフの配置やアスペクト比の調整、表示の洗練など、さらなる改善を予定しています。ぜひ皆さんの「レイアウトが崩れて諦めたMermaidコード」をLine9に貼り付けて、その違いを試してみてください！フィードバックもお待ちしています。

良さそう。でも値段が結構高いな。Lucidchartなら月16ドルくらいだし。

これ、Mermaidに関する自分の「最大の不満」を解消してくれるよ。素晴らしいツールだけど、オープンソースだったら良かったのにな。

グラフのレイアウトってすごく面白いし、めちゃくちゃ難しい問題だよね。

1994年から続く年次大会もあって、毎年Symposium on Graph Drawing and Network Visualizationで結果が発表されてるくらいだし。

詳しいわけじゃないんだけど、解決策についてもっと詳しく教えてくれる？既存の大きな制約ソルバーを使ってるの、それとも手書きでコード書いてる感じ？

--

コンテスト: https://mozart.diei.unipg.it/gdcontest/ (https://mozart.diei.unipg.it/gdcontest/)

第34回国際シンポジウム（カナダのオンタリオで開催）: https://graphdrawing.github.io/gd2026/ (https://graphdrawing.github.io/gd2026/)

ちなみにこれ、IEEEやACM主催じゃなくて独立したカンファレンスだよ。

Mermaidを使い始めたばかりの人やライトユーザーに豆知識だけど、elkっていう代替レイアウトが組み込まれてるよ。複雑なフローチャートでもこっちの方がかなり綺麗に描画されるはず。

ドキュメントはこちら: https://mermaid.ai/open-source/config/layouts.html (https://mermaid.ai/open-source/config/layouts.html)

レイアウト崩れがひどい図がたくさんあるから試してみるつもりだけど、自分の会社が年間120ドルも払うとは思えないな。ぶっちゃけ、どんな価格でもうちの購買プロセスを通すのは無理だと思う。それに普段はConfluenceのドキュメント内でマクロを使ってソースからMermaidを描画してるから、今回の価格モデルや認証モデルがどう絡んでくるのかもよく分からないし。

別にディスりたいわけでも、儲けるなと言いたいわけでもないよ。単なるフィードバックとして受け取って。

ちなみにこれ、Rustで再実装されたかなり堅実なMermaidだよ。
https://frankorz.com/merman/ (https://frankorz.com/merman/)

Mermaidなんて覚えなきゃよかった。エコシステムが絶望的すぎる。