How to
Mermaid 記法の図をその場で確認できるプレビューツールです。記法を試しながら図の見え方を整えたい時や、仕様整理用のダイアグラムを素早く確認したい時に使えます。テーマを切り替えて見え方を比べられるので、ドキュメント用の図を短時間で整えられます。
Use Cases
Capabilities
Guide
設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。
01 HOWTO
左側の入力欄で Mermaid 記法を書きます。テンプレートで図の種類を選び、入力内容に合う補完候補を追加しながら、右側のプレビューで構造を確認できます。
フローチャート、シーケンス図、クラス図などの Mermaid 記法を入力できます。
空の状態では、図の種類を選んで基本構成を入力欄へ挿入できます。
図の種類に合わせて、ノード、接続、分岐などの候補をカーソル位置へ追加できます。
構文に問題がある場合は、プレビュー側の表示を見ながら修正できます。
02 HOWTO
入力欄の上にあるテンプレートと補完候補、上部の履歴、入力欄右上のクリアとコピーを使って編集を進めるエリアです。図の土台作成、部品追加、下書きの再利用をここで操作できます。
フローチャート、シーケンス図、クラス図などの土台を選んで入力欄へ入れられます。
ノード、接続、分岐、ループなど、現在の記法に合う部品を追加できます。
入力内容はブラウザに下書きとして残り、履歴から直前の編集状態へ戻せます。
現在の記法を消して、新しい図を作り直せます。
編集途中の記法を README や仕様書へ貼り付けられます。
03 HOWTO
右側で描画結果を確認し、テーマを切り替えて共有先に近い見え方を選びます。図が描画できない場合はエラー表示もここで確認します。
背景や線色の見え方を変えて、共有先に合う表示を選べます。
入力した記法が期待どおりの図になっているか確認できます。
構文や描画に問題がある場合はエラーを見て修正できます。
プレビュー結果を見ながら記法を修正できます。
04 HOWTO
プレビュー上部の出力操作で、SVG / PNG の形式を選び、図をコピーまたはダウンロードします。出力できない場合はエラー表示を確認して入力へ戻ります。
SVG または PNG を選び、共有先や貼り付け先に合う形式へ切り替えられます。
描画した図を選択中の形式でコピーし、ドキュメントやチャットへ貼り付けられます。
描画した図を SVG または PNG ファイルとして保存できます。
図の元になる記法も一緒に共有できます。
出力できない場合はエラー内容を見て原因を切り分けられます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
要素を一度に増やすとエラー原因が分かりにくくなります。まずは最小の記法で図が出ることを確認してから枝やノードを足すと崩れにくいです。
確認すること
同じ Mermaid 記法でも、背景と線色の見え方はテーマで変わります。共有先の見た目に近いテーマで確認すると、公開前の手戻りを減らせます。
確認すること
記法が正しくない場合、プレビューにエラーメッセージが表示されます。図が表示されない時はエラー内容を確認してから記法を修正してください。
FAQ
使う前に判断しやすい質問を先に整理します。
はい。SVG と PNG として保存できます。コピーとダウンロードの両方に対応しています。
プレビューの下にエラーメッセージを表示します。入力しながら崩れた箇所をすぐ確認できます。
フローチャート、シーケンス図、クラス図、ER 図、ガントチャートなど Mermaid が標準でサポートする図を表示できます。
Mermaid の公式ドキュメントに種類別の記法が記載されています。このページで記法を書きながら図を確認できます。
テーマを切り替えると背景色を含む全体スタイルが変わります。テーマごとの見え方を比較してご利用ください。
SVG または PNG で保存してから共有してください。クリップボードへのコピーにも対応しています。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
