mindmap の後にインデントした箇条書きを書くと、階層ごとに枝になります。最初の行が中心で、スペースを2つ増やすと子になります。((二重括弧)) で円、(括弧) で角丸、)雲( で雲の形になります。ブレインストーミングや勉強のノート、企画の整理に便利です。
使い方
- 図の種類を選ぶとサンプルが読み込まれます。Mermaidのコードを直接書くこともできます。入力を止めると少ししてプレビューが更新されます。
- エラーは行番号とパーサーのメッセージで表示され、タップするとその行を選択します。直前の正しい図はグレーで表示されたままです。
- ボタンかCtrl＋マウスホイールで拡大・縮小できます。色はライト・ダークモードに合わせて変わります。
- SVGのコピー・ダウンロード、2倍サイズのPNGのダウンロードができます。「背景を透明に」をオンにすると背景なしで書き出します。
- 共有リンクをコピーできます。コードは#以降に圧縮して入ります。
- 図はブラウザ内のMermaidで描画され、テキストが送信されることはありません。最後に編集した図は保存されます。
- .mmdファイルやMarkdownファイルを開けます。最初の```mermaidブロックが使われます。
- Mermaidは厳格なセキュリティモードで動作するため、クリック処理やラベル内のHTMLは無効です。
図をコードで書く理由
Mermaidは、手で箱を並べる代わりに数行の読みやすいテキストで図を表します。flowchart LR の後に A[開始] --> B{OK?} と B -->|はい| C[リリース] と書くだけで分岐が描けます。テキストなのでGitでコードの隣に置け、プルリクエストでレビューでき、1行の変更で更新できます。レイアウトは自動で計算されます。
GitHub、GitLab、Notion、Obsidianなど多くのドキュメントツールが ```mermaid のコードブロックをそのまま図として表示するので、ここで書いた図はREADMEにそのまま貼れます。このエディタですぐに結果を見ながら構文を整え、画像しか受け付けない場所にはSVGやPNGで書き出しましょう。
図の種類の選び方
フローチャートは処理の流れと分岐、シーケンス図はサービスや人の間で時間順に交わされるメッセージ、クラス図は型とその関係、状態遷移図は状態の移り変わり、ER図はデータベースのテーブルとカラスの足記法による多重度を表します。ガントチャートは日付と依存関係のあるタスクの計画、円グラフは全体に占める割合、マインドマップは1つのテーマからの枝分かれ、タイムラインは期間ごとの出来事を示します。
上手に書くコツ
ノードのIDは短くし、読ませる文字は括弧の中に書きます（A[お客様が注文する]）。記号を含むラベルは引用符で囲みましょう。フローチャートでは subgraph、シーケンス図では alt や loop でまとめられます。図が窮屈になったら、向きをTDからLRに変えるか、2つの図に分けてください。
よくある質問
Mermaidとは何ですか？
Markdownに似たテキストの書き方から図を描く、オープンソースのJavaScriptライブラリです。GitHubやGitLab、多くのWikiやノートアプリが標準で対応しています。
GitHubのREADMEで使えますか？
使えます。```mermaid で始まるコードブロックにコードを貼ればGitHubが図として表示します。Mermaidに対応していない場所では、SVGかPNGで書き出して画像として入れてください。
構文エラーが出るのはなぜですか？
メッセージに行番号とパーサーが期待した内容が出ます。矢印の抜け、括弧や引用符の閉じ忘れ、end のような予約語をIDに使っているケースがよくあります。End と書くか引用符で囲めば解決します。
作成した図表を高解像度のPNG画像で書き出すには？
PNGをダウンロードすると画面表示の2倍のサイズになり、高精細ディスプレイやスライドでもくっきりします。印刷やさらに編集する場合は、劣化せずに拡大できるSVGを選んでください。「透明」をオンにすると背景なしで書き出せます。
アップロードせずに図を共有できますか？
できます。共有リンクをコピーしてください。MermaidのコードはURLの # 以降に圧縮して入っており、この部分はブラウザがサーバーに送りません。リンクを開くと図が復元されます。
クリック処理やHTMLのラベルは使えますか？
使えません。このエディタではMermaidを厳格なセキュリティモードで動かしているため、クリック時の処理、リンク、ラベル内のHTMLは無効です。それ以外の構文は通常どおり描画されます。