Excalidraw：开源手绘风白板使用全攻略

Excalidraw：开源手绘风白板使用全攻略

---

在远程协作日益频繁的今天，一张“纸”和一支“笔”的价值被重新发现。不是真的纸笔，而是那种看似随意、实则清晰的手绘草图——它不像标准流程图那样冰冷，却能迅速传达想法、激发讨论。正是在这种需求下，Excalidraw脱颖而出。

这款工具没有华丽的界面堆砌，也没有复杂的权限体系，但它用极简的设计实现了高效的表达。无论是画一个系统架构、勾勒产品原型，还是给学生讲解网络协议，你都能在几秒内开始创作，仿佛回到了纸上涂鸦的时代，却又享受着数字工具的便利。

它的官网地址是 https://excalidraw.com，GitHub 仓库已有数万星标，被 Google Cloud、Meta、CodeSandbox 等团队广泛采用。更重要的是，它是完全开源（MIT 许可证）且免费的，支持本地部署、端到端加密、PWA 安装，甚至还能通过 AI 插件“说图成真”。

这不仅仅是一个白板工具，而是一种新的信息表达方式。

---

核心特性：为什么它与众不同？

很多绘图工具追求精准与规范，但 Excalidraw 反其道而行之——它让所有线条都带有一点“抖动”，图形边缘不那么规整，颜色柔和，字体手写感十足。这种“手绘风格渲染”不是缺陷，而是设计哲学：降低表达的心理门槛。

当你面对一张完美对齐的图表时，可能会犹豫：“我能不能画得这么专业？”而 Excalidraw 的草图感会让你觉得：“哪怕画歪了也没关系。” 正是这种亲和力，让它成为头脑风暴、敏捷会议、教学演示的理想选择。

除此之外，它的功能组合也非常克制而实用：

• 无限画布 + 自由缩放：可以不断向外扩展，适合绘制大型系统拓扑或跨模块流程。
• 实时协作与只读链接分享：点击“Share”即可生成链接，多人同步编辑，适用于远程讨论。
• 端到端加密（E2EE）：数据在客户端加密后再传输，服务器无法读取内容，保障敏感信息如架构图、商业逻辑的安全性。
• 多种导出格式支持：PNG、SVG、剪贴板图像用于发布；.excalidrawJSON 文件保留完整编辑能力，便于备份和迁移。
• 本地优先设计（Local-First）：自动保存至浏览器 LocalStorage，断网也不丢稿，重开页面即可恢复。
• PWA 支持：可在桌面或移动端安装为独立应用，离线状态下仍可继续创作。
• 开放生态与可扩展性：提供 npm 包@excalidraw/excalidraw，方便嵌入自有系统；社区活跃，有丰富的插件与主题资源。
• AI 图表生成能力（实验性）：借助第三方 AI 插件（如 Excalidraw AI Assistant），可通过自然语言描述直接生成流程图、界面草图等。

这些特性共同构成了一个“轻量但完整”的协作体验——既不会让你陷入学习成本，又能满足大多数专业场景的需求。

---

使用方式灵活多样，适配不同角色

根据使用者身份和技术背景的不同，Excalidraw 提供了三种主流接入路径：在线即用、本地部署、开发集成。你可以像普通用户一样打开就画，也可以作为开发者将其深度整合进自己的平台。

在线快速使用（推荐初学者）

最简单的方式就是直接访问官网：

https://excalidraw.com

无需注册、无需下载，打开即用。页面加载后会自动从浏览器缓存中恢复上次未提交的内容，非常适合临时速记、远程会议共享或教学演示。

点击右上角「Share」按钮，就能生成两种链接：
-可编辑链接：协作者可以修改内容，适合团队同步编辑；
-只读链接：仅展示结果，防止误操作，适合汇报或文档嵌入。

整个过程零配置，5 分钟内就能上手，特别适合非技术人员或初次尝试者。

本地 Docker 部署（企业级私有化方案）

对于注重数据安全的企业或组织，可以选择自建实例。通过 Docker 镜像一键部署，实现内网运行、数据自主可控。

部署步骤如下：

1. 确保已安装 Docker 环境；
2. 拉取并运行官方镜像：

docker run -d \ --name excalidraw \ -p 8080:80 \ ghcr.io/excalidraw/excalidraw:latest

3. 访问服务：

http://localhost:8080

这种方式的优势非常明显：
- 数据不出内网，规避泄露风险；
- 可结合公司 LDAP/OAuth 做统一认证（需二次开发）；
- 支持定制化 UI 或品牌标识。

⚠️ 注意事项：
- 默认情况下不开启 WebSocket 协作功能，如需多人实时协同，需额外配置反向代理和 WebSocket 支持；
- 若希望持久化存储画布数据，建议挂载 Volume 到容器路径/usr/share/nginx/html。

