Mermaid diagrams, drawn before your next keystroke

Ride the Pele line

Six live demos, one idea each. Every one runs the real pele package in your browser, most of them next to the real Mermaid.js.

1. Stop 1Type a diagramPele redraws on every keystroke. Mermaid.js falls behind.
2. Stop 2Stream an AI answerWatch the diagram grow while the chatbot is still typing.
3. Stop 3Theme labRecolour every diagram with CSS. Zero redraws.
4. Stop 4Phone in your pocketDrag a phone narrower. Pele re-flows; Mermaid shrinks.
5. Stop 5A page with 200 diagramsRace to the last diagram on a long docs page.
6. Stop 6Paste anythingThrow hostile diagrams at it. Nothing runs.

What is Pele?

Pele is a JavaScript library that turns Mermaid diagram text into SVG. It was written by kepano (Steph Ango, CEO of Obsidian) so that diagrams in Obsidian draw instantly and match the user's theme. It is open source under the MIT license.

You hand it the same text you would give Mermaid.js and get an SVG string back, 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 look, and takes colours and fonts from CSS variables. What is Pele? has the details; Getting started gets it into your app in five minutes.

When is Pele the better choice?

When diagrams are drawn often, live or in bulk:

• a preview that redraws on every keystroke, like the race above;
• a chat app streaming a diagram from an AI model (stop 2);
• an app whose diagrams must follow the user's theme (stop 3);
• diagrams read on phones (stop 4);
• docs pages with dozens or hundreds of diagrams (stop 5);
• diagrams written by people you don't trust (stop 6).

Stay with Mermaid.js if you need its exact look, JavaScript click callbacks or plugins such as ZenUML. The Pele vs Mermaid.js page goes through it honestly.