日本語English

Mermaid エディタ（Mermaid Studio）

Mermaid のコードを左に書くと、右に図が出ます。フローチャート・シーケンス図・クラス図・ER 図などのテンプレートから始められ、SVG・PNG（倍率・背景を指定）で保存できます。描画はブラウザの中だけで行い、コードは送信されません。

端末内で処理・アップロードなしスマホ対応オフライン対応ベータ

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

Mermaid コード0 / 50,000 文字
プレビュー

コードを入力するか、テンプレートを選ぶと、ここに図が表示されます。

テーマ
書き出し

使い方

  1. flowchart TD …

    記法を書く

  2. プレビューその場で描画

    その場で図に

  3. diagram.svg
    diagram.png

    SVG・PNG で保存

Mermaid の記法を書くと図になり、SVG・PNG で保存できる流れ

  1. 「サンプルで試す」か、テンプレートの一覧から図の種類を選ぶと、コード欄に例が入ります。

  2. 左のコード欄を書き換えます。入力が止まると約 0.4 秒後に右のプレビューが更新されます。

  3. 構文エラーがあると、プレビューの位置に行番号・該当行・Mermaid のメッセージが出ます。直すと元の図に戻ります。

  4. テーマ（default・neutral・dark・forest）を選びます。

  5. 書き出し欄で SVG か PNG（倍率 ×1〜×4・背景は透明／白／濃色）を保存します。コードのコピーと、Markdown のコードブロックとしてのコピーもできます。

できること

11 種類の図のテンプレート

フローチャート・シーケンス図・クラス図・状態遷移図・ER 図・ガントチャート・円グラフ・マインドマップ・タイムライン・ユーザージャーニー・Git グラフの例を用意しています。

構文エラーを行つきで表示

Mermaid の構文チェックが返した行番号と該当行をそのまま表示し、メッセージも添えます。エラー中も、書き直せば自動で再描画します。

SVG・PNG の書き出し

SVG はそのまま、PNG は ×1〜×4 の倍率と、透明・白・濃色の背景から選べます。PNG は長辺 8,192 px・3,200 万画素までで、超えるときはエラーにして SVG を案内します。

悪意あるコードでも動かない設計

Mermaid は strict モード（HTML ラベルと click 指令を無効）で動かし、描画結果は許可リスト方式の DOMPurify を通したうえで <img> として表示します。スクリプトを書いても実行されません。

Markdown にそのまま貼れる

「Markdown 用にコピー」で ```mermaid のコードブロックを作ります。コード内に ``` があっても壊れないよう、囲みの長さを調整します。

こんなときに

  • 設計書や README に載せるフローチャート・シーケンス図を、テキストで書いて画像にしたい
  • ER 図やクラス図のコードを書きながら、構文エラーの行をすぐ確かめたい
  • GitHub や Notion に貼る前に、Mermaid のコードがどう描画されるか確認したい
  • ガントチャートやマインドマップを SVG・PNG にして、スライドに入れたい
  • 社内の図を外部サービスに送らずに作りたい

対応形式

入力

Mermaid のコード（テキスト、50,000 文字まで）

出力

SVGPNGコード（.mmd 相当のテキストのコピー）Markdown コードブロック

対応状況

機能対応補足
コードからの図の描画（Mermaid 12.2.0 が対応する図）とテーマ切り替え対応—
構文エラーの行表示・SVG／PNG の書き出し・コードのコピー対応—
入力コードをこの端末のブラウザに保存一部対応任意の設定です。オンにしたときだけ localStorage に保存し、いつでも消せます。URL に埋め込んだ共有リンクは作れません
click 指令・リンク・HTML ラベルの利用非対応安全のため無効です。図の中のリンクは動きません
図をマウスで編集する（ドラッグ配置など）非対応コードを書き換える方式のみです
外部のアイコンパックや画像の読み込み非対応外部へ通信しません。描画できるのは Mermaid 標準の部品だけです

