Pele · Mermaid diagrams as themeable SVG

How it worksWrite Mermaid syntax, Pele renders it to SVG. Try editing the example below.Mermaidflowchart TD A[Mermaid text] --> B{Flowchart?} B -- Yes --> C[Pele] B -- No --> D[Mermaid] C --> E([SVG]) D --> EUse 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;}PeleThemesVariablesLightDarkWhy 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.jsBundle size gzip230 kB1.6 MBRender time0.05–0.3 ms6–82 msDirect dependencies023Small screensAdapts the layoutScales the diagramThemingCSS variablesTheme configurationPele in your appAdd Pele to your app using the API.npm install pelePass 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;ExploreExamplesBrowse supported diagram types.APIRender diagrams in your app.ThemingSet colors and fonts with CSS variables.CompatibilityCompare syntax, layout, and features with Mermaid.Pele in usePele 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.