MermaidLayoutFinisher

Mermaidの自動レイアウトは、たいてい8割まで正しい図を作ってくれます。問題は残りの2割です。この線がここをまたがなければ、このノードがあと少し右なら、と思っても、コードでは手の出しようがありません。MermaidLayoutFinisherは、その「あと少し」をドラッグで仕上げて、SVG、PNG、PowerPointへ書き出すためのWebツールです。

解決する課題

Mermaidはテキストから図を生成できる記法として定着し、ChatGPTのようなAIもフローチャートをMermaidで返すようになりました。図の内容を文字で管理できるのは大きな利点です。

一方で、レイアウトはアルゴリズム任せです。ノードの数が増えると、線の交差や不自然な配置がどうしても残ります。描き直せるツールへ図を作り直すと、今度はコードとの対応が切れて、修正のたびに図を触り直すことになります。

MermaidLayoutFinisherは、コードを正としたまま見た目だけを直せるようにしました。図の内容(ノード、つながり、ラベル)はコードが唯一の入力源で、キャンバスで変更できるのはノードの位置と線の経路だけです。コードを編集しても、手で調整した配置は保たれます。

主な機能

コードを貼ると、フローチャートを解析して自動レイアウトで描画します。AIの回答を丸ごと貼っても、Mermaidのコードブロックだけを自動で抽出します。そこからノードをドラッグして動かし、複数選択、整列(左右上下、等間隔)、グリッド吸着で整えます。線は直角、直線、曲線を切り替えられ、線をクリックすれば折れ点の追加や、ノードのどの辺から出入りするかの指定、ラベル位置の移動もできます。

手で全部を並べ直すのが面倒な図には、レイアウト最適化があります。おまかせ最適化は、複数の配置候補を、実際に描画される線で測ったスコア(線とノードの重なり、線同士の交差、曲がり角、総延長、面積)で比較して、最良のものだけを適用します。どのモードでもノード同士の重なりは許さず、現在より悪化する結果は返しません。改善する箇所がなければ「現在の配置が最良でした」と正直に答えます。

書き出しはSVG、PNG、PowerPointの3形式です。PowerPointは画像ではなく、角丸四角形やひし形といったネイティブ図形としてスライドに配置するため、貼り付けたあとにPowerPoint上で色や位置を編集できます。作った図はブラウザに自動保存され、プロジェクトファイル(.json)や共有リンクでも持ち運べます。

開発の背景

このツールは、BenriWorks自身の困りごとから生まれました。設計資料やブログの図解をMermaidで書き、仕上がりに満足できず、最後はドローツールで描き直す。この繰り返しの中で、欲しいのは高機能な作図ツールではなく、自動レイアウトの結果を少しだけ動かせる「仕上げ工程」だと気づきました。

だからこのアプリは、図を描く機能を持ちません。内容の編集はコードに、配置の仕上げは手に、と役割を分けることが設計の中心です。

技術と設計

Next.jsとTypeScriptで実装した静的なWebアプリで、Vercelで配信しています。ページはすべてビルド時にプリレンダリングされ、実行時のサーバー処理はありません。

Mermaidの解釈には、flowchart系の実用サブセットを対象にした独自パーサを使っています。既存のMermaidレンダラを使わないのは、ノードの位置や線の経路を後から操作できるデータ構造が必要だからです。未対応の記法は黙って無視せず、行番号つきのエラーや警告として表示します。

配置の扱いにも判断があります。手で置いたノードは絶対座標で保持し、コードにノードを追加したときは、固定済みノードを動かさずに空いている場所へ新しいノードを配置します。線は毎回ノードの現在位置から計算し直すため、どこへ動かしても線は必ずつながります。画面のSVGをそのまま複製して書き出すので、画面と出力が食い違うこともありません。

入力したコードと配置はブラウザのlocalStorageにのみ保存され、サーバーへの送信はありません。共有リンクも図の内容を圧縮してURLに埋め込む方式で、サーバーを経由しない設計です。

現在の状態と既知の課題

公開中で、BenriWorksの資料づくりでも日常的に使っています。対応しているのはflowchart系の図だけで、シーケンス図などの他の図種別はエラーになります。PowerPoint書き出しには形式上の制約がいくつかあり、たとえば傾きが逆向きの平行四辺形はPowerPoint側に対応する図形がないため、反転しない側の形で出力されます(該当時は件数を通知します)。

書き出した図をプレゼン資料に貼るという用途では、日本地図を塗り分けてPowerPointへ書き出す「白地図 Studio」が兄弟のような関係にあります。どちらも「資料の中で編集を続けられる形式で渡す」ことを大事にしています。