Mermaid のフローチャートを、手で仕上げる。

自動レイアウトの「崩れ」を、ワンクリックで最適化

自動レイアウトは、線がノードを貫いたり、線同士が何度も交差したりします。 ツールバーの「レイアウト」→「おまかせ最適化」は、複数の配置案を実測スコアで比べ、 最も破綻の少ないものを適用します。ノード同士の重なりゼロはどの配置でも守られます。

線とノードの重なり 3→0・線の交差 5→2（この画像の実測値）。

使い方は 3 ステップ

1. 1

   コードを貼り付ける

   左のエディタに Mermaid のコードを貼ると、その場で図が描かれます。AI の回答を説明文ごと貼っても、mermaid のコードブロックだけが取り出されます。

2. 2

   レイアウトを整える

   ツールバーの「レイアウト」から配置モードを選ぶと、重なりと交差の少ない配置に置き換わります。細部はノードをドラッグし、線の経路を直接編集して仕上げます。

3. 3

   書き出して資料に貼る

   SVG・PNG・PowerPoint で書き出します。余白・背景・解像度・スライドサイズを選べ、SVG と PNG はクリップボードにもコピーできます。

資料づくりに必要な機能だけを

• PowerPoint にネイティブ図形で

  1 枚のスライドに、画像ではなく図形として配置します。貼り付けた後にパワポ上で文字・色・位置を編集でき、図形には node-A のような名前が付くので選択ウィンドウでも扱えます。

• SVG・PNG も 1 クリック

  SVG は拡大しても劣化しないベクタで、Illustrator や Figma でも開けます。PNG は 1〜3 倍の解像度。どちらも背景を白か透明から選べます。

• 線の経路を手で直せる

  線をクリックして折れ点を追加・移動し、線が出入りする辺（上下左右）も指定できます。ラベルの位置も移動でき、手で決めた経路はノードを動かしても保たれます。

• 5 つの配置モード

  おまかせ最適化・標準・コンパクト・ワイド（16:9）・今の配置を整える。どのモードもノード同士の重なりゼロを守り、ループの戻り線は外周へ逃がします。

• URL 共有とファイル保存

  図を URL に埋め込む共有リンクのほか、.json（配置・設定込み）と .mmd で保存・読込ができます。編集中の内容はブラウザに自動保存されます。

• AI の回答を丸ごと貼れる

  ChatGPT や Copilot の回答をそのまま貼り付けても、前後の説明文とコードフェンスを取り除いて Mermaid の部分だけを読み込みます。

登録不要・サーバー保存なし

• ブラウザの中だけで動く

  コードも配置もブラウザの localStorage にのみ保存されます。サーバ側の保存領域・API・アナリティクスはありません。社外に出せない図もそのまま扱えます。

• 登録もログインも不要

  URL を開けばすぐ使えます。無料で、利用回数の制限もありません。別の端末へ持ち運ぶときは .json ファイルとして保存してください。

• 良し悪しを数値で判断

  おまかせ最適化は複数の配置案を、線とノードの重なり・線同士の交差・並走の重複・曲がり角・総延長・面積で採点し、最も破綻の少ない案を適用します。改善量は適用後に表示されます。

よくある質問

Mermaid とは何ですか？

テキストで図を書くための記法です。「flowchart TD」から始まる数行のコードが、そのままフローチャートになります。ChatGPT や Claude に業務フローを尋ねると Mermaid のコードで返ってくることが多く、このツールはその答えを図として仕上げるために使えます。

対応している記法を教えてください。

flowchart と graph（TD・TB・BT・LR・RL）が対象です。矩形・ひし形・円柱・六角形などのノード形、各種の矢印とラベル、subgraph の入れ子、classDef や style による色指定に対応しています。sequenceDiagram や gantt などフローチャート以外の図種別には対応しておらず、未対応の記述は行番号つきのエラーまたは警告として表示します。

PowerPoint への書き出しは画像ですか？

いいえ。ノードは PowerPoint のプリセット図形、矢印はカスタム図形として 1 枚のスライドに配置します。画像ではないので、貼り付けた後にスライド上で文字・色・位置を編集できます。スライドサイズは 16:9・4:3・図に合わせるから選べます。

入力したデータはどこに保存されますか？

ブラウザの localStorage にのみ保存されます。サーバ側の保存領域・API・アナリティクス・外部フォントの読み込みはありません。共有リンクは図の内容を圧縮して URL のハッシュに埋め込む方式なので、リンクを作る操作でもサーバへは送信されません。

料金はかかりますか？

かかりません。登録もログインも不要で、ブラウザで開けばすべての機能を使えます。利用回数の制限もありません。