制限・注意事項

  • コードは 50,000 文字まで、1 行は 2,000 文字までです。辺（矢印）が 500 本を超える図は Mermaid が描画を断ります。
  • 8,000 文字を超えるコードは、プレビューを自動では更新せず「描画する」を押したときだけ描きます。ノードが多い図は描画に数十秒かかり、その間ページが止まることがあります。
  • 画像を読み込む指定（@{ img: … }）と、%%{init}%% や front matter でのテーマ CSS（themeCSS）・フォント・HTML ラベルの指定は無効です。外部へ通信しないためです。
  • PNG は長辺 8,192 px・3,200 万画素までです。大きな図は倍率を下げるか SVG で保存してください。
  • フォントは端末にあるものを使うため、SVG と PNG の文字の幅は環境によって少し変わります。
  • HTML ラベルを使わないため、フローチャートの改行は <br> でなく Mermaid の記法に従います。HTML タグは文字として表示されることがあります。
  • このページの描画は Mermaid 12.2.0 に固定しています。GitHub など他のサービスの版と見た目が違うことがあります。

プライバシーと安全性

コードの描画・PNG への変換はすべてお使いのブラウザの中で行われ、サーバーへ送信・保存されません。「この端末のブラウザに保存」をオンにしたときだけ、コードをお使いのブラウザの localStorage に保存します。

よくある質問

Mermaid のコードを書くだけで図になりますか？
はい。左にコードを入力すると右にプレビューが出ます。最初の行に flowchart TD や sequenceDiagram のような図の種類を書きます。テンプレートを選べば例が入ります。
Mermaid の図を PNG にできますか？
できます。書き出し欄で倍率（×1〜×4）と背景（透明・白・濃色）を選んで「PNG を保存」を押します。長辺 8,192 px を超える大きさは作れません。
構文エラーはどこが間違っているか分かりますか？
Mermaid が行番号を返す場合は、その行番号と該当行を表示します。行が分からない種類のエラーでは、Mermaid のメッセージだけを表示します。
click やリンクは使えますか？
使えません。安全のため strict モードで動かしているので、click 指令や HTML ラベルは無効です。コードに書いてもスクリプトは実行されません。
入力したコードはサーバーに送られますか？
いいえ。描画も書き出しもブラウザの中で行います。保存をオンにしたときだけ、お使いのブラウザの localStorage に残り、チェックを外すか「保存したコードを消す」で消えます。
GitHub の Markdown に貼るには？
「Markdown 用にコピー」を押すと ```mermaid で囲んだ形でコピーされます。GitHub は自分で用意した Mermaid の版で描画するため、見た目がこのページと少し違うことがあります。

Markdown エディター・プレビュー（Markdown Studio）

左に書くと右にすぐ反映される Markdown エディターです。表の縦線をそろえる整形、目次の自動作成、HTML 出力に対応し、スクリプトは常に無害化、外部画像はオンにしたときだけ読み込みます。

アップロードなし

コード整形・圧縮（Code Formatter）

コードを貼り付けるだけで、言語を自動判定して整形できます。インデント・1 行の幅・セミコロン・引用符・末尾カンマを選べ、JavaScript・CSS・HTML は圧縮前後のサイズと削減率も表示。入力は端末の外へ出ません。

アップロードなしベータ

JSON 整形・検証（JSON Studio）

JSON を貼り付けるだけで整形・1 行化・構文チェック。エラーは「何行目の何が悪いか」まで表示し、コメントや末尾カンマは自動修復できます。データは端末の外へ送信しません。

アップロードなし

Docker Compose Studio

docker run のコマンドを compose.yaml に、compose.yaml を docker run に変換します。compose.yaml は構文・Compose Specification・よくある誤りを調べ、セキュリティ上の確認点も一覧にします。コンテナの起動やイメージの取得はせず、入力は端末の外へ送りません。

アップロードなしベータ

DDL→ER図・DB仕様書（DDL ER）

CREATE TABLE 文を貼るかファイルを読み込むと、テーブルの関係を線で結んだ ER 図と、列の一覧（型・NULL・既定値・キー・コメント）のテーブル定義書ができます。読み込みは MySQL・PostgreSQL・SQLite・SQL Server・Oracle の主な書き方に対応し、SQLite の .db からも読めます。

アップロードなしベータ

テキスト・コード Diff

変更前と変更後を貼り付けるかファイルをドロップするだけで、追加・削除された行と、行の中で変わった単語まで色分けして表示します。結果は unified 形式のパッチとしてコピー・保存でき、入力はブラウザの外へ出ません。

アップロードなし

最終更新: