Revert "chore: replace mermaid with beautiful-mermaid"

[rsbh]

Reverts #42

[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 10:58am

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Dependencies

  • Updated the diagram rendering library dependency to the latest version.

• Refactor

  • Enhanced diagram rendering by adopting client-side processing for improved performance.

Walkthrough

The pull request updates the diagram rendering library from beautiful-mermaid to mermaid at version ^11.13.0, replacing synchronous SVG generation with client-side asynchronous rendering via a 'use client' directive and React effects.

Changes

Cohort / File(s)	Summary
Dependency Update packages/chronicle/package.json	Removed beautiful-mermaid and added mermaid ^11.13.0 as a dependency.
Mermaid Component Refactor packages/chronicle/src/components/mdx/mermaid.tsx	Converted from synchronous rendering with useMemo and error display to client-side async rendering. Added 'use client' directive, dynamic mermaid import within useEffect, initialization with { startOnLoad: false, theme: 'default' }, state-based SVG storage, and removed error handling UI.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 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 clearly describes the main change: reverting a previous commit that replaced mermaid with beautiful-mermaid, which aligns with the changeset modifications.
Description check	✅ Passed	The description is directly related to the changeset, clearly stating it reverts #42, which matches the PR objectives.
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 revert-42-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.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/chronicle/src/components/mdx/mermaid.tsx (1)

19-19: Make Mermaid security settings explicit as a best practice.

While Mermaid v11.13.0 defaults to securityLevel: 'strict' (which is safe for dangerouslySetInnerHTML usage), explicitly setting this at Line 19 clarifies intent and guards against unexpected future version changes.

Suggested configuration

-      mermaid.initialize({ startOnLoad: false, theme: 'default' })
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: 'default',
+        securityLevel: 'strict',
+      })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/chronicle/src/components/mdx/mermaid.tsx` at line 19, The
mermaid.initialize call should explicitly set securityLevel to 'strict' to
harden against future defaults changing; update the mermaid.initialize
invocation (the mermaid.initialize({ startOnLoad: false, theme: 'default' })
call) to include securityLevel: 'strict' in its options so the component always
runs with strict security for any dangerouslySetInnerHTML usage.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/chronicle/src/components/mdx/mermaid.tsx`:
- Around line 14-29: The useEffect's inner async render function calls
mermaid.render without error handling, causing silent failures; wrap the
import/mermaid.initialize and mermaid.render calls inside a try/catch in the
render function (checking cancelled before updating) and on error call setSvg
with a sensible fallback (e.g., an error/SVG fallback or a user-visible message)
and log the error (console.error or process logger) so invalid diagram syntax or
other failures don't leave the component blank; keep references to mermaidId,
chart, cancelled and only update state via setSvg when not cancelled.

---

Nitpick comments:
In `@packages/chronicle/src/components/mdx/mermaid.tsx`:
- Line 19: The mermaid.initialize call should explicitly set securityLevel to
'strict' to harden against future defaults changing; update the
mermaid.initialize invocation (the mermaid.initialize({ startOnLoad: false,
theme: 'default' }) call) to include securityLevel: 'strict' in its options so
the component always runs with strict security for any dangerouslySetInnerHTML
usage.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: dc898b24-329d-4654-b76a-a90572a4daaa

📥 Commits

Reviewing files that changed from the base of the PR and between 6fce8f2 and cd0ce77.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (2)

• packages/chronicle/package.json
• packages/chronicle/src/components/mdx/mermaid.tsx