Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables.
Write Mermaid syntax, Pele renders it to SVG. Try editing the example below.
Mermaid
1flowchart TD2 A[Mermaid text] --> B{Flowchart?}3 B -- Yes --> C[Pele]4 B -- No --> D[Mermaid]5 C --> E([SVG])6 D --> EUse CSS variables to set colors and fonts. Color changes apply without re-rendering.
CSS
1.pele {2 --pele-bg: #fffcf0;3 --pele-fg: #100f0f;4 --pele-muted: #6f6e69;5 --pele-line: #100f0f;6 --pele-surface: #f2f0e5;7 --pele-surface-alt: #e6e4d9;8 --pele-border: #cecdc3;9}Pele
| Pele | Mermaid.js | |
|---|---|---|
| Bundle size gzip | 230 kB | 1.6 MB |
| Render time | 0.05–0.3 ms | 6–82 ms |
| Direct dependencies | 0 | 23 |
| Small screens | Adapts the layout | Scales the diagram |
| Theming | CSS variables | Theme configuration |
Add Pele to your app using the API.
1npm install pele1pnpm add pele1yarn add pele1bun add pelePass Mermaid syntax to render() and insert the returned SVG into your page.
1import { render } from 'pele';23const { svg } = render(`flowchart LR4 A[Mermaid text] --> B[SVG]`);56document.querySelector('#diagram').innerHTML = svg;