Pele – Mermaid Diagrams As Themeable SVG

TL;DR

Age 18–24?Offer from Amazon

Prime made for students and young adults

• Fast, free delivery for dorm and study essentials
• Prime Video and Amazon Music included
• Member-only deals

Try Prime for Young Adults →Free trial for eligible 18–24 year olds

As an affiliate, we earn on qualifying purchases.Hide

Pele is a JavaScript library that renders Mermaid diagram syntax as SVG and allows colors and fonts to be changed through CSS variables without rerendering. Its website reports smaller bundles and faster rendering than Mermaid.js, but the figures are vendor-published comparisons and the supplied material does not describe their test conditions.

Pele is a JavaScript library that turns Mermaid diagram syntax into SVG, with colors and fonts controlled through CSS variables that can change without rendering the diagram again. The project, developed for the note-taking app Obsidian, presents itself as a lightweight alternative for applications that need theme-aware diagrams.

The library’s site describes a simple workflow: pass Mermaid text to Pele’s render() API, receive an SVG string, then insert that SVG into a page. Its example uses a flowchart, and the project says it supports every diagram type built into Mermaid 12.1.0. The site also offers examples and a compatibility section for comparing syntax, layout and features.

For styling, Pele exposes CSS custom properties for items including the diagram background, foreground, muted text, lines, surfaces and borders. The project says changes to these variables update the appearance without rerendering. This approach lets an application adapt diagram colors and fonts to its existing light or dark theme through CSS rather than relying only on a separate theme configuration.

Pele reports a 230 kB gzipped bundle, compared with 1.6 MB for Mermaid.js, and rendering times of 0.05–0.3 milliseconds versus 6–82 milliseconds. It also lists zero direct dependencies, compared with three for Mermaid.js. These numbers are presented by the project; the supplied material does not identify the hardware, diagrams or measurement method used for the comparison.

Theme Changes Without Re-rendering

The main practical difference Pele describes is its combination of SVG output and CSS-based theming. Applications can adjust diagram presentation to match a user-selected theme without regenerating the diagram, which may simplify integration for tools that support light and dark modes or custom palettes.

The reported bundle and speed figures may also interest developers who want to reduce the size of an application or render diagrams quickly. However, those comparisons alone do not establish how Pele performs across different diagram types, browsers or workloads. Developers considering it will need to weigh the advertised benefits against feature compatibility, accessibility needs and their own tests.

Built for Obsidian Diagrams

Pele’s site says it was developed for Obsidian, where the project aimed to render diagrams quickly and match the application’s theme. It is also presented as a library for use in other applications, with installation through the npm package named pele and an API that accepts Mermaid syntax.

Mermaid is a widely used text-based format for creating diagrams. Pele’s stated compatibility target is the built-in diagram types in Mermaid version 12.1.0, rather than an unrestricted claim that every Mermaid feature or behavior is identical. The project directs users to its compatibility material to compare syntax, layout and features before adopting it.

The project name refers to Pele, the Hawaiian goddess associated with volcanoes and fire, according to the site. That naming detail does not affect the library’s technical scope, which is centered on rendering Mermaid-authored diagrams into SVG and styling them with CSS.

“Color changes apply without re-rendering.”

— Pele project website

Benchmark Methods Not Provided

The supplied project material does not explain how the bundle-size and render-time comparisons were measured, what diagrams were tested, or whether the figures represent typical results. The site’s comparison should therefore be read as a vendor-published benchmark, not as an independently verified result.

It is also not clear from the material which Mermaid features may differ in practice, how compatibility is maintained as Mermaid changes, or what limitations apply to the generated SVG. The project points users to a compatibility section, but detailed findings from that comparison are not included in the source provided here.

The announcement material gives no publication date, release history, licensing details, maintenance plans or adoption figures. Those details would help developers judge the library’s maturity and suitability for production use, but cannot be confirmed from the supplied source.

Test Compatibility Before Adoption

Developers can install Pele from npm and try rendering their existing Mermaid diagrams through its render() API. The project’s examples and compatibility pages are the next places to check for supported diagram types, syntax differences and layout behavior.

For teams considering a switch, the practical next step is to test representative diagrams in their own applications, compare output with Mermaid.js, and measure bundle size and rendering under the same conditions. The supplied source does not announce a future release date or additional roadmap milestones, so further development plans remain unknown.

Key Questions

What does Pele do?

Pele converts Mermaid syntax into SVG. Its JavaScript API returns an SVG string that an application can insert into a page.

How does Pele handle diagram themes?

The project provides CSS variables for colors and fonts. It says those styling changes can take effect without rendering the diagram again.

Which Mermaid diagram types does Pele support?

Pele says it supports every diagram type built into Mermaid 12.1.0. The project has a compatibility section for checking syntax, layout and feature differences.

Are Pele’s performance figures independently verified?

The supplied figures come from the Pele project website. The source material does not provide test methods or independent verification, so the comparisons should be treated as project-reported claims.

Where was Pele developed for?

The project says it was developed for Obsidian to render diagrams quickly and match the application’s theme, while also offering an API for use in other applications.

Source: hn