Pele – Mermaid diagrams as themeable SVG

Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables. 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 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} Add Pele to your app using the API. 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;