企业官网建设流程全解析

Excalidraw：开源虚拟白板，3 步本地跑起来

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

Excalidraw 是一款开源虚拟白板，专注手绘风绘图与协作绘图，适合开发、设计、教学和产品场景。想验证 Excalidraw 本地运行是否顺畅、了解它如何支撑 Excalidraw 团队协作，可以先花十分钟把本地版本跑起来。

先判断：Excalidraw 是否适合你的工作流

• 你画的图会后就过期。静态图片没法改，下次讨论还得重画。Excalidraw 里每张图都是可编辑的元素，改一个框、挪一条箭头都不费事。
• 多人协作时版本混乱。它支持实时协作：共享同一场景，光标和修改实时同步，链路本身带端到端加密。
• 评审现场怕误触。评审者频繁拖拽、误点会污染原稿，查看模式能直接锁住编辑权。

如果上面任意一条戳中你，Excalidraw 值得试；如果你只是要一次性的海报设计，专业设计软件可能更合适。

本地运行 Excalidraw 的 3 步

前提：Node 18 及以上、yarn 1.x。

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

yarn start

npm i react react-dom @excalidraw/excalidraw

第一条把仓库拉到本地并装好依赖；第二条启动开发服务器，按提示打开浏览器地址即可进入画布；第三条则是另一条路——不跑源码，只把 npm 包@excalidraw/excalidraw装进自己的 React 应用，适合做二次集成。想改编辑器行为，核心代码集中在 packages/excalidraw/ 目录，改完yarn start会热更新。

第一次打开后，先做这 3 件事

1. 认一遍界面。顶部是工具栏：选择、矩形、椭圆、箭头、画笔、文本、贴图、橡皮；左上角菜单管偏好设置、导出和主题切换；左下角是缩放与撤销重做。工具上有数字编号，直接敲数字键就能切工具。
2. 感受画布。按住空格键拖动即可平移，滚轮缩放，Ctrl+0 一键还原 100% 视图。画布自动存在浏览器本地，关窗口也不会丢。
3. 试一次导出与分享。主菜单可以导出 PNG、SVG，或保存为.excalidrawJSON 文件；需要给同事看时，直接生成一个只读分享链接即可。

让多人评审更顺的 2 个技巧

• 只发链接，不发文件。用主菜单的 Share 入口生成协作链接，对方点开就能实时看到你的修改，无需来回传文件，适合 Excalidraw 团队协作场景。
• 评审时切查看模式。按 Alt+R 进入查看模式，画布仍可缩放平移，但点不动任何元素，评审会结束再切回来继续画。

常用的 Excalidraw 快捷键顺手记三个：Ctrl+G 把选中元素分组、Ctrl+D 复制、Ctrl+/ 或按问号调出快捷键列表。

画布变卡或装不上？照这个清单处理

• 先量再修。按 Alt+/ 打开 Stats for nerds，看元素数量和场景存储大小。元素明显偏多时，把散乱对象合并、删掉冗余，是 Excalidraw 性能优化最快的动作。
• 依赖冲突。删掉 node_modules 和锁文件，重新执行yarn install；项目根目录也提供了yarn clean-install，效果相同。
• 端口被占。启动脚本基于 vite，可以在 excalidraw-app 的启动命令后追加--port 3001，换端口再起一次。

收尾清单

今天就可以做的四件事：本地把yarn start跑通；画一张至少含 5 个元素的流程图；选中后 Ctrl+G 分组并导出 PNG；打开分享链接，找一位同事在另一台设备上打开试试。全做完，这套开源虚拟白板就正式进入你的工作流了。

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