Diagrams that explain themselves, one step at a time
pele-animate makes a Pele diagram appear in the order you choose. Readers step through it with buttons or the keyboard, and any node can carry an icon from a set of 4,000+. It is an unofficial add-on, not a theme package.
Click the diagram, or focus it and press Enter, to step through it.
You set the order
Pin steps with one comment line, %% pa: 1=C 2=L 3=S. Without it, the order follows the edges. Step order
Readers step through it
Previous, play and next buttons, plus Space and the arrow keys. The finished picture is the resting state. How it works
Icons from a big set
4,368 line icons in 36 categories, loaded only for the categories you import, with adjustable stroke width. Icons
Install
npm i pele-animate pele
pnpm add pele-animate pele
yarn add pele-animate pele
bun add pele-animate peleThen render your first diagram. It runs in the browser, so it works in Vite, Astro, SvelteKit, Nuxt and plain HTML: see recipes.
Where it fits
| Renders Mermaid | Adds step order and playback | Icons | |
|---|---|---|---|
| Mermaid.js | Yes, all diagram types | No | See Mermaid's docs |
| Pele | Yes, small and synchronous | No | You supply them |
| pele-animate | Uses Pele | Yes | 4,368 bundled, or your own |
pele-animate supports flowcharts and sequence diagrams. Layout, sizing and syntax stay Pele's.
For coding agents
The package ships a skill that wires pele-animate into a project and checks the result in a browser, and every docs page is available as Markdown (llms.txt, llms-full.txt). See For coding agents.