Pele: Themeable SVG Rendering for Mermaid

Pele is a streamlined, open-source library designed to transform Mermaid diagram syntax into SVG format, utilizing CSS variables for seamless theming.

How it Works

The logic for choosing between the standard library and Pele can be visualized as follows:

---

🎨 Customizing the Look

Pele allows you to control the visual style of your diagrams directly through CSS. By defining specific variables, you can create light, dark, or custom themes.

.pele {
  --pele-bg: #fffcf0;           /* Background color */
  --pele-fg: #100f0f;           /* Foreground/Text color */
  --pele-muted: #6f6e69;        /* Muted text */
  --pele-line: #100f0f;         /* Line/Stroke color */
  --pele-surface: #f2f0e5;      /* Surface color */
  --pele-surface-alt: #e6e4d9;  /* Alternative surface */
  --pele-border: #cecdc3;       /* Border color */
}

---

🚀 Why choose Pele?

Pele is built for efficiency. It boasts zero dependencies, a significantly smaller footprint, and extreme performance gains.

Performance Comparison

When comparing Pele to the original Mermaid.js, the difference is stark:

In terms of raw speed, the performance increase can be represented as: $\text{Performance Gain} \approx 500\times$

---

🛠️ Integration Guide

Installation

Depending on your preferred package manager, run one of the following:

• npm install pele
• pnpm add pele
• yarn add pele
• bun add pele

Implementation

To use Pele in your application, import the render function, pass your Mermaid string to it, and inject the resulting svg into your DOM.

import { render } from 'pele';

// Define your diagram syntax
const { svg } = render(`
  flowchart LR
  A[Mermaid text] -- B[SVG]
`);

// Insert the SVG into the page
document.body.innerHTML = svg;

---

📖 About the Project

Pele is an open-source project. It was originally engineered for Obsidian to ensure that diagrams render instantaneously while perfectly matching the user's active theme.