5 分钟跑通 Excalidraw：一份在本地打开手绘白板的实操指南

5 分钟跑通 Excalidraw一份在本地打开手绘白板的实操指南【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一个开源的手绘白板在无限画布上画流程图、线框图和思维导图图存本地加密链接一键分享。你有没有过这种经历脑子里有个架构或流程想随手画出来结果打开专业绘图工具被几十个菜单劝退好不容易画完线条笔直、规整得像 PPT 插图反而显得生硬。Excalidraw 解决的就是这个问题它画出来的每一条线都带一点手抖的毛边方框是歪歪扭扭的手绘风格但操作比纸笔快得多。它不只是一个网站。这个仓库里藏着两层东西一层是发布在 npm 上的 React 组件Notion、Replit、Google Cloud 等产品的白板功能就来自它另一层是仓库里的excalidraw-app/目录也就是你在浏览器里打开的那个在线演示版协作、加密、离线能力都长在这一层。Excalidraw 手绘白板的官方主视觉手写体 Logo 配让协作白板变得简单的标语第一次打开欢迎界面藏了三个快捷入口本地跑起来后你看到的第一屏信息量比想象中大。顶部是一条工具栏最左边是菜单导出、偏好设置都在这中间是指针、矩形、菱形、圆形、箭头、线条、钢笔、文本、图片、橡皮擦九个基础工具每个图标右下角的数字就是快捷键最右边是帮助。欢迎界面结构一览菜单提示、工具栏提示、中央的打开文件 / 帮助快捷操作以及底部的缩放和撤销重做中间区域只有两个快捷操作OpenCtrlO打开本地保存的.excalidraw文件和Help?查看所有快捷键。欢迎界面本身就是一个组件实现逻辑可以直接读 AppWelcomeScreen.tsx它是你理解这个白板是怎么组装起来的最好的入口。画两笔之后建议试一个快捷键Option/Mac打开右下角的 Stats for nerds 面板——它能告诉你这张画布上有多少个元素、场景占了多少存储空间是调试时很顺手的小工具。在本地跑通手绘白板只要两条命令先看条件装好 Node.js 和 Yarn就能开始。第一条命令把项目代码下载到你电脑上cd是进入刚才下载的文件夹git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw第二条命令分两步先安装依赖相当于把项目需要的几十上百个工具包全部就位再启动开发服务器yarn install yarn start看到终端提示后浏览器打开http://localhost:3000一个完整的手绘白板就在你自己机器上跑起来了。此时再按一次Option/打开 Stats for nerds 面板看看元素数和存储占用感受一下自己画的第一笔在系统里长什么样。Stats for nerds 面板左边是快捷键列表选中 Stats for nerds 一行右边显示场景元素数、宽度和存储占用数据存在哪本地优先分享默认加密很多协作工具的图默认躺在别人服务器上Excalidraw 的取向相反。你的画布自动保存到浏览器本地关掉页面、断网都不丢它的 PWA 特性让它离线也能用。需要分享时你导出的是一个端到端加密的只读链接——图在传输前就在你浏览器里加密别人拿到链接才能解密查看。如果你打算自己架一套仓库里带 Docker 配置开发文档 有自部署说明官方提供的 Docker 镜像是不含任何统计追踪库的适合内网环境。这里有个真实的坑值得知道用 Brave 浏览器且开了 Aggressively block fingerprinting激进防指纹追踪时白板里的文字元素会显示错乱——因为该模式拦截了浏览器测量文字尺寸的 API。解决方式不是关隐私保护而是把该选项从激进拦截降级为普通的拦截指纹追踪文字就能正常显示。Brave 浏览器设置面板把Aggressively block fingerprinting改为普通拦截即可修复文字显示问题想把手绘白板装进自己的产品一个组件的事前面跑起来的是演示版。如果你真正关心的是我能不能在自己的 React 应用里嵌入这个白板答案是Excalidraw /一个组件配两行容易踩坑的设置——必须引入它自带的 CSS 文件且父容器要有明确高度否则画布是空白的。这是集成时最常见的两个失败原因npm 包文档 里专门写了排查顺序。有个设计取舍值得留意npm 包本身不带实时协作官方 FAQ 明确说明协作实现方式因宿主应用而异包只提供对外接口由你自己接。也就是说能画是组件的核心能力能协作是应用层的事——这个边界划得很清楚嵌入时不会被默认行为绑架。仓库里的 Next.js 集成示例 和 纯浏览器脚本示例 是两套可直接抄的完整方案。下一步现在就画第一笔打开终端把上面两条命令跑完五分钟后你的浏览器里会有一个localhost:3000的本地手绘白板——按CtrlO打开一张存过的图或者画一个歪歪扭扭的方框开始。如果之后想深入看它内部怎么组织代码从 packages/element/ 这个元素管理模块读起每个图形矩形、箭头、文字的行为都在这一个包里。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考