Hacker News Best

Pele – Mermaid diagrams as themeable SVG

8.5内容质量

TL;DR · AI 摘要

Pele是轻量级开源库，将Mermaid图表渲染为可主题化SVG，体积比Mermaid.js小6倍，速度最快达500倍。

核心要点

  • Pele体积仅Mermaid.js的1/6，gzip压缩后仅1.6MB
  • 支持Mermaid 12.1.0所有图表类型，无直接依赖
  • 通过CSS变量实现主题定制，无需重新渲染

结构提纲

按章节快速跳转。

  1. §引言

    介绍Pele库的核心功能：将Mermaid语法转换为可主题化SVG。

  2. ·工作原理

    通过CSS变量实现主题定制，无需重新渲染即可应用颜色和字体变化。

  3. ·性能对比

    体积比Mermaid.js小6倍，渲染速度最快达500倍。

  4. ›使用方法

    提供npm/yarn/pnpm/bun安装命令及SVG渲染代码示例。

  5. ·应用场景

    专为Obsidian开发，用于快速渲染主题匹配的图表。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • Pele：Mermaid SVG渲染库
    • 核心功能
      • Mermaid语法转SVG
      • CSS变量主题定制
    • 性能优势
      • 体积缩小6倍
      • 速度提升500倍
    • 使用场景
      • Obsidian插件
      • 前端图表渲染

金句 / Highlights

值得收藏与分享的关键句。

#Mermaid#SVG#前端库#CSS变量
打开原文

Pele · Mermaid diagrams as themeable SVG

Pele is a lightweight open source library that renders Mermaid diagrams to SVG, themed with CSS variables .

How it works

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

Mermaid

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

Pele

Open in

Playground

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

CSS

code
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
}

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.

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 .

npm

pnpm

yarn

bun

code
1
npm
install pele
code
1
pnpm
add pele
code
1
yarn
add pele
code
1
bun
add pele

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

code
1
import
{
render
}
from
'
pele
'
;
2
3
const
{
svg
}
=
render
(
`
flowchart LR
4
A[Mermaid text] --> B[SVG]
`
)
;
5
6
document
.
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.