企业官网建设流程全解析

Excalidraw 手绘白板本地运行与功能介绍:开源虚拟白板完全指南

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

上次和产品经理对需求,他画了十分钟图你才看懂。现在你有了 Excalidraw,一个开源的虚拟白板。画布上的线条天生带手绘感,却可以精确拖拽、对齐、导出。你可以本地跑起它,也可以把它集成进自己的 React 项目。

手绘风格的 Excalidraw 宣传图,主题词是协作白板

它是什么

Excalidraw 是 MIT 协议的开源项目,定位是一块"无限画布"的在线白板。你画出来的矩形、箭头、文字都带轻微抖动,像拿马克笔速写。但它底层是矢量对象,可以随意缩放、复制、绑定文字。适合三类人:需要画架构图的产品和研发,需要白板开会的团队,以及想把它嵌进自己产品的前端开发者。

• 无限画布,支持缩放和平移
• 手绘风格的矩形、圆形、箭头、自由画笔
• 一键导出 PNG、SVG 或 JSON
• 支持深色模式和 70 多种界面语言

三步跑起来

本地运行需要 Node.js 18 以上和 Yarn。下面是最小可用命令:

git clone https://link.gitcode.com/i/6bf871692ea264427c371c571578d4e9 cd excalidraw yarn install yarn start

启动后浏览器打开http://localhost:3000。你会看到欢迎界面:顶部是工具栏,有菜单、选择、矩形、圆形、箭头、画笔、文字、图片、橡皮;中央是 Logo 和"Open / Help"入口;左下角是缩放和撤销重做。

启动后的欢迎界面,虚线标注了各区域对应的组件

值得细看的功能

实时协作与端到端加密

打开网页版后,菜单里可以生成一个分享链接。别人点开链接,你的光标会出现在他那边,反之亦然,双方改动实时同步。细节在于数据链路是端到端加密的,协作房间本身看不到你的画面内容。

本地优先自动保存

你画的每一笔都会自动存进浏览器,不需要手动保存。关掉标签页,下次打开还是原样。这让白板可以直接当草稿纸用。

Stats for nerds 调试面板

按Option+/会弹出"Stats for nerds"面板,显示当前场景的元素数量、宽高,以及本地存储占用。想查一下画布到底塞了多少对象、占了多少存储,看这里就行。

快捷键 Option+/ 打开,展示场景与存储数据

代码里有什么

• excalidraw-app/ — excalidraw.com 网页应用源码,含协作、自动保存、分享链接实现
• packages/excalidraw/ — 核心引擎与 React 组件库,也是 npm 上发布包的来源
• packages/element/ — 元素的数据结构、碰撞、绑定与渲染逻辑
• packages/math/ — 几何与数学计算工具
• examples/with-nextjs/ — 把白板嵌进 Next.js 的集成示例
• dev-docs/ — 官方文档站源码,安装、API、FAQ 都在这里

常见问题

依赖装不上。现象是yarn install中途报错退出。清掉缓存强制重装即可:

yarn cache clean yarn install --force

画布上的文字元素显示异常。常见诱因是浏览器隐私扩展开启了"Aggressively block fingerprinting",它会让测量文本的 API 失效。把这个开关调回普通模式,文字即可正常显示,步骤见 FAQ。

想开多人协作,却找不到入口。本地仓库本身不带协作服务器,需要单独部署 excalidraw-room 项目,参考 开发文档。

适合谁用

• 产品经理:需求评审前五分钟画完线框图,箭头直接绑住模块名,改一次全体同步。
• 前端开发者:读 examples/ 里的两个集成示例,把白板组件塞进自己的 React 或 Next.js 页面。
• 学生与老师:课堂演示时现场画流程图,结束生成一个链接,学生打开就是只读副本。

先画一个矩形。然后给它绑一支箭头,再按下Cmd+Z看撤销。剩下的功能,你点一遍就懂了。

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