Skip to content

feat: render Mermaid diagrams as inline SVGs at build time#24

Open
kamikaze011001 wants to merge 12 commits intoShipWithAI:developfrom
kamikaze011001:feat/mermaid-rendering
Open

feat: render Mermaid diagrams as inline SVGs at build time#24
kamikaze011001 wants to merge 12 commits intoShipWithAI:developfrom
kamikaze011001:feat/mermaid-rendering

Conversation

@kamikaze011001
Copy link
Copy Markdown

@kamikaze011001 kamikaze011001 commented Apr 11, 2026

Summary

  • Adds rehype-mermaid + Playwright to render Mermaid code blocks as inline SVGs at build time (server-side, no JS needed in browser)
  • Adds postinstall script so Vercel installs Playwright Chromium automatically during deployment
  • Adds CSS to wrap rendered SVGs in a light-mode card background so diagrams remain readable on Starlight's dark theme

Test plan

  • npm run build completes without errors — all Mermaid blocks become <svg> elements, not raw code blocks
  • Diagrams are visible and readable in dark mode (default theme)
  • Diagrams are visible and readable in light mode
  • Vercel preview deployment renders diagrams correctly (Playwright Chromium installed via postinstall)

🤖 Generated with Claude Code

truongnguyenptit and others added 12 commits April 1, 2026 08:32
fix: update vercel.json redirects to use regex capture groups for 301 redirects
fix: self-host fonts to fix digit rendering issue for some Chrome users
Server-side SVG approach using rehype-mermaid + Playwright.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
rehype-mermaid renders SVGs with hardcoded light-mode colors.
In dark mode (the default), connector arrows (stroke:#333333) are
invisible against the dark background. Wrapping the SVG in a light
card (background-color: #f8fafc) fixes visibility for all elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Internal brainstorming specs and implementation plans should not
live in the project repo. Moving to local-only (gitignored).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[/compact] and [/text] node labels are parsed as unclosed parallelogram
shapes in Mermaid, silently dropping entire page content via rehype-mermaid.
Also fixes backslash-pipe (\|) in unquoted node labels.

Wrap all affected node labels in double quotes to prevent misparse.
Fixes: Interfaces & Modes, Slash Commands, Context Optimization (EN + VI).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 11, 2026

Someone is attempting to deploy a commit to the Ethan Nguyen's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants