Excalidraw 手绘白板完整指南5 分钟本地跑通顺手记下 4 个效率习惯【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款免费开源的虚拟白板画布上的矩形、箭头和文字都带有轻微抖动的手绘笔触。它面向需要快速画架构图、线框图和流程图的开发者、设计师与教师支持实时协作、端到端加密并可以直接导出 PNG、SVG 或.excalidraw源文件。先看它帮你解决什么后端工程师要画一张系统架构图。传统矢量软件画出来的线太工整在评审会上显得过于正式、反而让人不敢质疑Excalidraw 的草图笔触让讨论停留在方案对不对而不是线画得直不直。产品经理要在 30 分钟里和团队对齐用户旅程。白板自带的箭头吸附和文字绑定功能让箭头改位置后标签跟着走省掉了反复对齐的机械操作。教师需要一块能离线用的演示白板。仓库内置 PWA 支持装到浏览器后可离线打开画完再联网同步也不丢内容。5 分钟跑起来环境要求一句话Node.js 18 以上加上 Yarn 和 Git。不想装 Node 的话也可以用仓库根目录的docker-compose.yml一条命令起容器。拉取代码git clone https://link.gitcode.com/i/cb561292ff057855ac775b4eb545d566 cd excalidraw安装依赖在项目根目录执行yarn install。这是一个 monorepo依赖会同时安装到excalidraw-app、packages/等所有子工作区首次安装可能需要几分钟。启动并验证执行yarn startVite 开发服务器会输出一个本地地址在浏览器打开 http://localhost:3000 。看到欢迎界面即成功随便拖出两个矩形画一条两端自动吸附的箭头再按CtrlZ撤销说明画布、吸附、历史记录都已正常工作。功能速查表功能适用场景入口或操作手绘形状与自由绘制草图、流程图、架构图左侧工具栏选矩形、圆形、菱形、箭头、画笔等箭头吸附与标签标注流程关系从形状边缘拖出箭头双击加文字拖动时自动跟随形状库复用常画的组件侧边栏 Library可保存自己的库支持导入导出.excalidrawlib导出 PNG / SVG / JSON交付与归档左上角菜单选择导出JSON 即.excalidraw开放格式实时协作多人头脑风暴打开带会话 ID 的链接加入源码在excalidraw-app/collab/端到端加密敏感内容的共享白板链接中带密钥密钥不发给对方即只有你能打开视图模式只看不画快捷键OptionR暗色模式夜间办公顶部按钮切换统计面板排查卡顿菜单里的 Stats for nerds快捷键Alt/两个补充说明协作功能由独立服务支撑本地自建的实例默认不带协作能力仓库根目录的firebase-project/是官方演示用的 Firebase 配置自部署时可替换为自己的。值得养成的效率习惯CtrlG分组后再拖动。把一组元素组合后整体移动避免每次都对齐得七零八落。CtrlD复制选中元素。比选中、复制、粘贴少两步调整间距时按方向键微调位置。空格 拖动平移画布。比缩放后再找位置快得多放大到 200% 改细节时尤其好用。Alt/打开统计面板。元素数量、画布尺寸、JSON 大小一目了然画布操作开始掉帧时先看这里确认是不是元素太多。定期导出.excalidraw文件备份。浏览器本地数据会随清缓存丢失开放格式的源文件可以直接在别的设备上打开。进阶定制与集成外观与主题定制界面颜色、字体、间距集中在packages/excalidraw/css/theme.scss和variables.module.scss中定义改变量即可整体换肤。仓库内置 Virgil、Excalifont、Nunito 等字体packages/excalidraw/fonts/更多主题的写法见 dev-docs/docs/excalidraw/excalidraw/ 里的 customizing-styles 文档。集成到现有项目Excalidraw 以excalidraw/excalidraw包形式发布是一个标准 React 组件在你的 React 应用里安装后挂载即可。仓库examples/with-nextjs/和examples/with-script-in-browser/各有一份可直接对照的集成示例前者演示 Next.js 环境下初始化、样式隔离与导出后者演示不写框架代码直接在浏览器里引用。常见坑速查依赖装不上yarn install中途报冲突或失败。先在根目录执行yarn rm:node_modules清掉所有子目录的 node_modules再重新yarn install确认 Node 版本不低于 18。端口被占用yarn start报端口冲突时换一个空端口yarn --cwd ./excalidraw-app vite --port 3001然后把浏览器地址里的端口号同步改掉。协作功能连不上本地跑起来的实例不带协作服务实时协作需要单独的 collab server。新手阶段用菜单里的只读分享链接做演示即可不必急着搭协作环境。画布操作掉帧元素数量上万后拖拽、缩放会变卡。按Alt/看统计面板确认规模用CtrlA全选后删掉冗余元素或用OptionR切到视图模式减少交互开销。写在最后先照着5 分钟跑起来把本地画布跑起来再打开欢迎界面逐项试一遍比直接读文档更快上手。更多问题解答、安装与集成细节可查阅 dev-docs/ 目录下的开发文档或直接到 gitcode 仓库 提 issue 交流。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Excalidraw 手绘白板完整指南：5 分钟本地跑通，顺手记下 4 个效率习惯
Excalidraw 手绘白板完整指南5 分钟本地跑通顺手记下 4 个效率习惯【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款免费开源的虚拟白板画布上的矩形、箭头和文字都带有轻微抖动的手绘笔触。它面向需要快速画架构图、线框图和流程图的开发者、设计师与教师支持实时协作、端到端加密并可以直接导出 PNG、SVG 或.excalidraw源文件。先看它帮你解决什么后端工程师要画一张系统架构图。传统矢量软件画出来的线太工整在评审会上显得过于正式、反而让人不敢质疑Excalidraw 的草图笔触让讨论停留在方案对不对而不是线画得直不直。产品经理要在 30 分钟里和团队对齐用户旅程。白板自带的箭头吸附和文字绑定功能让箭头改位置后标签跟着走省掉了反复对齐的机械操作。教师需要一块能离线用的演示白板。仓库内置 PWA 支持装到浏览器后可离线打开画完再联网同步也不丢内容。5 分钟跑起来环境要求一句话Node.js 18 以上加上 Yarn 和 Git。不想装 Node 的话也可以用仓库根目录的docker-compose.yml一条命令起容器。拉取代码git clone https://link.gitcode.com/i/cb561292ff057855ac775b4eb545d566 cd excalidraw安装依赖在项目根目录执行yarn install。这是一个 monorepo依赖会同时安装到excalidraw-app、packages/等所有子工作区首次安装可能需要几分钟。启动并验证执行yarn startVite 开发服务器会输出一个本地地址在浏览器打开 http://localhost:3000 。看到欢迎界面即成功随便拖出两个矩形画一条两端自动吸附的箭头再按CtrlZ撤销说明画布、吸附、历史记录都已正常工作。功能速查表功能适用场景入口或操作手绘形状与自由绘制草图、流程图、架构图左侧工具栏选矩形、圆形、菱形、箭头、画笔等箭头吸附与标签标注流程关系从形状边缘拖出箭头双击加文字拖动时自动跟随形状库复用常画的组件侧边栏 Library可保存自己的库支持导入导出.excalidrawlib导出 PNG / SVG / JSON交付与归档左上角菜单选择导出JSON 即.excalidraw开放格式实时协作多人头脑风暴打开带会话 ID 的链接加入源码在excalidraw-app/collab/端到端加密敏感内容的共享白板链接中带密钥密钥不发给对方即只有你能打开视图模式只看不画快捷键OptionR暗色模式夜间办公顶部按钮切换统计面板排查卡顿菜单里的 Stats for nerds快捷键Alt/两个补充说明协作功能由独立服务支撑本地自建的实例默认不带协作能力仓库根目录的firebase-project/是官方演示用的 Firebase 配置自部署时可替换为自己的。值得养成的效率习惯CtrlG分组后再拖动。把一组元素组合后整体移动避免每次都对齐得七零八落。CtrlD复制选中元素。比选中、复制、粘贴少两步调整间距时按方向键微调位置。空格 拖动平移画布。比缩放后再找位置快得多放大到 200% 改细节时尤其好用。Alt/打开统计面板。元素数量、画布尺寸、JSON 大小一目了然画布操作开始掉帧时先看这里确认是不是元素太多。定期导出.excalidraw文件备份。浏览器本地数据会随清缓存丢失开放格式的源文件可以直接在别的设备上打开。进阶定制与集成外观与主题定制界面颜色、字体、间距集中在packages/excalidraw/css/theme.scss和variables.module.scss中定义改变量即可整体换肤。仓库内置 Virgil、Excalifont、Nunito 等字体packages/excalidraw/fonts/更多主题的写法见 dev-docs/docs/excalidraw/excalidraw/ 里的 customizing-styles 文档。集成到现有项目Excalidraw 以excalidraw/excalidraw包形式发布是一个标准 React 组件在你的 React 应用里安装后挂载即可。仓库examples/with-nextjs/和examples/with-script-in-browser/各有一份可直接对照的集成示例前者演示 Next.js 环境下初始化、样式隔离与导出后者演示不写框架代码直接在浏览器里引用。常见坑速查依赖装不上yarn install中途报冲突或失败。先在根目录执行yarn rm:node_modules清掉所有子目录的 node_modules再重新yarn install确认 Node 版本不低于 18。端口被占用yarn start报端口冲突时换一个空端口yarn --cwd ./excalidraw-app vite --port 3001然后把浏览器地址里的端口号同步改掉。协作功能连不上本地跑起来的实例不带协作服务实时协作需要单独的 collab server。新手阶段用菜单里的只读分享链接做演示即可不必急着搭协作环境。画布操作掉帧元素数量上万后拖拽、缩放会变卡。按Alt/看统计面板确认规模用CtrlA全选后删掉冗余元素或用OptionR切到视图模式减少交互开销。写在最后先照着5 分钟跑起来把本地画布跑起来再打开欢迎界面逐项试一遍比直接读文档更快上手。更多问题解答、安装与集成细节可查阅 dev-docs/ 目录下的开发文档或直接到 gitcode 仓库 提 issue 交流。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考