Pele

Overview

Pele is a lightweight open source library developed for Obsidian that renders Mermaid diagrams to SVG. It is synchronous, has no runtime dependencies, and uses CSS variables for colors and fonts. Pele supports every diagram type built into Mermaid 12.1.0.

Key Features

• Renders Mermaid syntax to SVG and supports every diagram type built into Mermaid 12.1.0.
• Themes diagrams with CSS variables for colors and fonts; color changes apply without re-rendering.
• Has zero runtime dependencies and a 230 kB gzip bundle, compared with 1.6 MB for Mermaid.js.
• Adapts diagram layout to small screens and container width when mounted in a browser.
• Provides render(), mount(), renderAsync(), and individual diagram registration for bundle control.
• Escapes diagram text, filters links and styles, and limits source and output size.

Use Cases

• Render Mermaid diagrams in web apps by passing Mermaid syntax to render() and inserting the returned SVG.
• Mount diagrams into browser elements with mount(), which reads fonts from CSS and adapts layout to container width.
• Match an application or editor theme by setting CSS variables on the diagram or a parent element.
• Render diagrams quickly in Obsidian and match the app theme.

Getting Started

• Install Pele with npm install pele, pnpm add pele, yarn add pele, or bun add pele.
• Alternatively, load the browser build from a CDN with a script tag.
• Import render from pele, pass Mermaid syntax to render(), and insert the returned svg into the page.
• In a browser, use mount() to render into an element, read fonts from CSS, and adapt layout to the container width.

Deployment & Requirements

• Install from npm, pnpm, yarn, or bun, or load Pele from a CDN in the browser.
• The library has no runtime dependencies.

Before You Adopt

• License: Other. Review its terms before using, modifying, or distributing the project.
• Pele targets Mermaid 12.1.0 syntax but uses its own layout and visual style, so output may differ from Mermaid.js.
• Handling untrusted diagrams requires following Pele's security guidance for errors and icons.