Excalidraw 虚拟白板快速上手指南：三条命令本地跑起协作画布

Excalidraw 虚拟白板快速上手指南：三条命令本地跑起协作画布

【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw

开完会脑子里一团乱，画架构图时又在纠结线条对不对齐？Excalidraw 是一个开源的手绘风格虚拟白板：无限画布、实时协作、端到端加密，导出 PNG、SVG、JSON 都支持。它把"画图"这件事拉回到白板笔的状态——先画出来，再谈优化。

三个真实场景：这块白板帮你解决什么

给团队讲架构，不想等设计工具排期。你只需要三个矩形加几条箭头，就能把服务依赖关系画出来。手绘风格反而降低了"图很正式但没人看得懂"的尴尬，评审会上大家看的是逻辑，不是线条像素级对齐。

头脑风暴时多人同屏，谁也不抢鼠标。Excalidraw 的实时协作基于端到端加密的频道，几个人同时往画布上扔想法，思路是连续的。你本地部署时也可以接上自己的协作后端（后面会讲怎么配）。

把白板嵌进你自己的产品。项目核心编辑器是一个 npm 包，装进 React 应用就是可用的组件。Notion、CodeSandbox、Replit 这类产品里的画板，底层用的就是同一套代码。

三条命令，本地跑起虚拟白板

环境上只需要 Node.js 18 以上和 yarn，Git 用于拉代码。装没装对，跑完下面命令能出界面就算对。

git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install yarn start

yarn start启动 Vite 开发服务器并自动打开浏览器，访问http://localhost:3000。首次启动需要编译资源，等一两分钟正常。

如果你只想要生产构建产物，不想留在开发模式：

yarn start:production

它先执行完整构建，再用 http-server 起静态服务，访问http://localhost:5001。注意生产端口是 5001，不是开发模式的 3000。

打开界面：工具栏怎么读，先做哪三件事

第一次打开是欢迎页。左上角汉堡菜单里是导出、偏好设置这类低频操作；顶部横排是工具栏，从左到右依次是选择、矩形、菱形、圆形、箭头、直线、画笔、文本、图片、橡皮擦，每个图标右下角的数字就是它的快捷键（按 1 选选择工具，按 5 选箭头）；左下角是缩放条，右下角问号能看全部快捷键。

按动线走，先做三件事：

1. 按 2 选矩形，拖出一个方块。再按 8 选文本，点进方块里输入"用户服务"——文本会自动吸附为方块内容，移动方块时文字跟着走。
2. 按 5 选箭头，从一个方块边缘拖向另一个。箭头会绑定到元素上，之后你拖动方块，箭头自动跟着走，这是 Excalidraw 和"画两根线假装连接"的本质区别。
3. Ctrl+G 把多个元素分组。整组移动、缩放，拆组是 Ctrl+Shift+G。

熟悉之后往深处玩：右键菜单调层级（置于顶层/底层）、Shift+G开网格模式对齐元素、Shift+Alt+D切暗色主题、用激光笔（工具栏激光图标）做演示时指重点。画布没有边界，滚轮加 Ctrl 缩放，拖空白处平移。

实战：从零画一张系统架构图并导出

目标：网关、订单、支付三个服务，加消息队列，导出成 PNG。

1. 画三个矩形分别标注"API 网关""订单服务""支付服务"，颜色用顶部弹出面板里的填充色区分类型（比如蓝色系代表核心服务）。
2. 箭头工具连接：网关→订单、网关→支付、订单→支付（走异步），再画一个菱形代表消息队列，从订单连过去。
3. 每条箭头上双击加文字标签，比如"下单""回调"，让图自带说明书。
4. 选全部元素，Ctrl+G组成一个大组，整体缩放到合适比例。
5. 左上角菜单 → 导出，选 PNG 时把缩放设成 2x 或 3x，避免贴到文档里发虚；要矢量就用 SVG；想日后还能二次编辑就存.excalidrawJSON 文件。

线条歪歪扭扭是刻意保留的手绘感——这正是它和流程图工具的分野：要的是"一眼能讲明白"，不是工程制图精度。

深度定制：主题、快捷键、协作后端

改主题色。界面颜色定义在 SCSS 变量文件里，改令牌重新构建即可：

// packages/excalidraw/css/variables.module.scss $color-blue-7: #1c7ed6; // 强调色 $color-gray-8: #343a40; // 深灰文本

改快捷键。所有可绑定快捷键的操作集中在shortcutMap里，改字符串即可：

// packages/excalidraw/actions/shortcuts.ts toggleTheme: [getShortcutKey("Shift+Alt+D")], saveScene: [getShortcutKey("CtrlOrCmd+S")], group: [getShortcutKey("CtrlOrCmd+G")],

配协作后端。仓库里已带 Firebase 配置，firestore 规则、索引、存储规则都在firebase-project/下：

{ "firestore": { "rules": "firestore.rules", "indexes": "firestore.indexes.json" }, "storage": { "rules": "storage.rules" } }

本地完整体验实时协作还需要一套协作服务器（excalidraw-room），把频道消息转发到 Firebase，文档里的开发指南有说明。

嵌入自己的应用。不想要整个仓库，只取编辑器核心：

npm install react react-dom @excalidraw/excalidraw

在组件里渲染<Excalidraw />就是可用的白板，示例工程在examples/with-nextjs/和examples/with-script-in-browser/。

踩坑速查

现象：yarn start报 Node 版本不满足。原因：项目要求 Node 18 及以上，当前版本太老。 修复：nvm install 18 && nvm use 18。

现象：3000 端口打不开，提示被占用或跳到别的服务。原因：Vite 开发服务器端口被占用，端口来自根目录环境变量VITE_APP_PORT。 修复：echo "VITE_APP_PORT=3001" > .env，再重启yarn start。

现象：跑完yarn start:production后访问 3000 是空白。原因：生产模式由 http-server 起在 5001 端口，不是 3000。 修复：访问http://localhost:5001。

现象：导出 PNG 贴进文档发虚。原因：默认 1x 缩放，高分屏下被放大。 修复：导出对话框把缩放改为 2x 或 3x，或直接导 SVG。

延伸资源

• 入门与概念：官方入门文档
• 本地开发与测试命令：开发指南
• 编辑器核心源码与组件结构：packages/excalidraw/

打开终端把三条命令敲完，你的第一张手绘架构图五分钟就能进会议纪要。

【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw