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.

Mermaid
flowchart TD  A[Mermaid text] --> B{Flowchart?}  B -- Yes --> C[Pele]  B -- No --> D[Mermaid]  C --> E([SVG])  D --> E
PeleOpen in Playground
YesNoMermaid textFlowchart?PeleMermaidSVG

Use CSS variables to set colors and fonts. Color changes apply without re-rendering.

CSS
.pele {  --pele-bg: #fffcf0;  --pele-fg: #100f0f;  --pele-muted: #6f6e69;  --pele-line: #100f0f;  --pele-surface: #f2f0e5;  --pele-surface-alt: #e6e4d9;  --pele-border: #cecdc3;}
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.

PeleMermaid.js
Bundle size gzip230 kB1.6 MB
Render time0.05–0.3 ms6–82 ms
Direct dependencies023
Small screensAdapts the layoutScales the diagram
ThemingCSS variablesTheme configuration

Pele in your app

Add Pele to your app using the API.

npm install pele

Pass Mermaid syntax to render() and insert the returned SVG into your page.

import { render } from 'pele';const { svg } = render(`flowchart LR  A[Mermaid text] --> B[SVG]`);document.querySelector('#diagram').innerHTML = svg;

Explore

Pele in use

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.