Pele – Mermaid Diagrams As Themeable SVG

TL;DR

For listenersOffer from Amazon

Turn the school run and nap time into listening time

• Thousands of audiobooks, podcasts and originals
• Listen on your phone, tablet or Echo — also offline
• Cancel anytime

Try Audible free →Free trial for new members

As an affiliate, we earn on qualifying purchases.Hide

Pele is an open-source tool that converts Mermaid diagram syntax into SVG graphics and lets developers change colors and fonts with CSS variables. Its website reports smaller bundles and faster rendering than Mermaid.js, but the figures are developer-provided comparisons and their testing method is not described in the supplied material.

Pele, an open-source renderer for Mermaid diagrams, converts Mermaid text into SVG and lets developers restyle the output using CSS variables. The project says it was developed for Obsidian, where diagrams need to render quickly and fit the application’s visual theme.

The project’s website describes a workflow in which users write Mermaid syntax and Pele returns an SVG. Developers can call the JavaScript render() API, then insert the returned graphic into a page. Pele’s site also provides an interactive example, documentation on supported diagram types, and a compatibility section covering syntax, layout and features.

For styling, Pele exposes CSS variables for colors and fonts, including values for the background, foreground, muted text, lines, surfaces and borders. The site says those color changes apply without re-rendering, allowing a diagram’s appearance to respond to CSS styling rather than requiring the Mermaid source to be processed again.

Pele’s published comparison lists a 230 kB gzip bundle and rendering times of 0.05–0.3 milliseconds. For Mermaid.js, it lists 1.6 MB and 6–82 milliseconds. The project also describes Pele as having zero direct dependencies and says it supports every diagram type built into Mermaid 12.1.0. These are claims and measurements presented on Pele’s website; the supplied material does not include an independent test or methodology.

Faster, Themeable Diagrams in Apps

If the project’s stated performance holds in users’ environments, Pele could give web developers and Obsidian plugin makers a smaller option for rendering Mermaid diagrams. A lighter dependency can reduce the amount of code an application must ship, while shorter render times may help when diagrams are displayed repeatedly or updated in response to user input.

The CSS-variable approach also addresses a practical design issue: diagrams often look out of place when their colors do not match the surrounding application, especially when users switch between light and dark themes. Pele’s site says colors can change without another rendering pass, potentially making theme matching simpler. The actual benefit will depend on how the renderer performs with specific diagram types, devices and application setups.

Built Around Mermaid and Obsidian

Mermaid is a text-based format for describing diagrams, including flowcharts. Pele’s site positions its renderer as an alternative for applications that want to turn that syntax into visuals. Its example shows Mermaid text being passed to Pele and an SVG returned for display.

The project says it was developed for Obsidian to render diagrams quickly and match the user’s theme. The name, according to the site, refers to Pele, the goddess of volcanoes and fire. The supplied information does not give a release date, identify the project’s maintainers, or provide adoption figures.

For teams evaluating compatibility, the version reference matters: Pele’s statement covers diagram types built into Mermaid 12.1.0. The project directs users to its compatibility material for comparisons of syntax, layout and features, indicating that compatibility should be checked against the specific diagrams and Mermaid version an app uses.

“Color changes apply without re-rendering.”

— Pele project website

Performance and Compatibility Details

The available project material does not specify how the render-time and bundle-size comparisons were measured, which devices or configurations were used, or whether the figures cover all diagram types. The stated performance advantage should be read as a project-reported comparison, not an independently verified result.

It is also unclear from the supplied information which Mermaid syntax features may differ in practice, how the project handles diagrams outside the stated Mermaid 12.1.0 coverage, or what maintenance and release schedule it follows. The website points readers to compatibility documentation, but no detailed test results or adoption data are included here.

Testing Pele in Real Projects

Developers interested in using Pele can install it from npm, pass Mermaid syntax to the render() API, and add the returned SVG to a page. Before replacing an existing renderer, teams will need to compare their own diagrams against Pele’s compatibility guidance and test output in the environments where it will run.

The next useful evidence would include repeatable benchmarks, compatibility results across diagram types and Mermaid versions, and details about ongoing project maintenance. The supplied source does not announce a launch date, planned release or upcoming milestone.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG graphics that can be placed in a web page or application.

How can developers change a diagram’s appearance?

The project provides CSS variables for colors and fonts. Pele says color changes can apply without re-rendering the diagram.

How does Pele compare with Mermaid.js?

Pele’s website reports a 230 kB gzip bundle and render times of 0.05–0.3 milliseconds, compared with 1.6 MB and 6–82 milliseconds for Mermaid.js. The supplied material does not describe the benchmark method, so the figures are project-reported rather than independently verified.

Which Mermaid diagrams does Pele support?

The project says it supports every diagram type built into Mermaid 12.1.0. Developers should check the project’s compatibility information against their syntax and application requirements.

Is Pele made for Obsidian?

The project says it was developed for Obsidian to render diagrams quickly and match the user’s theme. Its website also describes an API for adding Pele to applications.

Source: hn