Pele – Mermaid Diagrams As Themeable SVG

TL;DR

Buying for a business?Offer from Amazon

Get business pricing on networking and server 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 converts 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 figures are project-provided comparisons rather than independently verified benchmarks.

Pele is an open-source renderer that turns Mermaid diagram syntax into SVG, while allowing colors and fonts to be changed through CSS variables. The project says the styling can update without re-rendering the diagram, a feature aimed at developers and applications that need diagrams to follow a page or app theme.

On its website, Pele describes a workflow in which users write Mermaid syntax and call its render() API to receive SVG markup. The example shown imports the function from the pele package, renders a simple flowchart, and inserts the returned SVG into a page. The site also provides an interactive example, documentation links and a list of supported diagram types.

The project says its renderer supports diagram types built into Mermaid 12.1.0. It advertises a gzipped bundle size of 230 kB, compared with 1.6 MB for Mermaid.js, and rendering times of 0.05–0.3 milliseconds compared with 6–82 milliseconds. Pele’s site also lists zero direct dependencies, compared with three for Mermaid.js. These are figures published by the project; the supplied material does not include benchmark methods or independent testing.

For theming, Pele exposes CSS properties for background, foreground, muted text, lines, surfaces and borders. Its website says these values can be altered through CSS without rerunning the renderer. The page also describes responsive behavior, saying small screens can adapt the diagram layout or scale the diagram.

Theme Changes Without Re-rendering

The separation of diagram generation and visual styling could help teams keep diagrams aligned with an application’s light and dark themes without regenerating SVG whenever a color changes. That may be useful in documentation, dashboards and note-taking tools where diagrams sit alongside interface content and need to remain legible across display sizes.

The advertised bundle and speed differences may also matter in projects where package size or rendering delay is a concern, particularly when diagrams are created in the browser. However, those comparisons should be read as Pele’s own product claims: no test setup, hardware, diagram sample or independent result is included in the source material. The practical advantage will depend on the diagrams and environment being used.

Built for Obsidian Diagrams

Pele’s website says it is open source and was developed for Obsidian, a note-taking application, to render diagrams quickly and match the user’s theme. The project’s stated origin helps explain its emphasis on small-screen behavior and CSS-driven styling rather than on a standalone diagram editor.

Mermaid is a text-based format for describing diagrams, including flowcharts. Pele’s approach is to accept that syntax and return SVG, a vector format that can be embedded in web pages. The supplied page directs users to separate areas for examples, API instructions, theming and compatibility information. Its comparison names Mermaid.js as the alternative, but does not provide enough detail to establish how every syntax feature or layout behaves across both tools.

“Color changes apply without re-rendering.”

— Pele website

Benchmark and Feature Details

The supplied source does not specify when Pele was released, which license applies, or where its source repository is hosted. It also does not describe the conditions behind the bundle-size and rendering-time comparisons, including hardware, browser, diagram complexity or measurement method. Those omissions make it difficult to judge how the stated performance differences would translate to a particular project.

The website says Pele supports diagram types built into Mermaid 12.1.0, but the supplied material does not enumerate those types or provide a detailed compatibility matrix. It is also unclear how the tool handles syntax added after that Mermaid version, how it treats unsupported syntax, and what accessibility features its generated SVG includes. These details would need to be checked in the project’s documentation or through testing before adoption.

Check Compatibility Before Adoption

Developers considering Pele can start with the package and API described on its website, then test their own Mermaid diagrams and theme variables in the target application. The project points readers to examples, API documentation and compatibility information; these resources are the next place to check for supported syntax, installation guidance and known limitations.

No release schedule, roadmap or upcoming milestone is stated in the supplied material. Further details that would help assess the announcement include the repository and license, reproducible benchmark results, and a complete list of supported diagram types. Until those are available, performance figures and broad compatibility claims remain project-reported.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG and provides an API for rendering diagrams in an application or webpage.

How does Pele handle diagram themes?

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

Is Pele faster than Mermaid.js?

Pele’s website reports rendering times of 0.05–0.3 milliseconds, compared with 6–82 milliseconds for Mermaid.js. The supplied information does not explain the testing method, so readers should treat this as a project-reported comparison, not an independently verified result.

Which Mermaid diagrams does Pele support?

The project says it supports diagram types built into Mermaid 12.1.0. The supplied source does not list every supported type or clarify compatibility with later Mermaid syntax.

What is not yet clear about the project?

The supplied material does not state the release date or license, provide benchmark methodology, or identify a complete compatibility list. Those details should be checked in Pele’s documentation before using it in a production project.

Source: hn