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 turns Mermaid diagram syntax into SVG, with theme colors and fonts controlled by CSS variables. Its website reports smaller bundle size and faster rendering than Mermaid.js, but those performance comparisons are vendor claims and test methods are not provided in the supplied material.

Pele is an open-source JavaScript library that renders Mermaid diagram syntax as SVG, with colors and fonts adjustable through CSS variables. The project’s website describes it as an alternative to Mermaid.js for applications that need diagram rendering, including Obsidian, where Pele was developed to render diagrams quickly and match the app’s theme.

The workflow described on pele.run is to write Mermaid syntax and pass it to Pele’s render() API. The function returns an SVG, which an application can insert into a page. The project gives an example using a flowchart and shows theme variables for the background, foreground, muted text, lines, surfaces and borders. It says those color changes can be applied without rendering the diagram again.

The site says Pele has zero direct dependencies and supports every diagram type built into Mermaid 12.1.0. Its comparison table lists a gzipped bundle size of 230 kB for Pele and 1.6 MB for Mermaid.js. It reports render times of 0.05–0.3 milliseconds for Pele and 6–82 milliseconds for Mermaid.js. These are figures published by the project; the supplied material does not describe the machines, diagrams, or test methodology behind them.

Users can install the package with npm install pele, according to the website. Pele also lists examples, an API reference, theming guidance and a compatibility section comparing syntax, layout and features. The site says its layout adapts on small screens, while Mermaid.js scales the diagram.

Theme Changes Without Re-rendering

The main practical distinction Pele promotes is separating a diagram’s content from its visual theme. Applications can use CSS variables to change colors and fonts, potentially making diagrams follow a site or editor’s appearance without regenerating each SVG. That could simplify theme support in tools that let users write Mermaid syntax.

Size and speed may also matter where diagrams are rendered frequently or where a smaller client-side bundle is desirable. But the project’s numbers alone do not establish how much users would gain in a particular app: performance depends on the diagram, environment and implementation. Developers would need to test Pele against their own requirements and check compatibility before relying on it.

Built for Obsidian Diagram Rendering

Pele’s website describes it as an open-source project developed for Obsidian, with the aim of rendering diagrams quickly and matching the application’s theme. Mermaid is a text-based diagram format and renderer; Pele’s stated approach is to accept Mermaid syntax while producing SVG output. That makes compatibility with Mermaid’s syntax and diagram types a key consideration for teams evaluating it.

The supplied project page identifies Mermaid 12.1.0 as the version whose built-in diagram types Pele supports. It does not provide a release date or version history in the material available here. The site’s compatibility section is presented as a place to compare syntax, layout and features, but the supplied information does not detail individual differences.

Benchmarks and Compatibility Details

The performance and bundle-size figures are claims published by Pele’s project website; independent benchmark results are not included in the supplied source material. The page does not specify test hardware, rendering conditions, diagram complexity or how bundle sizes were calculated. Readers should treat the figures as the project’s comparison rather than a verified result across all uses.

It is also unclear from the supplied material how closely Pele matches Mermaid in every syntax feature, rendering detail or future version. The project states support for diagram types built into Mermaid 12.1.0, but does not list which versions it tracks or how quickly it updates. No adoption numbers, release schedule or maintenance commitments are provided.

Testing Pele in Applications

Developers can install Pele and test the render() API with the Mermaid diagrams their applications already use. They can also evaluate the CSS-variable theming behavior and review the project’s examples and compatibility information. Those checks can establish whether its SVG output, layout and syntax support fit a particular product.

The supplied announcement does not state a forthcoming release or milestone. Further details that would help evaluate the project include reproducible benchmark methods, a version-support policy and a more detailed account of compatibility with Mermaid releases beyond 12.1.0.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG, which an application can insert into a webpage or other interface.

How does Pele handle themes?

The project says colors and fonts can be set with CSS variables. It says those color changes can take effect without rendering the diagram again.

Is Pele faster than Mermaid.js?

Pele’s website reports render times of 0.05–0.3 milliseconds, compared with 6–82 milliseconds for Mermaid.js. The supplied material does not describe the benchmark methodology, so these should be read as project-reported figures.

What Mermaid diagrams does Pele support?

The project says it supports every diagram type built into Mermaid 12.1.0. The supplied source does not detail support for later versions or list feature-by-feature compatibility.

Source: hn