Mermaid 図をオンラインでレンダリング・書き出しする方法：AI コードから鮮明な SVG・PNG へ

ChatGPT や Claude、DeepSeek などの AI にシステム構成図やシーケンス図、ER 図の作成を依頼すると、多くの場合 Mermaid 記法のコードが出力されます。しかし、flowchart TD や sequenceDiagram のテキストそのままでは PowerPoint スライドや Word 文書、チャットツールに貼り付けることができません。コードから共有可能な画像ファイルへ素早く変換するには、リアルタイムプレビューと書き出しに対応したブラウザツールが便利です。

ライブプレビューで構文エラーを即座に修正する

Mermaid レンダラー にコードを貼り付けると、右側のキャンバスに図が即座に描画されます。AI が生成したコードで構文エラーが出る場合、最も多い原因はノード名に含まれる括弧やコロンが引用符で囲まれていないことです。

• エラーになりやすい例: A[ユーザーログイン (管理者)] --> B[ダッシュボード]
• 安全な記述例: A["ユーザーログイン (管理者)"] --> B["ダッシュボード"]

記号やスペースを含むラベルをダブルクォーテーション "" で囲むだけで、パーサーの誤認識を防ぎ、日本語ラベルも安定して表示できます。

用途に合わせてテーマと描画スタイルを切り替える

暗い画面で見やすい図でも、白いスライドに貼ると線が薄く見えることがあります。書き出す前に Mermaid レンダラー のツールバーで見た目を調整しましょう。

1. テーマ（Theme）: 仕様書や白背景のスライドには default または neutral、ダークモードの資料には dark、落ち着いた配色には forest が適しています。
2. スタイル（Look）: アーキテクチャ図や ER 図には整ったクラシック表示を使い、企画初期のラフな議論では手書き風（Hand-drawn）に切り替えると、細部ではなく全体の流れに集中しやすくなります。

ベクター SVG と高解像度 PNG の使い分け

貼り付け先の環境に応じて書き出し形式を選びます。

• SVG（ベクター形式）: 技術ブログ、ドキュメントサイト、Figma での再編集に最適です。どれだけ拡大しても文字や線がぼやけません。
• PNG（画像形式）: PowerPoint、Google スライド、Word、Slack、Jira など、SVG の直接貼り付けに制限があるツールに向いています。Web ページ掲載用にさらに軽量化したい場合は、画像変換ツールで WebP や AVIF に変換すると効果的です。

Markdown ドキュメント制作と連携する

仕様書全体の Markdown 原稿を作成している場合は、図を個別に確認・書き出したうえで、本文を Markdown HTML 変換ツールで整形するとスムーズです。元の Mermaid コードもリポジトリやドキュメント内に残しておけば、仕様変更時も数行書き換えるだけで図を更新できます。

まとめ

Mermaid を使えば図表をテキストとして管理でき、オンラインレンダラーを使えば必要な時にすぐ SVG や PNG として書き出せます。ラベルの引用符、背景に合ったテーマ選び、用途に応じたフォーマット選択を押さえて、わかりやすい技術資料を効率よく作成しましょう。