Pele – Mermaid diagrams as themeable SVG

489 points · 45 comments on HN · read original →

Points and comments are a snapshot, not live.

Pele renders Mermaid diagrams as SVG without a browser, with CSS variable theming.

Pele is an open-source library (from Obsidian) that converts Mermaid syntax into SVG directly, with zero browser dependencies. It claims 0.05-0.3 ms render time and a 230 kB gzip bundle, compared to Mermaid.js's 6-82 ms and 1.6 MB. Pele supports every diagram type in Mermaid 12.1.0. Theming uses CSS variables, applying color changes without re-rendering. The library is available via npm and is developed for use in Obsidian.

A comparison table shows Pele has zero direct dependencies versus Mermaid.js's 23. It also adapts layout for small screens rather than scaling, and supports theming via CSS variables rather than theme configuration.

What commenters are saying

Commenters largely welcomed Pele's lighter weight and elimination of the headless-browser requirement, which has long been a pain point for server-side Mermaid rendering. Several shared alternative tools: mermaidx (Python), Merman, and svgdom-based solutions. A split emerged around layout quality: some find Mermaid's graph layout frustrating, while others note that graph layout is a hard problem. Pele's creator responded in the thread, explaining that Pele follows Mermaid's syntax but not its layout engine.

Some commenters praised Pele's subgraph direction handling, dark-mode support, and version-control-friendly SVG output. A few noted that Pele's playground has minor issues (dark-mode unfriendly examples, broken preview in some cases), and one pointed out the name means "mouse" in Latvian, "skin" in Portuguese, and "dick" in Slovak with the accent.