---
title: "Pele Renderer"
description: "@tiptap-pro/extension-diagrams/pele draws Mermaid diagrams with Pele, a Mermaid renderer by Obsidian."
canonical_url: "https://tiptap.dev/docs/diagrams/renderers/pele"
---

# Pele Renderer

@tiptap-pro/extension-diagrams/pele draws Mermaid diagrams with Pele, a Mermaid renderer by Obsidian.

## Quick start

```ts
import { Diagrams } from '@tiptap-pro/extension-diagrams'
import { peleDiagramRenderer } from '@tiptap-pro/extension-diagrams/pele'
import PeleWorker from '@tiptap-pro/extension-diagrams/pele-worker?worker'

Diagrams.configure({
  diagramRenderers: [peleDiagramRenderer({ worker: () => new PeleWorker() })],
})
```

- **Install `pele` 1.6.0 yourself.** It is an optional peer dependency, pinned to that exact
  version: its markup changes between releases, and editing in the picture reads it.
- **The Worker** is the entry `@tiptap-pro/extension-diagrams/pele-worker`. Load it with your
  bundler's Worker import; `?worker` is Vite's.
- **Pele is loaded only in the Worker.** The page loads `/pele`, which does not import it.
- **Every kind is registered in the Worker**, all 25 [Mermaid kinds](https://tiptap.dev/docs/diagrams/flow-diagrams/overview.md#mermaid-kinds).
  The Worker loads them once; the page never does. `PELE_DIAGRAM_KINDS` lists them, and
  `peleDrawsDiagram(source)` is the Renderer's `draws`.

## Options

| Option   | Type                   | Description                                                                 |
| -------- | ---------------------- | --------------------------------------------------------------------------- |
| `worker` | `() => PeleWorkerPort` | Required. Starts the Worker, once, for the first diagram. A `Worker` is one |
| `id`     | `string`               | Default `'pele'`                                                            |
| `label`  | `string`               | Default `'Mermaid (Pele)'`                                                  |

## Next to mermaid.js

The document stores the same Mermaid source; only the picture differs. Register one of the two
for `mermaid`: the first Diagram Renderer for a format draws it.

|                     | mermaid.js                              | Pele                                   |
| ------------------- | --------------------------------------- | -------------------------------------- |
| Draws in            | A sandboxed iframe                      | A Web Worker                           |
| Size, gzip          | About 980 kB                            | About 205 kB, in the Worker            |
| Kinds               | Every kind of the list                  | The same                               |
| Edges               | Curves                                  | Straight, right-angled                 |
| journey             | Faces under a timeline                  | Scores as a line                       |
| mindmap             | Radial                                  | A tree to both sides                   |
| Text in the picture | Double click, in every kind that has it | The same                               |
| Dragging shapes     | Flowcharts                              | The same                               |
| On a server         | Needs a browser                         | Runs in Node, with `renderPeleDiagram` |

## How it draws

- **Links and images** in the source are dropped: `click … href` and `@{ img: … }` draw nothing.
- **Colors** come from the `--tt-flow-diagram-*` custom properties, as for mermaid.js, and are
  written into the SVG. `toPeleVariables(theme)` lists the mapping.
- **The picture** is shown in an `<img>`, like every diagram.
- **No `foreignObject`.** Labels are SVG text, so PNG, WebP and Word need nothing extra.
- **A source that does not parse** shows the error state with Pele's message.
- **A Worker that fails** rejects what was waiting; the next diagram starts a new one.

## On a server

`@tiptap-pro/extension-diagrams/pele-render` draws without a page, in Node or a Worker of your own:

```ts
import { defaultDiagramTheme } from '@tiptap-pro/extension-diagrams/core'
import { renderPeleDiagram } from '@tiptap-pro/extension-diagrams/pele-render'

const { svg, width, height } = renderPeleDiagram({
  format: 'mermaid',
  source: 'flowchart LR\n  A --> B',
  theme: defaultDiagramTheme,
})
```

- **Text widths** come from Pele's built-in font metrics where there is no canvas, so a picture
  can be a few pixels wider or narrower than in the browser.
- **Word** needs a PNG beside an SVG; turn the SVG into one with a rasterizer such as resvg.

## Editing in the picture

`peleDiagramEditing` finds text and shapes in Pele's pictures, as `mermaidDiagramEditing` does in
mermaid.js's ([Editing in the picture](https://tiptap.dev/docs/diagrams/renderers/custom-diagrams.md#editing-in-the-picture)).

- **A double click** opens the text of a flowchart's shapes and edges, a sequence diagram's
  participants and messages, a state, or a class's name. In the other kinds it opens a text the
  source writes once, such as a timeline's event or a kanban's card.
- **Dragging a flowchart's shape** moves it. The document stores the offset, the same one a drag
  with mermaid.js stores.
- **A moved shape's edges** are drawn as straight lines from border to border. Their arrowheads
  turn with them, and their text sits in the middle.
- **Everything else stays where Pele drew it**, a subgraph's frame included. Pele does not lay
  the diagram out again.