Mermaid Design

エクスポートと共有

ダイアグラムが完成したら、ナビゲーションバーの エクスポート をクリックしてエクスポートダイアログを開きます。すべてブラウザー内でローカルに生成されます — アップロードも、透かしも、アカウントも不要です。

画像フォーマット

フォーマット最適な用途
SVGドキュメント、Wiki、Web ページ — 無限に拡大縮小できるベクター出力
PNGスライド、チケット、チャット — 汎用的にサポートされるビットマップ
JPG透過が不要な場合の、より小さなファイル
WebP優れた圧縮率を持つモダンな画像フォーマット

ビットマップのエクスポート(PNG / JPG / WebP)は、1x、2x、4x の解像度でレンダリングでき、高密度ディスプレイでもくっきりとした結果が得られます。PNG と WebP には 透明な背景 の切り替えスイッチがあります。

エクスポートされる画像は常にプレビューと一致します — 見たままのものがダウンロードされます。

ASCII エクスポート

ASCII モードでは、エクスポートダイアログに TXT(プレーンテキスト) が用意されます: コードコメント、ドキュメント、ターミナルにそのまま貼り付けられる、レンダリング済みのテキストダイアグラムです。

テーマ設定のエクスポート

エクスポートダイアログには、mermaid.design の外で再利用するための テーマ設定 セクションもあります:

  • JSON をコピー — 現在のテーマ変数を JSON オブジェクトとしてコピーします
  • JSON をダウンロード — mermaid-theme.json ファイルを保存します
  • frontmatter をコピー — テーマを Mermaid の frontmatter としてコピーし、任意の .mmd ファイルや Markdown コードブロックの先頭に貼り付けられます:
---
config:
  theme: base
  themeVariables:
    primaryColor: '#...'
---

themeVariables をサポートする任意の Mermaid レンダラー(Mermaid CLI、GitHub、ドキュメントパイプライン)が、エクスポートされたテーマを適用できます。

作業の共有

ダイアグラムはブラウザーのローカルストレージにのみ保存され、サーバーサイドの共有リンクはありません。ダイアグラムを共有するには:

  1. 画像としてエクスポートするか(ASCII の場合は TXT)、
  2. Mermaid コードをコピーして直接送信します — 受け取った相手は mermaid.design に貼り付けて、あなたが終えたところから正確に続きを始められます。

コード、テーマ、レイアウトは、同じデバイスとブラウザーでのセッション間で自動的に保持されます。