Pele – Mermaid Diagrams As Themeable SVG

TL;DR

Buying for a business?Offer from Amazon

Get business pricing on monitors, keyboards and dev 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 JavaScript library that turns Mermaid diagram syntax into SVG and allows styling through CSS variables. Its website claims smaller bundles and faster rendering than Mermaid.js, but those performance figures are project-published comparisons rather than independent benchmarks.

Pele, an open-source JavaScript library for rendering Mermaid diagrams as SVG, lets developers change colors and fonts through CSS variables without rerendering a diagram. The project says it was developed for Obsidian, where it is intended to render diagrams quickly and match the app’s theme; its website also claims substantially smaller bundles and faster rendering than Mermaid.js.

The workflow described on pele.run starts with Mermaid syntax, which Pele’s render() API converts into an SVG string for insertion into a webpage. The example on the site uses a JavaScript import from the pele package and passes a flowchart definition to the function. Developers can then add the returned SVG to a page, rather than displaying the source text as a diagram.

Pele’s theming system uses CSS variables for background, foreground, muted text, lines, surfaces and borders. The project says changes to these values take effect without rendering the diagram again. The site also describes Pele as having zero direct dependencies and supporting every diagram type built into Mermaid 12.1.0. That compatibility statement is the project’s own description; the supplied material does not include an independent feature audit.

In its comparison with Mermaid.js, Pele lists a 230 kB gzip bundle and rendering times of 0.05–0.3 milliseconds. It lists Mermaid.js at 1.6 MB and 6–82 milliseconds. Pele characterizes its renderer as six times smaller and up to 500 times faster. The website does not provide benchmark methods, hardware, test diagrams or details about how those ranges were calculated, so the figures should be read as project-reported measurements rather than independently verified results.

Theme Changes Without Rerendering

For developers building documentation, note-taking tools or web applications with diagrams, theme control through CSS can make diagrams fit a site’s existing light and dark modes. Pele’s approach separates visual styling from the Mermaid text: a page can adjust colors and fonts in its stylesheet without asking the library to regenerate the SVG. That may simplify theme changes in applications where diagrams appear alongside other content.

The performance and bundle-size claims, if they hold for a project’s actual diagrams and environment, could also matter for pages that render many diagrams or need to keep downloaded code small. But a library comparison depends on what features and workloads are being measured. Developers evaluating Pele would need to test their own syntax, layouts and visual requirements, rather than treating the headline speed multiplier as a universal result.

The project’s stated connection to Obsidian gives its design a practical target: diagrams that render quickly and follow an application theme. The source does not say whether Pele is built into Obsidian, officially supported by it, or available there as a particular plugin. The confirmed scope here is the project’s stated motivation and its published API and styling approach.

From Mermaid Text to SVG

Mermaid is a text-based format for describing diagrams, including flowcharts. Pele’s site demonstrates the distinction between the input and output: a user writes Mermaid syntax, then Pele produces an SVG that can be embedded in a page. SVG is a vector graphic format, making it suitable for diagrams that need to display at different sizes.

The project offers examples, an API guide, theming information and a compatibility area on its website. It provides the package installation command npm install pele and a JavaScript example that imports the render function. The supplied source does not give a publication date, version number, license details, repository address or a release history, so those details cannot be established from this announcement material alone.

“Color changes apply without re-rendering.”

— Pele project website

Benchmark and Compatibility Details

The available material does not specify how the render-time comparison was measured, which diagrams were tested, or whether both tools were configured for equivalent output. It also does not identify the hardware, browser or runtime used. The advertised figures therefore cannot establish how Pele will perform in a particular application.

The site says Pele supports diagram types built into Mermaid 12.1.0, but the material supplied here does not list supported syntax, known limitations or differences in layout and rendering. It is also unclear which Pele release the comparison refers to, when the library was published, and what maintenance or support commitments apply. Those points require confirmation from project documentation or its maintainers.

Testing Pele in Applications

The immediate next step for developers interested in Pele is to consult its API, examples and compatibility information, then test representative Mermaid diagrams in their own environment. That can show whether the output, theme variables and rendering speed meet a project’s needs. No forthcoming release, roadmap milestone or independent benchmark is identified in the supplied source.

Further reporting would need the project’s version and release history, details of its benchmark setup, and clarification of its relationship with Obsidian. Until those details are available, Pele’s stated features and comparisons should be treated as information published by the project, not as independently validated findings.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG, which developers can insert into a webpage through its JavaScript API.

How does Pele support themes?

The project exposes CSS variables for colors and fonts. Its website says changing those values updates diagram styling without rerendering.

Is Pele faster than Mermaid.js?

Pele’s website reports rendering times of 0.05–0.3 ms, compared with 6–82 ms for Mermaid.js, and claims it can be up to 500 times faster. The supplied material does not describe the benchmark method, so the comparison is not independently verified here.

Which Mermaid diagram types does Pele support?

The project says it supports every diagram type built into Mermaid 12.1.0. The source material does not provide a detailed compatibility list or independently confirm that claim.

How can developers try Pele?

The site gives the command npm install pele and an example using the package’s render() function. Developers can pass Mermaid syntax to the function and insert the returned SVG into a page.

Source: hn