このサイトについて
mermaid.design は、無料のオンライン Mermaid ダイアグラムエディターです。左側に Mermaid 構文を入力すると、右側にリアルタイムでレンダリングされたダイアグラムが表示されます。すべての処理はブラウザ内で完結し、ダイアグラムがデバイスの外に出ることはありません。
主な機能
- ライブプレビュー：入力に合わせてダイアグラムが再レンダリングされ、構文チェックとエラー表示が即座に行われます
- 2つのレンダリングモード：鮮明な SVG として、あるいはコードコメント、ドキュメント、ターミナルに貼り付けられる ASCII アートとしてダイアグラムを描画できます
- ダイアグラムテーマ：デフォルト、ニュートラル、フォレスト、ダーク、ベースの Mermaid テーマをワンクリックで切り替え。背景色のカスタマイズや透明背景にも対応
- ASCII レンダリング：フローチャートやシーケンス図を、Unicode またはプレーン ASCII の文字セットと調整可能なフォントサイズでテキストベースのダイアグラムに変換
- パン＆ズーム：ドラッグで移動、Ctrl/⌘ + スクロールでズーム。フローティングツールバーで精密な操作が可能
- コードエディター：Monaco ベースのエディター（VS Code と同じエンジン）に Mermaid 構文ハイライトを搭載
- テンプレート：フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、円グラフ、Gitグラフ、マインドマップ、ユーザージャーニーのテンプレートを内蔵
- エクスポート：SVG、PNG、JPG、WebP 形式で 1x、2x、4x の解像度でダウンロード。プレーンテキストの ASCII 出力も可能
- 完全クライアントサイド：サーバー不要、アップロードなし — すべてブラウザ内でローカルに動作します
対応ダイアグラムの種類
フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、円グラフ、Gitグラフ、マインドマップ、ユーザージャーニー、C4図、タイムライン、要求図など、Mermaid エンジンが対応するすべての種類に対応しています。
フィードバック
本ツールに関するご質問やご提案がございましたら、お気軽にお問い合わせください。