5分钟本地搭好Excalidraw手绘白板从安装到日常使用完整指南【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw开会时要快速画一张架构图讨论你手头的绘图工具要么操作繁琐要么要注册账号。Excalidraw 手绘白板是一个免费开源的虚拟白板无限画布、手绘风线条、多人实时协作5 分钟就能在本地跑起来。跟着本文走一遍你可以克隆仓库、启动网页版并画出第一张自己的图。 它能做什么痛点对解决方案先别急着进功能列表看它解决的是哪些具体麻烦你的痛点Excalidraw 的解法商业绘图软件上手门槛高手绘风界面矩形、圆形、箭头、自由画笔即点即用无学习成本大图画不下、画布总是不够无限画布支持缩放和平移不限制绘制范围图画完没法给同事一起改分享链接生成后多人在同一画布实时编辑光标动作即时同步图只能截图没法再修改可导出 PNG、SVG或导出 .excalidraw JSON 文件之后随时打开继续改欢迎界面直接标出了工具栏、打开文件和帮助入口打开就能开始画 上手教程三步本地安装流程环境准备Node.js 18.0.0 及以上用node -v确认版本、Git、Yarn 包管理器三样齐了再动手。第一步克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install小贴士首次安装依赖包比较多耐心等几分钟中途断了直接重跑同一条命令即可。第二步启动开发服务器yarn start浏览器会自动打开http://localhost:3000看到的画布和工具栏就是完整的 Excalidraw 网页版。常见坑依赖安装报错。如果yarn install中途抛出红色错误多半是缓存或版本冲突运行yarn clean-install会清空依赖重新安装能解决大部分安装问题。✏️ 功能亮点日常最常用的四件事实时协作多人在同一画布编辑光标移动和修改即时同步。用法在画布上点击分享按钮生成链接发给同事即可。想象一下两个同事各坐两地一个人画方框、一个人连箭头光标在对方屏幕上同步移动就像站在同一块白板前。技巧分享链接是端到端加密的知道链接的人才能看到内容适合画内部敏感的架构图。多格式导出支持导出 PNG、SVG或一键复制到剪贴板。用法左上角菜单里选导出挑好格式和背景即可。技巧想以后继续改的图导出 .excalidraw JSON 而不是图片之后 CtrlO 重新打开还能接着编辑截图则是“死图”。本地自动保存画布状态自动写入浏览器本地存储关掉页面再打开内容还在。技巧重要图仍建议定期导出一份到磁盘防止浏览器数据被清理后丢失。nerd 统计面板按 Option/ 打开能看到元素数量、画布尺寸、存储占用。技巧画布卡顿时先打开它看一眼元素数量是否异常是快速排查性能问题的入口。 实用建议常见坑与进阶用法启动后页面空白先换最新版 Chrome 或 Firefox 再试仍不行就清除浏览器缓存后重跑yarn start。本地协作连不上协作依赖单独部署的 collab server纯本地画图可忽略需要时参考 dev-docs/docs/introduction/development.mdx 里的配置说明。想嵌入自己的项目仓库自带两个集成示例React 项目看 examples/with-nextjs/纯网页脚本集成看 examples/with-script-in-browser/照着接线就行。想自定义工具栏或快捷键核心编辑器代码在 packages/excalidraw/快捷键定义在其 actions/ 子目录动手前先读一遍 dev-docs/docs/ 里的开发者文档。Excalidraw 手绘白板是一个你既能直接用、也能改造成自己工具的免费开源白板会议草图、团队协作、知识整理都接得住。克隆仓库、跑一遍yarn start现在就可以画出你的第一张图。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考