Obsidian CEO @kepano 开源了一个 Mermaid 图表渲染库「Pele」，它完全重写了 Mermaid 12.1.0 全部语法的解析与渲染，输出 SVG，零运行时依赖。它没从 me...

meng shao on X: "Obsidian CEO @kepano 开源了一个 Mermaid 图表渲染库「Pele」，它完全重写了 Mermaid 12.1.0 全部语法的解析与渲染，输出 SVG，零运行时依赖。它没从 mermaid.js 封装或 fork，是一套从词法分析、布局引擎到 SVG 生成全部自主实现的替代品，将成为 Obsidian 下一版本的内置渲染器。 开源地址：https://t.co/4Ww4SAhhI1 Pele 和 mermaid.js 的数据对比非常惊人！ Bundle（gzip）：230 kB vs. 1.6 MB（约 6×） 渲染耗时：0.0… / X

[](https://x.com/)

meng shao on X: "Obsidian CEO @kepano 开源了一个 Mermaid 图表渲染库「Pele」，它完全重写了 Mermaid 12.1.0 全部语法的解析与渲染，输出 SVG，零运行时依赖。它没从 mermaid.js 封装或 fork，是一套从词法分析、布局引擎到 SVG 生成全部自主实现的替代品，将成为 Obsidian 下一版本的内置渲染器。 开源地址：https://t.co/4Ww4SAhhI1 Pele 和 mermaid.js 的数据对比非常惊人！ Bundle（gzip）：230 kB vs. 1.6 MB（约 6×） 渲染耗时：0.05–0.3 ms vs. 6–82 ms（最高约 500×） 直接依赖：0 vs. 23 # 架构：为什么能这么快、这么小 自己写解析器。 源码中约 30 个图型各自拥有独立的 lexer → parser → model → render 管线，没有引用 Mermaid 的运行时代码。解析器通过 Mermaid 官方的 parser spec 和差分模糊测试（differential fuzzing）验证语法兼容性。 自己的布局引擎。 src/layout/ 下有三个自研布局：分层布局（layered，约 78 KB，核心）、泳道布局（lanes）、复合嵌套布局（compound）。这意味着 Pele 摆脱了 mermaid.js 依赖链中的 dagre、d3 等库；这 23 个直接依赖正是 mermaid.js 体积和速度问题的主要来源。 同步渲染。 render(text) 直接返回 SVG 字符串，没有异步生命周期。这能成立的关键在于文本测量方案的差异：浏览器端用 canvas 测量，无 DOM 环境（如 Node）则用内置字符宽度表，可注入自定义 measurer。文本测量决定节点尺寸，这是多数图表库被迫异步等待 DOM 的根本原因，Pele 用同步测量把它解决了。 主题与渲染解耦。 颜色、字体、圆角全部通过 CSS 变量（--pele-fg、--pele-surface、图表系列色 --pele-series-1~8 等）下发，SVG 里不写死颜色。切换明暗主题时浏览器重新解析变量即可，无需重新渲染；这对 Obsidian 这种主题实时切换、一个笔记里可能有几十张图的场景是精准的架构选择。"

•  meng shao @shao__meng Show translation Obsidian CEO @kepano 开源了一个 Mermaid 图表渲染库「Pele」，它完全重写了 Mermaid 12.1.0 全部语法的解析与渲染，输出 SVG，零运行时依赖。它没从 mermaid.js 封装或 fork，是一套从词法分析、布局引擎到 SVG 生成全部自主实现的替代品，将成为 Obsidian 下一版本的内置渲染器。 开源地址：github.com/obsidianmd/pele Pele 和 mermaid.js 的数据对比非常惊人！ Bundle（gzip）：230 kB vs. 1.6 MB（约 6×） 渲染耗时：0.05–0.3 ms vs. 6–82 ms（最高约 500×） 直接依赖：0 vs. 23 # 架构：为什么能这么快、这么小 自己写解析器。 源码中约 30 个图型各自拥有独立的 lexer → parser → model → render 管线，没有引用 Mermaid 的运行时代码。解析器通过 Mermaid 官方的 parser spec 和差分模糊测试（differential fuzzing）验证语法兼容性。 自己的布局引擎。 src/layout/ 下有三个自研布局：分层布局（layered，约 78 KB，核心）、泳道布局（lanes）、复合嵌套布局（compound）。这意味着 Pele 摆脱了 mermaid.js 依赖链中的 dagre、d3 等库；这 23 个直接依赖正是 mermaid.js 体积和速度问题的主要来源。 同步渲染。 render(text) 直接返回 SVG 字符串，没有异步生命周期。这能成立的关键在于文本测量方案的差异：浏览器端用 canvas 测量，无 DOM 环境（如 Node）则用内置字符宽度表，可注入自定义 measurer。文本测量决定节点尺寸，这是多数图表库被迫异步等待 DOM 的根本原因，Pele 用同步测量把它解决了。 主题与渲染解耦。 颜色、字体、圆角全部通过 CSS 变量（--pele-fg、--pele-surface、图表系列色 --pele-series-1~8 等）下发，SVG 里不写死颜色。切换明暗主题时浏览器重新解析变量即可，无需重新渲染；这对 Obsidian 这种主题实时切换、一个笔记里可能有几十张图的场景是精准的架构选择。 [](https://x.com/shao__meng/status/2112009709989548131/photo/1) kepano @kepano Oct 17 This is Pele, my new rendering library for diagrams and charts, compatible with the latest Mermaid syntax. - 100-500× faster than mermaid.js - 6× smaller bundle - No dependencies - Easy to theme - Responsive to device width In pursuit of making Obsidian insanely fast and Show more [](https://x.com/kepano/status/2111472054293913749/photo/1) [Video 2](blob:https://x.com/5dfe2b8c-a0b1-4b18-b163-5798c1789c99) 00:28 [](https://x.com/kepano/status/2111472054293913749/photo/3) 2:35 AM · Oct 19, 2026·902 Views 2 4 10
•  Lemomo @lemomo_ai 2h 做流程图之类的这种内容，基本上是硬需求，很多开源项目都是做这个的。 [](https://x.com/compose/post?in_reply_to=2112016896912732583) 1 31
•  Laosun @lzuren2001 2h 零依赖、同步渲染这两点，对 AI 输出的 Mermaid 最友好：模型写出来就能直接渲染，不用再起一套额外的重型依赖。好奇后面会不会支持边流式输出边渲染。 [](https://x.com/compose/post?in_reply_to=2112018941774352545) 11

See all the replies

Continue to X

Log in or sign up for X

See what’s happening and join the conversation

Continue with phoneContinue with Apple

Continue with Google

通过 Google 继续操作 通过 Google 继续操作。在新标签页中打开

or

Log in with username or email