5分钟本地跑通Excalidraw手绘白板3步出第一张画布【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一个开源的手绘风格虚拟白板用来画流程图、架构图和产品原型草图。开会时直接在共享画布上画出系统架构线条会自动变成手绘风。本地跑起来只要三步。 三步跑起来克隆代码并安装依赖。本机需要 Node 18在终端执行下面命令装完依赖终端无报错即成功git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn install启动开发服务器。执行yarn start终端会输出Local: http://localhost:3000/。在浏览器打开http://localhost:3000Vite 通常会替你自动打开。你应看到中间是 Excalidraw logo 的欢迎页顶部一排选择、矩形、箭头等工具画面中部有「Open / Help」菜单。 跑通之后能干什么用Excalidraw画系统架构图操作路径从顶部工具栏依次选「矩形」和「箭头」拖出方框箭头端点靠近方框时会自动吸附上去。箭头绑定到图形后移动方框箭头跟着走不用手动重画连接线选中多个图形后右键选 Group 组成一组整组一起移动、缩放自由画笔随手也能画出这种手绘线条效果用Excalidraw和同事在同一张画布协作操作路径点左上角汉堡菜单选 Live Collaboration复制生成的链接发给同事需协作服务可用官网版已内置。对方打开链接进入同一张画布双方的光标和笔迹实时同步官方版本采用端到端加密服务端看不到内容明文用Excalidraw导出并复用画好的图操作路径汉堡菜单里选「Save as Image」存 PNG 或 SVG选「Export」存.excalidraw文件。画布会自动保存在浏览器里关掉再打开接着上次继续.excalidraw是纯 JSON 开放格式之后可以重新打开继续编辑⚡ 几个省时间的细节网格对齐Cmd/⌘ 切换网格显示摆大量方框时对位更快看画布负载Option/ 打开 Stats for nerds 面板能看到元素数量和场景体积图变重时该考虑拆图画布查全部快捷键汉堡菜单 → Help列表覆盖绘制、导出、视图模式依赖装坏在仓库根目录执行yarn clean-install它会清掉 node_modules 重新安装多数启动异常都能解决接进你自己的项目Excalidraw 也以 npm 组件excalidraw/excalidraw发布可以直接嵌进自己的 React 应用。仓库里有两个可参考的集成示例Next.js 集成 和 浏览器脚本集成。一张画布从草图到成图免费且开源。打开终端敲下第一条命令。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考