開発未分類
比較対象
クレカ明細の確認ステータス状態遷移図（tax-assistant-planning-review.md より）。
1. 通常の Mermaid（クライアントサイドレンダリング）
2. beautiful-mermaid（ライトテーマ）
renderMermaidSVG でビルド時に生成した静的SVG。フォントは Inter、CSS変数でテーマ制御。
3. beautiful-mermaid（ダークテーマ / Tokyo Night）
同じ図を bg: '#1a1b26', fg: '#a9b1d6' で生成。
所感
| 項目 | 通常 Mermaid | beautiful-mermaid |
|---|---|---|
| レンダリング | クライアントサイド（JS必須） | ビルド時（静的SVG） |
| フォント | Mermaid デフォルト | Inter（カスタム可） |
| テーマ | Mermaid テーマ設定 | CSS変数（15種+Shiki互換） |
| バンドルサイズ | mermaid.js（~2MB） | 0（SVGのみ） |
| 対応図 | 全種 | flowchart, state, sequence, class, ER |