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 renders Mermaid diagram syntax as SVG and supports theme changes through CSS variables. Its website reports smaller bundles and faster rendering than Mermaid.js, but those figures are project-provided comparisons; testing conditions are not specified in the supplied material.

Pele, an open-source JavaScript library, renders Mermaid diagram syntax as SVG and lets developers change diagram colors and fonts with CSS variables, according to the project website. Developed for the note-taking app Obsidian, the tool is aimed at applications that want diagrams to fit their interface themes without rerendering for color changes.

To use Pele, developers install the package with npm, pass Mermaid text to its render() API and place the returned SVG in a web page. The site’s example converts a short flowchart into an SVG, illustrating a workflow that keeps the diagram description in Mermaid syntax while using Pele for rendering.

The project says CSS variables control the diagram’s background, foreground, muted text, lines, surfaces and borders, as well as fonts. It says color changes take effect without another render. The site also says Pele supports every diagram type built into Mermaid 12.1.0, and provides examples and compatibility information for developers to explore.

Pele’s website compares its performance with Mermaid.js, reporting a 230 kB gzip bundle against 1.6 MB and render times of 0.05–0.3 milliseconds against 6–82 milliseconds. It also lists zero direct dependencies for Pele and 23 for Mermaid.js. These are figures published by the project; the supplied material does not describe the benchmark setup or independent verification.

Themeable Diagrams Without Rerendering

The approach could help developers display Mermaid-authored diagrams in applications with light, dark or custom themes while retaining an SVG output. CSS-based styling can make it easier for an application’s existing theme to affect diagrams, rather than requiring a separate rendering step whenever colors change.

The project’s size and speed figures, if reproduced in a developer’s own environment, could also matter for applications that render many diagrams or need to limit downloaded code. However, the website’s comparison alone does not establish how Pele performs across different devices, diagram types or production workloads. Developers would need to test those conditions and confirm that the supported syntax matches their needs.

Built for Obsidian’s Diagram Needs

The project says Pele was developed for Obsidian, with the goal of rendering diagrams quickly and matching the application’s theme. It is named after Pele, the goddess of volcanoes and fire, according to the website. The supplied report presents the library’s features, API and comparisons, but does not give a launch date or describe a release announcement.

Mermaid is a text-based format used to describe diagrams, while SVG is a vector image format that can be displayed in web pages. Pele’s stated role is to accept Mermaid syntax and produce SVG. Its website positions it against Mermaid.js, but developers should consult the project’s compatibility information before treating the two tools as interchangeable for a particular diagram or layout.

“Color changes apply without re-rendering.”

— Pele project website

Benchmark and Compatibility Limits

The supplied material does not state when Pele was released, identify a version number, or provide independent performance tests. It is also unclear what hardware, diagram complexity, browser or measurement method produced the reported bundle sizes and render times. The figures should be understood as project-reported comparisons, not universal results.

The website claims compatibility with Mermaid 12.1.0’s built-in diagram types, but the supplied report does not enumerate them or document any differences in syntax, layout or output. It also does not describe the library’s license terms, maintenance schedule or support commitments. Those details may be available in the project repository or documentation, but they are not established by the source material provided here.

Check the Package and Examples

Developers interested in Pele can review its examples, API and compatibility information on the project website, install the package and test Mermaid diagrams used by their applications. They can compare its output and performance with Mermaid.js under their own conditions, including the diagram types and devices they expect to support.

No further release, roadmap milestone or independent benchmark is identified in the supplied material. Any assessment of adoption or real-world performance will depend on project updates and testing beyond the figures currently published on Pele’s site.

Key Questions

What does Pele do?

Pele renders Mermaid syntax as SVG and provides CSS variables for adjusting colors and fonts, according to its website.

How do developers use Pele?

The project describes installing the package with npm, passing Mermaid text to its render() API and inserting the returned SVG into a page.

Can Pele diagrams follow an application’s theme?

The project says CSS variables can set colors and fonts and that color changes apply without rerendering. The source does not independently test that behavior.

Are Pele’s speed and size figures independently verified?

Not in the supplied material. The bundle-size and render-time figures are project-reported, and the website information provided here does not specify benchmark conditions or independent verification.

Which Mermaid diagram types does Pele support?

Pele’s website says it supports every diagram type built into Mermaid 12.1.0. Developers can consult the project’s compatibility information to check specific syntax and layout requirements.

Source: hn