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。仓库声明使用yarn1.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/ 里放着箭头绑定、碰撞检测、元素变换这些实现的源码。 新手最容易卡住的三个地方依赖装了但起不来仓库是 Yarn Workspaces 管理的多包项目yarn install会同时处理excalidraw-app和packages/*下的所有子包。如果中途断了清一下缓存重装yarn cache clean后重新yarn install --force通常能解决。本地版点分享没反应这是预期行为不是 bug。分享链接和实时协作依赖官方的协作服务collab server本地开发要单独部署它纯自托管实例则直接用不了这两项。页面加载异常先执行一次yarn build再yarn start如果怀疑是字体渲染问题可以检查 packages/excalidraw/fonts/ 里的字体文件是否完整。适合谁接下来做什么如果你需要频繁画架构图、线框图、流程图又不想让图看起来像工具画的Excalidraw 值得放进你的工具清单。下一步建议先按上面的命令在本地跑起来画一张小图再翻一遍examples/下的两个集成示例判断它能不能嵌进你自己的产品里。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
