Pele – Mermaid Diagrams As Themeable SVG

TL;DR

Buying for a business?Offer from Amazon

Get business pricing on monitors, keyboards and dev gear

• Business-only prices and quantity discounts
• Tax-exempt purchasing
• Multiple users, one account, clear invoices

Create a free Business account →Free to register

As an affiliate, we earn on qualifying purchases.Hide

Pele is an open-source tool that turns Mermaid diagram syntax into SVG and lets developers change colors and fonts through CSS variables without rerendering. Its website reports smaller bundles and faster rendering than Mermaid.js, but the supplied material does not include independent benchmark methods or results.

Pele, an open-source tool for rendering Mermaid diagrams as SVG, is available for developers who want to place diagrams in web pages and adjust their appearance with CSS variables. Its website says the renderer was developed for Obsidian and reports smaller bundles and faster render times than Mermaid.js, though the supplied information does not document independent testing of those comparisons.

Pele accepts Mermaid syntax and returns an SVG string through a JavaScript API. The site shows an example in which an application imports the render function, passes it a flowchart definition, and inserts the returned SVG into a page. The package can be added with npm install pele, according to the project’s instructions.

The renderer exposes CSS variables for colors and fonts, including background, foreground, muted text, lines, surfaces and borders. Pele says those color changes take effect without rerendering. Its site also presents light and dark themes, small-screen behavior, examples, API documentation and a compatibility section for comparing syntax, layout and features.

The project says Pele supports every diagram type built into Mermaid 12.1.0. It lists a gzipped bundle size of 230 kB for Pele and 1.6 MB for Mermaid.js, render times of 0.05–0.3 milliseconds and 6–82 milliseconds respectively, and zero direct dependencies for Pele compared with three for Mermaid.js. These are figures reported by the project; the supplied page does not describe the hardware, test cases or measurement method behind them.

Why SVG Theming Matters

For teams embedding diagrams in applications or documentation, theme control can help diagrams match a product’s existing visual style, including light and dark interfaces. Pele’s approach puts colors and fonts in CSS variables, which may make visual adjustments easier to manage than configuring a separate theme for each diagram. The project says these changes do not require rendering the diagram again.

The reported size and speed figures also speak to practical concerns for applications that render diagrams in a browser, particularly where download size or responsiveness matters. However, the numbers should be treated as project-reported comparisons, not a guarantee that every diagram or device will show the same difference. Developers evaluating Pele will need to test it against their own Mermaid documents and browser environments.

Compatibility may matter as much as performance. A renderer used in an established project must interpret the syntax and layouts its users already rely on. Pele’s claim of support for diagram types built into Mermaid 12.1.0 gives developers a reference point, while its compatibility page indicates that syntax, layout and features are areas to compare before adoption.

Pele’s Mermaid Compatibility

Mermaid is a text-based format for describing diagrams, including flowcharts. Pele’s stated workflow keeps that text as the input but produces SVG output for insertion into a web page. SVG is a vector image format commonly used for graphics that need to scale across display sizes; the project describes Pele as adapting layouts for small screens and scaling diagrams.

The project says it was developed for Obsidian, an application for notes and knowledge management, to render diagrams quickly and match the application’s theme. Pele is open source, according to its website, and the name refers to Pele, the goddess of volcanoes and fire. The source material does not provide a release date, license details or a development roadmap.

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

— Pele project website

Benchmark and Compatibility Questions

The available source is the Pele project website. It does not specify how the render-time or bundle-size comparisons were measured, which diagrams were tested, or what browser and hardware were used. The reported maximum of 500× faster is not accompanied in the supplied material by a test breakdown, so readers cannot assess from these figures alone how representative that result is.

The site claims support for diagram types built into Mermaid 12.1.0, but the supplied information does not enumerate supported syntax, known differences or exclusions. It also does not state the project’s current version, release date, maintenance schedule or license terms. Developers should check the project’s documentation and test their own diagrams before relying on full compatibility.

What Developers Can Test

The next practical step for prospective users is to review Pele’s examples, API and compatibility information, then compare its output with the Mermaid diagrams already used in their application. Testing should include the diagram types and screen sizes that matter to that project, as well as theme changes and any required accessibility or browser behavior.

The supplied announcement does not identify a future release or scheduled milestone. Further clarity on benchmark methods, versioning, licensing and compatibility details would help teams judge whether Pele fits their requirements. For now, the project presents the package as available to install and use through its JavaScript API.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG, which developers can insert into a web page through its JavaScript API.

How does Pele handle themes?

It provides CSS variables for colors and fonts. The project says changing colors through those variables does not require rerendering.

Is Pele faster than Mermaid.js?

Pele’s website reports render times of 0.05–0.3 milliseconds for Pele and 6–82 milliseconds for Mermaid.js. The supplied material does not explain the test setup, so those figures are project-reported comparisons rather than independently verified results.

Does Pele support Mermaid diagram types?

The project says it supports every diagram type built into Mermaid 12.1.0. The supplied material does not list individual diagram types or document any compatibility gaps.

How can developers try Pele?

The project’s instructions say to install the package with npm install pele, import its render function, pass Mermaid syntax to that function and use the returned SVG in a page.

Source: hn