Mermaid ライブエディタ（オンライン）

Markdown エディタに組み込まれた Mermaid エディタ

Mermaid は数行のテキストを図に変えるので、図の差分確認やレビューがしやすく、説明するドキュメントのそばに置いておけます。このページのエディタは Mermaid 対応が組み込まれた分割 Markdown エディタです：図は文書の中の置きたい場所に書き、入力が止まって少しするとプレビューが描き直します。変更していない図はキャッシュから戻るので、周りの文章を編集してもすばやく動作します。エンジン自体は、文書に初めて図が含まれたときに読み込まれるため、少し時間がかかることがあります。

まずはエディタにこのブロックを入力してみましょう：

```mermaid
flowchart LR
  Idea --> Draft --> Review
  Review -->|changes| Draft
  Review -->|approved| Publish
```

右側にフローチャートが表示されます。LR（左から右）を TD（上から下）に変えたり、ノードを追加したり、矢印のラベルを書き換えたりすると、図もそれに追従します。

描ける図の種類

以下の図はすべてプレビューに描画されます。フェンスの中の 1 行目に図のキーワードを書いてください：

• フローチャート（flowchart TD）— 処理の流れ、分岐、アーキテクチャのスケッチ。
• シーケンス図（sequenceDiagram）— サービス間や人どうしのやり取りを時系列で。
• クラス図（classDiagram）と状態遷移図（stateDiagram-v2）。
• ER 図（erDiagram）— データベースのスキーマ。
• ガントチャート（gantt）、タイムライン（timeline）、ユーザージャーニー（journey）。
• 円グラフ（pie）、四象限チャート（quadrantChart）、マインドマップ（mindmap）。
• Git グラフ（gitGraph）、要求図（requirementDiagram）、C4 図（C4Context）。
• 新しい種類として Sankey（sankey-beta）、XY チャート（xychart-beta）、ブロック図（block-beta）、パケット図、カンバン、アーキテクチャ図（architecture-beta）。

ベータ版の図の構文は Mermaid のリリースごとに変わることがあるため、正確なキーワードは Mermaid 公式ドキュメントで確認してください。このエディタが動かしているのは、サイトに同梱されたバージョンです。

図のデバッグ

Mermaid がコードを解析できないと、図のブロックはエラーボックスに変わり、パーサーのメッセージ — 行番号、つまずいた箇所、期待されていたもの — が表示されます。その行を直せば、エラーは図に置き換わります。分割レイアウトにすればソースと図を同時に見られ、プレビューは編集中の行に合わせてスクロールします。図は Mermaid の strict セキュリティモードで描画されるため、図の定義の中のクリックコールバックやスクリプトは無効で、文書のそれ以外の場所にあるインライン HTML もサニタイズされます。

保存・共有・書き出し

文書はブラウザに自動保存されます。書き出し → .md をダウンロードで、コードと一緒にコミットできる Markdown ファイルが手に入ります。共有は文書全体を含むリンクを作るので、同僚はすでに図が描かれた状態で開けます。.html をダウンロードは図を SVG にした単体ページを書き出し、印刷 / PDF として保存は図がどの拡大率でも鮮明な PDF を作ります。図の配色は選んだライト／ダークテーマに合わせて変わります。

このツールが向くとき、専用ツールが向くとき

設定パネルや画像ダウンロードを使って 1 つの図だけを練り上げたいなら、mermaid.live のような専用ツールがそのために作られています。図が README、設計メモ、エージェントの計画書、プロジェクトのドキュメントといった文書の一部なら、Mermaid をレンダリングする Markdown エディタのほうが近道です。図を文脈の中で確認でき、文書全体をダウンロードできるからです。周りの記法に慣れていませんか？ マークダウン記法 一覧をご覧いただくか、マークダウンエディタを直接開いてください。