Pele: Mermaid diagrams as themeable SVG

What it does

Pele (obsidianmd/pele, MIT, by kepano / Obsidian) renders Mermaid source to SVG. render() returns SVG once; mount() watches the container and adapts layout. The main entry includes every diagram type; pele/core plus register() or pele/lazy loads types on demand. Colours and fonts come from CSS variables (--pele-bg, --pele-fg, series colours, and more), so light/dark themes update without re-rendering. Install with npm install pele, or load pele.global.js from a CDN. Docs and a playground live at pele.run.

How builders use it

• npm install pele, then import { render } from 'pele' and insert the returned svg into the page.
• For a responsive diagram, use mount(element, mermaidText) so layout follows the container.
• Cut the bundle: import from pele/core and register only the diagram types you need.
• Ask your coding agent to emit Mermaid, then render it with Pele instead of pasting screenshots.

What to expect

Architecture and flow diagrams that stay editable as Mermaid text and match your site's theme as SVG.

npm install pele

import { render } from 'pele';

const { svg } = render(`flowchart LR\n  Agent[Coding agent] --> Diff[Git diff]\n  Diff --> Review[Human review]\n  Review --> Ship[Ship]`);
document.querySelector('#diagram').innerHTML = svg;

# Theme via CSS variables on .pele or a parent (see pele.run/theming).
# Ask your agent:
Draw the auth flow for <service> as Mermaid flowchart LR. I will render it with Pele.