Diagrams that explain themselves
Readers step through a Pele diagram in the order you choose, with icons from a set of 4,000+.
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. It is an unofficial add-on, not a theme package.
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.