Stop 5 on the Pele line
A page with 200 diagrams
Pele draws a page full of diagrams almost at once. Press the button and both libraries draw the same 200, like a long docs page or a big Obsidian note.
Live demo: a page with 200 diagrams
Pele
Mermaid.js
What you just saw
The 200 diagrams are a realistic mix: flowcharts, sequence, class, state and ER diagrams, pies, Gantt charts, git graphs, mindmaps and user journeys. Pele draws them one after another, synchronously, and is done in a fraction of a second. Mermaid.js draws them one at a time too, each taking tens of milliseconds, so the page fills in over many seconds.
With Pele, a page full of diagrams is ready about as soon as its text is.
Even smaller pages
A docs site that only uses a few diagram types can register just those and leave the rest out of its bundle:
import { register, render } from 'pele/core'
import flowchart from 'pele/diagrams/flowchart'
import sequence from 'pele/diagrams/sequence'
register(flowchart, sequence)
Or load each type the first time a page needs it with renderAsync from pele/lazy. See the API cheatsheet.