pele — Obsidian 新渲染器｜零依赖的 Mermaid 渲染库，比 Mermaid.js 快数百倍

pele 是一套把 Mermaid 图表语法渲染成 SVG 的开源库，由 Obsidian 团队开发、以 MIT 协议发布。它体量小、同步执行、没有运行时依赖，颜色和字体全部交给 CSS 变量控制。它的名字来自夏威夷火山女神，官网提供完整文档和在线 playground，可直接贴入 Mermaid 文本试效果。输出的是可直接嵌入页面的 SVG 矢量图，放大不失真，也便于按主题着色。作为开源软件，它托管在 GitHub 的 obsidianmd 组织下，通过 npm 安装，也可以直接从 CDN 引入，是典型的即装即用 Web 基础库。

场景痛点

在网页或笔记里渲染 Mermaid 图表，主流做法是引入 mermaid.js，图表一多就有代价：包体积上百 KB 起步，渲染要等异步初始化，页面打开时图表先空白、再跳动。对前端开发来说，暗色主题还要单独传配置，移动端往往只能整体缩放，手机上字小得看不清，图多了还会拖慢整篇文档的加载。开发者工具的依赖链一旦深了，体积和初始化都会变成性能负担；对笔记软件而言，渲染器随主程序打包，这份体积会直接算进安装包。

主要功能特点

体积小 6 倍，渲染最高快 500 倍

官网给出的对比数据是：gzip 后约 230 kB，mermaid.js 约 1.6 MB；单张图渲染约 0.05–0.3 毫秒，mermaid.js 约 6–82 毫秒，最高相差约 500 倍。效率工具图表越多、页面越复杂，差距越明显，长文档里的图不必排队等渲染，打开时也不会成片空白，更不会先空白再跳一下。

零运行时依赖，同步出图

没有运行时依赖，而 mermaid.js 自带 23 个直接依赖；它的渲染是同步的，调用后立刻拿到 SVG，不需要等待异步初始化。软件开发同步模型让测试、服务端渲染和批量转换都更直接，代码里不存在“图表还没准备好”的时间窗。在 Node 服务端或构建脚本里批量把图表转成 SVG，也不必模拟浏览器环境运行。

覆盖 Mermaid 12.1.0 全部图表类型

支持 Mermaid 12.1.0 内置的全部图表类型，流程图、时序图、甘特图、类图等常见类型都在覆盖范围内。软件工具它对标的是 Mermaid 官方解析器规范，同时有自己的布局和视觉风格；解析器通过 Mermaid 的官方测试用例，并用差分 fuzzing（模糊测试）持续对照，避免同一份文本在两个渲染器里给出不同结果。

三行代码接入，也能按需加载

作为实用软件它够省心：npm 安装后 import render，传入 Mermaid 文本就能得到 SVG；浏览器端用 mount 渲染到元素，按容器宽度自适应。开发工具也可从 pele/core 注册部分类型，或用 pele/lazy 按需加载，压缩首屏体积。解析失败时 API 抛出错误，可按自己的界面展示。

CSS 变量做主题，换色不用重绘

颜色、字体走 CSS 变量。设计资源切换主题改变量即可，颜色立即变化、无需重新渲染。小屏幕上它重新布局而非简单缩放，手机上的流程图仍能看清结构。把外观交给宿主页面后，库不做多余的视觉干预，这在有趣软件里并不多见。

为 Obsidian 打造，内置安全处理

由 Obsidian 团队为 Obsidian 打造，让图表快速渲染并贴合主题，playground 由创始人 kepano 维护。工具推荐作为开源项目，它对不可信图表做文本转义、链接与样式过滤，并限制输入输出体积。它以 MIT 协议发布，测试所用 Mermaid 规范同样来自 MIT 生态。酷软趣站里这种由成熟产品团队维护、又对外开放的基础库并不多见。

官方网站

官网访问

GitHub 访问

下载地址

https://pan.quark.cn/s/f743a48dda76

pele — Obsidian 新渲染器｜零依赖的 Mermaid 渲染库，比 Mermaid.js 快数百倍

场景痛点