企业官网建设流程全解析

如何在本地部署 Excalidraw 手绘白板：三步安装、协作说明与常见报错排查

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

Excalidraw 是一个开源的手绘风格虚拟白板，提供无限画布、多人实时协作和端到端加密，适合需要快速画架构图、思维导图、原型图的人，也适合想自建离线白板或把白板组件嵌进自己 Web 项目的开发者。这篇文章讲清楚三件事：怎么在本地跑起来、跑起来之后怎么用、以及常见报错怎么处理。

先看它适合做什么、不适合做什么

装之前先划清边界。编辑器本体提供的能力如下：

它做不到的，也说在前头：

• 实时协作依赖一个独立的协作服务器（excalidraw-room），本地yarn start的环境开箱用不了协作
• 自建 Docker 部署的版本目前不支持分享与协作
• 它不是正式设计工具，没有像素级精调，产出是"草图"而不是"图纸"

如果你只是自己画图、或想在产品里放一个白板组件，这个项目合适。

本地安装步骤

环境要求：Node.js 18.0.0 及以上、Yarn（v1 或 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 start

Vite 开发服务器启动后，浏览器会自动打开http://localhost:3000，页面顶部是工具图标行，中间是空白画布。

不想装 Node 环境的话，直接用 Docker：

docker-compose up --build -d

它会按仓库自带的Dockerfile构建镜像，起完容器后即可在浏览器打开白板。

第一次打开：画出你的第一张图

首屏是欢迎界面：左上角是菜单按钮，顶部中间一排工具图标，画布中间是 Logo 和 Open、Help 两个选项。

画第一张流程图的步骤很短：

1. 点顶部图标选工具，1 是光标、2 是矩形、5 是箭头
2. 在画布上拖出形状，双击画布输入文字
3. 框选多个形状，用顶部工具栏对齐
4. 点右下角问号查看全部快捷键；Option+/ 还能打开场景统计面板，查看元素数量与存储占用

画稿会自动保存在浏览器里，随时可以从左上角菜单导出 PNG/SVG 或复制剪贴板，.excalidraw文件以后还能再打开继续编辑。

常见报错排查

能不能离线用、能不能嵌入自己的项目

• 离线：可以。应用是 PWA，首次加载后即可离线使用；自动保存是本地优先，数据存在浏览器里。
• 多人协作：可以，但需要先部署协作服务器，协作链接走端到端加密。
• 嵌入：可以。通过 npm 安装@excalidraw/excalidraw后以 React 组件方式使用，仓库自带两个接入示例：examples/with-nextjs/（Next.js）和 examples/with-script-in-browser/（浏览器脚本直引）。API 细节见 dev-docs/docs/。

下一步动作

1. 克隆仓库并yarn start，先画一张你手头业务的流程图，导出 PNG 验证完整链路
2. 打算分享协作的话，先部署协作服务器再启用协作功能
3. 打算嵌入自有项目，先读完examples/下两个示例再动手改

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