Components / UI components / Rich Content
Rich contentExperimental alpha

MermaidDiagram

Lazy diagrams with zoom, source view and explicit syntax/security fallbacks.

MermaidDiagram preview

Loading example…

Interactions use local sample data.

Usage and props

Display a Mermaid diagram with its source available to read. This is a diagram viewer; handle editing and workflow execution in your application. Optional Mermaid peer. Configuration/interaction directives and remote resources are restricted.

codestring
Mermaid source. Restricted, unsupported or invalid input shows a source preview and message.
titlestring (optional)
The diagram title. Defaults to Diagram.
descriptionstring (optional)
A short explanation of what the diagram shows.
state'complete' | 'streaming' (optional)
Use streaming while source is arriving, then complete when it is ready to render.
How state and callbacks work

These are the main props for the example. The package's TypeScript declarations include the full API.

Customize and use with a keyboard