Mermaid エディタ：Markdown で図をリアルタイムに描く

Mermaid を使うと、数行のテキストが図になります。Markdown Preview Editor は Mermaid エディタ としても使えます。Markdown ドキュメントに図のコードを書くと、入力に合わせてプレビューが図を描きます。単独の作図ツールと違って、図はまわりの文章と一緒にあるので、設計書、README、授業の資料などを 1 つのファイルにまとめられます。

Mermaid 図とは？

Mermaid 図は、プレーンテキストで記述する図です。ボックスや矢印をドラッグする代わりに A --> B のような行を書くと、Mermaid がレイアウトを決めて描いてくれます。フローチャート、シーケンス図、ガントチャート、状態遷移図、クラス図、円グラフ、マインドマップなどに対応しています。

テキストなので変更が簡単で、バージョン管理に入れられ、差分にも表示されます。GitHub、GitLab、Obsidian や多くのドキュメントツールが Mermaid を表示できるので、同じコードがどこでも使えます。

図の描き方

1. エディターを開く。 オンラインエディター にアクセスします。
2. Mermaid ブロックを追加する。 バッククォート 3 つに続けて mermaid と入力するか、「高度なエディター」ツールバーの Mermaid 図 ボタンでひな形を挿入します。
3. 図を書く。 右側のプレビューが入力に合わせて図を描き直すので、矢印やかっこの抜けにすぐ気づけます。
4. 保存・共有する。 ドキュメントを .md として保存するか、HTML にエクスポートするか、PDF として印刷します。図も含まれます。

はじめてのフローチャートの例です。

markdown```mermaid
flowchart LR
  A[アイデア] --> B{やる価値は？}
  B -- はい --> C[作る]
  B -- いいえ --> D[保留]
```

使える図の種類

種類ごとの詳しい書き方とコピーして使える例は、Markdown で Mermaid 図を描く のガイドにまとめています。

このエディタを使う理由

• リアルタイムプレビュー。 入力に合わせて図が更新され、構文エラーもすぐにわかります。
• 文章と図を一緒に。 説明文、数式、フローチャートを 1 つの Markdown ファイルに書けます。
• プライバシー。 図はブラウザーの中で描画され、コードがサーバーに送信されることはありません。
• 無料・オープンソース。 アカウント不要で、図の数にも制限はありません。

制限事項

• 図を 1 つだけ PNG や SVG でダウンロードする機能はありません。図はドキュメントの一部として、HTML エクスポートや PDF に含まれます。単体の画像が必要なら、Mermaid の公式ツールで書き出せます。
• 独自テーマやノードごとのスタイル指定には制限があります。図はライトテーマまたはダークテーマに合わせた、すっきりした標準の見た目で描かれます。
• 図はコードで書きます。ドラッグ＆ドロップで視覚的に編集する機能はありません。

図を含む既存の Markdown ファイルを見たいときは Markdown ビューア を使うか、Markdown エディタ のトップページに戻ってください。