✏️
手绘风白板，免费用到天荒地老
Excalidraw：完全开源（MIT）的手绘风虚拟白板——无限画布、实时协作、端到端加密，也能当 npm 包嵌进你自己的 App
MIT
13.4万 Star
协作+加密
📖 它是什么
Excalidraw（仓库 excalidraw/excalidraw）是一个完全开源、MIT 协议、免费的手绘风虚拟白板。官方定位——"An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted."：开源、手绘风格、支持协作、且端到端加密。
它用来画手绘风图表、线框图、流程图、示意图——比正式工具（Figma、draw.io）随意，比一张白纸更好改：无限画布、矩形/圆/菱形/箭头/自由线一应俱全、支持图片和形状库、可导出 PNG / SVG，还能存成开放的 `.excalidraw` JSON 格式随时再编辑。官方在线版 excalidraw.com 提供 PWA（离线可用）、实时协作、端到端加密和只读分享链接。
它不止是一个在线白板：核心是一个 React npm 包（@excalidraw/excalidraw），任何人都能把它嵌进自己的应用。Google Cloud、Meta、CodeSandbox、Obsidian、Replit、Notion、HackerRank 都在用它。TypeScript 写成，GitHub 已 134,102 Star（约 13.4 万）、npm 周下载近 80 万次，采用 MIT 协议，可商用可二开，2020 年建仓、昨天仍在更新。
📎 在线白板：excalidraw.com ｜ GitHub：github.com/excalidraw/excalidraw ｜ 文档：docs.excalidraw.com
✨ 核心亮点
✍️
手绘风颜值
随手画的自然笔触，好看不僵硬，图表也能很随性
🔒
端到端加密
实时协作时内容端到端加密，服务器也看不到
🖼️
导出任意格式
PNG / SVG / 剪贴板，另存 .excalidraw 随时再编辑
🧩
可嵌入应用
React npm 包，Google/Meta/Notion 等都在嵌它
🖥️ 环境要求
| 在线版 | 任何现代浏览器打开 excalidraw.com 即用，无需安装、支持离线（PWA） |
| 嵌入（npm） | React 18+ 应用，Node + npm/yarn，安装 @excalidraw/excalidraw |
| 本地开发 | Node.js + npm/yarn，参考官方 Development Guide 跑仓库源码 |
| VSCode | 官方扩展 excalidraw-editor，编辑器里直接画 |
🚀 上手步骤
① 零安装：打开在线白板开画
浏览器打开 https://excalidraw.com
→ 自动开始画：矩形/圆/箭头/自由线，无限画布缩放平移
→ 多人协作：点右上角分享，生成协作链接（端到端加密）
→ 导出：PNG / SVG / 剪贴板 / .excalidraw 文件支持 PWA——安装后离线也能用；浏览器里自动保存，不怕丢。
② 接入你的 React 应用（npm）
# 安装
npm install react react-dom @excalidraw/excalidraw
# 或 yarn add react react-dom @excalidraw/excalidraw然后在你的组件里引入 <Excalidraw />，把白板能力直接嵌进产品——这是 Google Cloud、Notion、Replit 们做的事情。
③ VSCode 里直接画
VSCode 扩展市场搜「excalidraw-editor」
→ 安装后在编辑器内新建 .excalidraw 文件直接画图关键信息速查
| 在线白板 | https://excalidraw.com（零安装、PWA、协作加密） |
| 嵌入安装 | npm install react react-dom @excalidraw/excalidraw |
| 导出格式 | PNG / SVG / 剪贴板 / .excalidraw（开放 JSON） |
| 协作 | 实时协作 + 端到端加密 + 只读分享链接 |
| VSCode | 扩展「excalidraw-editor」 |
| 协议 | MIT，可商用可二开 |
🖼️ 效果图与演示
产品展示 · Excalidraw 手绘风白板（图表/线框/示意图）：
官方封面 · 手绘风元素与品牌视觉：
Excalidraw 的魅力在于"随手画"的质感：不用精修对齐，画出来就像手写在纸上，但又能任意改、任意导出、任意协作。
🎯 典型玩法
🧠 头脑风暴/思维图：随手画想法，多人实时协作，会议白板平替
📐 流程图/架构图：用箭头和形状画流程、系统架构、关系图
🖥️ 线框图/原型：快速画 App / 网页界面线框草图给团队看
🏫 教学/讲解图：讲解时手绘示意，导出 PNG 直接放进文档
🧩 嵌入产品：用 npm 包把白板做进自己的 SaaS / 协作工具
📄 笔记知识库：Obsidian 插件在笔记里直接画，随笔记导出
📊 和同类做法比
| Figma / draw.io | 功能强大但偏正式、偏重，手绘风需插件，部分商用受限/收费 |
| 微软白板 / Miro | 协作方便但部分功能/容量要订阅，非开源、不易嵌入自研产品 |
| Excalidraw | MIT 完全开源、免费商用、手绘风、npm 可嵌入、端到端加密 |
原理一句话：Excalidraw 的核心是一个 React 渲染引擎，把"矩形/箭头/文字/位图"等元素画在无限画布上，手绘感来自对每个矢量元素做轻微的随机抖动曲线；在线版再把这份 JSON 状态用端到端加密协议同步给协作者——所以它既"画得快"，又"改得准"，还能整个搬进别人的产品。
❓ 常见问题
Q：需要安装吗？收费吗？
不用。打开 excalidraw.com 直接画，MIT 完全开源免费，个人/团队/商用都不收费。
Q：能多人实时协作吗？安全吗？
能。在线版支持实时协作，且端到端加密——服务器也无法看到画板内容，还支持只读分享链接。
Q：画的图能导出成什么？
PNG、SVG、剪贴板，还能存成 .excalidraw（开放 JSON 格式），下次打开继续编辑；SVG 可无损放大用于网页/印刷。
Q：能离线用吗？
能。excalidraw.com 是 PWA，可安装到本地，离线也能打开使用；浏览器里自动保存。
Q：能嵌进我自己的网页/App 吗？
能，这就是它的设计初衷。核心是 @excalidraw/excalidraw React npm 包，npm install 后把 <Excalidraw /> 放进你的组件即可；Google Cloud、Notion、Replit 都这么用。
Q：和 Figma / Miro 比怎么样？
Excalidraw 更轻、更随意、更"手绘"，胜在快速随手画和 MIT 免费开源可嵌入；Figma/Miro 则在组件化、模板、大型协作工作流上更重。简单画图选 Excalidraw 足够。
Q：数据存在哪？会泄露吗？
在线版默认存浏览器本地（local-first），协作内容端到端加密；想完全自托管可把开源仓库部署到自己服务器。
Q：有哪些扩展/集成？
VSCode 扩展（excalidraw-editor）、Obsidian 插件、npm 包等；Excalidraw+ 是可选的额外增强服务，基础功能全免费。
✏️ 打开 excalidraw.com 就能开始画｜GitHub 搜索 excalidraw/excalidraw
关注「AI工具匠」，获取更多 AI 工具实操教程