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 an open-source JavaScript library that turns Mermaid diagram syntax into SVG and lets developers change colors and fonts with CSS variables. Its website reports smaller bundles and faster rendering than Mermaid.js, but the comparisons are vendor-provided and no testing methodology is given in the supplied material.

Pele, an open-source JavaScript library for rendering Mermaid diagrams as SVG, lets developers set diagram colors and fonts through CSS variables, according to the project website. The tool is positioned as a smaller, faster alternative to Mermaid.js, with a stated focus on displaying diagrams in Obsidian and adapting them to an app’s theme.

Developers write diagrams in Mermaid syntax and pass that text to Pele’s render() API. The website says the call returns an SVG that an application can insert into a page. It also documents an npm installation and provides examples, a list of supported diagram types, and a compatibility section.

Pele’s site says theme changes can be made using CSS variables, including variables for background, foreground, muted text, lines, surfaces and borders. It says color changes apply without re-rendering. The supplied example shows a flowchart; the site also claims support for every diagram type built into Mermaid 12.1.0.

The project compares Pele with Mermaid.js, reporting a 230 kB gzip bundle and render times of 0.05–0.3 milliseconds for Pele, against 1.6 MB and 6–82 milliseconds for Mermaid.js. It also reports zero direct dependencies for Pele versus 23 for Mermaid.js. These figures come from Pele’s own website; the supplied material does not describe how the measurements were made.

Smaller SVG Rendering in Apps

For developers who need diagrams inside documentation, notes or web applications, a renderer that produces SVG directly can provide a way to display Mermaid-authored content while styling it with the surrounding interface. Pele’s CSS-variable approach is designed to let diagram colors and fonts follow an application theme, rather than relying only on fixed diagram styling.

The project’s reported size and speed figures, if reproducible in a developer’s own environment, could matter for applications where download weight or rendering time is a constraint. But the figures should be read as project-reported comparisons, not independently verified benchmarks. Actual results may depend on diagram complexity, devices and implementation.

Pele’s stated origin in Obsidian also gives the project a specific use case: rendering diagrams quickly while matching the application’s appearance. Its broader relevance will depend on how well its syntax support and output fit other applications’ needs.

Built Around Mermaid Syntax

Mermaid is a text-based format for describing diagrams. Pele’s approach keeps that authoring format: users supply Mermaid text, while Pele handles rendering and returns SVG. That separates diagram content from the method used to display and style it.

The project describes itself as open source and says it was developed for Obsidian. Its website presents examples and API guidance alongside sections covering theming and compatibility. It names Mermaid 12.1.0 as the basis for its claim that it supports every built-in diagram type, but the supplied source does not include a detailed feature-by-feature comparison.

“Color changes apply without re-rendering.”

— Pele project website

Benchmark Methods and Compatibility

The supplied project material does not specify the hardware, test setup, diagram samples or measurement method behind its bundle-size and rendering comparisons. Readers cannot assess from those figures alone how Pele would perform in a particular application or against a different Mermaid.js version.

The website claims support for Mermaid 12.1.0’s built-in diagram types and includes a compatibility section, but the source material provided here does not list specific unsupported syntax, feature differences or limitations. It also does not state a release date, version number, licensing details, maintenance schedule or adoption figures. Those points should not be inferred from the project’s feature description.

Check the API and Feature Fit

Developers considering Pele can review the project’s API, examples and compatibility information, then test representative diagrams in their intended app. That would help establish whether the renderer handles the Mermaid syntax they use and whether its SVG output fits their styling and display requirements.

The project website presents npm installation and an integration example, but the supplied source does not announce a release timetable or a next milestone. Further information about benchmark methods, supported features and project maintenance would help readers judge the performance claims and the library’s suitability for production use.

Key Questions

What does Pele do?

Pele renders Mermaid text as SVG. Its website says developers can use the returned SVG in an application.

How does Pele handle themes?

The project documents CSS variables for colors and fonts, and says color changes apply without re-rendering the diagram.

How does Pele compare with Mermaid.js?

Pele’s website reports a 230 kB gzip bundle and 0.05–0.3 millisecond render times, compared with 1.6 MB and 6–82 milliseconds for Mermaid.js. These are project-reported figures; the supplied material does not explain the benchmark method.

Which Mermaid diagrams does Pele support?

The project says it supports every diagram type built into Mermaid 12.1.0. The provided information does not include a detailed list of compatibility gaps or limitations.

Is Pele intended only for Obsidian?

The project says it was developed for Obsidian, but its website also documents an API for adding it to an app. The source material does not establish how widely it is used outside Obsidian.

Source: hn