尧图网站建设 
如何在本地部署 Excalidraw 手绘白板三步安装、协作说明与常见报错排查【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一个开源的手绘风格虚拟白板提供无限画布、多人实时协作和端到端加密适合需要快速画架构图、思维导图、原型图的人也适合想自建离线白板或把白板组件嵌进自己 Web 项目的开发者。这篇文章讲清楚三件事怎么在本地跑起来、跑起来之后怎么用、以及常见报错怎么处理。先看它适合做什么、不适合做什么装之前先划清边界。编辑器本体提供的能力如下类别内容绘图矩形、圆形、菱形、箭头、直线、自由画笔、橡皮擦等箭头可绑定到形状上导出PNG、SVG、复制到剪贴板画稿可存为.excalidrawJSON 开放格式画布无限缩放与平移、撤销/重做、暗色模式、70 多种语言它做不到的也说在前头实时协作依赖一个独立的协作服务器excalidraw-room本地yarn start的环境开箱用不了协作自建 Docker 部署的版本目前不支持分享与协作它不是正式设计工具没有像素级精调产出是草图而不是图纸如果你只是自己画图、或想在产品里放一个白板组件这个项目合适。本地安装步骤环境要求Node.js 18.0.0 及以上、Yarnv1 或 v2.4.2、Git。git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn装完终端会打印 Done根目录出现node_modules。这是个 Yarn monorepo应用代码在excalidraw-app/核心库在packages/。yarn startVite 开发服务器启动后浏览器会自动打开http://localhost:3000页面顶部是工具图标行中间是空白画布。不想装 Node 环境的话直接用 Dockerdocker-compose up --build -d它会按仓库自带的Dockerfile构建镜像起完容器后即可在浏览器打开白板。第一次打开画出你的第一张图首屏是欢迎界面左上角是菜单按钮顶部中间一排工具图标画布中间是 Logo 和 Open、Help 两个选项。画第一张流程图的步骤很短点顶部图标选工具1 是光标、2 是矩形、5 是箭头在画布上拖出形状双击画布输入文字框选多个形状用顶部工具栏对齐点右下角问号查看全部快捷键Option/ 还能打开场景统计面板查看元素数量与存储占用画稿会自动保存在浏览器里随时可以从左上角菜单导出 PNG/SVG 或复制剪贴板.excalidraw文件以后还能再打开继续编辑。常见报错排查现象原因处理yarn安装失败或行为异常缓存或node_modules残留跑yarn clean-install它会删掉全部 node_modules 再重装3000 端口被占用Vite 默认端口就是 3000停掉占端口的进程或另设端口页面空白、功能异常浏览器本地存储的画稿数据损坏清掉本站 localStorage 后刷新本地环境协作不生效协作需要独立部署协作服务器属已知限制不是配置问题能不能离线用、能不能嵌入自己的项目离线可以。应用是 PWA首次加载后即可离线使用自动保存是本地优先数据存在浏览器里。多人协作可以但需要先部署协作服务器协作链接走端到端加密。嵌入可以。通过 npm 安装excalidraw/excalidraw后以 React 组件方式使用仓库自带两个接入示例examples/with-nextjs/Next.js和 examples/with-script-in-browser/浏览器脚本直引。API 细节见 dev-docs/docs/。下一步动作克隆仓库并yarn start先画一张你手头业务的流程图导出 PNG 验证完整链路打算分享协作的话先部署协作服务器再启用协作功能打算嵌入自有项目先读完examples/下两个示例再动手改【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在本地部署 Excalidraw 手绘白板：三步安装、协作说明与常见报错排查
如何在本地部署 Excalidraw 手绘白板三步安装、协作说明与常见报错排查【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一个开源的手绘风格虚拟白板提供无限画布、多人实时协作和端到端加密适合需要快速画架构图、思维导图、原型图的人也适合想自建离线白板或把白板组件嵌进自己 Web 项目的开发者。这篇文章讲清楚三件事怎么在本地跑起来、跑起来之后怎么用、以及常见报错怎么处理。先看它适合做什么、不适合做什么装之前先划清边界。编辑器本体提供的能力如下类别内容绘图矩形、圆形、菱形、箭头、直线、自由画笔、橡皮擦等箭头可绑定到形状上导出PNG、SVG、复制到剪贴板画稿可存为.excalidrawJSON 开放格式画布无限缩放与平移、撤销/重做、暗色模式、70 多种语言它做不到的也说在前头实时协作依赖一个独立的协作服务器excalidraw-room本地yarn start的环境开箱用不了协作自建 Docker 部署的版本目前不支持分享与协作它不是正式设计工具没有像素级精调产出是草图而不是图纸如果你只是自己画图、或想在产品里放一个白板组件这个项目合适。本地安装步骤环境要求Node.js 18.0.0 及以上、Yarnv1 或 v2.4.2、Git。git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn装完终端会打印 Done根目录出现node_modules。这是个 Yarn monorepo应用代码在excalidraw-app/核心库在packages/。yarn startVite 开发服务器启动后浏览器会自动打开http://localhost:3000页面顶部是工具图标行中间是空白画布。不想装 Node 环境的话直接用 Dockerdocker-compose up --build -d它会按仓库自带的Dockerfile构建镜像起完容器后即可在浏览器打开白板。第一次打开画出你的第一张图首屏是欢迎界面左上角是菜单按钮顶部中间一排工具图标画布中间是 Logo 和 Open、Help 两个选项。画第一张流程图的步骤很短点顶部图标选工具1 是光标、2 是矩形、5 是箭头在画布上拖出形状双击画布输入文字框选多个形状用顶部工具栏对齐点右下角问号查看全部快捷键Option/ 还能打开场景统计面板查看元素数量与存储占用画稿会自动保存在浏览器里随时可以从左上角菜单导出 PNG/SVG 或复制剪贴板.excalidraw文件以后还能再打开继续编辑。常见报错排查现象原因处理yarn安装失败或行为异常缓存或node_modules残留跑yarn clean-install它会删掉全部 node_modules 再重装3000 端口被占用Vite 默认端口就是 3000停掉占端口的进程或另设端口页面空白、功能异常浏览器本地存储的画稿数据损坏清掉本站 localStorage 后刷新本地环境协作不生效协作需要独立部署协作服务器属已知限制不是配置问题能不能离线用、能不能嵌入自己的项目离线可以。应用是 PWA首次加载后即可离线使用自动保存是本地优先数据存在浏览器里。多人协作可以但需要先部署协作服务器协作链接走端到端加密。嵌入可以。通过 npm 安装excalidraw/excalidraw后以 React 组件方式使用仓库自带两个接入示例examples/with-nextjs/Next.js和 examples/with-script-in-browser/浏览器脚本直引。API 细节见 dev-docs/docs/。下一步动作克隆仓库并yarn start先画一张你手头业务的流程图导出 PNG 验证完整链路打算分享协作的话先部署协作服务器再启用协作功能打算嵌入自有项目先读完examples/下两个示例再动手改【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考