mermaid.design はオンライン Mermaid ダイアグラムエディターです。プレーンテキストの mermaid 構文を書くだけで、フローチャート、シーケンス図、ER図、ガントチャートなどを作成できます。入力と同時にライブレンダリングされます。
すべてブラウザ内で完結します。アカウント不要、アップロード不要、サーバーとの往復も不要。ダイアグラムのコードはあなたのデバイスに留まり、エクスポートもすべてローカルで生成されます。
貼ってプレビューするだけのツールではなく、コードとして図をデザイン・スタイリング・エクスポートするための完全な環境です。
軽量な CodeMirror エディターは Mermaid のシンタックスハイライト、インラインエラー、キャンバスとの選区同期に対応。パン・ズーム可能なライブプレビュー付きです。
ラベルやダイアグラムの要素をキャンバス上で直接編集できます。変更は Mermaid ソースに同期され、コードとプレビュー間で選択状態と元に戻す・やり直し操作も共有されます。
コンテキストに応じた自動補完、すぐに使えるスニペット、検索・置換、ワンクリックのフォーマット、インラインの構文診断で、Mermaid を効率よく記述できます。
公式 mermaid SVG 出力と、プレーンテキストで図を描く ASCII エンジンをいつでも切り替えられます。ターミナルやコードコメント、ドキュメントに最適です。
73個すべての mermaid テーマ変数を調整し、20以上のビルトイン・デザイナープリセットから始めるか、1つのシードカラーからパレット全体を生成。JSON や frontmatter としてエクスポートできます。
33のグループに整理された438の Mermaid レンダリング設定を調整できます。レイアウトや余白から図の種類ごとの動作まで、設定JSONを手編集せずに細かく制御可能です。
フローチャート、シーケンス図、ステート図、ER図、ガントチャートなどのテンプレートギャラリーから開始。各テンプレートは現在のテーマでライブレンダリングされてから適用されます。
SVG、PNG、JPG、WebP(透明背景も選択可能)としてダウンロード、または ASCII レンダリングをそのまま README にコピーできます。
登録不要、バックエンドなし。パース、レンダリング、エクスポートはすべてクライアント側で行われるため、機密性の高いアーキテクチャ図がマシンから出ることはありません。
同じ mermaid コードをお好みの方法でレンダリング。ナビバーからいつでもエンジンを切り替えられます。
フローチャートから C4 アーキテクチャ図まで。mermaid がサポートするものはすべてここでデザインできます。
ゼロから始めるか、既存のコードを貼り付けるか、ギャラリーの31のテンプレートから選択します。
テーマ変数を調整し、プリセットを適用するか、Styled エンジンで影やカスタムストロークを追加。CSS は不要です。
ドキュメントやスライド用に SVG、PNG、JPG、WebP をダウンロード。ASCII レンダリングは TXT で。テーマは JSON や frontmatter として持ち運べます。
いいえ。mermaid.design は完全にブラウザ内で動作します。ページを開いて mermaid 構文を入力し始めるだけです。インストールも登録も不要です。
いいえ。パース、レンダリング、エクスポートはすべてブラウザ内でローカルに行われます。ダイアグラムのコードはブラウザのローカルストレージに保存され、デバイスから出ることはありません。
mermaid 12 がサポートするすべてのタイプ。フローチャート、シーケンス図、クラス図、ステート図、ER図、ガントチャート、マインドマップ、タイムライン、サンキー図、C4図などです。
SVG、PNG、JPG、WebP(透明背景オプション付き)でダウンロード、ASCII レンダリングはプレーンテキストとして、テーマ設定は JSON または mermaid frontmatter としてコピーできます。
はい。作成・エクスポートした図はあなたのものです。ドキュメント、プレゼンテーション、ブログ記事、製品など、商用・非商用を問わず利用できます。