Mermaid を画像に変換 – PNG・SVG で図を出力

Mermaid の図を画像に変換する方法

Mermaid コードを貼り付けるか、UTF-8 の Markdown・MMD ファイルを読み込みます。入力を一時停止すると、プレビューが自動更新されます。

複数の図がある場合はプレビュー上部で選択します。オプションでテーマ、背景、余白、出力形式を設定できます。

ビットマップ画像の PNG、または拡大可能な SVG をダウンロードします。PNG の倍率は出力解像度のみを変更し、図の配置は変えません。

Mermaid 画像変換のよくある質問

できません。このツールは Markdown 内の Mermaid コードブロックを抽出し、1 つずつ図として出力します。周囲の見出し、段落、通常のコードブロックは含みません。文書全体のプレビューには Markdown Editor を使用してください。

PNG は描画時の見た目を保持し、文書やプレゼンテーションに適しています。SVG は拡大しても鮮明ですが、別の端末ではフォントが変わる場合があります。どちらも透明背景に対応し、PNG は 1×～4× の出力倍率を選べます。

代表的な Mermaid の図には、フローチャート、シーケンス図、クラス図、状態図、ER 図、ガントチャート、円グラフがあります。ラベルには端末で利用できるフォントを使います。対話型コールバック、埋め込み HTML、外部画像には対応していません。

描画と出力はブラウザー内で行います。入力は 200,000 文字、読み込むファイルは 200 KB、1 文書は 20 個の図までです。各図は 20,000 文字、接続は最大 250 本です。PNG は各辺 8,192 ピクセル、合計 1,600 万画素までです。