Mermaidフローチャートを編集

フローチャートのコードを読み込み、GUI で構造を編集して、コードとして書き出す。触っていない行は1バイトも変わりません。

フローチャートを読み込む

Mermaid フローチャートのコードを貼り付けるか、ファイルをドロップするか、サンプルを読み込みます。

またはページ上にファイルをドロップ · 対応形式: .mmd, .mermaid, .md, .txt

触っていない部分を書き換えない構造エディタ

このツールは Mermaid のフローチャート記法（mermaid.live や多くのドキュメントツールで使われている graph / flowchart 記法）を読み込み、インスペクタでノードやエッジの追加・削除、ラベルや形状の変更、subgraph（グループ）間の移動、全体の方向変更などを行い、その結果をコードとして書き出します。

読み込んだソースは1行単位で管理しています。編集していない行は、改行コードまで含めてそのまま出力されます。コメントやスタイル指定、このツールがまだ対応していない記法（矢印の連結、セミコロン区切りの複文、非ASCIIのノードID など）もそのまま保持され、勝手に整形されたり消えたりしません。

ゼロから図を描いたり画像を書き出す機能はありません（「コードを打つとその場でSVGプレビューが出て、SVG/PNGで書き出せる」というシンプルなツールは、姉妹ツールの draw-flowchart をどうぞ）。このツールは、既存のフローチャートのコードを GUI で組み替えて、きれいなコードとして受け取るための専用ツールです。

フローチャートが外に出ない理由

ここでのプライバシーは「約束」ではなく構造上の事実です。アップロード先のサーバー自体が存在しません。

  • 解析・編集・プレビュー描画はすべてブラウザ内で完結します。
  • このページは静的ファイルとして配信されており、フローチャートの内容を含む通信は発生しません。
  • URL に図をエンコードして共有するような機能自体がありません。
  • ソースコードは公開されており、誰でも読めます（MIT ライセンス）。
  • オフラインでも動作します — これも通信が発生しないからこそ成立しています。

気になる方は、編集中にブラウザの開発者ツールの Network パネルを開いてみてください。フローチャートの内容を含む通信が一切ないことを確認できます。 ソースコードを見る。

使い方

  1. フローチャートを読み込む

    Mermaid フローチャートのコードを貼り付けるか、.mmd / .mermaid / .md / .txt ファイルをドロップするか、「サンプルを読み込む」をクリックします。AI のチャット回答をそのまま貼り付けても、```mermaid ブロック内のコードだけが自動で抽出されます。

  2. 構造を編集する

    リストからノードやエッジを選ぶ（対応が取れていればプレビュー上のクリックでも可）と、ラベル・形状・接続を編集できます。ツールバーからノード・エッジの追加、subgraph への出し入れ、全体の方向変更も行えます。

  3. 結果を確認する

    プレビューとコード欄はどちらもリアルタイムに更新されます。解析できない行があると編集操作は一時停止し、エラー箇所を表示します。直前まで成功していたプレビューはそのまま残るので、コード欄で直接修正できます。

  4. コードを書き出す

    コードのコピー、```mermaid ブロック付きコピー、.mmd のダウンロードに加えて、「AI 指示用にコピー」で before/after 形式の変更指示をワンクリックで用意できます（詳細は下記）。

よくある質問

フローチャートはどこかにアップロードされますか？

いいえ。解析・編集・描画はすべてブラウザ内で完結します。サーバー側の処理も共有リンク機能もないため、フローチャートの内容が外部に送信される経路自体が存在しません。

「無編集部分はバイト単位で元通り」とは具体的にどういうことですか？

ファイルを読み込んで何も変更せずに書き出すと、空白・コメント・改行コードまで含めて元のファイルと完全に一致します。何か編集した場合も、実際に編集した行だけが書き換わり、それ以外の行は一切変化しません。

このツールが対応していない記法はどうなりますか？

書かれたまま保持され、プレビューにも反映されますが、GUI からは編集できません。classDef / style / linkStyle / click といったディレクティブ、矢印の連結（A --> B --> C）などが該当します。エディタ下部のサマリーに、その行数が表示されます。コード欄から直接編集することは可能です。

ノードをドラッグして配置を変えられますか？

できません。これは機能不足ではなく意図的な仕様です。Mermaid のフローチャート記法には座標を記録する構文が存在せず、レイアウトは常に自動計算されるため、ドラッグした位置をコードに書き戻すことは原理的にできません。ここにある編集機能は、すべて実際にテキスト形式として表現できるものだけです。

ノードの ID をリネームできますか？

できません（ラベルの変更のみ対応しています）。ID を変更すると、このツールが編集対象としていない行（未対応の click や style ディレクティブなど）の中の参照が壊れる可能性があるためです。ID 自体はコード欄で直接編集でき、そこであれば関連する参照も自分の目で確認しながら修正できます。

「AI 指示用にコピー」は何のための機能ですか？

読み込んだ時点のコード（before）と現在のコード（after）を、それぞれラベル付きの ```mermaid ブロックとしてコピーします。そのまま AI のチャットに貼り付けて変更指示として使う想定です。UI の構造を「コンテナ = subgraph、コンポーネント = ノード」という規約でフローチャートとして表現し、ここで編集し、before/after を AI に渡す、という使い方を想定しています。

オフラインでも使えますか？

はい。PWA 対応なので、一度アクセスすればキャッシュされ、ネット接続がなくても動作します。ホーム画面に追加することもできます。