Components

Mermaid

Flowcharts, sequence diagrams, and more from text.

Write diagrams as mermaid fenced code blocks or with the Mermaid component. Blocks render client-side; the raw definition stays in the markup for search indexing and no-JS fallbacks.

flowchart LR
  A[Start] --> B[Process]
  B --> C[End]

```mermaid
flowchart LR
  A[Start] --> B[Process]
  B --> C[End]
```

Component usage#

Minimal example

flowchart LR
A --> B

<Mermaid chart="flowchart LR
  A --> B" title="Minimal example" />

The diagram definition can also go in children:

flowchart TD
Top --> Bottom

<Mermaid>
  flowchart TD
    Top --> Bottom
</Mermaid>

See the Mermaid documentation for the full syntax: flowcharts, sequence diagrams, Gantt charts, and more.

Properties#

Name	Type	Description
chart	string	Diagram definition. Defaults to the string children.
title	ReactNode	Optional caption above the diagram.
actions	boolean	Show zoom and reset controls. Default: true
placement	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'	Corner for the controls. Fences accept `placement="top-left"` in the info string. Default: 'bottom-right'
children	ReactNode	Diagram definition when `chart` is omitted.

Last updated on Sep 4, 2026

PreviousIcon NextPanel