Tiptap Docs

Mermaid Renderer

Draws pie, doughnut (as a pie), line, bar, sankey, radar and treemap charts with Mermaid. Mermaid runs in a sandboxed iframe and the picture is shown as an image, so nothing Mermaid produces runs in your page.
Pro ExtensionAlphaPilot program

Quick start 

npm install mermaid
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

OptionTypeDescription
mermaidUrlstringRequired. The URL of Mermaid's single-file build, mermaid/dist/mermaid.min.js, 11.16.1 or later and below 12
rendererUrlstringRequired. The URL of @tiptap-pro/extension-diagrams/mermaid-renderer, served as a file
scriptNoncestring | nullThe nonce for pages with a nonce-based Content Security Policy. Default null
idstringThe id charts store. Default 'mermaid'
labelstringThe 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.

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, which also has a demo.
  • Like the chart Renderer, it draws only in a browser.
Previouslyd3