Mermaid エディタ

Mermaid エディタの使い方

Mermaid は平文のテキストからフローチャート、シーケンス図、ガントチャートなどを生成します。このライブエディタは入力するたびに再描画し、処理はすべてブラウザ内で完結 — データが外部に出ることはありません。

1. 「サンプル」ドロップダウンから出発点を選びます。フローチャート、シーケンス、クラス、ステート、ER、ガント、円グラフ、マインドマップ、タイムラインの 9 種類のサンプルがあり、選ぶとコードがエディタに読み込まれます。
2. 左側のパネルで Mermaid コードを編集すると、右側のプレビューは入力を止めて約 0.3 秒後に再レンダリングされます。赤いパネルに構文エラーが出ても、最後に成功した図は表示されたままなので、見比べながら修正できます。
3. プラスとマイナスのボタンで 50%～200% の範囲でズームし、「フィット」で図をプレビュー枠に収め、「100%」で原寸に戻します。
4. 白背景なしの PNG が欲しい場合は「透過背景」にチェックを入れ、「SVGをダウンロード」または「PNGをダウンロード」を押します。PNG は 2 倍解像度で書き出されるため、埋め込んでも鮮明です。
5. 「コードをコピー」で Mermaid のソースをクリップボードにコピーし、ドキュメント、Wiki、リポジトリなどに貼り付けられます。

図が表示されないときは、最近変更した行をコメントアウトして原因を切り分けましょう。エラーメッセージは問題の行を示し、構文が正しくなるまでプレビューは最後の正常なバージョンを保持します。