@raystack/chronicle 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raystack/chronicle",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Config-driven documentation framework",
   "license": "Apache-2.0",
   "type": "module",
@@ -45,7 +45,6 @@
     "@raystack/apsara": "1.0.0-rc.4",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
-    "beautiful-mermaid": "^1.1.3",
     "chalk": "^5.6.2",
     "class-variance-authority": "^0.7.1",
     "codemirror": "^6.0.2",
@@ -56,6 +55,7 @@
     "gray-matter": "^4.0.3",
     "h3": "^2.0.1-rc.16",
     "lodash": "^4.17.23",
+    "mermaid": "^11.13.0",
     "minisearch": "^7.2.0",
     "nitro": "3.0.260311-beta",
     "openapi-types": "^12.1.3",

package/src/components/mdx/mermaid.tsx

@@ -1,5 +1,6 @@
-import { renderMermaidSVG } from 'beautiful-mermaid'
-import { useMemo } from 'react'
+'use client'
+
+import { useEffect, useId, useState } from 'react'
 import styles from './mermaid.module.css'
 
 interface MermaidProps {
@@ -7,34 +8,30 @@ interface MermaidProps {
 }
 
 export function Mermaid({ chart }: MermaidProps) {
-  const { svg, error } = useMemo(() => {
-    try {
-      return {
-        svg: renderMermaidSVG(chart, {
-          bg: 'var(--rs-color-background-base-primary)',
-          fg: 'var(--rs-color-foreground-base-primary)',
-          line: 'var(--rs-color-border-base-focus)',
-          accent: 'var(--rs-color-foreground-accent-primary)',
-          muted: 'var(--rs-color-foreground-base-secondary)',
-          surface: 'var(--rs-color-background-neutral-secondary)',
-          border: 'var(--rs-color-border-base-tertiary)',
-          transparent: true,
-        }),
-        error: null,
-      }
-    } catch (err) {
-      return {
-        svg: null,
-        error: err instanceof Error ? err : new Error(String(err)),
-      }
+  const mermaidId = useId().replace(/:/g, '-')
+  const [svg, setSvg] = useState<string>('')
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function render() {
+      const { default: mermaid } = await import('mermaid')
+      mermaid.initialize({ startOnLoad: false, theme: 'default' })
+      const { svg: rendered } = await mermaid.render(
+        mermaidId,
+        chart
+      )
+      if (!cancelled) setSvg(rendered)
     }
+
+    render()
+    return () => { cancelled = true }
   }, [chart])
 
-  if (error) return <pre className={styles.error}>{error.message}</pre>
   return (
     <div
       className={styles.mermaid}
-      dangerouslySetInnerHTML={{ __html: svg! }}
+      dangerouslySetInnerHTML={{ __html: svg }}
     />
   )
 }