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 with CSS variables. Its website reports smaller bundles and faster rendering than Mermaid.js, though the figures are developer-reported and no independent testing is provided in the supplied material.
Pele, an open-source JavaScript tool for rendering Mermaid diagrams as SVG, lets developers change diagram colors and fonts with CSS variables without rendering the diagram again. The project presents itself as a lightweight alternative for apps that need Mermaid-style diagrams to fit an interface’s visual theme.
On its website, Pele describes a workflow in which a developer supplies Mermaid syntax and receives an SVG. Its API example imports the render function from the pele package, passes it a flowchart, and inserts the returned SVG into a page. The site lists npm install pele as the installation command.
The project exposes CSS variables for background, foreground, muted text, lines, surfaces and borders, among other theme choices. Pele says changes to these variables take effect without re-rendering. That approach can let a diagram respond to surrounding CSS or a theme change, while keeping the diagram output as SVG.
Pele’s comparison table lists a 230 kB gzipped bundle and render times of 0.05–0.3 milliseconds. For Mermaid.js, the same table gives 1.6 MB and 6–82 milliseconds. Pele also says it has zero direct dependencies, adapts layouts for small screens, and supports every diagram type built into Mermaid 12.1.0. These are figures and compatibility claims published by the project; the supplied material does not include independent benchmarks or a test methodology.
Theme Changes Without Redrawing
For developers embedding diagrams in documentation, note-taking apps or other web interfaces, the practical distinction is that appearance can be controlled with CSS after the SVG is generated. That may simplify matching diagrams to light and dark themes or to an application’s own colors, compared with workflows that rely on a separate renderer configuration for each appearance.
The size and speed figures matter most for applications that render many diagrams or have tight limits on download size and responsiveness. If Pele’s published comparisons hold in a given environment, a smaller package and shorter render times could reduce those costs. But the numbers alone do not establish how the tools compare across different diagram types, devices or production workloads; the project page does not describe the conditions behind its measurements.
Compatibility is another key consideration. Pele says it supports diagram types built into Mermaid 12.1.0, but teams relying on particular syntax or features will need to check the project’s compatibility information and test their own diagrams before switching. The source material does not identify a release number or state whether support covers later Mermaid versions.
As an affiliate, we earn on qualifying purchases.
Built for Obsidian Rendering
Pele says it is open source and was developed for Obsidian, with the goal of rendering diagrams quickly and matching them to the user’s theme. Obsidian is the stated origin of the project, rather than evidence that Pele is an official part of the app or that it has been adopted by other products.
The project takes Mermaid text as input, a format used to describe diagrams in plain text, and produces SVG output for a webpage. Its site presents examples, an API, theme variables and compatibility information as separate areas for developers exploring the tool. The source identifies Pele’s namesake as Pele, the goddess of volcanoes and fire.
The comparison is specifically against Mermaid.js, and the compatibility statement is tied to Mermaid 12.1.0. The supplied report does not give a release date, version history, license details, or adoption figures. Those omissions mean the announcement is best understood as a project and feature description, not evidence of broad deployment or independently verified performance.
“Color changes apply without re-rendering.”
— Pele project website
As an affiliate, we earn on qualifying purchases.
Benchmark and Compatibility Limits
The supplied project material does not say when Pele was released, which version is current, or whether its published size and speed figures were measured independently. It also does not specify the devices, diagrams, or configuration used for the comparisons with Mermaid.js, so the results should be treated as developer-reported rather than universal performance guarantees.
The claim of support for every diagram type in Mermaid 12.1.0 does not clarify compatibility with later Mermaid releases or every edge case in Mermaid syntax. The source also does not provide details about the project’s license, maintenance schedule or adoption. Developers considering it for an application will need to verify those points and test the diagrams and themes they depend on.
As an affiliate, we earn on qualifying purchases.
Test Pele Against Your Diagrams
The next practical step for developers is to review Pele’s examples, API and compatibility information, then try rendering representative Mermaid diagrams in their own application. Testing should include the diagram types in use, small-screen layouts, and changes between the application’s themes, as well as bundle size and render performance in the intended environment.
The project page does not announce a roadmap, release date or planned milestone. Any changes to Mermaid-version support, benchmark data or project maintenance will need to be confirmed through Pele’s own documentation or future updates; none are specified in the supplied report.
diagram theme customization software
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Key Questions
What does Pele do?
Pele converts Mermaid syntax into SVG for use in web applications. Its website also describes an API for rendering diagrams and inserting the resulting SVG into a page.
How does Pele handle themes?
The project provides CSS variables for colors and fonts. Pele says changing those variables updates the diagram’s appearance without rendering it again.
How does Pele compare with 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-published comparisons; the supplied material does not give an independent test or methodology.
Which Mermaid diagrams does Pele support?
Pele says it supports every diagram type built into Mermaid 12.1.0. The source does not clarify support for later Mermaid versions or all syntax edge cases, so developers should check compatibility with their own diagrams.
Is Pele an Obsidian feature?
The project says it was developed for Obsidian, but the supplied material describes Pele as an open-source tool and does not state that it is an official Obsidian feature.
Source: hn
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
