---
title: "Renderers"
description: "A Renderer draws a chart or a diagram with one library."
canonical_url: "https://tiptap.dev/docs/diagrams/renderers/overview"
---

# Renderers

A Renderer draws a chart or a diagram with one library.

## Quick start

```ts
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](https://tiptap.dev/docs/diagrams/renderers/custom.md).

## Which Renderer to use

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

| Renderer                                                         | Draws                                                                                | Pick it for                                                       |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
| [ECharts](https://tiptap.dev/docs/diagrams/renderers/echarts.md) | Charts: every built-in type                                                          | The most chart types; SVG on a server                             |
| [d3](https://tiptap.dev/docs/diagrams/renderers/d3.md)           | Charts: most types; sankey with `d3-sankey`                                          | Pictures you shape in code; SVG on a server with a DOM            |
| [Mermaid](https://tiptap.dev/docs/diagrams/renderers/mermaid.md) | Charts: pie, line, upright bar, sankey, radar, treemap. Diagrams: every Mermaid kind | The Mermaid look, for charts and diagrams alike                   |
| [Pele](https://tiptap.dev/docs/diagrams/renderers/pele.md)       | Diagrams: every Mermaid kind                                                         | Mermaid without an iframe, much smaller to load; also on a server |
| [draw.io](https://tiptap.dev/docs/diagrams/renderers/drawio.md)  | Diagrams: draw\.io XML                                                               | Diagrams drawn and changed in the draw\.io editor                 |
| [BPMN](https://tiptap.dev/docs/diagrams/renderers/bpmn.md)       | Diagrams: BPMN 2.0 XML                                                               | Processes 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](https://tiptap.dev/docs/diagrams/charts/appearance.md#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.

- [Your own Renderer](https://tiptap.dev/docs/diagrams/renderers/custom.md) has a complete chart Renderer, its members and what it
  receives.
- [Chart types](https://tiptap.dev/docs/diagrams/renderers/custom-chart-types.md) adds a chart type.
- [A Diagram Renderer](https://tiptap.dev/docs/diagrams/renderers/custom-diagrams.md) draws a diagram format.