Obsidian CEO 开源 Mermaid 渲染库 Pele，速度最高快 500 倍

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 这种主题实时切换、一个笔记里可能有几十张图的场景是精准的架构选择。 kepano @kepano 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 cohesively designed, I always found the Mermaid library to be too big, too slow, and too hard to theme. Pele will be the new renderer in the next version of Obsidian, but you can start using it now. Pele [ˈpɛlɛ] is named after the goddess of volcanoes and fire. It's open source under the MIT license. Try the playground! Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 2 🔄 0 ❤️ 2 👀 313 📊 3 ⚡