Obsidian CEO @kepano 开源了一个 Mermaid 图表渲染库「Pele」,它完全重写了 Mermaid 12.1.0 全部语法的解析与渲染,输出 SVG,零运行时依赖。它没从 mermaid.js 封装或 fork,是一套从词法分析、布局引擎到 SVG 生成全部自主实现的替代品,将成为 Obsidian 下一版本的内置渲染器。
开源地址:https://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 这种主题实时切换、一个笔记里可能有几十张图的场景是精准的架构选择。
