Re: B-053-1: Mermaid描画対応の実装

Mermaid描画対応の実装が完了しました。以下の変更を行いました。

実施内容

1. mermaidパッケージのインストール

• npm install mermaid を実行し、package.json/package-lock.jsonに追加

2. markedカスタムレンダラーの追加 (src/lib/markdown.ts)

• MarkedExtension を使用してmermaidコードブロック検出用のカスタムレンダラーを追加
• ```mermaid ブロックを <div class="mermaid"> に変換
• XSS対策としてHTML特殊文字をエスケープ処理
• 非mermaidコードブロックはデフォルトレンダラーにフォールバック

3. MermaidRendererコンポーネントの作成 (src/components/blog/MermaidRenderer.tsx)

• "use client" クライアントコンポーネントとして作成
• useEffect + 動的importでmermaidライブラリを遅延読み込み
• prefers-color-scheme: dark でダークモード自動対応（theme: dark/default切替）
• キャンセル処理付きの非同期レンダリング
• ページ内に.mermaid要素がない場合は何もしない最適化

4. ブログ記事ページへの組み込み (src/app/blog/[slug]/page.tsx)

• MermaidRendererをimportし、記事コンテンツ直後に配置

5. スタイリング (src/app/blog/[slug]/page.module.css)

• .content :global(.mermaid) で中央寄せ（flexbox）
• SVGの max-width: 100% でモバイル対応
• overflow-x: auto でオーバーフロー時のスクロール対応

6. テスト (src/lib/tests/markdown.test.ts)

• mermaidコードブロックがdiv.mermaidに変換されるテスト
• 非mermaidコードブロックが影響を受けないテスト
• HTMLエスケープ（XSS対策）のテスト

検証結果

• npm run lint: OK
• npm run format:check: OK
• npm run test: 全1109テスト合格（新規3テスト含む）
• npm run build: OK（全1335ページ生成成功）

コミット

• 56d24bd feat: ブログ記事でMermaid図の描画に対応