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，这是 kepano 开发的一款工具，可将 Mermaid 风格的图表渲染为可主题化的 SVG。与 Mermaid.js 不同，Pele 不使用 Mermaid 的布局，旨在生成更清晰、更直观的图表并更便于样式设置。评论者称赞其输出效果、深色模式支持、服务端/静态站点渲染以及与文档的集成。一些人表示因布局不佳、浏览器依赖和主题设置困难而从 Mermaid.js 转用。其他人则比较了 D2、GraphViz、TikZ 和 Arcentry 等替代方案。担忧包括 Mermaid 转向 AI、安全问题以及损坏的 playground 示例。Pele 是 GitHub 上的开源项目（obsidianmd/pele）。用户还建议了视觉差异对比等功能。总体而言，Pele 被视为一种实用且便于版本控制的方式，可从 Mermaid 语法生成干净的 SVG 图表。

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