Pele

Pele is an open source JavaScript/TypeScript library that renders Mermaid diagram syntax to SVG. It was developed for Obsidian and is released under the MIT license. The project says it is synchronous, has no runtime dependencies, and supports every diagram type built into Mermaid 12.1.0.

What It Is

Pele takes Mermaid text and returns SVG that can be inserted into a page. It can be installed from npm or loaded from a CDN. In a browser, a mount function renders into an element, reads fonts from CSS, and adapts the layout to the container width. The project also provides a documentation site with examples and an in-browser playground.

Theming and Bundle Control

Colors and fonts are set with CSS variables such as background, foreground, line, surface, border and accent, plus series colors for charts. Color changes apply without re-rendering. The main entry point includes all diagram types, while a core entry lets developers register individual diagram types, and a lazy entry loads them on demand to reduce initial bundle size.

Compatibility and Security

Pele targets Mermaid 12.1.0 syntax with its own layout and visual style. The README says its parsers are tested against Mermaid's parser specs and with differential fuzzing. For security, it escapes diagram text, filters links and styles, and limits source and output size. The project site compares itself with Mermaid.js, claiming a smaller bundle, zero dependencies and faster render times.