Mermaid Renderer

The Mermaid Renderer draws pie, doughnut (as a pie), line, bar, sankey, radar and treemap charts with Mermaid. A second Renderer from the same entry point draws Mermaid diagrams. Mermaid runs in a sandboxed iframe, and the editor shows the result as an image. So nothing Mermaid produces runs in your page.

AlphaPilot program

Quick start

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.

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.

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` 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.
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 or by pasting 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 a diagram holds, such as flowchart, sequence, class, Gantt, mind map and timeline.

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, which also has a demo.
It draws only in a browser, like the chart Renderer.

Pele is a second Diagram Renderer for Mermaid source. It draws in a Web Worker and also on a server.

PreviouslyD3

Next updraw.io