# pele-animate

> Step-by-step animated Mermaid diagrams with icons, as an unofficial add-on for the Pele renderer. You choose the order things appear in, readers step through it, nodes can carry icons. Flowcharts and sequence diagrams. Client-side only.

Every docs page is also served as Markdown at the URLs below. The whole documentation in one file: https://pele-animate.danielkimdev.com/llms-full.txt

## Docs

- [Getting started](https://pele-animate.danielkimdev.com/docs/getting-started.md): Install pele-animate and render your first step-by-step Mermaid diagram.
- [How it works](https://pele-animate.danielkimdev.com/docs/how-it-works.md): What Pele does, what pele-animate adds, and the three kinds of motion.
- [Diagram types](https://pele-animate.danielkimdev.com/docs/diagram-types.md): Which Mermaid diagrams pele-animate animates, and what each one does.
- [Icons](https://pele-animate.danielkimdev.com/docs/icons.md): Use icons on flowchart nodes, pick names from 4,000+ Tabler icons, and control stroke width.
- [Custom icons](https://pele-animate.danielkimdev.com/docs/custom-icons.md): Register your own glyphs with registerGlyphs.
- [Step order](https://pele-animate.danielkimdev.com/docs/step-order.md): Choose the order things appear in, and how step mode works.
- [Theming](https://pele-animate.danielkimdev.com/docs/theming.md): Colors, dark mode, stroke width and reduced motion.
- [Recipes](https://pele-animate.danielkimdev.com/docs/recipes.md): Using pele-animate in Vite, SvelteKit, Astro, Nuxt, React and plain HTML, with what has been tested.
- [API reference](https://pele-animate.danielkimdev.com/docs/api.md): Every export of pele-animate, with types.
- [Compatibility](https://pele-animate.danielkimdev.com/docs/compatibility.md): Versions of Pele, browsers, and the parts of Pele's markup pele-animate depends on.
- [Accessibility](https://pele-animate.danielkimdev.com/docs/accessibility.md): What pele-animate does for keyboard users and reduced motion, and what has not been audited.
- [Security](https://pele-animate.danielkimdev.com/docs/security.md): Untrusted diagram text, and what pele-animate adds.
- [Migrating](https://pele-animate.danielkimdev.com/docs/migrating.md): Breaking changes between releases, with the renames to apply.
- [For coding agents](https://pele-animate.danielkimdev.com/docs/agents.md): How a coding agent should use pele-animate in a project, and how to verify the result.
- [Contributing](https://pele-animate.danielkimdev.com/docs/contributing.md): Set up the repository, run the checks, and regenerate the Tabler packs.
- [FAQ](https://pele-animate.danielkimdev.com/docs/faq.md): Common questions about pele-animate, Pele, and licenses.

## Optional

- [Icon browser](https://pele-animate.danielkimdev.com/icons/): search all bundled icons. The machine-readable list is https://pele-animate.danielkimdev.com/icons.json ({ version, icons: [{ name, category, tags }] }); take icon names from it, never from memory.
- [Changelog](https://pele-animate.danielkimdev.com/changelog/)
- [Source](https://github.com/dkdev24/pele-animate)
- [npm](https://www.npmjs.com/package/pele-animate)