Mermaid 图表一秒换肤：Obsidian 团队的 Pele 让图即代码
Mermaid 画流程图，换个皮肤还得重渲染？Obsidian 团队的新玩具 Pele 说：不用。这个把 Mermaid 图表转成可换肤 SVG 的小工具，在 Hacker News 上拿下 492 分。今天请来前端基础设施工程师林一墨，聊聊它为什么值得开发者看一眼。
Mermaid 画流程图，换个皮肤还得重渲染？Obsidian 团队的新玩具 Pele 说：不用。这个把 Mermaid 图表转成可换肤 SVG 的小工具，在 Hacker News 上拿下 492 分。今天请来前端基础设施工程师林一墨，聊聊它为什么值得开发者看一眼。
本文由每日自动管线生成：选题与素材来自 Hacker News 公开讨论，访谈内容由 AI 基于原文整理，嘉宾为角色设定，观点不代表任何真实人物。
小听： 一墨，先一句话：Pele 是个什么东西？
林一墨： Obsidian 团队刚开源的小工具：把 Mermaid 图表渲染成 SVG。特点是小、同步、零运行时依赖，支持 Mermaid 12.1.0 的全部图表类型。npm install pele，一行 render()，Mermaid 文本进去、SVG 字符串出来。
文本进去，图表出来，中间不需要浏览器。
小听： Mermaid 官方自己不就能渲染吗？为什么还要一个 Pele？
林一墨： 官方库排版要拖一个完整甚至 headless 浏览器，又大又慢，想嵌到别的地方很痛苦。HN 上有人问的正是这个：如果 Pele 不需要浏览器环境，那对嵌入场景就是好消息。而且评论区共识很真实：图一复杂，官方布局经常翻车，调样式反而是小事。
小听： 这期标题叫"一秒换肤"，换肤到底怎么实现的？
林一墨： 全靠 CSS 变量。--pele-bg、--pele-fg、--pele-accent 这些变量控制颜色和字体，你在父元素上改几个变量，整张图跟着变——不用重新渲染。浅色、深色、品牌色，一套图多套皮肤。
小听： 包体呢？Mermaid 全家桶可不小。
林一墨： 可以裁。用 pele/core 只拿核心，再 register(flowchart) 注册你需要的图类型；还有 pele/lazy 做异步加载。只要流程图，就只为流程图付包体成本，首屏不背全家桶。
一套图，多套皮肤：换的是变量，不是重新渲染。
小听： HN 评论里有人说"Claude 能直接改图"，什么意思？
林一墨： 这是 AI 时代的关键特性：图表就是 Markdown 文件里的一段文本。Claude 可以直接读、改、存同一个 md 文件，diff 友好、版本控制友好。图即代码，人能看，AI 能改，git 能管。
小听： 泼点冷水：评论区吐槽多吗？
林一墨： 不少，很真实：官网 playground 的预览挂了、示例对深色模式不友好、还有人说 FOUC 很严重。以及一个冷知识：pele 在拉脱维亚语里是"老鼠"的意思。所以它是 1.x 的早期项目，别当生产级依赖直接梭哈。
小听： 给中文开发者一句话建议？
林一墨： 如果你在文档站、博客、知识库里嵌 Mermaid 图，又被官方渲染的体积和换肤折磨过，值得试 Pele。方向是对的：图是代码，皮肤是变量。