chore: replace mermaid with beautiful-mermaid

[rsbh]

Library: https://github.com/lukilabs/beautiful-mermaid

Summary

• Swap mermaid@^11.13.0 for beautiful-mermaid@^1.1.3
• Render synchronously via useMemo (no dynamic import, no flash, no async state)
• Map all renderer color tokens to Apsara CSS vars so diagrams pick up theme
  • bg: --rs-color-background-base-primary
  • fg: --rs-color-foreground-base-primary
  • line: --rs-color-border-base-focus
  • accent: --rs-color-foreground-accent-primary
  • muted: --rs-color-foreground-base-secondary
  • surface: --rs-color-background-neutral-secondary
  • border: --rs-color-border-base-tertiary
• Surface render errors as a <pre> instead of crashing the page

Test plan

• bun run dev:examples:frontier — diagrams render with current theme
• Toggle dark mode — colors flip per Apsara tokens
• Trigger an invalid diagram — page shows error text, no crash

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
chronicle	Ready	Preview, Comment	Apr 28, 2026 9:24am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Summary by CodeRabbit

Release Notes

• New Features

  • Diagram rendering now displays explicit error messages when rendering fails, improving troubleshooting.

• Refactor

  • Optimized diagram rendering with improved performance.

Walkthrough

Package dependency replaced from mermaid to beautiful-mermaid. Corresponding component refactored to use synchronous SVG generation with try/catch error handling instead of async client-side rendering, removing hooks and dynamic imports.

Changes

Cohort / File(s)	Summary
Dependency Update packages/chronicle/package.json	Replaced mermaid (^11.13.0) with beautiful-mermaid (^1.1.3) as runtime dependency.
Component Refactor packages/chronicle/src/components/mdx/mermaid.tsx	Shifted from async dynamic imports and hooks to synchronous renderMermaidSVG computation in useMemo. Added try/catch error handling that renders errors in a <pre> block. CSS variables now passed as strings. Removed useEffect, useState, and ID generation logic.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and accurately describes the main change: replacing the mermaid library with beautiful-mermaid.
Description check	✅ Passed	The description is highly detailed and directly related to the changeset, covering library replacement, rendering approach, theme integration, and error handling.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat_use_beautiful_mermaid

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}