Excalidraw 虚拟白板 3 步快速上手手绘风图表协作指南【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源虚拟白板工具主打无限画布、手绘风格图形和多人实时协作适合需要画系统架构图、线框图、流程草图或想拉同事一起在白板上改稿的人。画布没有边界图形随手画还能一键导出 PNG、SVG 或分享给他人从草图到定稿都不用换工具。如果你画过草图却被设备显示和多人同步问题卡住它值得试一次。上手即能干什么项目跑起来后这 3 件事当天就能用上在顶部工具条选矩形工具快捷键 2在画布拖拽立刻得到一个手绘风格的方块配合文字工具就能拼出简易线框图。按住空格键拖动鼠标画布随手平移滚轮缩放看细节几百个元素的草图也能自由挪动而不丢东西。选中一个图形按 CtrlD 复制再按 CtrlG 把一组图形组合重复模块 3 次点击就能补齐一排。三步快速开始第一步装好 Node.js 18先确认本地环境。打开终端运行版本检查命令需要 Node.js 18.0 及以上yarn 1.x 已内置在 Node 里node -v yarn -v第二步克隆仓库并安装依赖把源码拉到本地再用 yarn 装好依赖第一次安装会拉取较多包耐心等几分钟git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install第三步启动开发服务器运行启动命令Vite 开发服务器默认监听 5173 端口浏览器打开后看到欢迎界面就算成功画布、工具条和撤销按钮都已就绪yarn start核心功能走查无限画布与缩放平移画布大小由内容决定画到哪里延伸到哪里。缩放用左下角的加号、减号或滚轮百分比会实时显示平移则按住空格键拖动鼠标。适合内容不断膨胀的白板场景比如一场头脑风暴。提示点左下角的撤销/重做按钮或按 CtrlZ、CtrlY误操作随时能回退。手绘风格图形与箭头自动吸附顶部工具条提供选择、矩形、菱形、圆形、箭头、直线、画笔、文字、图片等工具每个都有快捷键。画箭头时靠近某个图形它会自动吸附并跟随图形移动不吸附则按 OptionShiftB 切换。适合快速搭架构图、流程图。提示画完后按 CtrlG 组合整组图形拖动不再散架。导出 PNG、SVG 与分享链接点左上角菜单可以导出 PNG 图片、SVG 矢量图或生成一条只读分享链接发给别人。需要留底时也可以下载 .excalidraw 格式的 JSON 文件之后随时打开继续编辑。适合把白板成果贴进文档、周报或群聊。提示导出前框选要导出的区域画面里只会出现选中的内容。统计面板查元素与存储打开左上角菜单选 Stats for nerds快捷键 Option/能看到当前场景的元素数量、画布宽高和存储占用。适合画了大量图形后评估是否该清理或拆分。提示元素数上到几千时用 View modeOptionR切到只读模式操作会更顺滑。实战组合3 个白板落地场景场景一产品头脑风暴会任务背景4 个人一场头脑风暴想法多到记不全散会后没人记得结论。主持人用画笔工具和矩形快速落想法谁有补充就在旁边画个新框按主题分 3 个区域摆框相似的用 CtrlG 组合到一起结束前框选全部导出 PNG 发群。最终产出一张带分区标注的 PNG 脑图谁提的、讨论到哪一步都看得清。场景二线上故障复盘任务背景一次故障涉及多个时间点文字版复盘时间线总是漏细节。用矩形标出关键时间点按先后从左排到右用箭头把因果链连起来每个框里写字说明发生了什么开 Stats for nerds 面板确认元素不超 200 个再导出 PNG 和 .excalidraw 文件。最终产出一页时间线复盘图加一份可继续编辑的源文件下次复盘直接在上面改。场景三设计走查清单任务背景每周设计走查要检查几十个页面口头传达容易遗漏。用矩形画出每个页面格子命名后按 CtrlD 批量复制补齐检查通过的画勾有问题的标红并在旁边写备注生成只读链接发给设计组大家只读不吵。最终产出一张带状态标记的走查清单链接可直接放进周会日程。常见问题依赖安装太慢或中途报错依赖较多首次安装需要几分钟。建议给终端留出时间别中断若报错在项目根目录重新执行yarn installyarn 会接着处理已下载的包。启动后端口 5173 被占用换一个端口再启动即可yarn start -- --port 5174然后访问http://localhost:5174验证页面是否正常加载。画的东西刷新浏览器会丢吗不会。应用默认把画布保存在当前浏览器里刷新后自动恢复。要发给别人就用左上角菜单生成只读链接或导出 PNG 图片。快捷键在哪查欢迎界面右下角有个问号按钮点开就是快捷键清单按 CtrlK 也能随时打开快速搜索不用翻文档找操作。写在最后Excalidraw 是一个把手绘感、无限画布和协作导出打包好的开源白板本地跑起来就能画。想深入定制或看实现细节去仓库里的 dev-docs/ 目录查文档核心编辑器代码在 packages/excalidraw/ 下。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考