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 an open-source tool that converts Mermaid diagram syntax into SVG and lets developers change colors and fonts through CSS variables. Its website reports smaller bundle size and faster rendering than Mermaid.js, but the figures are vendor-published comparisons and independent testing details are not provided in the supplied material.
Pele, an open-source JavaScript tool for Mermaid diagrams, renders diagram syntax as SVG and exposes colors and fonts through CSS variables. The project says the approach lets a page restyle diagrams without rendering them again, offering an alternative for developers who want diagrams to follow an application’s theme.
The project’s website describes a workflow in which users write Mermaid syntax and pass it to Pele’s render() API. The API returns an SVG string that an application can insert into a page. Pele can also be used through its package, installed with npm install pele, according to the project’s instructions.
For styling, Pele uses variables such as –pele-bg, –pele-fg, and –pele-line to set background, foreground, and line colors. The example stylesheet also includes variables for muted text, surfaces, and borders. Pele says these CSS changes take effect without re-rendering the diagram.
The project reports a 230 kB gzip bundle for Pele, compared with 1.6 MB for Mermaid.js, and render times of 0.05–0.3 milliseconds versus 6–82 milliseconds. Those figures appear on Pele’s own site; the supplied material does not describe an independent benchmark or its testing conditions. Pele also says it has no direct dependencies and supports every diagram type built into Mermaid 12.1.0.
Theme Changes Without Re-rendering
For developers embedding diagrams in documentation, notes, or web applications, the central practical feature is CSS-based theming. A site can use variables to align diagram colors with its interface, including a light or dark theme, without generating a new SVG every time those values change. That may simplify applications where users can switch themes or where a diagram must match different page styles.
Pele’s reported size and speed comparisons may also interest teams weighing rendering options, particularly on small screens or in settings where page weight and responsiveness matter. The figures should be treated as project claims rather than independently verified results: the source does not provide benchmark hardware, diagram complexity, or measurement methods. Compatibility and visual output are also relevant alongside speed when deciding whether a renderer fits an existing Mermaid workflow.
As an affiliate, we earn on qualifying purchases.
Built for Obsidian Diagrams
Pele’s site says the project is open source and was developed for Obsidian, a note-taking application, to render diagrams quickly and match the user’s theme. Its stated purpose connects the renderer’s SVG output and CSS variables to an environment where diagram styling may need to follow a changing interface.
Mermaid is a syntax for describing diagrams in text, while Mermaid.js is a JavaScript implementation that renders them. Pele positions itself as another way to render that syntax. Its site includes examples, an API, theming guidance, and a compatibility section for comparing syntax, layout, and features. The supplied source does not identify a release date, version number for Pele, or a detailed compatibility report.
““Color changes apply without re-rendering.””
— Pele project website
As an affiliate, we earn on qualifying purchases.
Benchmark and Compatibility Details
The available source does not state when Pele was released, which version is current, or what license governs the open-source project. It also does not include independent tests of the claimed rendering speeds or bundle sizes, nor explain which devices, diagrams, or build settings were used for the comparison.
The project says it supports diagram types built into Mermaid 12.1.0, but the supplied information does not list supported syntax in detail or establish whether every feature renders identically to Mermaid.js. The site points users to a compatibility section, but no results from that comparison are included here. Actual fit for a particular application therefore depends on testing its diagrams and checking the project’s current documentation.
As an affiliate, we earn on qualifying purchases.
Test the Renderer in Apps
Developers can evaluate Pele by installing the package, passing Mermaid text to render(), and inserting the returned SVG into a page, as shown in the project’s instructions. They can then test theme changes through CSS variables and compare diagram layout and supported syntax with their existing renderer.
No future release, roadmap milestone, or independent benchmark is identified in the supplied material. Further clarity would come from published test methods, versioned compatibility details, and confirmation of how the project handles Mermaid syntax outside the stated 12.1.0 feature set.
As an affiliate, we earn on qualifying purchases.
Key Questions
What does Pele do?
Pele converts Mermaid syntax into SVG diagrams that can be inserted into a web page or application, according to its website.
How are Pele diagrams themed?
The project uses CSS variables for colors and fonts. Pele says changes to those variables can update the diagram’s appearance without re-rendering it.
How does Pele compare with Mermaid.js?
Pele reports a 230 kB gzip 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-published comparisons; the supplied source does not give independent verification or test conditions.
Does Pele support Mermaid diagram types?
Pele says it supports every diagram type built into Mermaid 12.1.0. The supplied material does not provide a full feature list or establish identical rendering for every syntax feature.
Who developed Pele?
The project says it is open source and was developed for Obsidian to render diagrams quickly and match the application’s theme.
Source: hn
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
