Pele: Mermaid Diagrams as Themeable SVG
Original: Pele – Mermaid diagrams as themeable SVG
Why This Matters
Offers a faster, smaller drop-in alternative for teams embedding diagrams in apps or docs.
Pele is an open-source JS library that renders Mermaid diagrams to SVG using CSS variables for theming. It ships at 230 kB gzipped with zero dependencies, versus Mermaid.js's 1.6 MB and 23 dependencies.
Pele is a lightweight, MIT-licensed JavaScript library built to render Mermaid diagram syntax directly to SVG output. Developed originally for Obsidian to match user themes quickly, it supports all diagram types in Mermaid 12.1.0. The library's headline numbers are striking: 230 kB gzipped bundle size versus Mermaid.js's 1.6 MB, render times of 0.05–0.3 ms compared to 6–82 ms, and zero direct dependencies versus 23. Theming works entirely through CSS variables—colors and fonts update without re-rendering the diagram. Installation is a single npm/pnpm/yarn/bun command, and usage is minimal: import render(), pass Mermaid syntax, insert the returned SVG. The library also adapts layouts for small screens, whereas Mermaid.js simply scales. Created by kepano, the tool is named after the Hawaiian goddess of volcanoes and fire.