Mermaid（マーメイド）図をプレビュー・PNG/SVG保存 - Mermaid Preview
Mermaid（マーメイド）記法で書いたフローチャート・シーケンス図・ER 図・ガントチャートなどを、ブラウザでリアルタイムに描画できる無料のオンラインエディタ。GitHub や Qiita・Zenn に貼る前の確認や、資料に貼る PNG / SVG 画像の書き出しに。構文エラーの内容も表示します。インストール・登録不要、外部送信なし。
Mermaid Preview は、Mermaid 記法で書いたフローチャート・シーケンス図・ER 図などをブラウザ上でリアルタイムに描画し、SVG / PNG 画像として保存できる無料のオンラインエディタです。インストールやユーザー登録は不要で、入力した内容はサーバーに送信されず、ブラウザ内で図に変換されます。
こんなときに
- フローチャートやシーケンス図を、作図ツールを使わずに作りたい：図形を一つずつ配置しなくても、テキストを書くだけで矢印や配置が自動で決まった図になります。修正もテキストを直すだけです。
- GitHub・Qiita・Zenn に貼る Mermaid を先に確認したい：README や記事に貼る前に、構文エラーが無いかと図の見た目を確かめられます。サイトによって Mermaid のバージョンが異なるため、新しい記法は表示されない場合があります。
- 設計書やプレゼン資料に貼る図を画像にしたい：描画した図を PNG・SVG で保存し、PowerPoint・Word・Excel・Google スライドなどに貼り付けられます。
- ER 図やクラス図でデータ構造を整理したい：テーブルやクラスの関係をテキストで書いて図にできるので、設計の検討やレビュー用の図をすばやく作れます。
- 生成 AI が出力した Mermaid を図にして確かめたい：ChatGPT や Claude などが出力した ```mermaid のコードブロックの中身を貼り付けると、そのまま図として確認できます。
- ガントチャートでスケジュールを表したい：タスクと期間をテキストで書くと、ガントチャートとして描画できます。サンプルから書き始めることもできます。
機能
- リアルタイム描画：入力の手を止めると自動で再描画します。構文エラーのときはエラー内容を表示し、直前に描画できた図を残します。
- 多様な図に対応：フローチャート・シーケンス図・クラス図・状態遷移図・ER 図・ガントチャート・円グラフのサンプルを用意。そのほか Mermaid が対応する図も描画できます。
- SVG / PNG で保存：描画した図を SVG・PNG 画像としてダウンロードできます。COPY_SVG で SVG をクリップボードにコピー、MMD でソースを保存することもできます。
- 拡大・縮小：FIT（枠に合わせる）と ± ボタン、Ctrl + ホイールでプレビューを拡大・縮小できます。
- ファイルの読み込み：.mmd ファイルをドラッグ&ドロップで読み込めます。.md ファイルの場合は最初の ```mermaid コードブロックを読み込みます。
- 外部送信なし：描画はすべてブラウザ内で行い、入力内容をサーバーへ送信しません。
使い方
- 左の SOURCE 欄に Mermaid 記法を入力するか、サンプルを選ぶか、.mmd / .md ファイルをドラッグ&ドロップします。
- 右の PREVIEW 欄で図を確認します。大きな図は FIT や拡大・縮小で見やすく調整できます。
- SVG または PNG で画像として保存するか、COPY_SVG でコピーして資料に貼り付けます。
よくある質問
- 無料で使えますか？
- はい。無料で、インストールやユーザー登録も不要です。
- Mermaid（マーメイド）とは何ですか？
- テキストでフローチャートやシーケンス図などを書くための記法と、それを図に描画するツールです。GitHub・GitLab・Qiita・Zenn などの Markdown の中で使えます。
- PowerPoint や Word に貼れますか？
- はい。PNG または SVG で保存して挿入できます。拡大しても粗くならない SVG がおすすめですが、SVG を挿入できない古いソフトでは PNG を使ってください。
- 入力した内容はサーバーに送信されますか？
- いいえ。Mermaid の描画はブラウザ内で行い、入力内容をサーバーへ送信しません。
- Mermaid の図を PNG 画像で保存できますか？
- はい。PNG ボタンで PNG 画像、SVG ボタンで SVG 画像としてダウンロードできます。
- Markdown ファイルの中の Mermaid を表示できますか？
- .md ファイルをドラッグ&ドロップすると、最初の ```mermaid コードブロックを読み込んで描画します。
- 構文エラーになるとどうなりますか？
- エラーメッセージを表示し、直前に正しく描画できた図を薄く表示したまま残します。修正すると自動で再描画されます。
- 書いた内容は保存されますか？
- 同じタブを開いている間はブラウザ（sessionStorage）に保持されます。タブを閉じると消えるため、残したい場合は MMD でソースを保存してください。