Pele – Mermaid Diagrams As Themeable SVG

TL;DR

Before you orderOffer from Amazon

Get the latest gadgets delivered free with Prime

• Fast, free delivery on millions of items
• Prime Video, Amazon Music and more included
• Member-only deals all year

Start your free Prime trial →Free trial for eligible customers · Cancel anytime

As an affiliate, we earn on qualifying purchases.Hide

Pele is a JavaScript library that converts Mermaid diagram syntax into SVG and lets sites change diagram colors and fonts through CSS variables without rendering again. Its website reports smaller bundles and faster rendering than Mermaid.js, but the figures are project-published comparisons and the benchmark methods are not provided in the supplied material.

Pele, an open-source JavaScript library, renders Mermaid diagram syntax as SVG and lets developers change colors and fonts with CSS variables, according to the project website. The tool is presented as a lightweight alternative for applications including Obsidian, where diagrams can follow an app’s visual theme without being rendered again for each color change.

Developers can install the package with npm install pele, pass Mermaid text to its render() API and add the returned SVG to a page. The website’s example uses a flowchart, while its compatibility page points users to lists of supported diagram types and comparisons covering syntax, layout and features. The supplied material does not include those detailed compatibility results.

Pele says it supports every diagram type built into Mermaid 12.1.0. It also describes the library as having zero direct dependencies. Its site compares a 230 kB gzip bundle and render times of 0.05–0.3 milliseconds with Mermaid.js figures of 1.6 MB and 6–82 milliseconds. Those are project-reported measurements; the material supplied does not specify the hardware, test diagrams, or measurement procedure.

The theming approach uses CSS custom properties for background, foreground, muted text, lines, surfaces and borders. The project says those color changes apply without re-rendering. Its website also contrasts Pele’s layout adapting on small screens with Mermaid’s diagram scaling, though it does not provide a detailed description of how that behavior works across diagram types.

Theme Changes Without Re-rendering

For teams that display generated diagrams inside applications, keeping diagram colors aligned with a surrounding interface can improve consistency across light, dark and custom themes. Pele’s approach makes those visual settings available through CSS variables, which can be adjusted by a host page rather than requiring developers to replace a diagram’s source text. The stated ability to change colors without rendering again may also suit applications where themes switch during use.

The performance and package-size figures could matter to developers choosing a renderer for a browser-based product, particularly where bundle size and render latency are constraints. However, the published comparison is not enough on its own to establish how Pele performs for every diagram or application. Compatibility, layout behavior and the maintenance needs of a project remain practical factors to check before switching.

Built Around Mermaid Syntax

Mermaid is a text-based format for describing diagrams, including flowcharts. Pele’s site positions the library as a renderer for that syntax: a developer supplies Mermaid text, and Pele returns SVG markup for use in a web page. The distinction matters because the project is offering a way to display diagrams, not a new diagram-description language.

The project says Pele was developed for Obsidian to render diagrams quickly and match the application’s theme. Its website names the library after Pele, the goddess of volcanoes and fire. It also provides examples, an API guide, theming information and compatibility material. The supplied source does not give a release date, version number for Pele, or a development history.

““Color changes apply without re-rendering.””

— Pele project website

Benchmark and Compatibility Details

The website’s figures do not include test conditions, benchmark code, device specifications or a description of the diagrams used. The reported speed and bundle-size differences should therefore be treated as project claims, not independent test results. The supplied material also does not establish how Pele handles every Mermaid feature, syntax variation or diagram layout in practice.

No specific release date, current package version, licensing details or roadmap are included in the source material. It is also unclear whether the cited Mermaid 12.1.0 coverage has been independently tested or whether later Mermaid changes are supported. Developers considering adoption would need to consult the project’s current package and compatibility documentation for those details.

Check the Package and Examples

The project directs developers to its API, examples, theming guide and compatibility page to evaluate the renderer. Those resources are the next place to check supported diagram types and how the output behaves in a target application. The source material does not announce a forthcoming release, scheduled benchmark or other milestone, so no further development date can be reported.

For teams assessing Pele, the practical next step is to test their own Mermaid diagrams and theme requirements against the current package, then compare the result with their existing renderer. The website’s published numbers offer an initial point of comparison, but the supplied information does not say whether an independent evaluation is planned.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG that developers can insert into a web page or application, according to its website.

How does Pele support theming?

It uses CSS variables to set diagram colors and fonts. The project says color changes can apply without rendering the diagram again.

What performance figures does Pele publish?

The website lists a 230 kB gzip bundle and render times of 0.05–0.3 milliseconds for Pele, compared with 1.6 MB and 6–82 milliseconds for Mermaid.js. These are project-reported figures; test methods are not provided in the supplied material.

Which Mermaid version does Pele say it supports?

The project says Pele supports every diagram type built into Mermaid 12.1.0. The supplied material does not independently verify that claim or state support for later versions.

How can developers try Pele?

The website gives the installation command npm install pele and an API example using the package’s render() function. It also links to examples and compatibility information.

Source: hn