尧图网页设计 
Excalidraw 开源手绘白板教程如何在本地快速跑起协作绘图空间【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一个基于 React 与 TypeScript 构建的开源虚拟白板用类手绘的线条质感渲染所有图形适合做线框图、架构图和头脑风暴草图。它解决的是团队需要一个能自托管、能嵌入、还能实时协作的绘图白板这个问题目标用户主要是想私有化部署白板的开发者以及想把绘图组件集成进自己产品的前端工程师。项目速览技术栈与适用场景技术栈React 19 TypeScriptVite 5 驱动的 Yarn workspaces 多包仓库核心能力拆分为excalidraw/excalidraw、element、common、math等子包运行环境Node.js 18 以上、yarn 1.x纯前端项目本地跑起来不需要后端服务核心卖点无限画布、手绘风渲染、实时协作端到端加密、导出 PNG / SVG / JSON适用场景团队私有白板部署、给自有产品嵌入绘图画布、研究 Canvas 渲染与元素模型的实现协议MIT可免费修改、二次分发仓库本身就是一个现成的多包工程根目录的 package.json 已把常用脚本都定义好了拿到源码后基本不用翻子项目。从零跑起来源码获取、依赖安装与启动命令先把仓库克隆到本地git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw安装依赖。由于 workspace 子包较多且包含 husky git 钩子这一步耗时略长耐心等它跑完yarn install启动开发服务器。根目录的 start 脚本实际是转发给 excalidraw-app 子包由 Vite 提供本地服务yarn start默认监听 3000 端口浏览器打开http://localhost:3000看到欢迎页这块手绘白板就跑起来了。顶部工具栏、左侧菜单、右下缩放控制都是它开箱即用的完整形态。跑起来之后可以直接上手体验它的几项关键能力。关键能力解析手绘风格绘制与形状工具顶部工具栏提供矩形、椭圆、菱形、箭头、直线、画笔、文字、图片、橡皮擦等基础工具。箭头可以吸附绑定到形状上并附带文字标签每个图形都能单独调整描边宽度、线型实线、虚线和粗糙度——粗糙度越高线条越接近真实笔迹。下图就是这种手绘风格的典型产出整个过程只是选工具 → 拖画布 → 右侧属性面板调参数。实时协作与端到端加密仓库里的 excalidraw-app 是一个带协作能力的完整应用多人同屏绘制数据经 Firebase 通道同步且端到端加密。协作逻辑集中在excalidraw-app/collab/目录。本地以单人模式开发时不需要动 Firebase 配置应用会自动把画布保存进浏览器本地存储刷新页面也不会丢内容。导出与开放格式当前视图可以导出为 PNG 或 SVG整个文档则能存为.excalidraw的 JSON 文件。这是一种开放格式任何 Excalidraw 实例都能重新打开也方便用脚本程序化地生成、批处理图形。导出相关组件位于 packages/excalidraw/components/ExportDialog.scss 对应的目录中想扩展导出行为可以从这里入手。配置文件与常用构建命令日常改动集中在几个文件上配合根目录脚本使用即可汇总如下用途路径 / 命令说明主样式与主题packages/excalidraw/css/app.scss白板 UI 的整体样式主题变量packages/excalidraw/css/variables.module.scss颜色、尺寸等 SCSS 变量定制外观先改这里本地化资源packages/excalidraw/locales/50 余种语言的 JSON 翻译文件新增语言在此添加开发服务器配置excalidraw-app/vite.config.mts端口、插件、构建行为均在此定义构建生产版yarn build产物输出到 excalidraw-app/build运行测试yarn testvitest 驱动用例集中在 packages/excalidraw/tests/代码质量yarn test:code/yarn fixeslint 检查与自动修复想换端口很简单vite 配置读取VITE_APP_PORT环境变量例如VITE_APP_PORT3001 yarn start即可。踩坑记录三个高频问题与处理安装或启动时报 Node 版本错误→ 根目录 package.json 的 engines 要求 Node 18 以上且 packageManager 字段锁定了 yarn 1.22.22。原因是本地 Node 过旧或误用了 npm 安装处理方式是升级 Node 版本并用 yarn 走安装流程。启动时提示 3000 端口被占用→ vite 默认端口被其他进程占用的典型现象。处理方式是设置VITE_APP_PORT换端口或先释放被占用的端口。依赖装到一半损坏、锁文件冲突→ 多次中断安装或混合使用包管理器会导致 node_modules 状态不一致。根脚本里已备好yarn clean-install它会清空 node_modules 并重装直接执行即可不必手动删除目录。延伸代码往哪里深挖Excalidraw 的模块边界划得很清楚元素模型与几何逻辑在 packages/element渲染管线在 packages/excalidraw/rendererReact 组件层在 packages/excalidraw/components带协作的完整应用则单独放在 excalidraw-app/。如果准备把白板能力嵌入自己的产品可以顺着 dev-docs/docs/introduction/ 目录下的 get-started 与 development 两篇文档读起那里有官方集成指南的完整说明。【免费下载链接】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/excalidrawExcalidraw 是一个基于 React 与 TypeScript 构建的开源虚拟白板用类手绘的线条质感渲染所有图形适合做线框图、架构图和头脑风暴草图。它解决的是团队需要一个能自托管、能嵌入、还能实时协作的绘图白板这个问题目标用户主要是想私有化部署白板的开发者以及想把绘图组件集成进自己产品的前端工程师。项目速览技术栈与适用场景技术栈React 19 TypeScriptVite 5 驱动的 Yarn workspaces 多包仓库核心能力拆分为excalidraw/excalidraw、element、common、math等子包运行环境Node.js 18 以上、yarn 1.x纯前端项目本地跑起来不需要后端服务核心卖点无限画布、手绘风渲染、实时协作端到端加密、导出 PNG / SVG / JSON适用场景团队私有白板部署、给自有产品嵌入绘图画布、研究 Canvas 渲染与元素模型的实现协议MIT可免费修改、二次分发仓库本身就是一个现成的多包工程根目录的 package.json 已把常用脚本都定义好了拿到源码后基本不用翻子项目。从零跑起来源码获取、依赖安装与启动命令先把仓库克隆到本地git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw安装依赖。由于 workspace 子包较多且包含 husky git 钩子这一步耗时略长耐心等它跑完yarn install启动开发服务器。根目录的 start 脚本实际是转发给 excalidraw-app 子包由 Vite 提供本地服务yarn start默认监听 3000 端口浏览器打开http://localhost:3000看到欢迎页这块手绘白板就跑起来了。顶部工具栏、左侧菜单、右下缩放控制都是它开箱即用的完整形态。跑起来之后可以直接上手体验它的几项关键能力。关键能力解析手绘风格绘制与形状工具顶部工具栏提供矩形、椭圆、菱形、箭头、直线、画笔、文字、图片、橡皮擦等基础工具。箭头可以吸附绑定到形状上并附带文字标签每个图形都能单独调整描边宽度、线型实线、虚线和粗糙度——粗糙度越高线条越接近真实笔迹。下图就是这种手绘风格的典型产出整个过程只是选工具 → 拖画布 → 右侧属性面板调参数。实时协作与端到端加密仓库里的 excalidraw-app 是一个带协作能力的完整应用多人同屏绘制数据经 Firebase 通道同步且端到端加密。协作逻辑集中在excalidraw-app/collab/目录。本地以单人模式开发时不需要动 Firebase 配置应用会自动把画布保存进浏览器本地存储刷新页面也不会丢内容。导出与开放格式当前视图可以导出为 PNG 或 SVG整个文档则能存为.excalidraw的 JSON 文件。这是一种开放格式任何 Excalidraw 实例都能重新打开也方便用脚本程序化地生成、批处理图形。导出相关组件位于 packages/excalidraw/components/ExportDialog.scss 对应的目录中想扩展导出行为可以从这里入手。配置文件与常用构建命令日常改动集中在几个文件上配合根目录脚本使用即可汇总如下用途路径 / 命令说明主样式与主题packages/excalidraw/css/app.scss白板 UI 的整体样式主题变量packages/excalidraw/css/variables.module.scss颜色、尺寸等 SCSS 变量定制外观先改这里本地化资源packages/excalidraw/locales/50 余种语言的 JSON 翻译文件新增语言在此添加开发服务器配置excalidraw-app/vite.config.mts端口、插件、构建行为均在此定义构建生产版yarn build产物输出到 excalidraw-app/build运行测试yarn testvitest 驱动用例集中在 packages/excalidraw/tests/代码质量yarn test:code/yarn fixeslint 检查与自动修复想换端口很简单vite 配置读取VITE_APP_PORT环境变量例如VITE_APP_PORT3001 yarn start即可。踩坑记录三个高频问题与处理安装或启动时报 Node 版本错误→ 根目录 package.json 的 engines 要求 Node 18 以上且 packageManager 字段锁定了 yarn 1.22.22。原因是本地 Node 过旧或误用了 npm 安装处理方式是升级 Node 版本并用 yarn 走安装流程。启动时提示 3000 端口被占用→ vite 默认端口被其他进程占用的典型现象。处理方式是设置VITE_APP_PORT换端口或先释放被占用的端口。依赖装到一半损坏、锁文件冲突→ 多次中断安装或混合使用包管理器会导致 node_modules 状态不一致。根脚本里已备好yarn clean-install它会清空 node_modules 并重装直接执行即可不必手动删除目录。延伸代码往哪里深挖Excalidraw 的模块边界划得很清楚元素模型与几何逻辑在 packages/element渲染管线在 packages/excalidraw/rendererReact 组件层在 packages/excalidraw/components带协作的完整应用则单独放在 excalidraw-app/。如果准备把白板能力嵌入自己的产品可以顺着 dev-docs/docs/introduction/ 目录下的 get-started 与 development 两篇文档读起那里有官方集成指南的完整说明。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考