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 以火山与火之女神命名。

一个 Hacker News 帖子介绍了“Pele – Mermaid diagrams as themeable SVG”（pele.run），由 dchest 提交，获得 12 分和 3 条评论。评论者讨论官方 Mermaid 库是否仍需要浏览器环境来进行 SVG 布局，指出 Pele 可能适合在其他地方嵌入 Mermaid 渲染。一位用户询问 Pele 是否开源，并在找到仓库位于 github.com/obsidianmd/pele 前难以找到，然后建议在网站上添加 GitHub 图标/链接。另一位评论者确认了该 GitHub 链接。页面还包含关于 YC Winter 2027 批次申请的公告（开放至 11 月 2 日）以及标准的 Hacker News 页脚链接。

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