Pele

项目简介

Pele 是一个为 Obsidian 开发的轻量开源库，可将 Mermaid 图表渲染为 SVG。它同步渲染，没有运行时依赖，并使用 CSS 变量控制颜色和字体。Pele 支持 Mermaid 12.1.0 内置的全部图表类型。

核心功能

• Pele 可将 Mermaid 语法渲染为 SVG，并支持 Mermaid 12.1.0 内置的全部图表类型。它使用 CSS 变量设置颜色和字体，颜色变化无需重新渲染。它具有零运行时依赖，gzip 包体约 230 kB，而 Mermaid.js 为 1.6 MB。在浏览器中挂载时，它会根据小屏幕和容器宽度调整图表布局。它提供 render()、mount()、renderAsync() 以及按图表类型单独注册，以控制包体大小。它会转义图表文本、过滤链接和样式，并限制源内容与输出大小。

适用场景

• 在 Web 应用中，可将 Mermaid 语法传给 render() 并插入返回的 SVG 来渲染图表。使用 mount() 可将图表挂载到浏览器元素中，从 CSS 读取字体，并让布局适应容器宽度。可通过在图表或父元素上设置 CSS 变量来匹配应用或编辑器主题。在 Obsidian 中可快速渲染图表并匹配应用主题。

快速开始

• 使用 npm install pele、pnpm add pele、yarn add pele 或 bun add pele 安装 Pele。也可以通过 script 标签从 CDN 加载浏览器构建。从 pele 导入 render，将 Mermaid 语法传给 render()，再把返回的 svg 插入页面。在浏览器中，使用 mount() 将图表渲染到元素中，从 CSS 读取字体，并让布局适应容器宽度。

部署与要求

• 可从 npm、pnpm、yarn 或 bun 安装，也可在浏览器中通过 CDN 加载 Pele。该库没有运行时依赖。

采用前须知

• 许可证：Other。在使用、修改或分发项目前，请确认其具体条款。