TL;DR
Get wellness gear delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
Pele is presented as a JavaScript library that converts Mermaid syntax into SVG diagrams, with colors and fonts controlled through CSS variables. Its website reports a 230 kB gzipped bundle and render times of 0.05–0.3 ms, compared with 1.6 MB and 6–82 ms for Mermaid.js; those figures are the project’s own comparison.
Pele is a JavaScript library that turns Mermaid diagram syntax into SVG, with colors and fonts that can be changed through CSS variables. The project’s website positions it as a smaller, faster alternative to Mermaid.js for applications that need diagrams to match an interface theme, including the Obsidian environment for which Pele was developed.
Developers can install the library with npm install pele, pass Mermaid-formatted text to its render() function, and insert the returned SVG into a page. The site illustrates the process with a short flowchart and provides examples, an API section, a theming guide and a compatibility comparison. The supplied material does not give a release date or identify a particular software release.
Pele’s theming approach uses CSS custom properties for the diagram background, foreground text, muted text, lines, surfaces and borders. The project says color changes can take effect without re-rendering. Its page also says the layout adapts on small screens, contrasting that with Mermaid.js diagrams that scale.
The project reports support for every diagram type built into Mermaid 12.1.0. Its comparison lists Pele’s gzipped bundle at 230 kB, against 1.6 MB for Mermaid.js, and render times of 0.05–0.3 milliseconds against 6–82 milliseconds. These are figures published by Pele; the source does not provide test conditions, hardware, diagram samples or an independent benchmark.
SVG Theming Without Re-rendering
Pele’s approach could help application developers offer theme-matched diagrams without tying diagram colors to a separate renderer configuration. Because the output is SVG and the appearance is controlled through CSS variables, a host application can adjust presentation alongside its own styles. The project says these color changes do not require the diagram to be rendered again.
Bundle size and rendering time can matter when software displays many diagrams or runs on constrained devices. Pele’s published comparison suggests lower figures on both measures than Mermaid.js, but readers should treat them as project-reported results, not a universal performance guarantee. Real results may depend on the diagram and the conditions under which each renderer is used.
As an affiliate, we earn on qualifying purchases.
Built for Obsidian Diagrams
The project says Pele is open source and was developed for Obsidian, with the goal of rendering diagrams quickly and matching the application’s theme. Its name, according to the site, comes from Pele, the goddess of volcanoes and fire. The supplied project page presents installation and API instructions, but does not specify a license, repository address or release history.
Mermaid is a text-based diagram format and renderer used to describe diagrams through written syntax. Pele’s stated role is to accept that syntax and produce SVG. Its compatibility claim is bounded: the site names the diagram types built into Mermaid 12.1.0, rather than promising compatibility with every Mermaid feature or later version.
““Color changes apply without re-rendering.””
— Pele project website
JavaScript SVG rendering libraries
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Benchmark and Compatibility Limits
The source does not say when Pele was released, provide a version number, or link to a source repository. It also does not document how the reported bundle-size and rendering comparisons were measured, so the figures cannot be independently checked from the supplied material. The page’s “up to 500× faster” claim is not accompanied by the benchmark cases behind that maximum.
Although Pele says it supports diagram types built into Mermaid 12.1.0, the source does not detail support for individual syntax features, edge cases or later Mermaid versions. It is also unclear from the supplied information how the library handles accessibility, security concerns in inserted SVG, or rendering failures. These details should not be assumed from the headline performance claims.
As an affiliate, we earn on qualifying purchases.
Check the Package and Examples
Developers interested in the library can review Pele’s examples, API documentation and compatibility guide, then test their own Mermaid diagrams and styling requirements. The source instructs users to install the npm package and call render(); it does not announce a future release, roadmap milestone or launch event.
Further information that would help evaluate the project includes its current version and license, a repository or release record, and reproducible benchmarks showing the diagrams and test environments used. Until those details are available in the cited material, the performance figures and compatibility scope remain claims made by the project itself.
As an affiliate, we earn on qualifying purchases.
Key Questions
What does Pele do?
Pele converts Mermaid syntax into SVG diagrams. Its project page describes it as a JavaScript library that developers can use in applications.
How does Pele theme diagrams?
It uses CSS custom properties to set colors and fonts, including background, text, line and surface colors. The project says color changes apply without re-rendering.
How do developers use Pele?
The page instructs developers to install the package with npm install pele, pass Mermaid syntax to its render() function and place the returned SVG in a page.
Are Pele’s performance figures independently verified?
The supplied source gives project-reported comparisons but does not include benchmark methods, test conditions or independent verification. The numbers should not be treated as results for every use case.
Which Mermaid features does Pele support?
Pele’s website says it supports every diagram type built into Mermaid 12.1.0. The supplied material does not specify compatibility with later versions or document every syntax feature.
Source: hn
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
