The Pele line: six live demos

Each stop is one idea you can play with in under a minute. They all run the real pele package in your browser, and most race it against the real Mermaid.js so you can judge for yourself.

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.

How the comparisons are kept fair

Both libraries are fully downloaded before any race starts, both render the same Mermaid text, and times are measured with performance.now() in your own browser. Pele's numbers are the median of recent renders, after a few warm-up renders, which is what an editor sees once you've been typing for a second. Mermaid.js uses its default settings with securityLevel: 'strict'.