Excalidraw 虚拟白板快速上手指南三条命令本地跑起协作画布【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw开完会脑子里一团乱画架构图时又在纠结线条对不对齐Excalidraw 是一个开源的手绘风格虚拟白板无限画布、实时协作、端到端加密导出 PNG、SVG、JSON 都支持。它把画图这件事拉回到白板笔的状态——先画出来再谈优化。三个真实场景这块白板帮你解决什么给团队讲架构不想等设计工具排期。你只需要三个矩形加几条箭头就能把服务依赖关系画出来。手绘风格反而降低了图很正式但没人看得懂的尴尬评审会上大家看的是逻辑不是线条像素级对齐。头脑风暴时多人同屏谁也不抢鼠标。Excalidraw 的实时协作基于端到端加密的频道几个人同时往画布上扔想法思路是连续的。你本地部署时也可以接上自己的协作后端后面会讲怎么配。把白板嵌进你自己的产品。项目核心编辑器是一个 npm 包装进 React 应用就是可用的组件。Notion、CodeSandbox、Replit 这类产品里的画板底层用的就是同一套代码。三条命令本地跑起虚拟白板环境上只需要 Node.js 18 以上和 yarnGit 用于拉代码。装没装对跑完下面命令能出界面就算对。git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install yarn startyarn start启动 Vite 开发服务器并自动打开浏览器访问http://localhost:3000。首次启动需要编译资源等一两分钟正常。如果你只想要生产构建产物不想留在开发模式yarn start:production它先执行完整构建再用 http-server 起静态服务访问http://localhost:5001。注意生产端口是 5001不是开发模式的 3000。打开界面工具栏怎么读先做哪三件事第一次打开是欢迎页。左上角汉堡菜单里是导出、偏好设置这类低频操作顶部横排是工具栏从左到右依次是选择、矩形、菱形、圆形、箭头、直线、画笔、文本、图片、橡皮擦每个图标右下角的数字就是它的快捷键按 1 选选择工具按 5 选箭头左下角是缩放条右下角问号能看全部快捷键。按动线走先做三件事按 2 选矩形拖出一个方块。再按 8 选文本点进方块里输入用户服务——文本会自动吸附为方块内容移动方块时文字跟着走。按 5 选箭头从一个方块边缘拖向另一个。箭头会绑定到元素上之后你拖动方块箭头自动跟着走这是 Excalidraw 和画两根线假装连接的本质区别。CtrlG 把多个元素分组。整组移动、缩放拆组是 CtrlShiftG。熟悉之后往深处玩右键菜单调层级置于顶层/底层、ShiftG开网格模式对齐元素、ShiftAltD切暗色主题、用激光笔工具栏激光图标做演示时指重点。画布没有边界滚轮加 Ctrl 缩放拖空白处平移。实战从零画一张系统架构图并导出目标网关、订单、支付三个服务加消息队列导出成 PNG。画三个矩形分别标注API 网关订单服务支付服务颜色用顶部弹出面板里的填充色区分类型比如蓝色系代表核心服务。箭头工具连接网关→订单、网关→支付、订单→支付走异步再画一个菱形代表消息队列从订单连过去。每条箭头上双击加文字标签比如下单回调让图自带说明书。选全部元素CtrlG组成一个大组整体缩放到合适比例。左上角菜单 → 导出选 PNG 时把缩放设成 2x 或 3x避免贴到文档里发虚要矢量就用 SVG想日后还能二次编辑就存.excalidrawJSON 文件。线条歪歪扭扭是刻意保留的手绘感——这正是它和流程图工具的分野要的是一眼能讲明白不是工程制图精度。深度定制主题、快捷键、协作后端改主题色。界面颜色定义在 SCSS 变量文件里改令牌重新构建即可// packages/excalidraw/css/variables.module.scss $color-blue-7: #1c7ed6; // 强调色 $color-gray-8: #343a40; // 深灰文本改快捷键。所有可绑定快捷键的操作集中在shortcutMap里改字符串即可// packages/excalidraw/actions/shortcuts.ts toggleTheme: [getShortcutKey(ShiftAltD)], saveScene: [getShortcutKey(CtrlOrCmdS)], group: [getShortcutKey(CtrlOrCmdG)],配协作后端。仓库里已带 Firebase 配置firestore 规则、索引、存储规则都在firebase-project/下{ firestore: { rules: firestore.rules, indexes: firestore.indexes.json }, storage: { rules: storage.rules } }本地完整体验实时协作还需要一套协作服务器excalidraw-room把频道消息转发到 Firebase文档里的开发指南有说明。嵌入自己的应用。不想要整个仓库只取编辑器核心npm install react react-dom excalidraw/excalidraw在组件里渲染Excalidraw /就是可用的白板示例工程在examples/with-nextjs/和examples/with-script-in-browser/。踩坑速查现象yarn start报 Node 版本不满足。原因项目要求 Node 18 及以上当前版本太老。 修复nvm install 18 nvm use 18。现象3000 端口打不开提示被占用或跳到别的服务。原因Vite 开发服务器端口被占用端口来自根目录环境变量VITE_APP_PORT。 修复echo VITE_APP_PORT3001 .env再重启yarn start。现象跑完yarn start:production后访问 3000 是空白。原因生产模式由 http-server 起在 5001 端口不是 3000。 修复访问http://localhost:5001。现象导出 PNG 贴进文档发虚。原因默认 1x 缩放高分屏下被放大。 修复导出对话框把缩放改为 2x 或 3x或直接导 SVG。延伸资源入门与概念官方入门文档本地开发与测试命令开发指南编辑器核心源码与组件结构packages/excalidraw/打开终端把三条命令敲完你的第一张手绘架构图五分钟就能进会议纪要。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Excalidraw 虚拟白板快速上手指南：三条命令本地跑起协作画布
Excalidraw 虚拟白板快速上手指南三条命令本地跑起协作画布【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw开完会脑子里一团乱画架构图时又在纠结线条对不对齐Excalidraw 是一个开源的手绘风格虚拟白板无限画布、实时协作、端到端加密导出 PNG、SVG、JSON 都支持。它把画图这件事拉回到白板笔的状态——先画出来再谈优化。三个真实场景这块白板帮你解决什么给团队讲架构不想等设计工具排期。你只需要三个矩形加几条箭头就能把服务依赖关系画出来。手绘风格反而降低了图很正式但没人看得懂的尴尬评审会上大家看的是逻辑不是线条像素级对齐。头脑风暴时多人同屏谁也不抢鼠标。Excalidraw 的实时协作基于端到端加密的频道几个人同时往画布上扔想法思路是连续的。你本地部署时也可以接上自己的协作后端后面会讲怎么配。把白板嵌进你自己的产品。项目核心编辑器是一个 npm 包装进 React 应用就是可用的组件。Notion、CodeSandbox、Replit 这类产品里的画板底层用的就是同一套代码。三条命令本地跑起虚拟白板环境上只需要 Node.js 18 以上和 yarnGit 用于拉代码。装没装对跑完下面命令能出界面就算对。git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install yarn startyarn start启动 Vite 开发服务器并自动打开浏览器访问http://localhost:3000。首次启动需要编译资源等一两分钟正常。如果你只想要生产构建产物不想留在开发模式yarn start:production它先执行完整构建再用 http-server 起静态服务访问http://localhost:5001。注意生产端口是 5001不是开发模式的 3000。打开界面工具栏怎么读先做哪三件事第一次打开是欢迎页。左上角汉堡菜单里是导出、偏好设置这类低频操作顶部横排是工具栏从左到右依次是选择、矩形、菱形、圆形、箭头、直线、画笔、文本、图片、橡皮擦每个图标右下角的数字就是它的快捷键按 1 选选择工具按 5 选箭头左下角是缩放条右下角问号能看全部快捷键。按动线走先做三件事按 2 选矩形拖出一个方块。再按 8 选文本点进方块里输入用户服务——文本会自动吸附为方块内容移动方块时文字跟着走。按 5 选箭头从一个方块边缘拖向另一个。箭头会绑定到元素上之后你拖动方块箭头自动跟着走这是 Excalidraw 和画两根线假装连接的本质区别。CtrlG 把多个元素分组。整组移动、缩放拆组是 CtrlShiftG。熟悉之后往深处玩右键菜单调层级置于顶层/底层、ShiftG开网格模式对齐元素、ShiftAltD切暗色主题、用激光笔工具栏激光图标做演示时指重点。画布没有边界滚轮加 Ctrl 缩放拖空白处平移。实战从零画一张系统架构图并导出目标网关、订单、支付三个服务加消息队列导出成 PNG。画三个矩形分别标注API 网关订单服务支付服务颜色用顶部弹出面板里的填充色区分类型比如蓝色系代表核心服务。箭头工具连接网关→订单、网关→支付、订单→支付走异步再画一个菱形代表消息队列从订单连过去。每条箭头上双击加文字标签比如下单回调让图自带说明书。选全部元素CtrlG组成一个大组整体缩放到合适比例。左上角菜单 → 导出选 PNG 时把缩放设成 2x 或 3x避免贴到文档里发虚要矢量就用 SVG想日后还能二次编辑就存.excalidrawJSON 文件。线条歪歪扭扭是刻意保留的手绘感——这正是它和流程图工具的分野要的是一眼能讲明白不是工程制图精度。深度定制主题、快捷键、协作后端改主题色。界面颜色定义在 SCSS 变量文件里改令牌重新构建即可// packages/excalidraw/css/variables.module.scss $color-blue-7: #1c7ed6; // 强调色 $color-gray-8: #343a40; // 深灰文本改快捷键。所有可绑定快捷键的操作集中在shortcutMap里改字符串即可// packages/excalidraw/actions/shortcuts.ts toggleTheme: [getShortcutKey(ShiftAltD)], saveScene: [getShortcutKey(CtrlOrCmdS)], group: [getShortcutKey(CtrlOrCmdG)],配协作后端。仓库里已带 Firebase 配置firestore 规则、索引、存储规则都在firebase-project/下{ firestore: { rules: firestore.rules, indexes: firestore.indexes.json }, storage: { rules: storage.rules } }本地完整体验实时协作还需要一套协作服务器excalidraw-room把频道消息转发到 Firebase文档里的开发指南有说明。嵌入自己的应用。不想要整个仓库只取编辑器核心npm install react react-dom excalidraw/excalidraw在组件里渲染Excalidraw /就是可用的白板示例工程在examples/with-nextjs/和examples/with-script-in-browser/。踩坑速查现象yarn start报 Node 版本不满足。原因项目要求 Node 18 及以上当前版本太老。 修复nvm install 18 nvm use 18。现象3000 端口打不开提示被占用或跳到别的服务。原因Vite 开发服务器端口被占用端口来自根目录环境变量VITE_APP_PORT。 修复echo VITE_APP_PORT3001 .env再重启yarn start。现象跑完yarn start:production后访问 3000 是空白。原因生产模式由 http-server 起在 5001 端口不是 3000。 修复访问http://localhost:5001。现象导出 PNG 贴进文档发虚。原因默认 1x 缩放高分屏下被放大。 修复导出对话框把缩放改为 2x 或 3x或直接导 SVG。延伸资源入门与概念官方入门文档本地开发与测试命令开发指南编辑器核心源码与组件结构packages/excalidraw/打开终端把三条命令敲完你的第一张手绘架构图五分钟就能进会议纪要。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考