Mermaid オンラインエディター
Mermaid コードを書き、描画結果をプレビューし、テーマを切り替えて SVG または PNG として書き出せます。
Mermaid オンラインエディター
Mermaid コードを書き、描画結果をプレビューし、テーマを切り替えて SVG または PNG として書き出せます。
Mermaid エディターについて
Mermaid コードをブラウザ内で描画
このエディターは Mermaid ライブラリをクライアント側で読み込み、短い debounce 後に図の構文を検査し、選択したテーマで SVG プレビューを描画します。内蔵テンプレートから flowchart、sequence、class、state、ER、Gantt、pie、mindmap、timeline の例をすぐに試せます。
GitHub、README、Wiki 向けの図を準備
GitHub README、GitLab Wiki、Notion、技術ドキュメントへ Mermaid フェンス付きコードブロックを貼り戻す前の確認場所として使えます。フローチャート、シーケンス図、アーキテクチャ図をプレビューし、Markdown に Mermaid ソースを戻すか、描画先が Mermaid に非対応なら SVG または PNG を書き出せます。
プレビューから SVG または PNG を書き出し
ダウンロード時は現在の Mermaid コードとテーマで新しい SVG を描画します。PNG 書き出しはその SVG をブラウザ canvas 経由でビットマップ化し、ズーム操作は画面上のプレビューだけに影響します。図のソースは共有可能なローカル状態として URL hash に保存できるため、URL を共有すると図のソースも共有される点に注意してください。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
Mermaid とは何ですか？
Mermaid は Markdown 風の構文からフローチャート、シーケンス図、クラス図などを描画するテキストベースの図表言語です。GitHub、GitLab、技術文書で広く使われています。
どの図表タイプがサポートされていますか？
フローチャート、シーケンス図、クラス図、状態図、ER図、ガントチャート、円グラフなど。エディターは Mermaid ライブラリで利用可能なすべての図表タイプに対応しています。
図表をエクスポートできますか？
はい、レンダリングされた図を SVG または PNG としてダウンロードし、プレゼンテーション、ドキュメント、その他のプロジェクトで使用できます。
データはサーバーに送信されますか？
いいえ、Mermaid図のレンダリングはすべてブラウザ内で実行されます。図のコードはJavaScriptでローカルに解析・描画され、サーバーに送信されることはありません。
Mermaid の構文はどのように書きますか？
まず図のタイプ（flowchart TD、sequenceDiagram、classDiagramなど）を宣言し、Mermaidのテキスト構文でノード、接続、ラベルを定義します。テンプレートを使って各種図を試せます。
GitHub や Markdown で Mermaid を使えますか？
はい。GitHub README、issue、pull request、GitLab Wiki、Notion、多くの Markdown レンダラーは Mermaid のフェンス付きコードブロックに対応しています。図のコードを ```mermaid ブロックで囲めば描画されます。ここで先にプレビューし、問題がなければ同じソースを文書へ貼り戻せます。