Looking for Pelé the footballer? Go to his wiki
Live demos of Pele
Pele is kepano's open-source library that renders Mermaid diagrams to SVG, themed with CSS variables. The official docs at pele.run are excellent and the place to start: a playground, the full API, every diagram type, and the thinking behind it. This independent site is a companion to them. It runs the real package in your browser next to Mermaid.js, so you can see the difference for yourself.
Pele
Mermaid.js
Time per redraw, to scale. The mark is one frame at 60 fps (16.7 ms). A redraw that takes longer than a frame is felt on every keystroke; one that takes a fraction of a frame is not.
Press Auto-type, or type in the box. Both redraw on every keystroke.
Six demos
Each runs pele 1.6.0 in your browser. Most run Mermaid.js 12.1.0 beside it, with the same text, and time both.
- Demo 1TypingBoth libraries redraw on every keystroke. Compare the times.
- Demo 2StreamingA diagram redrawn on each chunk of an AI answer.
- Demo 3ThemingChange CSS variables. Pele recolours without a redraw.
- Demo 4Narrow screensResize the viewport. Pele changes the layout; Mermaid.js scales the drawing.
- Demo 5200 diagrams on one pageHow long each library takes to draw a long documentation page.
- Demo 6Untrusted inputScripts, bad links and oversized diagrams, and what reaches the page.
What is Pele?
Pele is a JavaScript library that turns Mermaid diagram text into SVG. kepano wrote it for Obsidian, so that diagrams draw instantly and match the user's theme. MIT licensed.
It takes the same text you would give Mermaid.js and returns an SVG string, synchronously:
import { render } from 'pele'
const { svg } = render(`flowchart LR
A[Mermaid text] --> B[SVG]`)
document.querySelector('#diagram').innerHTML = svg
It supports every diagram type built into Mermaid 12.1.0, uses its own layout, and takes colours and fonts from CSS variables. More in What is Pele? and Getting started.
Where it helps
Pele's speed matters when diagrams are drawn often, live, or in bulk:
- an editor preview that redraws on every keystroke;
- a chat app streaming a diagram from a model;
- an app whose diagrams must follow the user's theme;
- diagrams read on phones;
- documentation with hundreds of diagrams on a page;
- diagrams written by people you don't trust.
Keep Mermaid.js if you need its exact look, JavaScript click callbacks, or plugins such as ZenUML. See Pele vs Mermaid.js.