mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-12 12:18:55 +02:00
4bc7e63c51
Add a <Mermaid> React component under apps/docs/components/ that dynamic-
imports the mermaid package in useEffect and renders the resulting SVG.
Deps added: mermaid@^11.14.0 and next-themes@^0.4.6 (transitively present
via fumadocs-ui but needs explicit declaration to be importable).
Design choices:
- Client-side render (not build-time). No Playwright / browser automation
in CI. Mermaid bundle (~400 KB) is loaded only on pages that use the
component, thanks to the dynamic import.
- Theme flips automatically — useTheme() from next-themes re-invokes
mermaid.initialize() with the correct theme on .dark toggle.
- SSR safe: the component returns a "Rendering diagram…" placeholder on
the server; the SVG appears after hydration.
- securityLevel "strict" — diagrams render as static SVG with no inline
script or event handlers.
Usage in mdx (explicit import, same pattern as Cards/Callout):
import { Mermaid } from "@/components/mermaid";
<Mermaid chart={`
graph LR
User --> Server
`} />
Verified by a scratch /app/mermaid-test/ route that compiled to 4665
modules and returned HTTP 200 (cleanup done pre-commit).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
33 lines
811 B
JSON
33 lines
811 B
JSON
{
|
|
"name": "@multica/docs",
|
|
"version": "0.2.0",
|
|
"private": true,
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "next dev --port 4000",
|
|
"build": "fumadocs-mdx && next build",
|
|
"start": "next start",
|
|
"typecheck": "fumadocs-mdx && tsc --noEmit",
|
|
"postinstall": "fumadocs-mdx"
|
|
},
|
|
"dependencies": {
|
|
"@multica/ui": "workspace:*",
|
|
"fumadocs-core": "^15.5.2",
|
|
"fumadocs-mdx": "^12.0.3",
|
|
"fumadocs-ui": "^15.5.2",
|
|
"lucide-react": "catalog:",
|
|
"mermaid": "^11.14.0",
|
|
"next": "^15.3.3",
|
|
"next-themes": "^0.4.6",
|
|
"react": "catalog:",
|
|
"react-dom": "catalog:"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "catalog:",
|
|
"@types/react": "catalog:",
|
|
"@types/react-dom": "catalog:",
|
|
"tailwindcss": "catalog:",
|
|
"typescript": "catalog:"
|
|
}
|
|
}
|