Glonce

Pele renders Mermaid diagrams to themeable SVG, claims up to 500× speedup

toolsThe Glonce editorsHacker News🔥66Glonce rating66Impact40Novelty55Relevance80Surprise35Players10Credibility80

Pele is a lightweight open source library that renders Mermaid diagrams to SVG, with colors and fonts controlled by CSS variables. The project site, pele.run, describes the workflow in two steps: you write Mermaid syntax, and Pele renders it to SVG. In an app, you pass the Mermaid text to a render() function and insert the SVG it returns into your page.

Theming is the other main feature. Colors and fonts are set through CSS variables, and the site says color changes apply without re-rendering the diagram. The example on the page defines a .pele class with seven variables: --pele-bg, --pele-fg, --pele-muted, --pele-line, --pele-surface, --pele-surface-alt and --pele-border, each set to a hex color.

The headline pitch is performance and size. The site says Pele has zero dependencies, is 6× smaller and is up to 500× faster than Mermaid.js. It also says Pele supports every diagram type built into Mermaid 12.1.0. These figures are the project's own self-description; the page does not say what is measured for the size comparison or what is benchmarked for the speed comparison, and the speed claim is an upper bound ('up to'), not a typical result.

The site points to four further sections: Examples (supported diagram types), API (rendering diagrams in an app), Theming (colors and fonts with CSS variables) and Compatibility (a comparison of syntax, layout and features with Mermaid). Pele is described as developed for Obsidian, to render diagrams quickly and match the user's theme. The site adds that it is named after Pele, the goddess of volcanoes and fire.

Key facts

  • Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables.
  • The site claims zero dependencies, 6× smaller and up to 500× faster than Mermaid.js; these are the project's own figures.
  • It says it supports every diagram type built into Mermaid 12.1.0.
  • Colors and fonts are set with CSS variables (--pele-bg, --pele-fg and five others), and color changes apply without re-rendering.
  • Usage is one call: pass Mermaid syntax to render() and insert the returned SVG into the page. It was developed for Obsidian.

Why it matters

Mermaid diagrams are a common way to put flowcharts and similar diagrams into text-based documents, and Pele aims to make rendering them lighter and quicker. The site's pitch is zero dependencies, 6× smaller and up to 500× faster than Mermaid.js, while covering every diagram type built into Mermaid 12.1.0. Theming through CSS variables, with color changes applied without re-rendering, is the other selling point.

Who it affects

The site says Pele was developed for Obsidian, to render diagrams quickly and match the user's theme, so Obsidian users are the first audience. Developers who embed Mermaid diagrams in their own apps are the other: the API is a render() call that returns SVG to insert into a page.

How to use it

Write Mermaid syntax, pass it to render(), and insert the returned SVG into your page. To restyle, set CSS variables on the .pele class: --pele-bg, --pele-fg, --pele-muted, --pele-line, --pele-surface, --pele-surface-alt and --pele-border. The site has separate Examples, API, Theming and Compatibility pages for details.

How solid is it

The performance and size numbers come from the project's own website. The site does not say what the 6× refers to, or what was benchmarked for the 500× figure, and 500× is an 'up to' maximum rather than a typical speedup. No benchmark method, hardware or test diagrams are given, and there is no independent verification or third-party reaction in the source. The site does say Pele is open source.

Risks and caveats

Treat the headline numbers as vendor claims until tested on your own diagrams. The source does not say how Pele's output differs visually from Mermaid.js or which Mermaid features are unsupported; the Compatibility page is only linked. No author, maintainer or organization is named, and no license name, repository URL, Pele version number or release date is given on the page.

“Zero dependencies, 6× smaller, and up to 500× faster than Mermaid.js.”

— Pele project website, pele.run