Excalidraw 手绘风协作虚拟白板：3 条命令跑起来-开发者社区

Excalidraw 手绘风协作虚拟白板：3 条命令跑起来

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

Excalidraw 是一款开源虚拟白板，所有线条都带手绘草图质感，支持多人实时协作，协作链路端到端加密。适合三类人：要画系统图的开发者、要写互动板书的教师、要出低保真线框图的产品经理。装到本地后开箱即用，本文带你从克隆到画出第一张图。

两个离不开白板的场景

远程头脑风暴。会议里每人对着同一块画布，想法落笔即同步，不用来回截图传文件。讨论完直接导出 PNG 丢进会议纪要，或分享一个只读链接让没参会的人看结果。

课程互动板书。教师把白板投到大屏，学生实时看到推导过程；讲到哪改到哪，数学公式、时间线、流程图都能直接画，抽象内容当场变成可视化。

核心能力速览：这块虚拟白板能做什么

能力	一句话说明
🎨 无限画布 + 手绘渲染	画布无边界，线条自带轻微抖动，图表像白板上画出来的
🤝 实时协作	多人同时编辑同一场景，修改秒级同步，数据端到端加密
🔒 本地优先存储	自动保存到浏览器本地，断网也能继续画
📤 多格式导出	PNG、SVG、复制到剪贴板，或存为开放的`.excalidraw`JSON 文件
形状库	常用图标、组件存进库，需要时一键调出

克隆仓库并启动开发服务器

前置条件只有一个：Node.js 18 以上（yarn 随项目锁定为 1.22）。下面分两组命令，第一组克隆并装依赖，第二组启动开发服务器：

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

yarn start

启动后浏览器会自动打开http://localhost:3000，看到带引导提示的欢迎界面即代表环境就绪。

默认端口在excalidraw-app/vite.config.mts里通过环境变量VITE_APP_PORT控制（默认 3000），被占用时改这里即可，不用动其他配置。

日常高频操作与快捷键速查

日常画图中用得最勤的几个组合键：

Ctrl+D复制选中元素，Ctrl+G组合、Ctrl+Shift+G取消组合
按住空格拖动平移画布，Ctrl+0重置缩放，Shift+1让全部内容适屏
按?随时调出完整快捷键列表，源码在packages/excalidraw/actions/shortcuts.ts，想加新快捷键直接改这个文件

冷门但实用的功能

Alt+/（Mac 为Option+/）打开 "Stats for nerds" 统计面板，能看到场景元素数、画布宽高和存储占用，排查大图卡顿前先来这里看一眼
Alt+R切换 View mode（只读模式），画布不可编辑时渲染负担最小，适合只看不画的场景
Q锁定当前工具：连续画 10 个矩形不用每画完一个就回工具栏点一次
Shift+1/Shift+2/Shift+3分别是整体适屏、当前视口适屏、选中元素适屏三档定位

角色工作流：拿到工具后的前 30 分钟

开发者。前 10 分钟用矩形和箭头画出服务拓扑，箭头默认能吸附到形状边缘，拖动框体连线不跑偏；接着把重复的服务框Ctrl+D复制几个；最后导出 SVG 贴进设计文档。如果想把白板嵌进自家工具，仓库里的dev-docs/docs/@excalidraw/excalidraw/目录有完整的集成文档。

教师。前 15 分钟用文本和菱形摆出知识框架，讲到的分支直接往旁边延伸；Alt+R切到只读模式做课堂演示，防止误触改乱板书；课后导出 PNG 归档。

产品经理。用矩形快速铺线框图，Q锁定矩形工具连铺十几个模块；配色用色板统一区分模块归属；需求评审时开协作链接，让评审人直接在图上圈改。