pele：Obsidian 团队出品的零依赖

30秒速读：页面里图表一多，渲染常常先空白、再跳动，包体积也跟着变大。本篇讲这套渲染库如何零依赖、同步输出矢量图，包括体积与速度对比、图表覆盖范围、接入方式与主题做法。

pele 是一套把 Mermaid 图表语法直接渲染成 SVG 的开源库，由 Obsidian 团队开发、以 MIT 协议发布。它体量小、同步执行、没有任何运行时依赖，颜色和字体全部交给 CSS 变量控制。名字取自夏威夷火山女神，官网提供完整文档和在线 playground，可以直接贴入 Mermaid 文本试效果。输出的是可直接嵌入页面的 SVG 矢量图，放大不失真，也便于按主题着色。安装方式很简单：npm 安装即可，也可以直接从 CDN 引入。

场景痛点

在网页或笔记里渲染 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 的官方测试用例，并用差分模糊测试持续对照，避免同一份文本在两个渲染器里给出不同结果。

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

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

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

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

为 Obsidian 打造，内置安全处理

由 Obsidian 团队为 Obsidian 打造，让图表快速渲染并贴合主题。作为开源项目，它对不可信图表做文本转义、链接与样式过滤，并限制输入输出体积。它以 MIT 协议发布，测试所用 Mermaid 规范同样来自 MIT 生态。

开源地址

前往 GitHub 项目主页

GitHub 国内访问较慢，如打不开可多刷新几次

软件信息一览

版本对比与推荐

推荐版本：优先用全量接入版，稳定可用；只有首屏体积确实敏感时，再改用按需加载版。

安装步骤

1. 装包：用 npm 安装即可，浏览器端也可以直接从 CDN 引入，具体入口以官网说明为准。
2. 调一次渲染：引入 render 函数，传入 Mermaid 文本，确认能立刻拿到 SVG，不用等异步初始化。
3. 浏览器端挂载：用 mount 渲染到页面元素，确认图表按容器宽度自适应，小屏幕上是重新布局而不是整体缩小。
4. 接好解析失败处理：解析失败时接口会抛出错误，先在界面上给一句可读提示，不要让页面空白。

必改设置

设置一：CSS 变量主题

入口：宿主页面里的 CSS 变量。差别：颜色、字体全部走变量，切换主题改变量即可，颜色立即变化、无需重新渲染；暗色主题不用再单独传配置。

设置二：按需加载范围

入口：按需加载的注册设置。差别：只注册用到的图表类型或懒加载，首屏体积更小；类型注册不全时对应图表会出不来，上线前要把页面用到的类型过一遍。

设置三：小屏幕布局确认（通用建议）

入口：容器宽度与页面布局设置。差别：这套库在小屏幕上重新布局而非简单缩放，手机上流程图仍能看清结构；上线前用手机宽度实测一次，比只在桌面端看更保险。

注意事项与常见问题

• 12.1.0 是图表规范版本：它对标的是 Mermaid 12.1.0 内置的全部图表类型，不是这套库自身的版本号，选型时不要把两者混为一谈。
• 图多时差距才明显：单张图差距有限，长文档、多图表页面打开时不排队等渲染、不成片空白，才是它省时间的地方。
• 不可信图表有安全处理：对不可信图表做文本转义、链接与样式过滤，并限制输入输出体积；用户可提交的内容不要绕过这层处理直接渲染。
• 服务端批量转换：同步模型让测试、服务端渲染和批量转换更直接，不必模拟浏览器环境运行，具体做法以官网说明为准。

推广

关注「软件教程管家」

回复软件名即取即下：网盘下载链接 + 提取码，一步直达，不用再跳转。

相关推荐

开源项目WallpaperMachine 免费下载开发node-rs 免费下载｜Rust 原生绑定包集合开发Roundhouse 免费下载｜Ruby 静态分析开发Flatcar Container Linux 免费下载开发Nature Skills 免费下载开发bddisasm 免费下载｜轻量级 C 指令解码库