Pele · Mermaid diagrams as themeable SVG
How it really works
Write Mermaid syntax, Pele renders it to SVG. Try enhancing the instance beneath.
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 colours and fonts. Color adjustments apply with out re-rendering.
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
Why Pele?
Zero dependencies, 6× smaller, and as much as 500× quicker than Mermaid.js. Pele helps each diagram sort constructed into Mermaid 12.1.0.
| Pele | Mermaid.js | |
|---|---|---|
| Bundle measurement gzip | 230 kB | 1.6 MB |
| Render time | 0.05–0.3 ms | 6–82 ms |
| Direct dependencies | 0 | 23 |
| Small screens | Adapts the structure | Scales the diagram |
| Theming | CSS variables | Theme configuration |
Pele in your app
Add Pele to your app utilizing the API.
Pass Mermaid syntax to render() and insert the returned SVG into your web page.
1import { render } from 'pele';23const { svg } = render(`flowchart LR4 A[Mermaid text] --> B[SVG]`);56doc.querySelector('#diagram').innerHTML = svg;Explore
Pele in use
Pele is open source, developed for Obsidian to render diagrams shortly and match your theme. It is called after Pele, the goddess of volcanoes and fireplace.
