MermaidDiagram

Renders a Mermaid chart definition into SVG on the client.

Props

Prop	Type	Required	Default	Description
`chart`	`string`	Yes	-	Mermaid diagram definition passed to the Mermaid renderer
`className`	`string`	No	-	Additional wrapper classes
`...htmlProps`	`HTMLAttributes<HTMLDivElement>`	No	-	Standard div HTML attributes

Usage

import MermaidDiagram from "@/components/atoms/MermaidDiagram";

<MermaidDiagram
  chart={`sequenceDiagram
  participant CMS as Contentstack CMS
  participant Site as Website
  CMS->>Site: Loads site with hash`}
/>

import MermaidDiagram from "@/components/atoms/MermaidDiagram";

<MermaidDiagram
  chart={`sequenceDiagram
  participant CMS as Contentstack CMS
  participant Site as Website
  CMS->>Site: Loads site with hash`}
/>

Features

Client-only Mermaid rendering to avoid SSR issues
Lazy rendering with IntersectionObserver so off-screen diagrams do not render immediately
Shared Mermaid module loading so multiple diagrams reuse the same runtime
Unique render IDs per diagram instance
Project token-driven Mermaid colors for surfaces, borders, text, and teal accents
Graceful error state when a diagram definition is invalid
Reserved-height loading shell to reduce layout shift and visible render flicker
Scrollable container for wider diagrams

Notes

Mermaid is preloaded during browser idle time and rendered once the diagram nears the viewport
The component renders Mermaid SVG output into a wrapper div
Mermaid config is built from the current CSS custom properties exposed by the site theme
securityLevel: "antiscript" is used when initializing Mermaid