|
| 1 | +import { nextTick, onMounted } from 'vue' |
| 2 | +import { useRouter } from 'vitepress' |
| 3 | + |
| 4 | +declare global { |
| 5 | + interface Window { |
| 6 | + mermaid?: { |
| 7 | + initialize: (config: Record<string, unknown>) => void |
| 8 | + render: (id: string, text: string) => Promise<{ svg: string; bindFunctions?: (el: Element) => void }> |
| 9 | + } |
| 10 | + __mermaidLoadingPromise__?: Promise<void> |
| 11 | + __mermaidInitialized__?: boolean |
| 12 | + } |
| 13 | +} |
| 14 | + |
| 15 | +const MERMAID_CDN = 'https://cdn.jsdelivr.net/npm/mermaid@10.9.6/dist/mermaid.min.js' |
| 16 | + |
| 17 | +function loadMermaid(): Promise<void> { |
| 18 | + if (typeof window === 'undefined') return Promise.resolve() |
| 19 | + |
| 20 | + if (window.mermaid) { |
| 21 | + initMermaid() |
| 22 | + return Promise.resolve() |
| 23 | + } |
| 24 | + |
| 25 | + if (window.__mermaidLoadingPromise__) return window.__mermaidLoadingPromise__ |
| 26 | + |
| 27 | + window.__mermaidLoadingPromise__ = new Promise<void>((resolve, reject) => { |
| 28 | + const existing = document.querySelector<HTMLScriptElement>('script[data-mermaid-runtime]') |
| 29 | + if (existing) { |
| 30 | + existing.addEventListener('load', () => { initMermaid(); resolve() }) |
| 31 | + existing.addEventListener('error', () => reject(new Error('Failed to load Mermaid'))) |
| 32 | + return |
| 33 | + } |
| 34 | + |
| 35 | + const script = document.createElement('script') |
| 36 | + script.src = MERMAID_CDN |
| 37 | + script.async = true |
| 38 | + script.dataset.mermaidRuntime = 'true' |
| 39 | + script.onload = () => { initMermaid(); resolve() } |
| 40 | + script.onerror = () => reject(new Error(`Failed to load Mermaid from ${MERMAID_CDN}`)) |
| 41 | + document.head.appendChild(script) |
| 42 | + }) |
| 43 | + |
| 44 | + return window.__mermaidLoadingPromise__ |
| 45 | +} |
| 46 | + |
| 47 | +function initMermaid() { |
| 48 | + if (!window.mermaid || window.__mermaidInitialized__) return |
| 49 | + window.mermaid.initialize({ |
| 50 | + startOnLoad: false, |
| 51 | + securityLevel: 'loose', |
| 52 | + theme: 'default', |
| 53 | + flowchart: { |
| 54 | + htmlLabels: true, |
| 55 | + nodeSpacing: 50, |
| 56 | + rankSpacing: 50, |
| 57 | + padding: 15, |
| 58 | + }, |
| 59 | + themeVariables: { |
| 60 | + fontSize: '15px', |
| 61 | + }, |
| 62 | + }) |
| 63 | + window.__mermaidInitialized__ = true |
| 64 | +} |
| 65 | + |
| 66 | +async function renderMermaidDiagrams() { |
| 67 | + if (typeof window === 'undefined') return |
| 68 | + |
| 69 | + await loadMermaid() |
| 70 | + await nextTick() |
| 71 | + await new Promise<void>((r) => requestAnimationFrame(() => r())) |
| 72 | + |
| 73 | + const mermaid = window.mermaid |
| 74 | + if (!mermaid) return |
| 75 | + |
| 76 | + const nodes = Array.from( |
| 77 | + document.querySelectorAll<HTMLElement>('.mermaid-diagram[data-rendered="false"]') |
| 78 | + ) |
| 79 | + |
| 80 | + for (let i = 0; i < nodes.length; i++) { |
| 81 | + const el = nodes[i] |
| 82 | + const raw = el.dataset.mermaid |
| 83 | + if (!raw) continue |
| 84 | + |
| 85 | + const source = decodeURIComponent(raw) |
| 86 | + const id = `mermaid-${Date.now()}-${i}-${Math.random().toString(36).slice(2, 8)}` |
| 87 | + |
| 88 | + try { |
| 89 | + const { svg } = await mermaid.render(id, source) |
| 90 | + el.innerHTML = svg |
| 91 | + el.dataset.rendered = 'true' |
| 92 | + } catch { |
| 93 | + el.dataset.rendered = 'error' |
| 94 | + el.innerHTML = `<pre class="mermaid-error">${escapeHtml(source)}</pre>` |
| 95 | + } |
| 96 | + } |
| 97 | +} |
| 98 | + |
| 99 | +function escapeHtml(s: string) { |
| 100 | + return s.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>') |
| 101 | + .replaceAll('"', '"').replaceAll("'", ''') |
| 102 | +} |
| 103 | + |
| 104 | +export function setupMermaid() { |
| 105 | + const router = useRouter() |
| 106 | + |
| 107 | + onMounted(() => renderMermaidDiagrams()) |
| 108 | + router.onAfterRouteChange = () => renderMermaidDiagrams() |
| 109 | +} |
0 commit comments