输入 Mermaid 语法后，Pele 会将其渲染为 SVG，页面下方也提供了可直接编辑的示例，当前示例的渲染时间为 0.8 ms。主题配色和字体通过 CSS 变量设置，在 .pele 中用 --pele-bg、--pele-fg 等变量控制背景、前景、线条、表面和柔和色，改动颜色时无需重新渲染。
正文
工作原理
编写 Mermaid 语法，Pele 会将其渲染为 SVG。你可以试着修改下面的示例。
Mermaid
flowchart TD A[Mermaid text] --> B{Flowchart?} B -- Yes --> C[Pele] B -- No --> D[Mermaid] C --> E([SVG]) D --> E
0.8 毫秒
使用 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？
Pele 零依赖，体积比 Mermaid.js 小 6 倍，速度最高快 500 倍。Pele 支持 Mermaid 12.1.0 内置的所有图表类型。
| | Pele | Mermaid.js | | --- | --- | --- | | 打包体积（gzip） | 230 kB | 1.6 MB | | 渲染时间 | 0.05–0.3 毫秒 | 6–82 毫秒 | | 直接依赖 | 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;
Pele 的实际应用
Pele 是开源项目，为 Obsidian 开发，用来快速渲染图表并与你的主题保持一致。它的名字来源于Pele——火山与火之女神。
评论
讨论规模很小，整体偏务实：少数人看好 Pele 摆脱浏览器依赖、便于嵌入渲染，以及配合 Claude 这类人工智能在单个 Markdown 文件里协作的潜力。也有人强调 Mermaid 真正棘手的是复杂图的布局质量，且 Pele 演示预览目前就是坏的，不能只看环境依赖或样式这些表层卖点。
认为 Pele 的价值在于摆脱浏览器依赖、便于嵌入渲染
- 若官方 Mermaid 仍要靠完整或无头浏览器才能完成 SVG 布局，Pele 这种方案对把 Mermaid 渲染嵌入其他环境会很有价值（少数人） > 如果官方 Mermaid 仍需完整或无头浏览器来布局 SVG，那 Pele 对把 Mermaid 渲染嵌入别处就是个大好消息（@nickmain）
认为 Mermaid 的核心难点是复杂图的布局质量，而非样式
- 一旦图比玩具示例复杂，生成的布局就既晦涩又拓扑很差，样式反而显得不重要（少数人） > 只要超出玩具级别，Mermaid 生成的布局就既晦涩又难看，样式问题相比之下根本微不足道（@lukeify）
认为 Markdown + Mermaid 的纯文本流程特别适合人工智能协作与版本控制
- 单文件 Markdown 让 Claude 能直接编辑、绘图并保存，既实用又利于版本控制，是人工智能发挥的场景（少数人） > 这类工具让 Claude 能编辑、绘图并保存在单个 Markdown 文件里，既实用又方便版本控制，人工智能也会借此真正起飞（@dbg31415）
质疑 Pele 当前完成度：演示预览已失效
- Pele 演示页面里的 Mermaid 预览目前是坏的，说明新工具的实际可用性还存疑（少数人） > Pele 演示页面中的 Mermaid 预览是坏的（@kinduff）
希望开源项目在页面显眼处展示源码入口
- 有人最初没找到 Pele 源码，确认它已在 GitHub 的 obsidianmd/pele 开源后建议，开源项目应在页面顶部放上 GitHub 入口，方便用户加星标和收藏（少数人） > 建议开源应用在页面顶部放个 GitHub 图标，这样能更容易展示源码链接，也方便用户加星标和收藏（@Imustaskforhelp）
有价值的补充
- “Pele”在拉脱维亚语里是“老鼠”的意思，是个命名彩蛋（@druvisc）。