---
title: "Mermaid Renderer"
description: "Draw flowcharts, sequence diagrams and other Mermaid diagrams, and simple charts, with Mermaid in a sandbox."
canonical_url: "https://tiptap.dev/docs/diagrams/renderers/mermaid"
---

# Mermaid Renderer

Draw flowcharts, sequence diagrams and other Mermaid diagrams, and simple charts, with Mermaid in a sandbox.

## Quick start

```bash
npm install mermaid
```

```ts
import { mermaidRenderer } from '@tiptap-pro/extension-diagrams/mermaid'
import mermaidUrl from 'mermaid/dist/mermaid.min.js?url'
import rendererUrl from '@tiptap-pro/extension-diagrams/mermaid-renderer?url&no-inline'

Diagrams.configure({ renderers: [mermaidRenderer({ mermaidUrl, rendererUrl })] })
```

The `?url` imports are for Vite. With another bundler, serve both files and pass their URLs.

## Options

| Option        | Type             | Description                                                                                                    |
| ------------- | ---------------- | -------------------------------------------------------------------------------------------------------------- |
| `mermaidUrl`  | `string`         | Required. The URL of Mermaid's single-file build, `mermaid/dist/mermaid.min.js`, 11.16.1 or later and below 12 |
| `rendererUrl` | `string`         | Required. The URL of `@tiptap-pro/extension-diagrams/mermaid-renderer`, served as a file                       |
| `scriptNonce` | `string \| null` | The nonce for pages with a nonce-based Content Security Policy. Default `null`                                 |
| `id`          | `string`         | The id charts store. Default `'mermaid'`                                                                       |
| `label`       | `string`         | The name for a menu. Default `'Mermaid'`                                                                       |

## Limits

- **A bar chart with several series** is drawn by another registered Renderer, if there is
  one. Mermaid would draw the bars on top of each other and without a legend.
- **A line chart with `spec.series` set** is drawn by another registered Renderer, if there is
  one. Mermaid has no dashes, widths, markers or curves.
- **A line chart with `spec.series` set and no other Renderer** is drawn by Mermaid with plain
  lines.
- **A doughnut** is drawn as a pie.
- **A bar chart with `spec.orientation: 'horizontal'`** is drawn by another registered
  Renderer.
- **Area and scatter charts** are drawn by another registered Renderer, if there is one.
- **A missing value** is drawn as zero.
- **A radar or a treemap with a value below zero** is drawn by another registered Renderer, if
  there is one. Mermaid reads no minus sign there. Drawn by Mermaid, a radar shows the value at
  zero and a treemap leaves it out.
- **A treemap with a node at the top that has no children**, such as `Gifts | 30` beside
  `Products / Books | 40`, is drawn by another registered Renderer, if there is one. Drawn by
  Mermaid, such nodes share one section, named after the value column.
- **A radar with styled rings or spokes** (`axes.y.grid`, `axes.x.line`) is drawn by another
  registered Renderer, if there is one.
- **A sankey link that closes a loop** is left out, as the other Renderers leave it out.
- **A sankey's title** is drawn above it by the Renderer, as Mermaid draws none.
- **A radar's legend** is always at the top right; `legend.show: false` hides it.
- **Export on a server** is not possible: `toSVG` needs a browser.

## Importing Mermaid

Mermaid `pie`, `xychart`, `sankey-beta`, `radar-beta` and `treemap-beta` source becomes a chart
with editable data.

- **`importMermaidChart`** imports it.
- **Pasting** it does the same, with or without a ` ```mermaid ` fence.
- **Any Renderer** draws the result. The Mermaid Renderer is not needed.

## Diagrams

`mermaidDiagramRenderer` from the same entry point draws diagrams: flowchart, sequence,
state, class, entity relationship, user journey, Gantt and mind map.

```ts
import { mermaidDiagramRenderer, mermaidRenderer } from '@tiptap-pro/extension-diagrams/mermaid'

Diagrams.configure({
  renderers: [mermaidRenderer({ mermaidUrl, rendererUrl })],
  diagramRenderers: [mermaidDiagramRenderer({ mermaidUrl, rendererUrl })],
})
```

- **Options** are the same as for `mermaidRenderer`.
- **The sandboxed iframe** is the same as for `mermaidRenderer`, so registering both loads
  Mermaid once.
- **Colors and the font** come from the `--tt-flow-diagram-*` custom properties, not from the
  source. See [Diagrams](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md), which also has a demo.
- **Like the chart Renderer**, it draws only in a browser.