Mermaid確認ツール
Mermaid記法をリアルタイムで図にプレビューし、PNG・SVG画像として保存
Mermaid記法
サンプル:
Markdownの ```mermaid ブロックごと貼り付けても描画できます
表示設定
プレビュー
描画中...
PNGは2倍解像度で保存されます。処理はすべてブラウザ内で完結します
Mermaid確認について
- • フローチャート・シーケンス図・クラス図・ガントチャート・ER図などを描画できます
- • 入力に合わせてリアルタイムでプレビューが更新されます
- • 構文エラーがあっても、直前の正常な図は表示されたままです
- • PNG（背景 白・ダーク・透過）とSVGで保存できます
Mermaid確認の使い方
- 1 Mermaid記法を入力欄に入力する（サンプルボタンから読み込むことも可能）
- 2 右側のプレビューに図がリアルタイムで表示される
- 3 必要に応じてテーマや背景を切り替える
- 4 「PNG保存」または「SVG保存」ボタンで画像をダウンロードする
このツールでできること
- Mermaid記法を入力すると、リアルタイムで図をプレビュー
- フローチャート・シーケンス図・クラス図・ガントチャート・ER図のサンプルをワンクリックで読み込み
- 構文エラーはメッセージで通知。直前の正常な図は表示されたまま残る
- PNG（2倍解像度）とSVGで保存。PNGは背景を白・ダーク・透過から選択可能
- デフォルト・ニュートラル・フォレスト・ダークの4テーマを切り替え可能。処理はすべてブラウザ内で完結
こんな場面で使えます
READMEや設計ドキュメントの図を作るときに
GitHubやNotionなどに貼る前に、Mermaid記法が意図した図になっているかをその場で確認できます。Markdownの ```mermaid ブロックごと貼り付けても描画されます。
スライドや資料に図を貼りたいときに
Mermaidに対応していないツールでも、PNGやSVGで保存すれば画像として貼り付けられます。透過PNGなら、スライドの背景色に合わせて使えます。
フローチャートやシーケンス図を素早く試したいときに
サンプルを読み込んで書き換えるだけで、業務フロー・API呼び出しの流れ・DBのER図などを手軽に下書きできます。
よくある質問
- Q. Mermaid（マーメイド）記法とは何ですか？
- A. テキストで書いたコードから、フローチャートやシーケンス図などの図を生成できる記法です。GitHub・GitLab・Notionなど多くのサービスが対応しており、図をバージョン管理しやすいのが特長です。
- Q. どんな種類の図を描けますか？
- A. フローチャート、シーケンス図、クラス図、ガントチャート、ER図など、Mermaidが標準で対応する図を描画できます。サンプルボタンから代表的な5種類を読み込めます。
- Q. 構文エラーが出たときはどうなりますか？
- A. エラーメッセージが表示されますが、直前に正常に描画できた図はそのまま残ります。コードを修正して正しい記法になると、プレビューが自動で更新されます。
- Q. 保存した画像で背景を透過できますか？
- A. はい。背景設定で「透過」を選ぶと、背景が透明なPNGとして保存できます。「ダーク」を選ぶと、ダークテーマの図でも文字が読みやすい濃色の背景で保存されます。SVGは背景を含まない形式で保存されます。
- Q. 入力した内容は外部に送信されますか？
- A. いいえ。描画から画像の生成まですべてブラウザ内のJavaScriptで完結するため、入力したコードが外部に送信されることはありません。