What is Pele.wiki?
Pele.wiki is an interactive learning site and live demo gallery for Pele, the diagram renderer kepano (Steph Ango) built for Obsidian. Pele takes the Mermaid text you already write and draws it as SVG, with colours and fonts coming from your CSS. It has no dependencies, it's synchronous, and it's open source under the MIT license.
Every demo on the site runs the real pele package in your browser, and most of them run the real Mermaid.js right next to it, so you can see the difference for yourself.
Why We Built It
"A faster Mermaid renderer" is easy to say and easy to shrug at. What changes is what you can build once diagrams draw in well under a millisecond: previews that redraw on every keystroke, chat answers that draw their diagram while they're still being written, and docs pages with hundreds of diagrams that don't stall.
Pele's own docs report 0.05–0.3 ms per diagram against 6–82 ms for Mermaid.js, and about 230 kB gzipped against about 1.6 MB. We built Pele.wiki so people can test those claims on their own device instead of taking them on faith, and work out whether Pele fits their project.
A Hands-On Way to See the Difference
The home page opens on a race. You type a diagram, or press auto-type, and both libraries redraw on every keystroke. From there the site runs as a transit line with six stops, one idea each:
- Type a diagram and watch who keeps up.
- Stream an AI answer and watch its diagram grow while the chatbot is still typing.
- Recolour every diagram from a theme lab using CSS variables, with no redraws.
- Drag a phone narrower: Pele changes the layout to fit, where Mermaid.js shrinks the drawing.
- Race to the last diagram on a docs page with 200 of them.
- Paste hostile diagrams and check that nothing runs.
Built Around the Questions People Actually Ask
There's a gallery of all 32 diagram types built into Mermaid 12.1.0, drawn live and editable, with a Mermaid.js comparison on each card.
Alongside it are guides: what Pele is, getting started, theming, an API cheatsheet, and a migration guide that walks through swapping out Mermaid.js while keeping your Mermaid text exactly as it is. Comparison pages put Pele next to Mermaid.js, D2 and Excalidraw, and an FAQ covers speed, size, phones, safety and licensing.
Useful for Anyone Who Draws Diagrams Often
Pele.wiki is for developers and docs teams whose diagrams are drawn live or in bulk: editors with live previews, chat apps showing AI-written diagrams, docs sites, apps that follow the user's light or dark theme, and anywhere diagrams are read on phones or written by people you don't know.
If you need Mermaid's exact look, JavaScript click callbacks or plugins like ZenUML, the site says plainly that Mermaid.js is still the better fit.
Built to Make the Idea Click
Some libraries make sense from a README. This one makes sense the first time you type a diagram and it keeps up with you.
Pele.wiki exists so more people can see what Pele does, when it's the right choice, and how to move over from Mermaid.js.
Pele is © 2026 kepano, released under the MIT license and built for Obsidian. Its source is at github.com/obsidianmd/pele and its official docs are at pele.run. Pele.wiki is an independent learning site and is not affiliated with or endorsed by Obsidian or kepano. A community resource from En Dash, same shop as handwired.wiki, html-in-canvas.dev and learn-pretext.com.