Pele is a lightweight open‑source library that renders Mermaid diagram syntax to scalable vector graphics (SVG) while allowing the appearance of the output to be controlled through CSS variables, according to the source at pele.run. The project positions itself as a drop‑in replacement for Mermaid.js, emphasizing that it has zero external dependencies, a gzipped bundle size of approximately 230 kB compared with Mermaid.js’s 1.6 MB, and render times ranging from 0.05 to 0.3 milliseconds versus Mermaid.js’s 6 to 82 milliseconds. These figures translate to a size reduction of about six times and a speed improvement of up to 500 times, the source notes.
The library supports every diagram type that is built into Mermaid version 12.1.0, meaning flowcharts, sequence diagrams, class diagrams, state diagrams, entity‑relationship diagrams, and others can be authored with the familiar Mermaid syntax and then handed to Pele’s render() function. The returned SVG can be inserted directly into a web page, and because styling is exposed via CSS variables such as –pele-bg, –pele-fg, –pele-muted, –pele-line, –pele-surface, –pele-surface-alt and –pele-border, users can change colors, fonts and other visual attributes without triggering a re‑render of the diagram.
An example included in the source shows a simple flowchart written in Mermaid:
flowchart TD
A[Mermaid text] --> B{Flowchart?}
B -- Yes --> C[Pele]
B -- No --> D[Mermaid]
C --> E([SVG])
D --> EWhen the CSS block
.pele {
--pele-bg: #fffcf0;
--pele-fg: #100f0f;
--pele-muted: #6f6e69;
--pele-line: #100f0f;
--pele-surface: #f2f0e5;
--pele-surface-alt: #e6e4d9;
--pele-border: #cecdc3;
}is applied, the diagram adopts the specified colours instantly. The source explains that this approach lets developers match the diagram’s look to a site’s theme or to a dark‑mode setting without re‑processing the Mermaid source.
Pele originated as a tool for the Obsidian note‑taking application, where fast diagram rendering and visual consistency with the user’s chosen theme are important. The name references Pele, the Hawaiian goddess of volcanoes and fire, reflecting the project’s goal of delivering quick, “hot” performance. The library is released under an open‑source license and invites users to explore its API, theming guide, and compatibility notes on its website.
The source also provides a compatibility section that compares syntax, layout and features with Mermaid.js, allowing developers to verify that their existing diagrams will behave the same way when rendered with Pele. Users can browse supported diagram types, try the render() API, and learn how to apply CSS‑variable theming directly from the Pele website.