[{"data":1,"prerenderedAt":236},["ShallowReactive",2],{"content-/mermaid-vs-beautiful-mermaid":3,"all-pages-for-dir":217,"related-/mermaid-vs-beautiful-mermaid":218,"og-image-/mermaid-vs-beautiful-mermaid":235},{"id":4,"title":5,"body":6,"category":203,"concepts":204,"description":205,"extension":206,"meta":207,"navigation":208,"ogImage":204,"path":209,"project_name":204,"published":210,"publishedAt":211,"seo":212,"source":204,"stem":213,"tags":214,"todo":204,"unpublished":210,"updatedAt":204,"__hash__":216},"pages/2026-01/2026-01-26/mermaid-vs-beautiful-mermaid.md","Mermaid vs beautiful-mermaid 比較",{"type":7,"value":8,"toc":196},"minimark",[9,13,22,26,73,77,83,90,94,105,111,114,192],[10,11,12],"h2",{"id":12},"比較対象",[14,15,16,17,21],"p",{},"クレカ明細の確認ステータス状態遷移図（",[18,19,20],"code",{},"tax-assistant-planning-review.md"," より）。",[10,23,25],{"id":24},"_1-通常の-mermaidクライアントサイドレンダリング","1. 通常の Mermaid（クライアントサイドレンダリング）",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-mermaid shiki shiki-themes vitesse-light vitesse-light","stateDiagram-v2\n    [*] --> unchecked: 新規インポート\n    unchecked --> ok: 確認OK\n    unchecked --> ng: 確認NG\n    ok --> unchecked: 取消\n    ng --> unchecked: 取消\n","mermaid","",[18,34,35,43,49,55,61,67],{"__ignoreMap":32},[36,37,40],"span",{"class":38,"line":39},"line",1,[36,41,42],{},"stateDiagram-v2\n",[36,44,46],{"class":38,"line":45},2,[36,47,48],{},"    [*] --> unchecked: 新規インポート\n",[36,50,52],{"class":38,"line":51},3,[36,53,54],{},"    unchecked --> ok: 確認OK\n",[36,56,58],{"class":38,"line":57},4,[36,59,60],{},"    unchecked --> ng: 確認NG\n",[36,62,64],{"class":38,"line":63},5,[36,65,66],{},"    ok --> unchecked: 取消\n",[36,68,70],{"class":38,"line":69},6,[36,71,72],{},"    ng --> unchecked: 取消\n",[10,74,76],{"id":75},"_2-beautiful-mermaidライトテーマ","2. beautiful-mermaid（ライトテーマ）",[14,78,79,82],{},[18,80,81],{},"renderMermaidSVG"," でビルド時に生成した静的SVG。フォントは Inter、CSS変数でテーマ制御。",[14,84,85],{},[86,87],"img",{"alt":88,"src":89},"status-flow-light","/2026-01/2026-01-26/status-flow-light.svg",[10,91,93],{"id":92},"_3-beautiful-mermaidダークテーマ-tokyo-night","3. beautiful-mermaid（ダークテーマ / Tokyo Night）",[14,95,96,97,100,101,104],{},"同じ図を ",[18,98,99],{},"bg: '#1a1b26'",", ",[18,102,103],{},"fg: '#a9b1d6'"," で生成。",[14,106,107],{},[86,108],{"alt":109,"src":110},"status-flow-dark","/2026-01/2026-01-26/status-flow-dark.svg",[10,112,113],{"id":113},"所感",[115,116,117,133],"table",{},[118,119,120],"thead",{},[121,122,123,127,130],"tr",{},[124,125,126],"th",{},"項目",[124,128,129],{},"通常 Mermaid",[124,131,132],{},"beautiful-mermaid",[134,135,136,148,159,170,181],"tbody",{},[121,137,138,142,145],{},[139,140,141],"td",{},"レンダリング",[139,143,144],{},"クライアントサイド（JS必須）",[139,146,147],{},"ビルド時（静的SVG）",[121,149,150,153,156],{},[139,151,152],{},"フォント",[139,154,155],{},"Mermaid デフォルト",[139,157,158],{},"Inter（カスタム可）",[121,160,161,164,167],{},[139,162,163],{},"テーマ",[139,165,166],{},"Mermaid テーマ設定",[139,168,169],{},"CSS変数（15種+Shiki互換）",[121,171,172,175,178],{},[139,173,174],{},"バンドルサイズ",[139,176,177],{},"mermaid.js（~2MB）",[139,179,180],{},"0（SVGのみ）",[121,182,183,186,189],{},[139,184,185],{},"対応図",[139,187,188],{},"全種",[139,190,191],{},"flowchart, state, sequence, class, ER",[193,194,195],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":32,"searchDepth":45,"depth":45,"links":197},[198,199,200,201,202],{"id":12,"depth":45,"text":12},{"id":24,"depth":45,"text":25},{"id":75,"depth":45,"text":76},{"id":92,"depth":45,"text":93},{"id":113,"depth":45,"text":113},"dev",null,"同じstateDiagram-v2を通常のMermaidコードブロックとbeautiful-mermaid SVGで描画して見比べる。","md",{},true,"/mermaid-vs-beautiful-mermaid",false,"2026-02-26T00:00:00.000Z",{"title":5,"description":205},"2026-01/2026-01-26/mermaid-vs-beautiful-mermaid",[31,132,215],"comparison","yTWzdMf1ATSd8GBbslsHXVLJL09uxxKZ0uwI1Z0E3OA",[],[219,223,227,231],{"title":220,"path":221,"publishedAt":222},"HTML→Markdown変換とMermaid図のSVG化 -- beautiful-mermaidで静的SVGを生成する","/beautiful-mermaid-svg-generation","2026-02-28T00:00:00.000Z",{"title":224,"path":225,"publishedAt":226},"Chrome拡張機能: Xブックマーク分析基盤の構築 — OAuth2認証・Sheets API連携・SQLite変換","/x-bookmark-exporter-oauth-sheets","2026-04-06T00:00:00.000Z",{"title":228,"path":229,"publishedAt":230},"SVGのtext-anchor問題に61箇所対応して挫折し、Beautiful Mermaidに移行した話","/content-creation-mermaid-migration","2026-04-01T00:00:00.000Z",{"title":232,"path":233,"publishedAt":234},"Mermaid図がWeb上で表示されない問題の調査と対応方針","/mermaid-diagram-display-issue","2025-11-20T00:00:00.000Z","https://log.eurekapu.com/og/blog/mermaid-vs-beautiful-mermaid.png?v=2026-02-26T00%3A00%3A00.000Z&title=Mermaid%20vs%20beautiful-mermaid%20%E6%AF%94%E8%BC%83&author=Kei%20Komatsu&sig=79dd72f84f0178e9",1785654725504]