多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Excalidraw:开源虚拟白板,3 步本地跑起来

Excalidraw:开源虚拟白板,3 步本地跑起来 Excalidraw开源虚拟白板3 步本地跑起来【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源虚拟白板专注手绘风绘图与协作绘图适合开发、设计、教学和产品场景。想验证 Excalidraw 本地运行是否顺畅、了解它如何支撑 Excalidraw 团队协作可以先花十分钟把本地版本跑起来。先判断Excalidraw 是否适合你的工作流你画的图会后就过期。静态图片没法改下次讨论还得重画。Excalidraw 里每张图都是可编辑的元素改一个框、挪一条箭头都不费事。多人协作时版本混乱。它支持实时协作共享同一场景光标和修改实时同步链路本身带端到端加密。评审现场怕误触。评审者频繁拖拽、误点会污染原稿查看模式能直接锁住编辑权。如果上面任意一条戳中你Excalidraw 值得试如果你只是要一次性的海报设计专业设计软件可能更合适。本地运行 Excalidraw 的 3 步前提Node 18 及以上、yarn 1.x。git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn installyarn startnpm i react react-dom excalidraw/excalidraw第一条把仓库拉到本地并装好依赖第二条启动开发服务器按提示打开浏览器地址即可进入画布第三条则是另一条路——不跑源码只把 npm 包excalidraw/excalidraw装进自己的 React 应用适合做二次集成。想改编辑器行为核心代码集中在 packages/excalidraw/ 目录改完yarn start会热更新。第一次打开后先做这 3 件事认一遍界面。顶部是工具栏选择、矩形、椭圆、箭头、画笔、文本、贴图、橡皮左上角菜单管偏好设置、导出和主题切换左下角是缩放与撤销重做。工具上有数字编号直接敲数字键就能切工具。感受画布。按住空格键拖动即可平移滚轮缩放Ctrl0 一键还原 100% 视图。画布自动存在浏览器本地关窗口也不会丢。试一次导出与分享。主菜单可以导出 PNG、SVG或保存为.excalidrawJSON 文件需要给同事看时直接生成一个只读分享链接即可。让多人评审更顺的 2 个技巧只发链接不发文件。用主菜单的 Share 入口生成协作链接对方点开就能实时看到你的修改无需来回传文件适合 Excalidraw 团队协作场景。评审时切查看模式。按 AltR 进入查看模式画布仍可缩放平移但点不动任何元素评审会结束再切回来继续画。常用的 Excalidraw 快捷键顺手记三个CtrlG 把选中元素分组、CtrlD 复制、Ctrl/ 或按问号调出快捷键列表。画布变卡或装不上照这个清单处理先量再修。按 Alt/ 打开 Stats for nerds看元素数量和场景存储大小。元素明显偏多时把散乱对象合并、删掉冗余是 Excalidraw 性能优化最快的动作。依赖冲突。删掉 node_modules 和锁文件重新执行yarn install项目根目录也提供了yarn clean-install效果相同。端口被占。启动脚本基于 vite可以在 excalidraw-app 的启动命令后追加--port 3001换端口再起一次。收尾清单今天就可以做的四件事本地把yarn start跑通画一张至少含 5 个元素的流程图选中后 CtrlG 分组并导出 PNG打开分享链接找一位同事在另一台设备上打开试试。全做完这套开源虚拟白板就正式进入你的工作流了。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表