测试用 Pele 替代 Mermaid

新闻和活动 公告
1

我们在 meta 上将 mermaid 主题组件替换为了 pele，以进行测试 :test_tube:

这是怎么回事？

mermaid 包含两部分内容：

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

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

它是如何工作的？

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

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

为什么要这么做？

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

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

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

如果你想在自家站点尝试，这里是 主题组件。

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

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

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

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

谢谢 :wink:

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

29 个赞
2

说明不清楚；无法使用 :tada: 表情反应 :pensive_face:

看起来不错！

9 个赞
3

上周我发现了 Pele，当时考虑尝试一些内部集成，今天又看到了这个。速度超快，而且来自 Core，谢谢！

2 个赞
4

Pele 已经集成到许多平台中，这是有充分理由的！

我在 Obsidian 中使用它，并且刚刚测试了我的 Discourse 社区……效果非常好

3 个赞
5

我理解得对吗……使用 Pele，我们可以设置 Pele 元素以遵循我们的社区/品牌规范，从而使所有现有的 Mermaid 图表（或者仅新图表）都默认具有我们样式的视觉效果？

6

是的 :+1:

该组件已经将 Pele 的 CSS 变量映射到您的网站的颜色调色板，因此所有图表（无论是旧的还是新的）都会自动采用您的颜色（包括浅色/深色模式）。

如果您想进一步调整，请在您的主题 CSS 中覆盖 .pele-diagram 上的任何 --pele-* 变量 :wink:

4 个赞