Excalidraw 虚拟白板完整教程5 分钟在本地跑起一个手绘风协作画板【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源的虚拟白板工具画出来的东西像马克笔随手涂的草图但它支持无限画布、多人实时协作和一键导出。想象一下远程评审会上产品经理对着屏幕画出系统链路同事实时在旁边改框和加箭头最后导出一张 PNG 直接贴进文档——全程没装任何软件。下面用大白话讲清楚它是什么、怎么在本地跑起来、以及日常最好用的几个功能。Excalidraw 的标志性手绘风格协作画板简单直接Excalidraw 帮你解决什么问题静态图片没法改协作只能靠猜。用传统工具导出的流程图是死的改一个框位置就要重开软件重画别人想提意见只能截图加红圈。Excalidraw 里每个元素都是活的拖一下箭头、改一个标签就行多人同时在线编辑时光标是互相可见的。专业绘图工具太重、门槛太高。想画个快速草图却要先学一堆菜单和图层面板Excalidraw 的工具栏只有不到 10 个图标箭头、直线、矩形、椭圆、菱形、自由画笔、文字、图片、橡皮全部一眼能认。线条自带轻微抖动的手绘质感草图味保留了但每个元素依然可以精确编辑。普通画布有边界内容一多就画不下。把无限画布理解成一张可以随时扩大的草稿纸画到右边没有空间了往右拖就接着画永远不会碰到边缘也不会因为放大缩小而糊掉。适合谁来用首次打开的欢迎界面工具栏、菜单入口和帮助提示一目了然产品经理和设计师会上边讲边画用户旅程图和低保真线框图手绘风正好——它传达这是想法不是定稿的信号讨论聚焦在逻辑上而不是纠结像素对齐。开发团队画系统架构图、模块依赖和 API 调用流程画完直接分享只读链接给评审人画布数据支持端到端加密加密在本地完成只有持有密钥的人能解密内容。老师和学生做互动板书学生在线接手改无限画布加暗色模式深夜看屏幕不刺眼演示数学推导、时间线这类线性内容特别顺手。本地部署 Excalidraw 的最短路径前置条件很简单装好 Node.js 18 及以上版本可以理解为运行这个项目的引擎和 Git。如果不想折腾环境仓库根目录自带 Docker 构建文件可以跳过后面全部步骤。第一步获取代码并进入目录git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw第二步安装依赖并启动开发服务器两条命令放一起了顺序执行yarn install yarn start第三步打开浏览器访问http://localhost:3000。看到带工具栏的欢迎界面就算成功了 。如果你习惯用 Docker这两条命令可以直接替代上面三步docker build -t excalidraw . docker run --rm -dit --name excalidraw -p 5000:80 excalidraw然后访问http://localhost:5000。Docker 镜像默认不带任何统计上报适合自托管。注意自托管模式暂不支持分享链接和实时协作本地画图完全够用。三个最常用的核心功能1. 工具栏 箭头吸附画图主力位置在界面顶部的工具条快捷键数字 1~0 都能快速切换。画矩形、椭圆、菱形然后画箭头指向它们——箭头会自动咬住图形边缘之后移动图形时箭头跟着走。效果就是图越改越乱连线却始终对齐不用手动修正。2. 统计面板画布健康检查在左上角菜单里找 Stats for nerds或按 Option/ 直接打开。右侧浮层会显示场景里的元素数量、画布宽高以及每个元素占用的存储空间。画图画到卡顿先来这里看一眼元素规模比盲猜有效。3. 导出与视图模式从草图到成品左上角菜单可以导出 PNG贴图用、SVG矢量可无损缩放或.excalidraw的 JSON 源文件以后继续编辑用。元素多的时候按 OptionR 切到 View mode查看模式屏蔽编辑操作浏览大画布会流畅不少。 效率小贴士CtrlZ / CtrlY 撤销重做CtrlD 复制选中元素CtrlG 组合按住空格键拖动平移画布。这四个动作覆盖了日常画图 80% 的操作。遇到问题先看这里现象yarn install报依赖冲突或安装失败。原因残留的 node_modules 缓存与锁文件不一致。解法仓库自带清理脚本在项目根目录执行yarn clean-install即可一键删除依赖并重装不用手动删文件夹。现象启动后浏览器提示端口被占用或页面打不开。原因3000 端口已经被其他程序占着。解法修改excalidraw-app里的启动脚本给 vite 指定一个新端口{ scripts: { start: yarn vite --port 3001 } }改完重新yarn start浏览器访问http://localhost:3001。现象元素一多拖动画布明显卡顿。原因单个场景里可编辑元素太多渲染压力大。解法把逻辑上同属一块的元素用 CtrlG 组合起来确认完内容后切到 View mode 浏览确实画不下就拆成多张画布。再进一步扩展形状库和定制主题Excalidraw 的 Library形状库功能支持导入.excalidrawlib格式的文件。你可以把团队常用的图标、标准组件先画好存进库以后画图时像粘贴模板一样从左侧工具栏直接拖出来架构图、流程图会画得飞快。如果想换掉整个界面观感主题变量都集中在packages/excalidraw/css目录下的样式文件里改颜色方案、字号和元素默认样式就是改这几处。想深入理解某个功能怎么实现的对应源码也都在 packages/excalidraw 下按功能分好目录边改边跑很方便。写在最后回到开头那张草稿纸本地环境搭好后你已经能无限延展地画图、用箭头吸附保持连线整洁、随时导出成图片分享。接下来建议两条路线读一遍仓库里dev-docs目录下的开发文档了解它作为 npm 组件嵌入自己应用的完整 API或者遇到问题去官方 Discord 社区提问响应通常很快。动手画第一张架构图就是最好的学习。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Excalidraw 虚拟白板完整教程：5 分钟在本地跑起一个手绘风协作画板
Excalidraw 虚拟白板完整教程5 分钟在本地跑起一个手绘风协作画板【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源的虚拟白板工具画出来的东西像马克笔随手涂的草图但它支持无限画布、多人实时协作和一键导出。想象一下远程评审会上产品经理对着屏幕画出系统链路同事实时在旁边改框和加箭头最后导出一张 PNG 直接贴进文档——全程没装任何软件。下面用大白话讲清楚它是什么、怎么在本地跑起来、以及日常最好用的几个功能。Excalidraw 的标志性手绘风格协作画板简单直接Excalidraw 帮你解决什么问题静态图片没法改协作只能靠猜。用传统工具导出的流程图是死的改一个框位置就要重开软件重画别人想提意见只能截图加红圈。Excalidraw 里每个元素都是活的拖一下箭头、改一个标签就行多人同时在线编辑时光标是互相可见的。专业绘图工具太重、门槛太高。想画个快速草图却要先学一堆菜单和图层面板Excalidraw 的工具栏只有不到 10 个图标箭头、直线、矩形、椭圆、菱形、自由画笔、文字、图片、橡皮全部一眼能认。线条自带轻微抖动的手绘质感草图味保留了但每个元素依然可以精确编辑。普通画布有边界内容一多就画不下。把无限画布理解成一张可以随时扩大的草稿纸画到右边没有空间了往右拖就接着画永远不会碰到边缘也不会因为放大缩小而糊掉。适合谁来用首次打开的欢迎界面工具栏、菜单入口和帮助提示一目了然产品经理和设计师会上边讲边画用户旅程图和低保真线框图手绘风正好——它传达这是想法不是定稿的信号讨论聚焦在逻辑上而不是纠结像素对齐。开发团队画系统架构图、模块依赖和 API 调用流程画完直接分享只读链接给评审人画布数据支持端到端加密加密在本地完成只有持有密钥的人能解密内容。老师和学生做互动板书学生在线接手改无限画布加暗色模式深夜看屏幕不刺眼演示数学推导、时间线这类线性内容特别顺手。本地部署 Excalidraw 的最短路径前置条件很简单装好 Node.js 18 及以上版本可以理解为运行这个项目的引擎和 Git。如果不想折腾环境仓库根目录自带 Docker 构建文件可以跳过后面全部步骤。第一步获取代码并进入目录git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw第二步安装依赖并启动开发服务器两条命令放一起了顺序执行yarn install yarn start第三步打开浏览器访问http://localhost:3000。看到带工具栏的欢迎界面就算成功了 。如果你习惯用 Docker这两条命令可以直接替代上面三步docker build -t excalidraw . docker run --rm -dit --name excalidraw -p 5000:80 excalidraw然后访问http://localhost:5000。Docker 镜像默认不带任何统计上报适合自托管。注意自托管模式暂不支持分享链接和实时协作本地画图完全够用。三个最常用的核心功能1. 工具栏 箭头吸附画图主力位置在界面顶部的工具条快捷键数字 1~0 都能快速切换。画矩形、椭圆、菱形然后画箭头指向它们——箭头会自动咬住图形边缘之后移动图形时箭头跟着走。效果就是图越改越乱连线却始终对齐不用手动修正。2. 统计面板画布健康检查在左上角菜单里找 Stats for nerds或按 Option/ 直接打开。右侧浮层会显示场景里的元素数量、画布宽高以及每个元素占用的存储空间。画图画到卡顿先来这里看一眼元素规模比盲猜有效。3. 导出与视图模式从草图到成品左上角菜单可以导出 PNG贴图用、SVG矢量可无损缩放或.excalidraw的 JSON 源文件以后继续编辑用。元素多的时候按 OptionR 切到 View mode查看模式屏蔽编辑操作浏览大画布会流畅不少。 效率小贴士CtrlZ / CtrlY 撤销重做CtrlD 复制选中元素CtrlG 组合按住空格键拖动平移画布。这四个动作覆盖了日常画图 80% 的操作。遇到问题先看这里现象yarn install报依赖冲突或安装失败。原因残留的 node_modules 缓存与锁文件不一致。解法仓库自带清理脚本在项目根目录执行yarn clean-install即可一键删除依赖并重装不用手动删文件夹。现象启动后浏览器提示端口被占用或页面打不开。原因3000 端口已经被其他程序占着。解法修改excalidraw-app里的启动脚本给 vite 指定一个新端口{ scripts: { start: yarn vite --port 3001 } }改完重新yarn start浏览器访问http://localhost:3001。现象元素一多拖动画布明显卡顿。原因单个场景里可编辑元素太多渲染压力大。解法把逻辑上同属一块的元素用 CtrlG 组合起来确认完内容后切到 View mode 浏览确实画不下就拆成多张画布。再进一步扩展形状库和定制主题Excalidraw 的 Library形状库功能支持导入.excalidrawlib格式的文件。你可以把团队常用的图标、标准组件先画好存进库以后画图时像粘贴模板一样从左侧工具栏直接拖出来架构图、流程图会画得飞快。如果想换掉整个界面观感主题变量都集中在packages/excalidraw/css目录下的样式文件里改颜色方案、字号和元素默认样式就是改这几处。想深入理解某个功能怎么实现的对应源码也都在 packages/excalidraw 下按功能分好目录边改边跑很方便。写在最后回到开头那张草稿纸本地环境搭好后你已经能无限延展地画图、用箭头吸附保持连线整洁、随时导出成图片分享。接下来建议两条路线读一遍仓库里dev-docs目录下的开发文档了解它作为 npm 组件嵌入自己应用的完整 API或者遇到问题去官方 Discord 社区提问响应通常很快。动手画第一张架构图就是最好的学习。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考