Pele – Mermaid Diagrams As Themeable SVG

TL;DR

Before you orderOffer from Amazon

Get wellness gear 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 package that renders Mermaid diagram syntax into SVG and lets developers change colors and fonts through CSS variables without rendering again. Its website reports a 230 kB gzipped bundle and render times of 0.05–0.3 ms, compared with 1.6 MB and 6–82 ms for Mermaid.js; those are the project’s own comparison figures.

Pele is a JavaScript package that converts Mermaid diagram syntax into SVG, with colors and fonts adjustable through CSS variables after rendering. The project’s website says the renderer is designed for quick diagram display and theme matching in applications such as Obsidian, and publishes size and speed comparisons with Mermaid.js.

Developers can install Pele with npm install pele, pass Mermaid text to its render() API, and insert the returned SVG into a web page. The project site’s example renders a flowchart from Mermaid syntax and assigns the resulting SVG to an element in the document. Pele is presented as an alternative rendering path for applications that need diagrams from Mermaid-style text.

The site says Pele supports every diagram type built into Mermaid 12.1.0. It describes theming through CSS custom properties for background, foreground, muted text, lines, surfaces and borders. Because those properties can be changed with CSS, the site says color adjustments take effect without re-rendering the diagram.

Pele’s published comparison lists a 230 kB gzipped bundle and rendering times of 0.05–0.3 milliseconds. For Mermaid.js, it lists 1.6 MB gzipped and 6–82 milliseconds. The project also reports zero direct dependencies, compared with 23 for Mermaid.js. These figures come from Pele’s own website; the source material does not provide independent test results or the detailed conditions used for the comparison.

A Smaller Route to Themed Diagrams

If the reported figures hold in a given application, Pele could reduce the amount of JavaScript needed to render diagrams and shorten the time spent generating them. That may matter to web developers building documentation, editors or note-taking tools, particularly where page weight and responsive interactions are priorities.

The CSS-based approach also separates diagram appearance from the source syntax. An application can adjust colors and fonts to match a light or dark interface without asking the renderer to rebuild the SVG. That offers a practical option for theme changes, though developers still need to check how diagrams appear across their own layouts and supported browsers.

The comparison should not be treated as a universal performance result. Rendering speed and bundle impact can vary with diagram type, device, integration and measurement method. Pele’s numbers provide a project-published benchmark, not a third-party evaluation.

Built for Obsidian’s Diagram Needs

Pele’s website says the project is open source and was developed for Obsidian, where the goal was to render diagrams quickly and match the application’s theme. The project’s name, according to the site, refers to Pele, the goddess of volcanoes and fire.

Mermaid is a text-based format for describing diagrams, including flowcharts. Pele’s stated approach is to accept that syntax and produce SVG output, rather than requiring users to draw diagrams manually. The compatibility claim is specifically tied to diagram types built into Mermaid 12.1.0; the supplied project information does not say how compatibility changes across later Mermaid releases.

The project site also points users to examples, an API reference, theming guidance and a compatibility comparison covering syntax, layout and features. Those resources are relevant to developers deciding whether Pele fits an existing Mermaid-based workflow.

“Color changes apply without re-rendering.”

— Pele project website

Benchmark Methods Still Unspecified

The available source is Pele’s project website, which does not state when the figures were measured, which hardware and diagram samples were used, or how rendering time was calculated. Its size and speed comparisons should therefore be read as claims by the project, not independently confirmed results.

The source also does not provide details about release history, maintenance plans, licensing terms or compatibility with Mermaid versions after 12.1.0. Nor does it specify whether all diagram types perform similarly. Developers evaluating Pele will need to consult the package and project documentation for current technical and licensing details.

Review the Package and Compatibility

The project site directs developers to install Pele from npm, explore examples and consult its API, theming and compatibility pages. A practical next step for teams is to test representative diagrams in their own applications, including theme changes and the devices they expect users to rely on.

Any further release plans or independent performance testing are not stated in the supplied source. Developers considering adoption can check the package and project documentation for current version details, supported syntax and any updates to the published comparisons.

Key Questions

What does Pele do?

Pele renders Mermaid syntax as SVG. Developers can use its JavaScript API to generate a diagram and place the returned SVG in a web page.

How can developers change a diagram’s appearance?

The project describes CSS variables for colors and fonts, including background, foreground, line and surface settings. Its website says color changes can apply without rendering the diagram again.

How does Pele compare with Mermaid.js?

Pele’s website reports a 230 kB gzipped bundle and render times of 0.05–0.3 milliseconds, versus 1.6 MB and 6–82 milliseconds for Mermaid.js. These are project-published figures; the source does not provide independent testing details.

Which Mermaid diagram types does Pele support?

The project says Pele supports every diagram type built into Mermaid 12.1.0. The supplied information does not confirm compatibility with later Mermaid releases.

Where was Pele developed for use?

Pele’s website says it is an open-source project developed for Obsidian, with the aim of rendering diagrams quickly and matching the application’s theme.

Source: hn