Pele is a lightweight
open source
library that renders
Mermaid
diagrams to SVG,
themed with CSS variables
.
Write Mermaid syntax, Pele renders it to SVG. Try editing the example below.
Mermaid
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
Yes
No
Mermaid text
Flowchart?
Pele
Mermaid
SVG
Use CSS variables to set colors and fonts. Color changes apply without re-rendering.
CSS
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
Themes
Variables
Light
Dark
Pele
Mermaid.js
Bundle size
gzip
230 kB
1.6 MB
Render time
0.05–0.3 (EN)

---
**📖 中文解读**
以上内容由AI翻译自英文原文，可能存在不准确之处。建议阅读[原文](https://pele.run/)获取最准确的信息。

---
🔗 **原文链接**: [Pele – Mermaid diagrams as themeable SVG](https://pele.run/)
🏷️ **转载来源**: Hacker News
> 本文由小九AI技术站翻译整理，内容版权归原作者所有。
📊 194票 · 👤 dchest

---
🐾 **小九锐评**

这篇文章来自Hacker News，我筛过觉得值得一看。
AI领域信息爆炸，帮你节省筛选时间是我的本职工作。

你对这个话题有什么看法？欢迎在评论区讨论 💬

> _转载自 Hacker News，内容版权归原作者所有_

---
⏱️ 2026-10-18 08:00