集成至 React 项目（开发者模式）

如果你正在构建知识库、低代码平台、IDE 插件或任何需要内置绘图能力的系统，可以直接将 Excalidraw 作为一个 React 组件嵌入。

安装依赖：

npm install react react-dom @excalidraw/excalidraw

或使用 yarn：

yarn add react react-dom @excalidraw/excalidraw

最简示例代码：

import React from "react"; import { Excalidraw } from "@excalidraw/excalidraw"; function App() { return ( <div style={{ height: "100vh" }}> <Excalidraw /> </div> ); } export default App;

这个组件几乎“开箱即用”，但它的灵活性远不止于此。你可以通过 props 控制行为，例如：

参数	类型	说明
onChange	Function	监听内容变化，可用于实现自动保存或版本追踪
initialData	Object	加载历史数据（JSON 格式），实现草图还原
onCollabButtonClick	Function	自定义协作按钮逻辑
isCollaborating	Boolean	显示当前是否处于协作状态
theme	'light' \| 'dark'	主题切换

💡 实践建议：在内部文档系统中集成 Excalidraw 后，用户可以在笔记旁直接绘制流程图，并将.excalidraw文件与 Markdown 一起提交到 Git，实现图文双版本管理。

---

上手容易，细节见真章

尽管界面极简，但 Excalidraw 的交互设计非常人性化，许多操作符合直觉，稍加摸索即可掌握。

工具栏功能一览

左侧工具栏提供了完整的绘图能力：

工具	功能说明
Selection（选择）	移动、调整大小、多选组合
Text（文本）	添加注释，支持换行与样式设置
Rectangle / Circle / Diamond	绘制基本图形，常用于流程图节点
Line / Arrow	连接元素，箭头可吸附到图形边缘
Free Draw（涂鸦笔）	自由手绘，模拟真实笔迹
Eraser（橡皮擦）	删除部分线条或整个对象
Hand（抓手）	按住平移画布
Image（图片）	插入本地或 URL 图片

一些高效技巧：

• 按住Shift键绘制正圆或等边矩形；
• 使用Alt + Click快速复制元素；
• 双击文本框直接进入编辑模式；
• 箭头连接图形时会自动“吸附”边缘，移动图形后仍保持关联；
• 拖拽多个元素时，松开鼠标后按Ctrl+Z可撤销整组操作。

这些细节让操作更流畅，减少了反复调整的烦恼。

---

协作与安全机制：信任源于透明

很多人担心“开源工具是否足够安全”，但在 Excalidraw 这里，答案恰恰相反——它的安全性比多数商业 SaaS 更强。

所有协作会话均采用端到端加密（E2EE）。这意味着：
- 密钥在发起方本地生成；
- 加密发生在浏览器端；
- 服务器只能看到乱码，无法解密内容；
- 即使攻击者截获链接也无法获取信息。

你可以放心地用来绘制包含敏感信息的架构图、业务流程或产品原型。

此外，共享机制也做了精细划分：
-可编辑链接：允许协作者增删改查，适合团队共创；
-只读链接：仅展示内容，防止意外修改，适合对外发布。

这也使得它既能用于内部深度协作，也能作为轻量级“可视化文档”对外输出。

---

输出灵活，适配多种工作流

完成创作后，如何导出和复用也是关键环节。Excalidraw 支持多种格式，满足不同用途：

格式	适用场景	是否保留编辑能力
.png	插入文档、邮件发送、PPT 展示	❌ 静态图像
.svg	嵌入网页、高清打印	❌ 静态矢量图
.excalidraw（JSON）	备份、跨设备迁移、Git 版本管理	✅ 可完整编辑
剪贴板（Copy as Image）	快速粘贴到 Notion、Obsidian、飞书等笔记软件	❌ 静态图像

📌 推荐工作流：

创作 → 保存.excalidraw文件备份 → 导出 PNG/SVG 发布 → 分享只读链接

尤其值得注意的是，.excalidraw文件本质是一个 JSON，结构清晰，易于解析。这意味着你可以编写脚本批量处理图表、做自动化测试，甚至将其纳入 CI/CD 流程。

---

AI 赋能：从“画图”到“说图成真”

如果说 Excalidraw 本身解决了“怎么画得轻松”，那么 AI 插件则进一步解决了“画什么”的问题。

近年来，社区推出了多个基于自然语言输入生成图表的工具，其中最具代表性的是Excalidraw AI Assistant和Text-to-Diagram扩展。它们能让 AI 根据一段文字描述，自动生成初步草图，再由人工优化布局与样式。

如何实现“一句话出图”？

