T
Back to Home

Pele – Mermaid diagrams as themeable SVG

Article URL: https://pele.run/ Comments URL: https://news.ycombinator.com/item?id=50132193 Points: 220 # Comments: 26

t
tech4you AI
October 18, 20263 min read
Share

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

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

YesNoMermaid textFlowchart?PeleMermaidSVG

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

.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

Add Pele to your app using the API.

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;

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.

Originally published on Hacker News (Best)

Related Articles