--- title: "Mermaid Renderer" description: "Draw flowcharts, sequence diagrams and other Mermaid diagrams, and simple charts, with Mermaid in a sandbox." canonical_url: "https://tiptap-docs.lin52025i.qzz.io/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@11 ``` The Renderer supports Mermaid 11.16.1 and later 11.x releases. It refuses Mermaid 12, which draws existing diagrams differently. ```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 work in Vite and give you the URL of a file. `no-inline` keeps Vite from turning a small file into a `data:` URL, which the iframe cannot load. With another bundler, serve both files yourself 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`, the script that draws in the iframe | | `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 The Mermaid Renderer declines the charts below, so another registered Renderer draws them. If no other Renderer draws the chart's type, Mermaid draws it after all, as the second column says. See [When a Renderer declines a chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/overview.md#when-a-renderer-declines-a-chart). | Chart | Drawn by Mermaid | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | A bar chart with several series | The bars lie on top of each other, without a legend | | A bar chart with `spec.orientation: 'horizontal'` | The bars stand upright | | A line chart with `spec.series` set | Plain lines. Mermaid has no dashes, widths, markers or curves | | A chart with styled grid or axis lines, `axes.y.step`, `axes.x.labels` or `references`, such as a radar with styled rings or spokes (`axes.y.grid`, `axes.x.line`) | Without them | | A radar or a treemap with a value below zero | Mermaid reads no minus sign. 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` | Such nodes share one section, named after the value column | | An area or a scatter chart | Not drawn. The chart shows what [`unavailable`](https://tiptap-docs.lin52025i.qzz.io/diagrams/api-reference/options.md#unavailable) returns | Mermaid also draws these charts differently, whatever else is registered: - **A doughnut** is drawn as a pie. - **A missing value** is drawn as zero. - **A sankey link that closes a loop** is left out. The other Renderers leave it out too. - **A sankey's title** is drawn above the chart by the Renderer, because Mermaid draws none. - **A radar's legend** is always at the top right. `legend.show: false` hides it. - **A double click on a text** opens nothing. You cannot [rename a text in the chart](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/editing.md). - **Export on a server** is not possible, because `toSVG` needs a browser. ## Importing Mermaid Mermaid `pie`, `xychart`, `sankey-beta`, `radar-beta` and `treemap-beta` source becomes a chart with data you can edit, through [`importMermaidChart`](https://tiptap-docs.lin52025i.qzz.io/diagrams/charts/overview.md#importmermaidchart) or by [pasting](https://tiptap-docs.lin52025i.qzz.io/diagrams/data/pasting.md) it. Any chart Renderer draws the result, so you do not need the Mermaid Renderer for this. ## Diagrams `mermaidDiagramRenderer`, from the same entry point, draws Mermaid diagrams. It draws all 25 [Mermaid kinds](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md#mermaid-kinds) a diagram holds, such as flowchart, sequence, class, Gantt, mind map and timeline. ```ts import { mermaidDiagramRenderer, mermaidRenderer } from '@tiptap-pro/extension-diagrams/mermaid' Diagrams.configure({ renderers: [mermaidRenderer({ mermaidUrl, rendererUrl })], diagramRenderers: [mermaidDiagramRenderer({ mermaidUrl, rendererUrl })], }) ``` - **Its options** are the same as for `mermaidRenderer`. - **It uses the same sandboxed iframe** as `mermaidRenderer`. If you register both, Mermaid loads once. - **Colors and the font** come from the `--tt-flow-diagram-*` custom properties, not from the source. See [Diagrams](https://tiptap-docs.lin52025i.qzz.io/diagrams/flow-diagrams/overview.md), which also has a demo. - **It draws only in a browser**, like the chart Renderer. [Pele](https://tiptap-docs.lin52025i.qzz.io/diagrams/renderers/pele.md) is a second Diagram Renderer for Mermaid source. It draws in a Web Worker and also on a server.