Pele – Mermaid 图表作为可主题化的 SVG

Pele – Mermaid 图表作为可主题化的 SVG
Pele – Mermaid diagrams as themeable SVG

Pele 是一个轻量、快速的 Mermaid.js 替代品，用于将 Mermaid 图表语法渲染为 SVG。它零依赖，体积缩小 6 倍（gzip 后 230 kB 对比 1.6 MB），速度最高快 500 倍（0.05–0.3 毫秒对比 6–82 毫秒），同时支持 Mermaid 12.1.0 的所有图表类型。Pele 提供基于 CSS 变量的主题，颜色和字体可无需重新渲染即可更改，并针对小屏幕调整布局而非缩放。可通过 npm、pnpm、yarn 或 bun 安装，并通过返回 SVG 的简单 render() API 使用。开源且为 Obsidian 打造，Pele 以火山与火之女神命名。

Pele 是一个工具，将 Mermaid 风格的图表渲染为可主题化的 SVG，评论者称赞其布局比 Mermaid 有所改进。其创建者表示 Pele 遵循 Mermaid 的语法，但不使用其布局引擎，并指引用户查看示例和带比较模式的 playground。讨论主题包括视觉图表差异对比、Pele 是否能合并到 Mermaid、D2 和 ELK 等替代布局工具，以及使用 LLM 生成图表。该项目似乎在 github.com/obsidianmd/pele 开源。评论者还报告了一些小问题，例如 Mermaid 预览损坏和对深色模式不友好的示例，并指出该工具对 AI 辅助的 markdown 工作流很有用。

How it works

Write Mermaid syntax, Pele renders it to SVG. Try editing the example below.

1flowchart TD2  A[Mermaid text] --> B{Flowchart?}3  B -- Yes --> C[Pele]4  B -- No --> D[Mermaid]5  C --> E([SVG])6  D --> E

Use CSS variables to set colors and fonts. Color changes apply without re-rendering.

1.pele {2  --pele-bg: #fffcf0;3  --pele-fg: #100f0f;4  --pele-muted: #6f6e69;5  --pele-line: #100f0f;6  --pele-surface: #f2f0e5;7  --pele-surface-alt: #e6e4d9;8  --pele-border: #cecdc3;9}

Pele

Why Pele?

Zero dependencies, 6× smaller, and up to 500× faster than Mermaid.js. Pele supports every diagram type built into Mermaid 12.1.0.

	Pele	Mermaid.js
Bundle size gzip	230 kB	1.6 MB
Render time	0.05–0.3 ms	6–82 ms
Direct dependencies	0	23
Small screens	Adapts the layout	Scales the diagram
Theming	CSS variables	Theme configuration

Pele in your app

Add Pele to your app using the API.

Pass Mermaid syntax to render() and insert the returned SVG into your page.

1import { render } from 'pele';23const { svg } = render(`flowchart LR4  A[Mermaid text] --> B[SVG]`);56document.querySelector('#diagram').innerHTML = svg;

Explore

Pele in use

Pele is open source, developed for Obsidian to render diagrams quickly and match your theme. It is named after Pele, the goddess of volcanoes and fire.

Pele – Mermaid 图表作为可主题化的 SVG Pele – Mermaid diagrams as themeable SVG

Pele – Mermaid 图表作为可主题化的 SVG
Pele – Mermaid diagrams as themeable SVG