画布正在取代文档: 5 个开源项目, 让白板变成开发者的工作台

Tldraw · Excalidraw · AFFiNE · Mermaid · Slidev 

「「先开个会对齐一下」——这句话背后通常是三个小时和一份没人看的文档。这几年有个安静的变化: 越来越多开发者把思考的默认载体从文档换成了画布。画布能同时放下代码块、流程图、便签和自由涂鸦, 改一处, 不用重排整个版面。下面这 5 个项目正好覆盖画布的五种用法: 造引擎、画草图、做知识库、写图表、做演示。

💎 今日金句: 文档是你写完才存在的东西, 画布是你想的时候它才开始存在。

1️⃣ tldraw/tldraw — 50.8k stars, 给你的产品造一块无限画布

💬 功能详解: tldraw 在 README 里的自我定位很克制: 一个功能完整的无限画布引擎, 定位是「任何画布应用的地基」。它不满足于给你一个现成白板, 而是说你可以基于它自定义图形、工具、绑定关系和 UI 组件, 用默认的白板工具集, 或者拿它的基础原语从零搭一套全新交互。README 列出的能力包括: 可自托管的实时多人协作、压感手绘、几何图形、富文本、箭头、吸附到图形、边缘滚动、图片和视频支持、图片导出; 运行时还有一套 Editor API 可以在运行时驱动画布; 扩展点覆盖自定义 shapes、tools、bindings、UI 组件、副作用和事件钩子。另外它专门写了一条 AI 集成能力, 提供用 LLM 搭画布的基础原语。最能说明分量的是「Who's using tldraw」这一段: Google、Shopify、BlackRock、Autodesk、ClickUp、Replit、Luma、Runway、Craft 这些产品的画布体验都建在它上面。

项目主页: github.com/tldraw/tldraw

🖼️ 画布引擎: 50834 stars, TypeScript, 自定义图形/工具/UI, 实时协作可自托管, Google 与 ClickUp 在用。

⚠️ 限制: 它是 SDK 不是成品, 你得自己写 React 应用把它接进去, 想变成白板产品的工作量不小; 官网定价页把免费额度卡在一定用户规模内, 商用要看清条款; README 的仓库描述里那句「top-most agent recommended #1 five star SDK」是作者自己的宣传语, 不是第三方评测结论, 选型时别只信这一句。

2️⃣ excalidraw/excalidraw — 133.6k stars, 手绘风白板的事实标准

💬 功能详解: Excalidraw README 开头就把两件事并列写在一起: 开源的虚拟手绘风白板, 协作且端到端加密。它自己的功能清单包括无限画布、形状库、任意文本支持、箭头绑定和带标签的箭头、撤销重做、缩放平移, 以及把手绘内容存成 .excalidraw JSON 文件。README 还专门解释了 excalidraw.com 这个官方托管站在架构上的定位: 它是「你能用 Excalidraw 做出什么的最小展示」, 它的源码就在同一个仓库里, 功能上带 PWA 离线可用、实时协作、端到端加密、local-first 自动存浏览器、以及导出成只读链接分享。这一段写得很坦诚: 这些能力未来会以插件形式提供到 npm 包里。想把它嵌进自己的应用, 装的是 @excalidraw/excalidraw 这个 React 组件。

项目主页: github.com/excalidraw/excalidraw

✏️ 手绘白板: 133615 stars, TypeScript, MIT, PWA 离线 + 端到端加密, .excalidraw JSON 可存可分享。

⚠️ 限制: 官方站在截图里自己就提醒了——作品存在浏览器存储里, 可能被意外清掉, 要定期导出成文件; 官方明确写了这些托管站能力「未来才会以插件形式提供到 npm 包」, 想在自己的应用里复刻实时协作和端到端加密, 现在得等; 商业化的 Excalidraw+ 是另一条产品线, 开源仓库能拿到的是引擎和组件本体。

3️⃣ toeverything/AFFiNE — 73.4k stars, 把文档和白板揉成一坨

💬 功能详解: AFFiNE 的自我描述里那句最直白: 除了 Notion 和 Miro, 还可以有别的选择。它把知识库拆成组装用的积木, 自己定位成「一个开源的一体化工作空间」, 覆盖 wiki、知识管理、演示和数字资产。功能上它最想强调的是文档和白板彻底合并: 你可以把富文本、便签、任意嵌入网页、多视图数据库、关联页面、形状甚至幻灯片, 直接放到无限画布上。AI 那部分写得具体: 把大纲变成能讲的幻灯片、把文章总结成结构化思维导图、整理工作计划和 backlog, 或者用一句 prompt 直接画原型。它强调 local-first: 数据在你自己的磁盘上, 同时支持网页端和跨平台客户端的实时同步协作。此外它支持自托管和二次开发, 相关的 Blocksuite 仓库专门讲自托管。

项目主页: github.com/toeverything/AFFiNE

