Pele – Mermaid diagrams as themeable SVG

Search⌘K

PlaygroundPlaygroundIntroductionHow it worksWhy Pele?Pele in your appExplorePele in use

Examples

API

Theming

Compatibility

Security

IntroductionHow it worksWhy Pele?Pele in your appExplorePele in use

Examples

API

Theming

Compatibility

Security

Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables.

How it works

Write Mermaid syntax, Pele renders it to SVG. Try editing the example below.

1flowchart TD2 A[Mermaid text] --> B{Flowchart?}3 B -- Yes --> C[Pele]4 B -- No --> D[Mermaid]5 C --> E([SVG])6 D --> E

PeleOpen in Playground

YesNoMermaid textFlowchart?PeleMermaidSVG

Use CSS variables to set colors and fonts. Color changes apply without 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

ThemesVariablesLightDark

Why Pele?

Zero dependencies, 6× smaller, and up to 500× faster than Mermaid.js. Pele supports every diagram type built into Mermaid 12.1.0.

1npm install pele

1pnpm add pele

1yarn add pele

1bun add pele

Pass 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;

Explore

Examples

Browse supported diagram types.

Compare syntax, layout, and features with Mermaid.

Pele is open source, developed for Obsidian to render diagrams quickly and match your theme. It is named after Pele, the goddess of volcanoes and fire.