Pele工具发布：轻量级Mermaid转SVG渲染器

开发者 Pele 推出了一款名为 Pele 的工具，旨在将 Mermaid（俗称“美人鱼语法”）图表文本直接渲染为 SVG 格式。该项目强调轻量级与可主题化特性，支持通过 CSS 变量自定义颜色和字体。

核心功能与示例

Pele 允许用户编写标准的 Mermaid 流程图代码并生成矢量图形。以下是一个基本的流程表示例：

flowchart TD
  A[Mermaid text] --> B{Flowchart?}
  B -- Yes --> C[Pele]
  B -- No --> D[Mermaid]
  C --> E([SVG])
  D --> E

在样式定制方面，Pele 采用 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 vs. 传统方案

根据官方提供的数据，Pele 在包体积、渲染速度及依赖管理上相较于未使用该工具的方案具有显著优势：

安装与集成

开发者可通过主流包管理器安装 Pele：

npm install pele

pnpm add pele

yarn add pele

bun add pele

集成过程中，调用 render API 获取生成的 SVG 字符串，并将其插入页面 DOM 中即可。示例用法如下：

import { render } from 'pele';

const { svg } = render(`flowchart LR
  A[Mermaid text] --> B[SVG]`);

document.querySelector('#diagram').innerHTML = svg;