Pele – 可主题化的 Mermaid 图表 SVG

# Pele · 可主题化的 SVG Mermaid 图表渲染 来源：https://pele.run/ ## 工作原理 编写 Mermaid 语法，Pele 将其渲染为 SVG。试试编辑下面的示例。 Mermaid ``` flowchart TD A[Mermaid 文本] --> B{流程图?} B -- 是 --> C[Pele] B -- 否 --> D[Mermaid] C --> E([SVG]) D --> E ``` 是否 Mermaid 文本 流程图? Pele SVG 使用 CSS 变量设置颜色和字体。颜色更改无需重新渲染即可生效。 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？ 零依赖，体积比 Mermaid.js 小 6 倍，渲染速度最高快 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](https://pele.run/api) 将 Pele 添加到你的应用中。 将 Mermaid 语法传递给 `render()`，并将返回的 SVG 插入到页面中。 ```javascript import { render } from 'pele'; const { svg } = render(`flowchart LR A[Mermaid 文本] --> B[SVG]`); document.querySelector('#diagram').innerHTML = svg; ``` ## 探索 ### [示例](https://pele.run/examples) 浏览支持的图表类型。### [API](https://pele.run/api) 在你的应用中渲染图表。### [主题定制](https://pele.run/theming) 使用 CSS 变量设置颜色和字体。### [兼容性](https://pele.run/compatibility) 与 Mermaid 的语法、布局和功能进行对比。 ## Pele 的应用案例 Pele 是[开源项目](https://github.com/obsidianmd/pele)，由 [Obsidian](https://obsidian.md/) 开发，用于快速渲染图表并匹配你的主题风格。它的名字来源于火山与火之女神 [Pele](https://en.wikipedia.org/wiki/Pele_(deity))。