Pele 发布：把 Mermaid 语法渲染为可主题化 SVG 的零依赖库
Pele – Mermaid diagrams as themeable SVG
Pele 是一个开源库，把 Mermaid 语法渲染成 SVG，主打零依赖和体积、速度优势。官方对比称 gzip 后体积 230 kB（Mermaid.js 为 1.6 MB），渲染耗时 0.05–0.3 ms（Mermaid.js 为 6–82 ms），直接依赖 0 个（Mermaid.js 为 23 个），并支持 Mermaid 12.1.0 内置的全部图表类型。
工作原理 编写 Mermaid 语法，Pele 将其渲染为 SVG。 试试编辑下面的示例。 Mermaid flowchart TD A[Mermaid text] --> B{Flowchart?} B -- Yes --> C[Pele] B -- No --> D[Mermaid] C --> E([SVG]) D --> E 使用 CSS 变量设置颜色和字体。 颜色更改无需重新渲染即可生效。
CSS .pele { --pele-bg: #fffcf0; --pele-fg: #100f0f; --pele-muted: #6f6e69; --pele-line: #100f0f; --pele-surface: #f2f0e5; --pele-surface-alt: #e6e4d9; --pele-border: #cecdc3;} Pele 为什么选择 Pele？ 零依赖，体积小 6 倍，速度比 Mermaid.js 快至多 500 倍。
Pele 支持 Mermaid 12.1.0 内置的所有图表类型。 Pele Mermaid.js 打包体积（gzip） 230 kB 1.6 MB 渲染时间 0.05–0.3 ms 6–82 ms 直接依赖 0 23 小屏幕 自适应布局 缩放图表 主题 CSS 变量 主题配置 在应用中使用 Pele 使用 API 将 Pele 添加到你的应用中。 npm install pele 将 Mermaid 语法传给 render() ，并将返回的 SVG 插入你的页面。
import { render } from 'pele';const { svg } = render(`flowchart LR A[Mermaid text] --> B[SVG]`);document.querySelector('#diagram').innerHTML = svg; 探索 示例 浏览支持的图表类型。 API 在你的应用中渲染图表。 [ 主题 使用 CSS 变量设置颜色和字体。 ]( https://pele.run/theming)[ 兼容性 与 Mermaid 比较语法、布局和功能。
]( https://pele.run/compatibility ) Pele 的实际应用 Pele 是 开源 的，为 Obsidian 开发，用于快速渲染图表并匹配你的主题。 它以火山与火焰女神 Pele 命名。
来源：Hacker News · pele.run