方法一：Obsidian + Excalidraw 插件（推荐）

1. 安装 Obsidian 笔记工具；
2. 启用内置的 Excalidraw 插件；
3. 安装 AI 插件（如 Smart Connections 或 Text Generator）；
4. 输入描述：

请生成一个微服务架构图，包含用户网关、订单服务、库存服务、数据库，用箭头表示调用关系。

5. 触发 AI 解析，自动生成草图；
6. 手动调整位置、颜色、连线方式。

这种方式特别适合技术文档撰写者，在写架构说明时同步产出配套图示，大幅提升效率。

方法二：使用在线 AI 平台（如 excalidraw.ai）

访问第三方网站（注意隐私风险）：

https://excalidraw.ai

上传文本描述 → 选择图表类型（流程图/类图/序列图）→ 自动生成 → 导出并导入 Excalidraw 编辑

虽然便捷，但需注意：这类平台通常会上传你的文本内容，不适合涉及敏感信息的场景。

---

典型应用场景示例

场景 1：技术方案评审前快速出图

输入：

画一个前后端分离的登录流程图：前端调用认证接口，后端验证 JWT，访问用户数据库。

输出：三节点流程图，含箭头标注请求流向，10 秒完成初稿。

场景 2：产品原型构思

输入：

设计一个移动端首页，包含顶部导航栏、轮播图、商品列表和底部 TabBar。

输出：手绘风格界面草图，组件布局合理，可用于初步讨论。

场景 3：教学辅助（计算机网络课程）

输入：

绘制 TCP 三次握手过程，客户端发送 SYN，服务器回复 SYN-ACK，客户端再发 ACK。

输出：清晰的时间序列图，配有文字说明与箭头流向。

✅ 效果：大幅降低教师备课成本，提升学生理解效率。

---

实际应用案例：已被大厂和开源项目广泛采纳

Excalidraw 不只是小众爱好者的玩具，它已经被多家知名企业和开源项目深度集成：

企业/项目	应用场景
Google Cloud	技术文档中的架构图绘制
Meta (Facebook)	团队内部头脑风暴与产品原型设计
CodeSandbox	在线 IDE 中嵌入用于教学演示
Replit	学生编程作业中的流程图提交工具
Notion	用户通过插件嵌入手绘风格图表
Obsidian	成为最受欢迎的双向链接绘图插件
HackerRank	面试题解思路可视化辅助工具

在 GitHub 上，已有超过400+ 个项目引入 Excalidraw 作为文档可视化组件，涵盖 DevOps 架构图、API 流程设计、算法可视化等领域。

它的成功在于：既保持了开源精神，又做到了极致易用。没有强制注册、没有广告干扰、没有功能阉割，真正做到了“工具为人服务”。

---

它为何成为团队设计新宠？

Excalidraw 的流行并非偶然。它回应了一个根本性的需求：在效率与创意之间找到平衡点。

我们不需要每一幅图都像 Figma 出品那样精致，很多时候只需要一张草图来表达意图。而传统工具要么太重（Miro、Figma Whiteboard），要么太封闭（Whimsical），要么收费高昂。

相比之下，Excalidraw 的优势一目了然：

对比维度	Excalidraw	其他主流工具
是否开源	✅ 完全开源	❌ 多为闭源 SaaS
数据隐私	✅ E2EE 加密，数据不落服务器	⚠️ 数据集中存储，存在泄露风险
使用成本	✅ 免费	❌ 高级功能需订阅付费
上手难度	✅ 极简 UI，5 分钟即可上手	⚠️ 功能繁杂，学习曲线较高
手绘风格支持	✅ 原生内置	❌ 多为标准矢量风格
可集成性	✅ 提供 React 组件库	⚠️ 多依赖官方平台 API
AI 生成功能	✅ 社区插件支持文本转图表	✅/⚠️ 部分工具原生支持但收费

更重要的是，它的开源属性意味着你可以永远掌控它——不用担心厂商跑路、涨价或限制功能。你可以把它部署在内网、集成进系统、定制化 UI，甚至贡献代码回馈社区。

在这个 AI 重塑生产力的时代，Excalidraw 正在演变为一种“人机协同的信息转化中枢”：你说出想法，AI 生成初稿，你用手绘风格润色调整，最终产出既专业又富有表现力的视觉成果。

无论你是技术负责人绘制系统架构，产品经理勾勒原型，教师制作课件，还是学生完成作业，Excalidraw 都能成为你手中那支“会思考的笔”。

🎯立即尝试：https://excalidraw.com
🚀部署私有实例：使用 Docker 快速搭建
🧠探索 AI 赋能：结合插件实现“说图成真”

让每一次灵感迸发，都有迹可循。