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

How it works

Open in Playground

Pass Mermaid text to Pele. It returns an SVG.

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

The SVG has no colors of its own. Set a few CSS variables and every diagram follows your theme, without being rendered again.

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
ThemesTokensLightDark

Pele in your app

Add Pele to your app using the API.

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

Explore

Pele in use

Pele is open source. It is being built for Obsidian, to draw the Mermaid diagrams in your notes quickly and in the colors of your theme. Any app can use it. Pele is named after Pele, the Polynesian goddess of volcanoes and fire.

Obsidian

Pele is in development as the renderer for Mermaid diagrams in notes.

Playground

Every diagram on this site is drawn by Pele. Edit one and compare it with Mermaid.