Pele: Mermaid Diagrams as Themeable SVG

Mermaid has long been a go-to for describing diagrams straight from text: write a few lines of markup and get a flowchart. The catch is weight — the official Mermaid.js library pulls in a hefty amount of code and dependencies. Pele offers an alternative built around compactness and control.

What it is

Pele is a lightweight open-source library that takes Mermaid syntax and returns SVG. Styling is driven by CSS variables: background, text, line and surface colors all live in a single block of rules. A notable touch — color changes apply without re-rendering the diagram.

The numbers

The authors line Pele up against Mermaid.js. Gzipped bundle size is 230 kB versus 1.6 MB. Render time runs 0.05–0.3 ms against 6–82 ms. Pele has zero direct dependencies, while Mermaid.js carries 23.

Behavior on small screens differs too: Pele adapts the layout, whereas Mermaid.js scales the whole diagram. Theming in the former is based on CSS variables; in the latter, on a separate theme configuration.

Getting started

The library installs through the usual package managers — npm, pnpm, yarn or bun. Usage comes down to calling render() with a string of Mermaid markup; it returns ready SVG that you drop into the target element on the page.

Next to the heavyweight original, Pele reads like an attempt to keep only the essential part of Mermaid — its syntax — and skip the bulky runtime. For sites where bundle size and render speed matter, the approach makes sense; how fully Pele covers the original Mermaid's feature set is something practice will show.

Source: Hacker News