Obsidian CEO @kepano has open-sourced a Mermaid diagram rendering library called "Pele", which completely rewrites the parsing and rendering of all Mermaid 12.1.0 syntax, outputting SVG with zero runtime dependencies. It is not a wrapper or fork of mermaid.js; it is an independently implemented replacement covering everything from lexical analysis and the layout engine to SVG generation, and it will become Obsidian's built-in renderer in the next version.
Open-source repository: https://github.com/obsidianmd/pele
The data comparison between Pele and mermaid.js is striking!
Bundle (gzip): 230 kB vs. 1.6 MB (about 6×)
Rendering time: 0.05–0.3 ms vs. 6–82 ms (up to about 500×)
Direct dependencies: 0 vs. 23
Architecture: why it is so fast and so small
Writing its own parser. The source code has about 30 diagram types, each with an independent lexer → parser → model → render pipeline, with no reference to Mermaid's runtime code. The parser verifies syntax compatibility through Mermaid's official parser spec and differential fuzzing.
Its own layout engine. src/layout/ contains three custom layouts: layered (about 78 KB, the core), lanes, and compound nested layout. This means Pele drops dependencies like dagre and d3 from the mermaid.js dependency chain; those 23 direct dependencies are the main source of mermaid.js's size and speed problems.
Synchronous rendering. render(text) returns the SVG string directly, with no asynchronous lifecycle. The key to making this work lies in the difference in text measurement: the browser side uses canvas measurement, while environments without a DOM (such as Node) use a built-in character width table, and a custom measurer can be injected. Text measurement determines node dimensions, and this is the fundamental reason most diagram libraries are forced to wait asynchronously for the DOM. Pele solves this with synchronous measurement.
Decoupling themes from rendering. Colors, fonts, and corner radii are all delivered through CSS variables (--pele-fg, --pele-surface, chart series colors --pele-series-1 through --pele-series-8, etc.), so no colors are hardcoded in the SVG. Switching between light and dark themes only requires the browser to re-resolve the variables, with no re-rendering needed. For a scenario like Obsidian, where themes switch in real time and a single note may contain dozens of diagrams, this is a precisely targeted architectural choice.