📊 Mermaid 図プレビュー

Mermaid 記法を入力すると即座に SVG をレンダリング。flowchart / sequence / class / state / gantt / pie / mindmap / gitGraph / journey に対応。SVG コピー・SVG/PNG ダウンロード・テーマ切替対応。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

🔒 Mermaid のレンダリングは CDN から読み込んだスクリプトによりブラウザ内で実行されます。図のソーステキストはサーバーに送信されません。

サンプル: テーマ:

📝 Mermaid 入力

👁 プレビュー

📖 つまずきやすいポイント

Mermaid 記法を入力すると即座に図を描画し、テーマを切り替えて SVG / PNG で書き出せます。描画は CDN から読み込んだ Mermaid がブラウザ内で行い、図のソースは送信されません。検証されるのは構文だけで、図の内容が正しいかは見ていません — つながっていない矢印も、意味の通らないフローも、構文さえ合っていれば黙って描かれます。「描けた」と「伝わる」の間には距離があります。

ケース	何が起きるか	どうする
ラベルに括弧や記号を入れると構文エラーになる	`A[処理(1)]` のように書くと、パーサーは `)` をノード形状の終わりと解釈してしまい、そこで壊れます。同じことが `#`・`:`・`;`・`{`・`"` でも起こります。厄介なのはエラーの出方で、Mermaid は「何行目のどこが悪いか」をほとんど教えてくれず、図全体が消えるか、意味不明な位置を指すメッセージが出るだけです。50 行の図の中で 1 か所を探すことになります。	ラベルはダブルクォートで囲んでください — `A["処理(1)"]` と書けば中身は文字列として扱われ、括弧も記号もそのまま出ます。ラベル自体に `"` を含めたいときは `#quot;` という Mermaid 独自のエンティティを使い、改行は `<br/>` です。診断のコツは、直前に足した行を疑うこと — 動いていた図に 1 行足して壊れたなら、原因はほぼ確実にその行です。大きな図を書くときは 5 行ごとに描画を確認してください。まとめて 50 行書いてから壊れると、切り分けに時間が溶けます。
PNG で書き出すとフォントが変わる・文字が消える	PNG は描画済みの SVG を Canvas に描いてから書き出しています。この過程で、SVG が参照している Web フォントは Canvas 側で解決されず、システムの代替フォントに落ちます。等幅で揃えていた表がずれるのはこのためです。さらに、Mermaid が HTML ラベル (`foreignObject`) を使って描画している場合、ブラウザによっては Canvas に描いた時点でラベルが丸ごと空白になります — 画面では正しく見えているのに、書き出した PNG だけ文字が無いという状態です。	可能な限り SVG のまま使ってください。GitHub の README・Zenn・Notion・多くの CMS は SVG をそのまま貼れますし、SVG なら拡大しても劣化せず、テキストとして選択もできます。PNG がどうしても必要な場面 (Slack への貼り付け、SNS のカード画像) では、図中のフォント指定を `sans-serif` や `system-ui` のような確実に存在するものに寄せてください。書き出したら必ず画像を開いて中身を確認してください — 空白のラベルは、書き出しの成功と区別が付きません。
図が横に伸びすぎて読めない	`flowchart TD` (上から下) は分岐が増えるほど横に広がり、`LR` (左から右) は工程が増えるほど横に伸びます。どちらもレイアウトエンジンが自動で配置するので、こちらから幅を制御できません。GitHub の README に貼るとコンテナ幅に合わせて縮小されるため、ノードが 15 個を超えたあたりから文字が読めなくなります。モバイルではさらに厳しく、横スクロールできない表示環境も多いので、実質的に何も伝わりません。	1 枚に詰め込むのをやめてください。読めない図の最大の原因はレイアウトエンジンではなく、1 枚で全部を説明しようとしていることです。全体像を 7 ノード程度で描き、各部分を別の図に分けると、どちらも読めるようになります。`subgraph` でまとめると視覚的な塊ができて幅も抑えられます。方向は用途で選び — 手順は `LR`、判断の分岐は `TD` が読みやすい傾向があります。確認は必ず貼り付け先の実際の幅で行ってください。このページのプレビューは横に広いので、ここで読めても README では読めません。

Mermaid はバージョンによって構文が変わります。8 系から 11 系までの間に、graph は flowchart に置き換わり、gantt の日付書式や classDiagram の記法にも変更が入りました。ここで使っているのは Mermaid 11 系ですが、GitHub・GitLab・Notion・各種 CMS が内部で使っているバージョンはそれぞれ違い、しかも公表されていないこともあります — つまりここで正しく描けても、貼り付け先で描けない可能性が常にあります。新しい構文 (mindmap や新しい形状) を使ったときはとくに、貼り付け先での表示を必ず確認してください。もう 1 点、Mermaid の既定の securityLevel は strict で、ラベル内の HTML やクリックイベントは無効化されています。これを緩める設定はありますが、ユーザーが投稿した Mermaid をそのまま描画するサービスでは絶対に緩めないでください — ラベルは XSS の入口になります。

📖 使い方

1

構文を入力

左側のエディタに Mermaid 記法を入力。サンプルボタンから雛形を読み込めます。
2

テーマを選択

default / dark / forest / neutral から好みを選んで再レンダリング。
3

エクスポート

SVG をクリップボードにコピー、または SVG / PNG ファイルとしてダウンロード。

❓ よくある質問

対応する図のタイプは？

flowchart / sequence / class / state / gantt / pie / mindmap / gitGraph / journey に対応します。Mermaid 11 系の構文が使えます。

PNG ダウンロードはどう動作しますか？

レンダリング済みの SVG を Canvas に描画してから PNG として書き出します。すべてブラウザ内で完結します。

Mermaid のソースは外部に送信されますか？

いいえ。Mermaid ライブラリを CDN から読み込みますが、図のテキストはあなたのブラウザ内でのみ処理されます。

🔗 関連ツール

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。