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 a JavaScript library that converts Mermaid diagram syntax into SVG and lets developers change diagram colors and fonts with CSS variables, without rendering again. Its website reports smaller bundles and faster rendering than Mermaid.js, though those figures are developer-published comparisons and the methodology is not provided in the supplied material.

Pele is an open-source JavaScript library that turns Mermaid diagram syntax into SVG, giving developers a way to add diagrams to web pages and adjust their appearance through CSS variables. The project’s website says it was developed for Obsidian and highlights its small bundle size and fast rendering compared with Mermaid.js.

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 website’s example renders a simple flowchart from Mermaid syntax. Pele says its output can be styled using CSS variables for colors and fonts, with color changes taking effect without re-rendering.

The project’s comparison table reports a gzipped bundle size of 230 kB for Pele and 1.6 MB for Mermaid.js. It lists render times of 0.05–0.3 milliseconds for Pele and 6–82 milliseconds for Mermaid.js, and says Pele has zero direct dependencies. These are figures published by the project; the supplied material does not describe the testing setup or independently verify the results.

Pele says it supports every diagram type built into Mermaid 12.1.0. Its site also contrasts layout behavior on small screens: Pele adapts the layout, while Mermaid.js scales the diagram. It offers examples, API documentation, theming information and a compatibility comparison for people evaluating the library.

Why CSS-Themed SVG Matters

For developers, the main practical distinction is that diagram appearance can follow a site or app’s theme through CSS, rather than requiring a separate Mermaid theme configuration or a fresh render after a color change. That could make diagrams easier to keep visually consistent with interfaces that support light and dark modes or custom color schemes.

The published size and speed comparisons may also interest teams that render diagrams in apps where download size and responsiveness matter. However, the figures should be treated as project claims until readers can compare them under their own conditions. Performance can depend on diagram complexity, runtime, device and measurement method; the source does not give those details.

Because Pele returns SVG, its output can be inserted into a page as vector graphics. The project’s positioning is especially relevant to applications such as Obsidian, for which it says it was created, as well as other products that display Mermaid-authored diagrams. Whether it fits a particular project depends on its supported syntax, layout needs and compatibility requirements.

Built Around Mermaid Syntax

Mermaid is a text-based format for describing diagrams. Instead of drawing each element manually, a user writes syntax describing nodes and their relationships; a rendering tool then produces the visual diagram. Pele’s documented workflow keeps that authoring format and changes the rendering step, producing SVG output from Mermaid text.

The website frames the project as a lightweight alternative to Mermaid.js, but also provides a compatibility section rather than asking users to assume the implementations behave identically. It identifies Mermaid 12.1.0 as the version whose built-in diagram types Pele supports. The project is named after Pele, described on its site as the goddess of volcanoes and fire.

“Color changes apply without re-rendering.”

— Pele project website

Testing and Compatibility Details

The supplied project information does not state when Pele was released, identify its current version, or provide a repository link, license details or maintenance schedule. It also does not explain how the bundle-size and render-time comparisons were measured, what hardware or browser was used, or which diagrams were tested.

The claim of support for diagram types in Mermaid 12.1.0 does not by itself establish complete compatibility with every Mermaid syntax feature or behavior. The project points users to a compatibility page, but specific limitations and test results are not included in the source material provided here. Readers should check that documentation against the diagrams and deployment environments they need.

Check the API and Compatibility

Developers considering Pele can review its examples, API and compatibility documentation, install the package, and test their Mermaid diagrams in the environments where they plan to use them. A useful evaluation would compare output, layout, rendering behavior and bundle impact against the project’s published figures.

The supplied material does not announce a release date, roadmap or upcoming milestone. Until further project details or independent testing are available, the current next step for users is to assess the implementation directly and confirm that its syntax support and rendering behavior meet their needs.

Key Questions

What does Pele do?

Pele renders Mermaid syntax as SVG. Its JavaScript API returns the SVG so an app or website can insert the diagram into a page.

How does Pele handle theming?

The project says developers can set colors and fonts with CSS variables. It says color changes apply without rendering the diagram again.

Is Pele faster and smaller than Mermaid.js?

Pele’s website reports a 230 kB gzipped bundle and render times of 0.05–0.3 milliseconds, compared with 1.6 MB and 6–82 milliseconds for Mermaid.js. These are developer-published comparisons; the supplied information does not include the testing methodology.

Which Mermaid diagrams does Pele support?

The project says it supports every diagram type built into Mermaid 12.1.0. Readers should check Pele’s compatibility documentation for syntax and behavior relevant to their own diagrams.

Who is Pele intended for?

The project says it was developed for Obsidian and presents its API for use in apps. Its stated features may also interest web developers who need Mermaid-authored diagrams with SVG output and CSS-based styling.

Source: hn