Dashboard › binpatch › Mermaid Starlight renderer: loreai PR #…

Mermaid Starlight renderer: loreai PR #1528 blueprint

Category: pattern
Confidence: 0.90
ID: 019fb4cd-6777-7a17-91a9-8e7c1496523d
Project ID: 54d50d32-8b5f-41b9-91dd-4473e4ccdbfd
Cross-project: No
Recalled in other projects: 2
Source session: 15RoSYqPKRifRJ68q
Created: 2026-07-30 20:53:08
Updated: 2026-07-30 20:53:08

Cross-Project Recalls

ProjectHitsLast recalled
opencode-lore 4 11h ago
cli 2 7d ago

Content

Steps:

  1. Add mermaid@11.16.0 as runtime dep in website/package.json.
  2. Copy website/integrations/mermaid-renderer.mjs — uses injectScript("page", ...), scans pre[data-language="mermaid"], extracts .ec-line textContent, calls mermaid.render(id, source), swaps <pre> for <div class="mermaid"> containing SVG. Fallback pre.textContent = source on error.
  3. Wire integrations in astro.config.mjs in this order: prefixBaseLinks(), mermaidRenderer(), faviconAssets(), then starlight({...}).
  4. Mermaid config: startOnLoad:false, theme:"neutral", securityLevel:"loose", fontFamily:"var(--sl-font)".
  5. Use fenced ```mermaid blocks in MDX — replaces CDN script in Starlight head.

Bundles mermaid instead of CDN (loreai pattern). Source: loreai PR #1528.

Move to: