Content
Mermaid Diagram
Render Mermaid diagrams (flowchart, sequence, gantt…); the engine loads on demand and re-themes for light/dark.
Render a Mermaid diagram — flowchart, sequence, gantt, class, state and more — from a diagram-definition string. The mermaid library is loaded on demand the first time a diagram renders, so it never ships in the initial bundle, and it re-themes automatically for light and dark. Inside MarkdownRenderer, ```mermaid fenced blocks are rendered through this component.
Import
tsx
1import { MermaidDiagram } from "@yuhuanowo/yunui/content";Example
MermaidDiagram
Rendering diagram…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| chart* | string | — | |
| className | string | — | |
| enableZoom | boolean | true | Click the diagram to open a full-screen zoomable view. |