このサイトでは、MDX投稿のMermaidコードブロックを静的サイト生成（SSG）のビルド中にPNGへ変換し、静的HTMLの img 要素として出力します。
アーキテクチャ
出力仕様
| 項目 | 仕様 |
|---|---|
| 対象 | ブログ投稿用のMarkdown、MDXファイル |
| 記法 | 言語名が mermaid のコードブロック |
| 出力先 | 静的サイト用の画像ディレクトリ |
| ファイル名 | {投稿ファイル名から拡張子を除いた文字列}-{1から始まる図番号}.png |
| HTML | img 要素に loading="lazy"、decoding="async"、代替テキスト、画像寸法を付与 |
| ブラウザ側の処理 | Mermaid用JavaScriptは不要 |
画像品質と安全性
- PNGは2倍の描画倍率で生成します。
- 圧縮前後の画素データが一致することを確認し、画質を変えない候補から最も小さいファイルを採用します。
- Mermaidの安全設定を固定し、描画中の外部通信を無効にします。
- 入力の長さ、図の数、辺の数、処理時間、画像寸法に上限を設けます。
- 構文エラー、画像生成失敗、HTMLとの不整合がある場合はビルドを失敗させます。
利用方法
投稿に次のようなコードブロックを記述します。alt には図の内容が分かる説明を指定できます。
```mermaid alt="処理Aから処理Bへ進む流れ"
flowchart LR
A["処理A"] --> B["処理B"]
```サイトをビルドすると、投稿ごとのPNGと、その画像を参照する静的HTMLが生成されます。