MermaidダイアグラムをSVG・PNGとしてエクスポート

Mermaidダイアグラムのエクスポート

Mermaidダイアグラムは対応プラットフォームできれいにレンダリングされますが、プレゼンテーション、メール、Mermaid非対応のWiki、印刷物には静的な画像ファイルが必要になることがよくあります。MermaidはSVG（ベクター）とPNG（ラスター）へのエクスポートをサポートしています。

SVG vs PNG

観点	SVG	PNG
種類	ベクター	ラスター
拡大縮小	無限 — 品質劣化なし	固定解像度
ファイルサイズ	通常より小さい	高解像度では大きい
テキスト	選択・検索可能	ピクセルに変換
最適な用途	ドキュメント、Web、プレゼン	チャット、メール、SNS
ダークモード	CSSでスタイル変更可能	静的 — 別バージョンが必要

ブラウザベースのエクスポート

DevToolbox Mermaidビューアーではブラウザから直接エクスポートできます：

1. Mermaidコードを書くか貼り付ける
2. レンダリングされたダイアグラムを確認
3. Export SVGまたはExport PNGをクリック
4. ファイルが自動的にダウンロードされます

この方法はインストール不要で、どのOSでも動作します。

CLIベースのエクスポート

自動化やバッチエクスポートには公式Mermaid CLIを使用します：

# グローバルインストール
npm install -g @mermaid-js/mermaid-cli

# 単一ファイルの変換
mmdc -i diagram.mmd -o diagram.svg
mmdc -i diagram.mmd -o diagram.png

# PNGのサイズ指定
mmdc -i diagram.mmd -o diagram.png -w 1920 -H 1080

# カスタムテーマの使用
mmdc -i diagram.mmd -o diagram.svg -t dark

# 全.mmdファイルの一括変換
for f in *.mmd; do mmdc -i "$f" -o "${f%.mmd}.svg"; done

CI/CD自動化

パイプラインでダイアグラム生成を自動化します：

# GitHub Actionsの例
- name: Generate diagrams
  uses: mermaid-js/mermaid-cli-action@v1
  with:
    input: docs/diagrams/
    output: docs/images/
    format: svg

ドキュメントのソースファイルが変更された際に、ダイアグラムが常に最新であることを保証します。

高品質エクスポートのヒント

1. ドキュメントにはSVGを使用 — 完全にスケーラブルでテキスト検索をサポートします。
2. PNG背景を設定 — デフォルトではPNGエクスポートは透明背景になる場合があります。必要に応じて--backgroundColor whiteを使用してください。
3. PNGスケールを上げる — Retinaディスプレイ用に-s 2で2倍解像度にします。
4. ソースと出力の両方をコミット — 更新を容易にするため、.mmdファイルを生成画像と一緒にバージョン管理に保持しましょう。