Mermaid | Components

A mermaid code block becomes a diagram that follows the colors of the theme.

Live demo

Click the deck, then use ← → · 2 slides · 00:00Open fullscreen →

Markdown
```mermaid title="Lorem ipsum flow"
graph LR
  A[Lorem] --> B[Ipsum] --> C[Dolor]
```

MDX
<Mermaid title="Lorem ipsum flow" chart={`graph LR
  A --> B`} />

Rendered in the browser, and rendered again when switching between light and dark.
title becomes the accessible name; a diagram without a title triggers a diagnostic.
Mermaid is only bundled when a story uses it; mermaid.securityLevel defaults to strict.

Prop	Type	Default	Description
`chart`	`string`	—	Diagram source (or `children`)
`title`	`string`	—	Accessible name
`caption`	`string`	—	Text shown under the diagram
`securityLevel`	`strict \| loose \| antiscript`	`strict`	Only in MDX. A `:::component` directive cannot set it: the level comes from `mermaid.securityLevel` of the configuration

Format	Status	Notes
`deck`	Available	Rendered in slides, the presenter console and the HTML and PDF exports.
`docs`	Available	Through <StoryEmbed slug="…" /> in any page of a site.
`motion`	Available	Animated block in a film.
`report`	Planned · P6	Section of a paged report.
`toon`	Planned · P7	Panel of a vertical strip.
`book`	Planned · P8	Block of a printable chapter.

Last modified on October 29, 2026