# 测试用 Pele 替代 Mermaid

**URL:** <https://meta.discourse.org/t/testing-pele-as-a-replacement-for-mermaid/415913>\
**Category:** Announcements\
**Created:** [2026 年10 月 27 日 19:00 UTC](https://meta.discourse.org/t/testing-pele-as-a-replacement-for-mermaid/415913 "2026-10-27T19:00:29Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

作者： ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
发布日期： [2026 年10 月 27 日 19:00 UTC](https://meta.discourse.org/t/testing-pele-as-a-replacement-for-mermaid/415913/1 "2026-10-27T19:00:30Z")

</div>

我们在 meta 上将 [mermaid](https://mermaid.js.org) 主题组件替换为了 [pele](https://pele.run)，以进行测试 🧪

### 这是怎么回事？

[mermaid](https://mermaid.js.org) 包含两部分内容：

1. 一种用纯文本描述图表（流程图、序列图、时间线等……）的 **语法**
2. 一个在你的浏览器中将该文本转换为 SVG 的 **库**

pele 取代了第 2 部分。它读取相同的语法\[1\]，但拥有自己的引擎和外观 ⚙

### 它是如何工作的？

你在帖子（或聊天消息）中编写一个 ````mermaid` 代码块。当该帖子显示时，主题组件会识别该代码块，并让 pele 就地绘制图表。

pele 仅在实际包含图表的页面上下载，因此不会拖慢其他内容。

### 为什么要这么做？

mermaid 库体积庞大且运行“缓慢”。pele 体积小 6 倍，速度最高快 500 倍，无依赖项，可通过 CSS 变量自定义主题，采用 MIT 许可证，并由 Obsidian 团队开发。

实际效果：图表加载速度更快，且无需额外配置即可自动匹配你站点的颜色（包括浅色/深色模式）。

* * *

使用相同的 ````mermaid` 语法，因此你的帖子无需做任何更改。

如果你想在自家站点尝试，这里是 [主题组件](https://github.com/discourse/discourse-pele-theme-component)。

> ⚠ 请先移除 mermaid 组件，两者无法并行运行。

```mermaid
flowchart LR
  A[mermaid] -->|swap| B[pele]
  B --> C{looks good?}
  C -->|yes| D[🎉]
  C -->|no| E[reply here]

```

如果你发现任何视觉错误，请🙏在此回复以下内容：

- 帖子链接（或图表源代码）
- 截图
- 你的浏览器和主题（浅色/深色）

谢谢 😉

* * *

1. 支持 mermaid 12.1.0 及之前版本的所有图表类型

---

_[View the full topic](https://meta.discourse.org/t/testing-pele-as-a-replacement-for-mermaid/415913)._