Mermaid図エディタツール
Mermaid記法を入力するだけで、フローチャートやシーケンス図などをリアルタイムにプレビュー。SVG/PNGでダウンロードできます。
構文エラー
Mermaidコード
プレビュー
コードを入力すると、ここに図が表示されます。
使い方
1
Mermaid記法を入力
左のエディタにMermaid記法を入力します。「サンプルを選択」から雛形を読み込んですぐ試すこともできます。
2
リアルタイムにプレビュー
入力と同時に右側へ図が描画されます。構文エラーがある場合はエラー内容が表示されます。
3
SVG / PNGで保存
完成した図はSVGまたはPNG形式でダウンロード可能。コードのコピーにも対応しています。
Mermaid図エディタとは
Mermaidは、テキストベースの簡潔な記法で図を記述できるダイアグラム言語です。本ツールはMermaid記法をブラウザ上でリアルタイムにレンダリングし、フローチャート・シーケンス図・ガントチャートなどを瞬時に可視化します。入力したコードはサーバーに送信されず、すべてお使いのブラウザ内で処理されるため、社内資料やコードレビューの図解も安心して作成できます。
機能・特徴
- リアルタイムプレビュー入力と同時に図を描画。試行錯誤しながら素早く図を完成できます。
- 多彩な図に対応フローチャート、シーケンス図、ガント、クラス図、ER図など幅広く対応。
- SVG / PNG ダウンロードベクター形式のSVGと画像形式のPNGの両方で書き出せます。
- プライバシー保護すべての処理はブラウザ内で完結。コードはサーバーに送信されません。
活用シーン
- システム設計のフローチャート作成
- API通信のシーケンス図作成
- プロジェクトのガントチャート可視化
- README・技術ドキュメントへの図の埋め込み
- データベース設計のER図作成
よくある質問
Mermaid図エディタは無料で使えますか？
はい、完全無料でご利用いただけます。会員登録もインストールも不要で、ブラウザを開くだけですぐにお使いいただけます。
入力したコードはサーバーに送信されますか？
いいえ。Mermaidの描画も画像の書き出しもすべてお使いのブラウザ内で行われ、コードや図が外部サーバーに送信されることはありません。
どのような図に対応していますか？
フローチャート、シーケンス図、ガントチャート、クラス図、状態遷移図、円グラフ、ER図、マインドマップなど、Mermaidが対応する主要な図に対応しています。
SVGとPNGはどちらを選べばよいですか？
拡大しても劣化せず編集もしやすいSVGはドキュメントやWeb向け、どこでも貼り付けやすいPNGはチャットや資料への貼り付けに便利です。用途に応じて選択してください。
図が表示されず構文エラーが出ます。どうすればよいですか？
Mermaidは記法に厳密です。先頭の図タイプ宣言（flowchart TD など）やインデント、矢印の記号を見直してください。サンプルを読み込んで差分を確認するのも有効です。
スマートフォンでも使えますか？
はい。スマートフォン・タブレット・PCのいずれのブラウザでもご利用いただけます。