How to
Mermaid 記法の図をその場で確認できるプレビューツールです。記法を試しながら図の見え方を整えたい時や、仕様整理用のダイアグラムを素早く確認したい時に使えます。テーマを切り替えて見え方を比べられるので、ドキュメント用の図を短時間で整えられます。
Use Cases
Capabilities
Steps
画面を見ながら進められるように、操作の順番と確認ポイントをまとめています。
STEP 1
左側の入力欄へ Mermaid 記法を書き込みます。入力内容は右側のプレビューへ自動で反映されます。
フローチャートやシーケンス図の記法を直接入力して、その場で図へ反映できます。
入力中の Mermaid 記法を空にして、最小構成から書き直せます。
作成中の Mermaid 記法は、そのままコピーして README や仕様書へ貼り付けられます。
STEP 2
右側の図を確認しながらテーマを切り替えます。SVG と PNG のコピー、ダウンロードを使い分けながら、共有しやすい形式で出力できます。
GitHub Light、GitHub Dark、Presentation、Notebook、Terminal を切り替えて、背景や線色の見え方を確認できます。
SVG のコピーやダウンロードを使って、ベクター形式のまま再利用できます。
PNG のコピーやダウンロードを使って、画像として共有しやすい形式でも出力できます。
Notes
使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。
確認すること
要素を一度に増やすとエラー原因が分かりにくくなります。まずは最小の記法で図が出ることを確認してから枝やノードを足すと崩れにくいです。
確認すること
同じ Mermaid 記法でも、背景と線色の見え方はテーマで変わります。共有先の見た目に近いテーマで確認すると、公開前の手戻りを減らせます。
確認すること
記法が正しくない場合、プレビューにエラーメッセージが表示されます。図が表示されない時はエラー内容を確認してから記法を修正してください。
FAQ
使う前に判断しやすい質問を先に整理します。
はい。SVG と PNG として保存できます。コピーとダウンロードの両方に対応しています。
プレビューの下にエラーメッセージを表示します。入力しながら崩れた箇所をすぐ確認できます。
フローチャート、シーケンス図、クラス図、ER 図、ガントチャートなど Mermaid が標準でサポートする図を表示できます。
Mermaid の公式ドキュメントに種類別の記法が記載されています。このページで記法を書きながら図を確認できます。
テーマを切り替えると背景色を含む全体スタイルが変わります。テーマごとの見え方を比較してご利用ください。
SVG または PNG で保存してから共有してください。クリップボードへのコピーにも対応しています。
次に見る使い方
関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。
