TOPIC COLLECTION
Pele是什么：Obsidian开源的Mermaid图表渲染器，体积小6倍、出图快几百倍，网页和笔记里怎么用
Pele是Obsidian团队开源的Mermaid渲染库，把Mermaid文本直接渲染成可用CSS变量换色的SVG，官方给出gzip后230kB、单图0.05–0.3毫秒、零依赖，支持Mermaid 12.1.0内置的全部图表类型；10-17发布的1.6.0让渲染错误直接显示在图表里。
资料更新：2026-10-19
依据pele.run官网与GitHub obsidianmd/pele Releases（1.6.0于2026-10-17发布）。性能数字为官方数据，本站未做基准测试。核查2026-10-19（新加坡时间）。
主题标签：Pele、Mermaid、Obsidian、流程图、前端开源库
Pele是一个把Mermaid图表代码渲染成SVG的开源JavaScript库，由Obsidian团队开发，起初就是为了让Obsidian里的图表画得更快、更贴合主题。你照常写Mermaid语法，它负责出图；换颜色和字体只改CSS变量，不用重新渲染。最近一次更新是2026-10-17的1.6.0。
如果你只是在笔记里画流程图，暂时不用做任何事；如果你在做文档站、博客、知识库，或者自己的产品里要显示Mermaid图，它值得认真看一眼。
和Mermaid.js差在哪
官网给了一张对比表，我们照原数据整理如下：
| 项目 | Pele | Mermaid.js |
|---|---|---|
| 打包体积（gzip） | 230 kB | 1.6 MB |
| 单图渲染时间 | 0.05–0.3 毫秒 | 6–82 毫秒 |
| 直接依赖 | 0 | 23 |
| 小屏幕 | 重新排版适应 | 整体缩放 |
| 换主题 | CSS变量 | 主题配置 |
体积这一项对静态博客影响最大。Mermaid.js压缩后1.6MB，很多站点为了几张流程图就要让每个读者多下载这么多脚本；换成230kB，首屏加载的压力小了不少。
小屏那一行对手机读者很实在：Mermaid.js在窄屏上通常是把整张图缩小，字小到看不清；Pele会改布局，比如时序图把参与者名称和消息换行，泳道图在窄屏改成竖向流程。
兼容范围方面，官方说法是支持Mermaid 12.1.0内置的所有图表类型，但不支持外部插件类图表，比如ZenUML。你的文档如果用到了这类插件，就得保留Mermaid.js。
三分钟接入
安装（npm、pnpm、yarn、bun都行）：
npm install pele最简单的用法是render()，传入Mermaid文本，拿到SVG字符串插进页面：
import { render } from 'pele';
const { svg } = render(`flowchart LR
A[需求] --> B[上线]`);
document.querySelector('#diagram').innerHTML = svg;需要随容器宽度自动重排、带缩放平移的，用mount(容器, 源码)。主题通过.pele上的CSS变量控制，例如--pele-bg、--pele-fg、--pele-line、--pele-border，深浅色切换时改变量即可，图不用重画。
不想走打包工具的，1.5.0起提供了pele/global，用一个script标签引入后全局变量就是pele，适合老式静态站。
最近几版改了什么
- 1.6.0（10-17）：
mount()遇到语法或渲染错误时，直接把错误显示在图表容器里；修改出错时保留上一版图并变暗，错误写在底边。新增Mounted.source、Mounted.error和--pele-error颜色变量；同页多图默认使用唯一SVG ID，避免互相串样式。注意这是一个API变化：mount()和update()的错误不再抛出，要用onError或Mounted.error处理。 - 1.5.0（10-15）：加入
sanitize选项，可以把SVG先交给你自己的清洗函数再插入页面；新增onError回调；移除了Mounted.fit()等旧接口。 - 1.4.0（10-14）：大幅改进窄屏布局，时序、旅程、鱼骨、泳道、C4等图都有适配。
- 1.2.0起支持
linkRel，图里所有链接默认带rel="noopener"，做SEO的可以改成noopener nofollow。
从1.4升到1.6的项目，要检查错误处理逻辑：原来靠try/catch捕获渲染失败的代码，升级后可能抓不到异常了。
把博客里的Mermaid.js换成Pele，可以这么做
- 先盘点站内用了哪些图表类型，确认没有ZenUML这类插件图表。
- 在测试环境里引入Pele，用
mount()挂到原来放图表的容器上，Mermaid源码原样传进去。 - 把站点的主色、背景色、边框色写进
.pele的CSS变量，深色模式下再覆盖一组。 - 如果图表内容来自用户输入（比如评论区、在线编辑器），一定接上
sanitize，把SVG交给你现有的清洗函数处理。 - 用手机打开几篇图多的文章，重点看时序图和泳道图在窄屏下的排版。
- 确认没问题后再移除Mermaid.js，顺手对比一下页面体积和首屏时间。
安全方面还有两个开关值得知道：1.3.0起render()支持links: false和images: false，可以把图表里的所有链接和图片都去掉，适合展示不受信任内容的场景；被拦截的链接会被直接省略，而不是换成空白页地址。
谁适合用、谁先别动
适合：自建文档站和博客、在线Markdown编辑器、要在移动端展示流程图的产品、对首屏体积敏感的页面。
先别动：重度依赖Mermaid插件图表的；项目里已经大量定制了Mermaid主题配置、迁移成本高的；只在Mermaid Live Editor里偶尔画张图的普通用户，继续用原工具就够了。
网上有说法称Obsidian会在下一个大版本把Pele设为默认渲染器，我们没在Obsidian官方更新日志里看到确认，以官方发布为准。
不写代码、只想画图的，可以看draw.io、Excalidraw、ProcessOn这类拖拽工具，或者在Typora、Logseq里直接写Mermaid。分类入口：流程图工具、Markdown编辑器、个人知识管理、前端框架与库。
常见问题
Pele收费吗？
官网写明是开源项目，代码在GitHub的obsidianmd/pele仓库，通过npm免费安装，具体许可证以仓库为准。
渲染出错时页面会白屏吗？
1.6.0之后不会。用mount()挂载的图表遇到语法错误，会在容器里直接显示错误信息；如果是更新出错，会保留上一张成功的图并调暗，错误写在底部。用户至少还能看到旧图，开发者也能马上定位是哪一行写错了。
现有Mermaid代码要改写吗？
不用。Pele吃的就是Mermaid语法，内置图表类型直接替换渲染器即可，插件类图表除外。
名字有什么含义？
官网说名字取自火山与火之女神Pele，也就是夏威夷神话里的那位。
来源与核查日期
核查日期：2026-10-19（新加坡时间）。性能数据为官方公布，实际表现取决于图表复杂度与设备。
