saved
Pele: Mermaid diagrams as themeable SVG
Hraness wrote this summary from a saved copy of the source. Quotations are taken word for word from the source.
gist
Pele is an open-source library from Obsidian that renders Mermaid diagram syntax to SVG, styled with CSS variables instead of Mermaid's theme configuration. Its homepage offers live editors for diagram source and CSS, and claims zero dependencies, a 230 kB gzip bundle and sub-millisecond renders against Mermaid.js.
ideas
- Drop-in renderer. Pass Mermaid text to render() and insert the returned SVG; Pele claims support for every diagram type built into Mermaid 12.1.0.
- Theme with CSS. Seven --pele- variables set background, foreground, lines and surfaces, and colour changes apply without re-rendering.
- Speed and size. The comparison table lists 230 kB versus 1.6 MB gzip, 0.05 to 0.3 ms versus 6 to 82 ms per render, and 0 versus 23 direct dependencies.
- Responsive layout. On small screens Pele adapts the layout rather than scaling the whole diagram down.
- Built for Obsidian. Developed to render diagrams quickly and match the user's theme, it is MIT licensed and named after the goddess of volcanoes and fire.
quotes
“Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables.”
“Zero dependencies, 6× smaller, and up to 500× faster than Mermaid.js.”
“Color changes apply without re-rendering.”