🧠 本地优先知识库: 73370 stars, TypeScript, 文档/白板/数据库合一, local-first 数据在自己磁盘, 支持自托管。

⚠️ 限制: 官方仓库的许可不是标准 OSI 许可, GitHub API 识别出来是 NOASSERTION, 商用前必须自己去翻 LICENSE 文件确认边界; README 原文写着「Plugin community and third-party blocks are coming soon」, 插件生态还是未来时; 它主打跨平台, 也就意味着各端功能对齐要打折, 深度用之前建议先看你主力场景在哪个端。

4️⃣ mermaid-js/mermaid — 90.6k stars, 用 Markdown 语法画图表

💬 功能详解: Mermaid 的定义一句话说完: 一个基于 JavaScript 的绘图和图表工具, 用受 Markdown 启发式的文本定义加渲染器, 生成和修改复杂图表。它在 README 里把动机写得很实在: 文档腐化是个两难困境, 画图和写文档都很吃开发者时间, 而且很快就过期; 但没有图或没有文档又会毁掉生产力。README 明确说 Mermaid 就是为了让文档追上开发的节奏。工程细节上它是 npm 包起家, 官方挂了 Live Editor 可以直接预览 develop 和 next 两个分支的未来版本, 文档站还提供中文 README; CI 那边挂的是 Build 状态、gzip 后体积、覆盖率、jsDelivr CDN 状态和下载量几个 badge。它拿过 2019 年 JS Open Source Awards 的「最激动人心的技术应用」奖项, 同时 README 里专门有一节讲「安全与安全的图表」和漏洞上报流程。

项目主页: github.com/mermaid-js/mermaid

📐 文本画图表: 90605 stars, TypeScript, MIT, 类 Markdown 语法生成图表, Live Editor 可预览开发分支。

⚠️ 限制: 它是渲染器不是编辑器, 画布交互得你自己包; 图表样式的自由度远不如专业设计工具, 复杂排版容易失控; 官网顶部挂着 Advanced Editor 的付费推广横幅, 开源版本和商业版的功能边界要看清; 它依赖浏览器渲染, 放进 Markdown 预览时要注意脚本执行策略, 严格 CSP 环境里可能直接不渲染。

5️⃣ slidevjs/slidev — 49.0k stars, 用 Markdown 做技术幻灯片

💬 功能详解: Slidev 一句话定位: 给开发者的演示幻灯片。它的功能清单按 README 排下来是这样一条完整的做幻灯片链路: 基于 Markdown, 让内容和你顺手用的编辑器分离; 对开发者友好, 内置代码高亮和 live coding; 可换主题; 可以嵌入 Vue 组件做交互; 有演讲者模式, 能在另一个窗口甚至手机上控制幻灯片; 支持在幻灯片上直接手写标注; 内置 LaTeX 数学公式; 用文本描述生成图表(走的是 Mermaid); 能从任意图标集直接取图标; 自带编辑器也有 VSCode 扩展; 内置录制和摄像头视图; 能导出 PDF、PNG 或 PPTX; 基于 Vite 所以改完即时重载; 还可用 Vite 插件、Vue 组件和任意 npm 包魔改。上手是 npm init slidev, 但它对 Node 版本有硬要求。官方文档有中文站。

项目主页: github.com/slidevjs/slidev

🎤 代码即幻灯片: 49003 stars, TypeScript, MIT, Markdown + Vue 组件, 演讲者模式/录制/LaTeX, 导出 PDF/PNG/PPTX。

⚠️ 限制: README 写明需要 Node.js ≥ 22.12.0, 你本地 Node 版本不够就得先升级, 连带可能影响同机器上的其他项目; 它依赖 Vite 和 Vue 这条技术栈, 想要 PowerPoint 那种高度自由的版式得靠魔改主题, 不是所见即所得; 导出 PPTX 是「把每一页转成图片」的路子, 拿到的不是可编辑的原生 PPT 对象。

这 5 个分别在画布的哪一环?

它们不是五个平行的替代品, 而是一条链上的五段。tldraw 和 AFFiNE 在造引擎——一个把无限画布本身交给你做产品, 一个把画布和文档数据库焊在一起。Excalidraw 在另一个极端, 它什么都不做, 只把「手绘感」这一件事做到极致, 拿来即用。Mermaid 管的是图表这一小块, 但它是 Slidev 的默认依赖, 也是无数 README 和技术文档里的那段 flowchart LR。Slidev 管出口, 把上面这些零件拼成一份能上台讲的东西。

按需求选: 要给自家产品加一块画布选 tldraw, 想立刻开始画图选 Excalidraw, 要一个自托管的 Notion + Miro 替代选 AFFiNE, 要在文档里快速塞流程图选 Mermaid, 要做技术分享选 Slidev。

你现在的工作是记在文档里, 还是画在白板上? 评论区说说, 我帮你看哪种组合更顺手。

觉得有用的话, 点个关注, 后面想看什么主题你说了算。

AiVibe · 让编程更快乐