# Mermaid

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

## Live demo

<StoryEmbed slug="mermaid" />

## Syntax

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

```mdx title="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`.

## Attributes and props

| 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 |

## In other formats

<FormatSupport />