Tiptap Docs

Renderers

A Renderer draws a chart or a diagram with one library. Each is its own entry point, so you install only the libraries you use.
Pro ExtensionAlphaPilot program
New tab

Quick start 

import { Diagrams } from '@tiptap-pro/extension-diagrams'
import { d3Renderer } from '@tiptap-pro/extension-diagrams/d3'
import { echartsRenderer } from '@tiptap-pro/extension-diagrams/echarts'

Diagrams.configure({
  renderers: [echartsRenderer(), d3Renderer()],
  defaultRenderer: 'echarts',
})
  • The extension bundles no chart library.
  • Every library is a peer dependency or a script you serve, used under its own license.
  • A library not listed here can draw through a Renderer of your own.

Which Renderer to use

Register one or more chart Renderers, and one Diagram Renderer per diagram format.

RendererDrawsPick it for
EChartsCharts: every built-in typeThe most chart types; SVG on a server
d3Charts: most types; sankey with d3-sankeyPictures you shape in code; SVG on a server with a DOM
MermaidCharts: pie, line, upright bar, sankey, radar, treemap. Diagrams: every Mermaid kindThe Mermaid look, for charts and diagrams alike
PeleDiagrams: every Mermaid kindMermaid without an iframe, much smaller to load; also on a server
draw.ioDiagrams: draw.io XMLDiagrams drawn and changed in the draw.io editor
BPMNDiagrams: BPMN 2.0 XMLProcesses that BPMN tools read
  • Each page lists the chart types or kinds it draws and its limits.
  • Which registered Renderer draws a chart, and what a chart names, is under Choosing the Renderer.

Your own Renderer

A Renderer is an object with an id, the chart types it draws, mount to draw in the editor, and toSVG or toImage for files. It sees the Chart Data and the Chart Spec, never the document, so it works with every way data gets into a chart.

PreviouslyData Sources