Pele：支持主题定制的 SVG Mermaid 图表渲染器

输入 Mermaid 语法，Pele 将其渲染为 SVG。试一试，编辑下方的示例。

1flowchart TD2  A[Mermaid text] --> B{Flowchart?}3  B -- Yes --> C[Pele]4  B -- No --> D[Mermaid]5  C --> E([SVG])6  D --> E

使用 CSS 变量设置颜色和字体。颜色更改无需重新渲染即可生效。

1.pele {2  --pele-bg: #fffcf0;3  --pele-fg: #100f0f;4  --pele-muted: #6f6e69;5  --pele-line: #100f0f;6  --pele-surface: #f2f0e5;7  --pele-surface-alt: #e6e4d9;8  --pele-border: #cecdc3;9}

使用 API 将 Pele 集成到你的应用中。

1npm install pele

1pnpm add pele

1yarn add pele

1bun add pele

将 Mermaid 语法传递给 render()，并将返回的 SVG 插入到页面中。

1import { render } from 'pele';23const { svg } = render(`flowchart LR4  A[Mermaid text] --> B[SVG]`);56document.querySelector('#diagram').innerHTML = svg;