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 a JavaScript library that renders Mermaid diagram syntax as SVG, with colors and fonts controlled through CSS variables. Its website reports a 230 kB gzipped bundle and 0.05–0.3 ms render times, compared with 1.6 MB and 6–82 ms for Mermaid.js; those are project-reported figures, and the comparison method is not detailed in the supplied material.

Pele, a JavaScript library for Mermaid diagrams, renders Mermaid syntax into SVG and lets developers change diagram colors and fonts with CSS variables. The project says it was developed for Obsidian and reports a smaller bundle and faster render times than Mermaid.js, though the supplied project page does not describe how those performance figures were measured.

Developers can install the package with npm install pele, pass Mermaid text to its render() API, and insert the returned SVG into a page. The project’s example shows a flowchart being converted into an SVG, while its site provides separate sections for examples, API documentation, theming and compatibility.

Pele’s stated theming approach uses CSS variables to set background, foreground, muted text, line, surface and border colors. The project says color changes can be applied without re-rendering, and also identifies fonts as configurable. That approach is intended to let diagrams follow an application’s existing visual theme.

The project lists a 230 kB gzipped bundle and zero direct dependencies for Pele, compared with 1.6 MB and three direct dependencies for Mermaid.js. It reports rendering times of 0.05–0.3 milliseconds for Pele and 6–82 milliseconds for Mermaid.js. These are figures published by Pele, not independently verified results in the supplied source.

Themeable Diagrams in Smaller Bundles

If the project’s figures hold in a developer’s own workload, Pele could offer a way to display Mermaid diagrams with less JavaScript and shorter rendering times. A smaller bundle may matter for applications where download size affects page loading, while sub-millisecond rendering could be useful when diagrams need to update frequently. The figures should be treated as project-reported comparisons, since the source does not specify hardware, test conditions or the diagrams used.

The direct user-facing change is the separation of diagram appearance from diagram generation: CSS variables can alter colors and fonts, and the output is SVG that can be placed in a web page. This may make it easier for app developers to keep diagrams consistent with light, dark or custom themes. The source describes the capability but does not provide independent adoption, usability or accessibility results.

From Obsidian Need to Web API

Pele says it was created to render diagrams quickly in Obsidian and to match the application’s theme. The project presents the library as usable beyond that original setting through a package and API for web applications. Its site says Pele supports every diagram type built into Mermaid 12.1.0, and provides a compatibility section for comparing syntax, layout and features.

Mermaid is a text-based format for describing diagrams, including flowcharts. In the workflow described by Pele, a developer writes Mermaid syntax and the library produces an SVG rather than requiring the diagram to be drawn by hand. The project’s support statement is specific to the diagram types built into Mermaid 12.1.0; it does not establish compatibility with every later Mermaid release or every extension.

““Use CSS variables to set colors and fonts. Color changes apply without re-rendering.””

— Pele project website

Benchmark Methods and Compatibility Scope

The supplied project information does not say how the bundle-size or render-time comparisons were run, what hardware or diagram inputs were used, or whether the measurements include setup and rendering overhead. The listed times are therefore best read as Pele’s published figures rather than a controlled, independently assessed result.

The source also does not identify a release date, version number, license terms, maintenance schedule or adoption figures. Although Pele says it supports diagram types built into Mermaid 12.1.0, the page does not clarify how it handles later Mermaid changes, extensions or every syntax and layout edge case. Developers would need to consult the project’s compatibility information and test their own diagrams before relying on it.

Check the API and Compatibility Guide

The project directs developers to its API, examples and compatibility pages to explore supported diagrams and use Pele in an application. The immediate next step for teams evaluating the library is to try its render API with their own Mermaid syntax and confirm that the generated SVG, layout and theme variables meet their requirements.

No release announcement, benchmark update or future milestone is specified in the supplied material. Any further confirmation of performance or support breadth would depend on additional project documentation, release details or independent testing.

Key Questions

What does Pele do?

Pele takes Mermaid diagram syntax and renders it as SVG. The project describes it as a library for use in applications, including Obsidian and web pages.

How can developers change a diagram’s appearance?

The project says developers can use CSS variables to set colors and fonts. It also says color changes can take effect without rendering the diagram again.

How fast is Pele compared with Mermaid.js?

Pele reports render times of 0.05–0.3 milliseconds, compared with 6–82 milliseconds for Mermaid.js. The supplied source does not explain the testing conditions, so these should be treated as project-reported figures, not an independently verified benchmark.

Which Mermaid diagram types does Pele support?

Pele says it supports every diagram type built into Mermaid 12.1.0. The supplied information does not establish compatibility with later versions, extensions or every possible syntax variation.

How do I try Pele in an app?

The project provides an npm installation command, npm install pele, and an API that accepts Mermaid syntax through render(). Its website also links to examples and compatibility information.

Source: hn