Excalidraw手绘白板3条命令在本地跑起免费协作白板【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw画架构图、流程图的时候大多数人的痛点是这样的专业绘图工具学起来门槛低出图却太“板正”在线白板虽然手绘风但动辄要账号、要上传、要订阅。你真正想要的是一个三十秒就能打开、队友随时能进来一起画的手绘白板。Excalidraw 就是这样一款免费开源的虚拟白板手绘风格、多人实时协作、端到端加密能导出 PNG/SVG还能作为一个 React 组件嵌进你自己的产品。这篇文章先带你在本地把它跑起来再讲清楚它真正能替你做什么最后告诉你源码里每一块该去哪里找。 3条命令跑通本地环境环境要求只有三样Node.js 18 以上、Git、任意现代浏览器。然后一段命令就够了git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install yarn start浏览器会打开localhost:3000白板可以直接用。第一屏是欢迎界面上面把提示都写好了左上角菜单管导出和设置顶部一排图标是可挑选的图形工具中间的 Open 与 Help 是快捷入口不用怕自己是新手。顶部菜单与图形工具栏中央Open/Help 快捷入口底部缩放与撤销重做控件跑起来之后看看这个白板到底能替你做什么。 画、协作、导出、存档它替你做的四件事先说结论性的画手绘风格流程图、线框图、思维导图多人实时协作光标同步移动导出 PNG、SVG或直接进剪贴板存成.excalidrawJSON可进版本库再说说各自在哪里实现。手绘感来自每一笔的随机抖动形状绘制逻辑在packages/element/实时协作在网页端的collab/目录里光标同步怎么做看那里就清楚了。还有个给技术党的小彩蛋按 Option/ 打开 “Stats for nerds” 面板能直接看到当前场景的元素数量、存储占用和版本信息调试时顺手就能用。左侧快捷键列表右侧Stats for nerds 面板展示场景元素数量与存储占用还值得提一句分享链接导出只读链接发给别人对方看得到内容、改不了画布协作数据是端到端加密的服务器读不到明文对在意数据合规的团队这一点很关键。手绘线条风格是该白板的核心卖点官方分享卡片上同样可见对开发者来说这个仓库真正的价值在源码里。️ 先打开哪个包一份源码导航地图仓库是 monorepo 结构。你刚跑起来的网页应用在 excalidraw-app/欢迎界面、协作、分享弹窗都在这里核心绘图引擎和 React 组件在 packages/excalidraw/也就是 npm 上发布的那份代码。想继续往下钻形状与元素管理看packages/element/几何计算和命中检测看packages/math/字体文件则集中在packages/excalidraw/fonts/。 两条落地路径自建私有白板 vs 嵌入 Next.js路径一给团队搭一个私有白板。在本地跑通的基础上仓库里docker-compose.yml和firebase-project/都现成备着可以搭一个不依赖外部服务的协作实例。路径二把画布嵌进现有产品。装excalidraw/excalidraw组件页面里放一个Excalidraw /就能用examples/with-nextjs/ 是现成的 Next.js 参考实现照着抄就行。装依赖或跑环境遇到问题常见两条症状安装时出现一堆 peer dependency 冲突yarn install --force症状画布加载出来但字体渲染怪异检查packages/excalidraw/fonts/下的字体文件是否齐全现在就打开终端把上面那三条命令粘进去三分钟画出你的第一个矩形。这是熟悉这个白板最快的方式。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考