TL;DR
Pele is an open-source JavaScript tool that turns Mermaid syntax into SVG diagrams and lets developers adjust colors and fonts with CSS variables. Its website reports smaller bundles and faster rendering than Mermaid.js, but the figures are developer-reported comparisons, and the benchmark methodology is not provided in the supplied material.
Pele is an open-source JavaScript renderer that converts Mermaid diagram syntax into SVG, with colors and fonts adjustable through CSS variables. Its website positions the tool as a lightweight, fast alternative to Mermaid.js, including for use in Obsidian, where it was developed to render diagrams and match the app’s theme.
Get business pricing on monitors, keyboards and dev gear
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
Developers can install the package with npm install pele, pass Mermaid text to its render() API and place the returned SVG in a web page. The example on Pele’s site uses a simple flowchart, but the project says it supports every diagram type built into Mermaid 12.1.0. It also provides examples, API information, theme documentation and a compatibility comparison.
Theming is handled with CSS variables rather than requiring a diagram to be rendered again after a color change, according to the project. The site lists variables for background, foreground, muted text, lines, surfaces and borders, and shows light and dark themes. Pele says its output adapts to small screens by scaling the diagram, while its comparison describes Mermaid.js as adapting the layout.
Pele’s site reports a 230 kB gzipped bundle, compared with 1.6 MB for Mermaid.js, and render times of 0.05–0.3 milliseconds versus 6–82 milliseconds. It also lists zero direct dependencies for Pele and 23 for Mermaid.js. Those are figures published by the project; the supplied material does not describe the test setup, hardware, diagrams or measurement method behind them.
Smaller Diagrams in Web Apps
For developers embedding diagrams in websites or applications, Pele’s approach combines SVG output with styling that can follow an application’s existing CSS theme. That could reduce the work involved in keeping diagrams consistent with light and dark interfaces, and the project’s reported bundle figures may interest teams seeking to limit the amount of code shipped to users.
The tool’s relevance depends on more than speed claims. Teams would need to check whether its rendering and syntax support match their diagrams, and whether its output fits accessibility, maintenance and deployment requirements. Pele’s stated support for Mermaid 12.1.0 gives users a reference point, but does not by itself establish compatibility with every Mermaid feature or later version.
Products Worth Considering
Bose QuietComfort Wireless Noise-Cancelling Over-Ear Headphones, Twilight Blue
Jackery Explorer 300 Portable Power Station with 40W Solar Panel, 292Wh
Bose QuietComfort Ultra Wireless Over-Ear Headphones with Spatial Audio and Noise Cancellation, Black
As an affiliate, we earn on qualifying purchases.
Built for Obsidian Diagrams
Pele’s website says the project was developed for Obsidian, where the goal was to render diagrams quickly and make them match the surrounding theme. It is named after Pele, the goddess of volcanoes and fire, according to the project. The tool is also presented for use in other applications through its package API.
Mermaid is a text-based format for defining diagrams, including flowcharts. Pele’s stated workflow keeps that input model: a developer writes Mermaid syntax, and Pele returns an SVG. Its site distinguishes Pele’s rendering from Mermaid.js and links to a compatibility section for comparing syntax, layout and features. The supplied report does not provide details of the project’s development history, release schedule or adoption.
““Use CSS variables to set colors and fonts. Color changes apply without re-rendering.””
— Pele project website
Benchmark and Compatibility Gaps
The supplied information does not state when Pele was released, identify its current version or provide a repository link, license details or a maintenance schedule. It also does not explain how the bundle-size and rendering comparisons were measured, so the reported differences cannot be independently assessed from this material alone.
The project says it supports all diagram types built into Mermaid 12.1.0, but the source does not list individual supported features or describe known limitations. It is also unclear how Pele handles syntax introduced after that version, or how its output compares with Mermaid.js across a range of complex diagrams and devices.
Check the API and Feature Coverage
Developers considering Pele can install the package, test the render() API with their own Mermaid diagrams and review the project’s examples and compatibility information. Comparing output for the specific diagram types an application uses will help establish whether the stated Mermaid 12.1.0 support meets that application’s needs.
Further information that would clarify the announcement includes a dated release and version history, benchmark procedures, and a detailed account of compatibility and limitations. The supplied material does not announce a release milestone or a future development plan, so no next update can be confirmed.
Key Questions
What does Pele do?
Pele converts Mermaid syntax into SVG diagrams. The project provides a JavaScript API for using the renderer in an application.
How can developers theme Pele diagrams?
The project says developers can set colors and fonts with CSS variables. It lists variables for backgrounds, text, lines, surfaces and borders, and says color changes do not require re-rendering.
Which Mermaid diagram types does Pele support?
Pele’s website says it supports every diagram type built into Mermaid 12.1.0. The supplied material does not give a feature-by-feature list or confirm support for features added in later Mermaid versions.
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 project-reported comparisons; benchmark methods are not included in the supplied source.
Where was Pele developed?
The project says it was developed for Obsidian to render diagrams quickly and match the application’s theme. Its website also describes using the package in other apps.
Source: hn
