尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

Excalidraw 手绘风协作虚拟白板:3 条命令跑起来

Excalidraw 手绘风协作虚拟白板:3 条命令跑起来 Excalidraw 手绘风协作虚拟白板3 条命令跑起来【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源虚拟白板所有线条都带手绘草图质感支持多人实时协作协作链路端到端加密。适合三类人要画系统图的开发者、要写互动板书的教师、要出低保真线框图的产品经理。装到本地后开箱即用本文带你从克隆到画出第一张图。两个离不开白板的场景远程头脑风暴。会议里每人对着同一块画布想法落笔即同步不用来回截图传文件。讨论完直接导出 PNG 丢进会议纪要或分享一个只读链接让没参会的人看结果。课程互动板书。教师把白板投到大屏学生实时看到推导过程讲到哪改到哪数学公式、时间线、流程图都能直接画抽象内容当场变成可视化。核心能力速览这块虚拟白板能做什么能力一句话说明 无限画布 手绘渲染画布无边界线条自带轻微抖动图表像白板上画出来的 实时协作多人同时编辑同一场景修改秒级同步数据端到端加密 本地优先存储自动保存到浏览器本地断网也能继续画 多格式导出PNG、SVG、复制到剪贴板或存为开放的.excalidrawJSON 文件形状库常用图标、组件存进库需要时一键调出克隆仓库并启动开发服务器前置条件只有一个Node.js 18 以上yarn 随项目锁定为 1.22。下面分两组命令第一组克隆并装依赖第二组启动开发服务器git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn installyarn start启动后浏览器会自动打开http://localhost:3000看到带引导提示的欢迎界面即代表环境就绪。默认端口在excalidraw-app/vite.config.mts里通过环境变量VITE_APP_PORT控制默认 3000被占用时改这里即可不用动其他配置。日常高频操作与快捷键速查日常画图中用得最勤的几个组合键CtrlD复制选中元素CtrlG组合、CtrlShiftG取消组合按住空格拖动平移画布Ctrl0重置缩放Shift1让全部内容适屏按?随时调出完整快捷键列表源码在packages/excalidraw/actions/shortcuts.ts想加新快捷键直接改这个文件冷门但实用的功能Alt/Mac 为Option/打开 Stats for nerds 统计面板能看到场景元素数、画布宽高和存储占用排查大图卡顿前先来这里看一眼AltR切换 View mode只读模式画布不可编辑时渲染负担最小适合只看不画的场景Q锁定当前工具连续画 10 个矩形不用每画完一个就回工具栏点一次Shift1/Shift2/Shift3分别是整体适屏、当前视口适屏、选中元素适屏三档定位角色工作流拿到工具后的前 30 分钟开发者。前 10 分钟用矩形和箭头画出服务拓扑箭头默认能吸附到形状边缘拖动框体连线不跑偏接着把重复的服务框CtrlD复制几个最后导出 SVG 贴进设计文档。如果想把白板嵌进自家工具仓库里的dev-docs/docs/excalidraw/excalidraw/目录有完整的集成文档。教师。前 15 分钟用文本和菱形摆出知识框架讲到的分支直接往旁边延伸AltR切到只读模式做课堂演示防止误触改乱板书课后导出 PNG 归档。产品经理。用矩形快速铺线框图Q锁定矩形工具连铺十几个模块配色用色板统一区分模块归属需求评审时开协作链接让评审人直接在图上圈改。踩坑速查4 个常见问题端口 3000 被占用启动后打不开页面原因本机已有别的开发服务占着 3000 端口解法在项目根目录.env中设置VITE_APP_PORT3001再启动yarn install 失败或依赖版本冲突原因本地缓存或残留的 node_modules 状态脏了解法删除node_modules目录后重新yarn install仍失败再清 yarn 缓存本地启动后协作功能不可用原因实时协作依赖独立的 collab 服务纯本地开发不会自动连上解法单独搭建 collab 服务或直接用仓库自带的 Docker 镜像自托管元素多了画布明显变卡原因场景内元素数量超出流畅阈值解法Alt/看元素数合并重复元素、清掉无用历史演示时切AltR只读模式画下你的第一张图Excalidraw 把快速画出来给别人看这件事做到了三步以内克隆、安装、启动。它是 MIT 协议的开源项目画完第一张图后建议顺手把常用的几个框存进形状库——第二次画图时你会感谢这个习惯。打开终端3 条命令之后你就能看到自己的画布。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表