企业官网建设流程全解析

Excalidraw 手绘白板：本地部署 10 分钟画出像人画的架构图

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

产品评审还有 10 分钟，你要向对方讲清楚"用户点按钮之后，请求怎么走到后端"。用严肃的绘图工具画出来的 UML 图太板正，换工具重画又要半小时——这种时候你需要的是 Excalidraw 手绘白板：线条带点抖动的"手抖感"，像马克笔在白板上随手画的草图，但意思反而传达得更直接。

🎨 Excalidraw 是什么

Excalidraw 是一个开源的虚拟白板，专门用来画"看起来像手绘"的图表、线框图和思维导图。它的画布是无限延伸的，画完之后既能导出 PNG、SVG 图片，也能存成开放的.excalidrawJSON 文件——这意味着你的画不会被锁死在某个软件里，用文本编辑器甚至版本控制都能管理它。

第一次打开它，你会看到这样一个极简界面：顶部一排工具（选择、矩形、圆形、箭头、画笔、文字、图片、橡皮），左上角菜单负责导出和偏好设置，右下角的问号可以随时查看快捷键。没有多余的按钮，学习成本很低。

⚡ 三步本地部署 Excalidraw

如果你只是想看它长什么样，用浏览器打开官方线上版就行；但如果你想在本地跑起来、改成自己想要的样子，三步就够了。

先确认环境：Node.js 18 或更高版本、Yarn、Git。仓库声明使用yarn@1.22.22（见 根目录 package.json 的packageManager字段），用 npm 装依赖容易出问题。

git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install

装完依赖后启动开发服务器：

yarn start

然后浏览器访问http://localhost:3000，完整功能就都在本地了。如果你不想装 Node 环境，仓库里还提供了 Docker 方案：运行docker-compose up --build -d也能跑起来，详见 开发文档。

🔍 两个值得玩一玩的功能

用快捷键打开 "Stats for nerds"：在菜单里找到 Stats for nerds（快捷键Option+/），会弹出一个小面板，显示当前场景里有多少元素、画布宽高、占用了多少存储空间、版本号等。平时你用不上，但当你觉得"我这张图怎么这么大"或者想确认导出的版本对不对时，它是现成的诊断窗口。

协作与分享走的是加密链路：官方应用支持多人实时协作，画板内容做端到端加密，本地优先自动保存（关浏览器再打开，画的东西还在），并能生成一个只读分享链接发给别人。需要提醒的是：本地自托管的实例目前不支持分享和协作功能，官方文档里也明确写了这一点，它更适合私有部署"自己画、自己看"的场景。

把白板嵌进你自己的产品：Excalidraw 核心是以 npm 包@excalidraw/excalidraw的形式发布的，仓库里有两个现成的集成示范可以照着抄——Next.js 集成示例 和 浏览器脚本嵌入示例。如果你好奇图形本身是怎么画的，packages/element/ 里放着箭头绑定、碰撞检测、元素变换这些实现的源码。

🧱 新手最容易卡住的三个地方

1. 依赖装了但起不来：仓库是 Yarn Workspaces 管理的多包项目，yarn install会同时处理excalidraw-app和packages/*下的所有子包。如果中途断了，清一下缓存重装（yarn cache clean后重新yarn install --force）通常能解决。
2. 本地版点分享没反应：这是预期行为，不是 bug。分享链接和实时协作依赖官方的协作服务（collab server），本地开发要单独部署它，纯自托管实例则直接用不了这两项。
3. 页面加载异常：先执行一次yarn build再yarn start；如果怀疑是字体渲染问题，可以检查 packages/excalidraw/fonts/ 里的字体文件是否完整。

适合谁，接下来做什么

如果你需要频繁画架构图、线框图、流程图，又不想让图看起来像"工具画的"，Excalidraw 值得放进你的工具清单。下一步建议：先按上面的命令在本地跑起来画一张小图，再翻一遍examples/下的两个集成示例，判断它能不能嵌进你自己的产品里。

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