TL;DR
Get business pricing on monitors, keyboards and dev gear
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
Pele is a JavaScript tool that renders Mermaid diagram syntax as SVG, with colors and fonts controlled through CSS variables. Its site says it supports diagram types built into Mermaid 12.1.0 and reports smaller bundle size and faster rendering than Mermaid.js; those performance figures are developer-provided comparisons.
Pele, a JavaScript tool for rendering Mermaid diagrams as SVG, lets developers apply colors and fonts through CSS variables rather than configuring a separate theme for each diagram. Its website describes the project as an open-source tool developed for Obsidian and says it supports every diagram type built into Mermaid 12.1.0.
The site describes a two-step workflow: users provide Mermaid syntax, and Pele returns an SVG that can be inserted into a page. Its documented JavaScript API uses a render() function, which returns an object containing the SVG. The example on the site renders a simple left-to-right flowchart and places the result in a page element.
Pele’s theming approach uses CSS custom properties for elements including the background, foreground, muted text, lines, surfaces and borders. The site says color changes apply without re-rendering. It also lists small-screen behavior as a difference from Mermaid.js: Pele adapts the layout, while Mermaid.js scales the diagram. These are product descriptions from Pele’s website.
The project reports a 230 kB gzip bundle and rendering times of 0.05–0.3 milliseconds. For comparison, the site lists Mermaid.js at 1.6 MB gzip and 6–82 milliseconds, and says Pele has no direct dependencies compared with 23 for Mermaid.js. Pele characterizes itself as up to 500 times faster and six times smaller. The supplied material does not specify the test setup or measurement conditions behind those figures.
Theme Changes Without Re-rendering
For applications that display diagrams, separating diagram content from presentation can make it easier to match a site’s or editor’s appearance. Pele’s use of CSS variables means developers can change listed colors and fonts through styling, rather than relying solely on a separate theme configuration. The site’s claim that color updates do not require re-rendering may be useful where a diagram must follow a changing interface theme.
The reported bundle size and rendering speed could also matter to developers weighing a diagram renderer for an application, particularly one where load time or smaller screens are concerns. Those comparisons should be treated as the project’s own figures: the source does not provide independent tests, device details, or a benchmark methodology. Compatibility with a specific Mermaid feature set and the behavior of diagrams in a particular app may need practical testing.
As an affiliate, we earn on qualifying purchases.
Built for Obsidian Diagram Rendering
Pele’s website says the tool was developed for Obsidian to render diagrams quickly and match the application’s theme. It is also presented as a library developers can install with npm and use in their own applications. The project name, the site says, refers to Pele, the goddess of volcanoes and fire.
The relevant comparison is with Mermaid.js, a JavaScript library that turns text descriptions into diagrams. Pele accepts Mermaid syntax, but its site’s performance table is not a substitute for a feature-by-feature compatibility report. The website points readers to separate examples, API, theming and compatibility material, and frames its supported diagram types against Mermaid 12.1.0.
““Color changes apply without re-rendering.””
— Pele website
As an affiliate, we earn on qualifying purchases.
Benchmark and Compatibility Details
The supplied source does not identify when Pele was announced, provide a release history, or say which current package version its figures describe. It also does not explain the benchmark hardware, inputs or measurement method behind the listed bundle sizes and render times. The six-times-smaller and up-to-500-times-faster statements are therefore attributable to the project, not independently verified comparisons in the material provided.
The website says Pele supports diagram types built into Mermaid 12.1.0, but the source does not give a detailed feature matrix showing which syntax, layout options or edge cases have been tested. It is also not clear from the supplied information how the tool handles later Mermaid releases or whether every diagram behaves consistently across browsers and screen sizes.
As an affiliate, we earn on qualifying purchases.
Testing Pele in Applications
The next practical step for developers is to review Pele’s API, examples and compatibility information, then test the diagrams and themes their applications need. The site presents npm installation and the render() API as the route to integration, while its CSS-variable approach can be evaluated against an application’s existing theme system.
No upcoming release, roadmap milestone or independent performance review is identified in the source material. Further updates that document benchmark conditions, package versions and compatibility testing would help readers judge how the reported comparisons apply to their own projects.
As an affiliate, we earn on qualifying purchases.
Key Questions
What does Pele do?
Pele renders Mermaid syntax as SVG. Its website describes a JavaScript API that returns SVG for insertion into an application or page.
How does Pele handle diagram themes?
The project says developers can set colors and fonts with CSS variables. Its site says color changes apply without re-rendering the diagram.
Does Pele support Mermaid diagram types?
Pele’s website claims support for every diagram type built into Mermaid 12.1.0. The supplied information does not include a detailed compatibility matrix or establish support for later versions.
Is Pele faster than Mermaid.js?
Pele reports rendering times of 0.05–0.3 milliseconds, compared with 6–82 milliseconds for Mermaid.js, and describes itself as up to 500 times faster. The source does not provide benchmark conditions, so the figures are project-reported rather than independently verified here.
How can developers add Pele to an application?
The website documents installation through npm and an API that passes Mermaid syntax to render(). The function returns an SVG that can then be placed in the page.
Source: hn
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
