Mermaidダイアグラムエディター
左側にMermaid構文を書くと、右側にフローチャート、シーケンス図、ガントチャートのダイアグラムがライブレンダリングされます。
コードとしてダイアグラムを作成するために必要なすべて
即時ライブプレビュー
入力した瞬間にダイアグラムがレンダリングされるのを確認 — ビルドステップ不要、ボタン不要、待ち時間なし。
すべてのMermaidダイアグラムタイプ
フローチャート、シーケンス図、クラス図、状態図、ガントチャート、マインドマップなど — 完全なMermaid 11構文。
テーマ切り替え
デフォルト、ニュートラル、ダークのテーマを切り替えて、コードを1行も変えずにドキュメント、スライド、ダッシュボードに合わせます。
SVG＆PNGエクスポート
鮮明なベクターSVGまたは高解像度PNGをダウンロードするか、SVGマークアップをクリップボードに直接コピーします。
プライベート、何もアップロードなし
すべてのレンダリングはブラウザ内でローカルに行われます — ダイアグラムがデバイスから送信されることはなく、サイズ制限なし、アカウント不要。
明確な構文エラー
無効なダイアグラムは即座に検出され、読みやすいエラーで表示されるため、構文を素早く修正できます。
Mermaidダイアグラムエディターについて
Mermaidダイアグラムエディターは、Mermaidダイアグラムを書いてプレビューするための無料のブラウザ内ツールです。左側にMermaid構文を入力すると、右側でレンダリングされたダイアグラムがライブ更新され、デフォルト、ニュートラル、ダークの3つの組み込みテーマがあります。ダイアグラムが正しくなったら、コードまたはSVGをコピーするか、ベクターSVGまたは高解像度PNGとしてダウンロードします。すべてオープンソースのMermaidライブラリでローカルに実行されるため、アップロードも、サイズ制限も、アカウントも不要です。
Mermaidダイアグラムを作成する方法
アイデアから共有可能なダイアグラムまで3ステップ。
ダイアグラムをテキストとして書く
組み込みのサンプルから始めるか、Mermaid構文を直接入力します — フローチャート、シーケンス図、クラス図など。
ライブレンダリングを確認
ダイアグラムは編集に合わせて自動的に更新されます。ドロップダウンでテーマを切り替えて、好みの見た目を見つけます。
エクスポートまたは共有
MermaidコードまたはSVGをコピーするか、ダイアグラムをドキュメント、スライド、README用にSVGまたはPNGファイルとしてダウンロードします。
留意すべき点
ダイアグラムは厳格なセキュリティモードのMermaid 11でレンダリングされ、ラベルがサニタイズされてHTMLやスクリプトが実行されないようになっています — インタラクティブなクリックハンドラーはプレビューで無効化されます。エクスポートされたPNGは鮮明な印刷用に2倍解像度でレンダリングされ、すべてローカルで実行されるためファイルサイズ制限はありません。