Mermaid ダイアグラムエディター
片側に Mermaid を入力すると、もう片側に図が描かれていきます。間違いはその行に示され、最後に正しく描けた図は画面に残ります。すべてこのブラウザータブの中で動きます。
仕組み
Mermaid は、図をテキストとして書く方法です。「A --> B」のような数行が、フローチャート、シーケンス図、クラス図やデータベースの図、ガントチャート、マインドマップになります。GitHub、GitLab、Notion をはじめ多くのドキュメントツールがその場で図として表示するので、README やドキュメントの図は Mermaid で書かれていることがよくあります。ただ、それらのツールには Mermaid を書くのに向いた場所がありません。
このエディターは、入力に合わせて図を描きます。間違った行には下線が引かれ、Mermaid が何を期待していたかがメッセージに出ます。その間も最後に描けた図は薄く表示されたまま残るので、矢印を書いている途中で図が毎回消えることはありません。大きな図はドラッグで動かしたり、拡大・縮小したりできます。
思いどおりになったら、SVG で保存するか、行き先に合わせたサイズの PNG で保存します。行き先は文書、スライド、印刷するページのいずれかです。クリップボードに直接コピーすることもできます。下書きは次に来たときのためにこのブラウザーに保存され、共有リンクは図をリンクそのものの中に入れて運ぶので、図に関するものがサーバーに保存されることは一切ありません。
使い方
- 1 Mermaid を入力するか貼り付けるか、.mmd や Markdown のファイルを開くか、例から始めます。
- 2 プレビューを見ます。下線が引かれた行があれば直してください。Mermaid が何を期待していたかはメッセージに出ます。
- 3 見た目を選び、プレビューをドラッグしたり拡大したりして細部を確かめます。
- 4 SVG か PNG をダウンロードするか、画像をコピーするか、リンクをコピーして図を共有します。
知っておくと便利なこと
- Markdown ファイルを開くと、その最初の ```mermaid ブロックが開くので、README の図だけを取り出して編集できます。
- 例を選ぶとエディターの内容が置き換わります。Ctrl+Z で自分の図が戻ります。
- SVG はどの大きさでもくっきりしていて、Web で使うならこちらです。PNG は、スライド、チャットアプリ、ワープロで最も確実に受け付けられる形式です。
- 図の中で %%{init}%% の行を使って設定したテーマは、「見た目」の設定より優先されます。
- アップロードは一切ありません。図はこのタブの中で描かれ、共有リンクは、ブラウザーがサーバーに決して送らないアドレスの部分に図を収めます。
対応ブラウザ
- Chrome 94 以降
- Firefox 93 以降 · 113 以降で全速
- Safari 16.4 以降
- Edge 94 以降
ツールが使う機能がすべてそろっている最も古いバージョンです。ツール自身から算出しているので、ツールが変われば数字も変わります。
バージョン番号の確認日: 2026-09-04。
よくある質問
図はどこかにアップロードされますか？
いいえ。Mermaid はこのブラウザータブの中で動き、下書きもこのブラウザーにだけ保存されます。ブラウザーの開発者ツールの「ネットワーク」タブで確認できます。入力しても何も送信されません。
サーバーなしで共有リンクはどう動くのですか？
図は圧縮され、リンクの # より後ろの部分に書き込まれます。ブラウザーはその部分を Web サイトに送らないので、リンクを開けば誰の端末でも図が表示される一方、サイト自体がそれを受け取ることはありません。長い図ほどリンクも長くなります。
どの種類の図に対応していますか？
Mermaid 12 が描けるものすべてです。フローチャート、シーケンス図、クラス図、状態遷移図、ER 図、ガントチャート、円グラフ、マインドマップ、タイムライン、ユーザージャーニー、Git グラフ、象限チャート、サンキー図、XY チャート、そして新しく加わったブロック図、パケット図、アーキテクチャ図、カンバン、レーダーチャート、ツリーマップです。
行に下線が引かれるのはなぜですか？
そこで Mermaid が図を理解できなくなったからです。横に出るメッセージは Mermaid 自身のもので、何があるはずだったかを示しています。本当の間違いはその少し前にあることが多く、たとえば閉じ忘れた括弧や引用符です。
PNG はどのくらいの大きさになりますか？
用途によります。文書向けなら図が描かれるサイズの 2 倍で、高精細な画面でもくっきり見えます。スライド向けなら 4K の画面に収まる最大の大きさ、印刷向けなら 300 dpi で A4 に収まる最大の大きさです。正確なピクセル数は、ダウンロード前にボタンに表示されます。
README の図を編集できますか？
はい。Markdown ファイルを開くと、その中の最初の Mermaid ブロックがエディターに開きます。編集が終わったら、テキストをファイルにコピーして戻してください。
ほかの人から送られてきた図を開いても安全ですか？
図は Mermaid の strict モードで描かれます。コードを実行できるものはすべて取り除かれ、図の中の行でこのモードを切ることはできません。
関連ツール
ファイルは端末上で処理され、アップロードされません。ブラウザーの開発者ツールの「ネットワーク」タブでご確認いただけます。