Excalidraw 手绘白板：5 分钟画出你的第一张图

Excalidraw 手绘白板5 分钟画出你的第一张图【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一款开源的虚拟白板工具让你用无限画布画出手绘风格的流程图、架构图和线框图。它适合想把想法画出来、又不想安装重型软件的人——浏览器打开就能画画完一键导出。3 条命令本地白板跑起来前置只需一个 Node.js 18 的环境项目package.json里声明了engines: node 18。克隆仓库并装依赖git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw启动开发服务器首次编译约 5-10 分钟耐心等yarn install yarn start浏览器打开http://localhost:3000你会看到这样的欢迎界面——顶部是工具栏中间是快捷键提示右下角 ? 能展开全部快捷键它为什么值得试手绘风渲染所有线条都带轻微抖动正式图表看着不端架子丢进评审会或文档里更亲切。无限画布没有页边距概念画大了缩小看全局、放大抠细节滚轮缩放随手平移。本地优先内容自动存在浏览器里不注册账号也不丢图还能生成只读链接分享给别人看。导出三种格式PNG 发群里、SVG 进 PPT、.excalidrawJSON 文件留给下次继续编辑。第一次使用画下你的第一个图形界面各区域分工位置作用顶部工具栏选择、矩形、圆形、菱形、箭头、直线、画笔、文字、图片、橡皮擦左上菜单按钮打开/导出、偏好设置左下角缩放比例、撤销/重做右下角快捷键列表与帮助跟着画一张最小的流程图按数字2选中矩形工具在画布上拖出一个框按T切到文字工具点进框里输入一个词按5切到箭头工具从框边缘拖向旁边再拖一个框——箭头会自动吸附在两个框上之后挪框时箭头跟着走到这里你已经完成了 Excalidraw 最核心的三个动作建形、加字、连线。实战场景5 步画一幅手绘插画想画点更有意思的照这个流程走按4选圆形工具拖出头部的大圆按7切到画笔工具自由描边补细节——抖动的线条正是手绘味的来源双击图形用填充色上色蓝、红、黄各来一块左下角把缩放到 100% 左右检查线条细节选中全部CtrlA从左上菜单导出 PNG成品大概长这样调优与定制主题左上菜单可一键切换暗色模式想永久改色改packages/excalidraw/css/variables.module.scss里的 SCSS 变量即可不用贴配置。快捷键工具栏图标上标了 1-0 的数字敲数字直接切工具右下角 ? 里能查全量快捷键比如Option/打开Stats for nerds面板看当前场景的元素数和体积协作仓库自带firebase-project/目录的协作配置但本地自托管实时协作需要额外部署官方的 collab server起步阶段可以不管。避坑指南启动后页面一直空白→ 首次编译资源需要时间不是卡死 → 等 5-10 分钟真挂了就用根目录的yarn clean-install清掉重装。装依赖时报 Node 版本不兼容→ 项目要求 Node 18比很多人以为的高 → 用 nvm 切到 18 再装。导出的 PNG 发群里显得糊→ 默认按 1x 导出 → 在导出对话框把缩放选 2x 或 3x。手滑删了图形找不回来→ 画布上没有回收站 → 立刻 CtrlZ 撤销误撤销再 CtrlShiftZ 重做。自托管后发现没有协作功能→ 客户端镜像本身不带协作这是设计如此 → 部署 excalidraw-room 协作服务或只当单机白板用。进阶入口本地开发与 Docker 自托管dev-docs/docs/introduction/development.mdxnpm 包接入与 API 文档dev-docs/docs/excalidraw/excalidraw/核心编辑器源码actions、renderer、components 都在这里packages/excalidraw/【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考