A Mermaid flowchart rendered by Pele, showing how CSS variables alter colors without re‑rendering.
PELE LIBRARY ENABLES THEMEABLE MERMAID DIAGRAMS AS SVG
*Pele delivers instant Mermaid‑to‑SVG conversion with CSS‑variable theming. Its tiny bundle and zero direct dependencies make it a plug‑and‑play solution for responsive diagramming.*
Pele, the new open‑source library, converts Mermaid diagram definitions into pure SVG instantly. By exposing a simple render() API, developers can drop Mermaid syntax into their code and receive an SVG string ready for insertion. The library’s standout claim is full theming via CSS variables, allowing color and font changes without re‑rendering. With a gzipped bundle of just 230 kB and zero direct dependencies, Pele promises lightweight integration for any web stack. Its performance numbers—render times as low as 0.05 ms and up to 0.3 ms on typical inputs, scaling to 6–82 ms for larger diagrams—position it as a fast alternative to existing Mermaid renderers. The tool also adapts layouts for small screens and scales diagrams automatically, addressing responsiveness out of the box.
How does Pele render Mermaid diagrams to SVG?
Pele exposes a single render() function. Developers pass a string of Mermaid syntax; the function returns an object containing an SVG string. The SVG can be injected directly into the DOM, as shown in the example where flowchart LR A[Mermaid text] --> B[SVG] is rendered and assigned to document.querySelector('#diagram').innerHTML. No additional processing steps are required. The library handles parsing, layout, and SVG generation internally, delivering a ready‑to‑display graphic without external services.
What are Pele’s performance metrics?
Pele’s gzipped bundle measures 230 kB, while the full package is 1.6 MB. Render times range from 0.05 ms to 0.3 ms on small inputs and 6 ms to 82 ms on larger diagrams. Direct dependencies are listed as zero, with 23 transitive dependencies reported. The library also adapts layouts for small screens and scales diagrams automatically, ensuring performance does not degrade on mobile devices.
How can developers theme diagrams with CSS variables?
The library defines a .pele CSS class populated with variables such as --pele-bg, --pele-fg, --pele-muted, and others for colors and borders. Changing these variables in a stylesheet instantly updates the diagram’s appearance without re‑rendering. Example values include #fffcf0 for background and #100f0f for foreground. This approach lets teams switch between light and dark themes or apply brand palettes with a single CSS change.
How to integrate Pele into a web project?
Pele can be added via any JavaScript package manager: npm install pele, pnpm add pele, yarn add pele, or bun add pele. After installation, import { render } from 'pele' and call render() with Mermaid code. The returned SVG string is then inserted into the page. The library works in standard web environments and requires no build‑time configuration beyond the package manager command.
Frequently asked questions
What file size does Pele add to a project?
Pele’s gzipped bundle is 230 kB, while the full package size is 1.6 MB.
Does Pele require any direct dependencies?
Pele lists zero direct dependencies.
Can diagram colors be changed without re‑rendering?
Yes, colors are controlled by CSS variables, allowing changes without re‑rendering.
By stripping away heavyweight dependencies and delivering instant, themeable SVG output, Pele reshapes how developers embed diagrams in web applications. Its lean footprint and responsive design make it a practical choice for teams seeking speed and visual consistency. As open‑source adoption grows, Pele could become the default bridge between Mermaid text and production‑ready graphics, tightening the feedback loop between design and deployment.
Sources: Hacker News (https://pele.run/)