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

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

【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw

Excalidraw 是一款开源的虚拟白板工具，让你用无限画布画出手绘风格的流程图、架构图和线框图。它适合想把想法画出来、又不想安装重型软件的人——浏览器打开就能画，画完一键导出。

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 文件留给下次继续编辑。

第一次使用：画下你的第一个图形

界面各区域分工：

跟着画一张最小的"流程图"：

1. 按数字2选中矩形工具，在画布上拖出一个框
2. 按T切到文字工具，点进框里输入一个词
3. 按5切到箭头工具，从框边缘拖向旁边再拖一个框——箭头会自动吸附在两个框上，之后挪框时箭头跟着走

到这里，你已经完成了 Excalidraw 最核心的三个动作：建形、加字、连线。

实战场景：5 步画一幅手绘插画

想画点更有意思的？照这个流程走：

1. 按4选圆形工具，拖出头部的大圆
2. 按7切到画笔工具，自由描边补细节——抖动的线条正是手绘味的来源
3. 双击图形用填充色上色，蓝、红、黄各来一块
4. 左下角把缩放到 100% 左右，检查线条细节
5. 选中全部（Ctrl+A），从左上菜单导出 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。
• 手滑删了图形找不回来→ 画布上没有回收站 → 立刻 Ctrl+Z 撤销，误撤销再 Ctrl+Shift+Z 重做。
• 自托管后发现没有协作功能→ 客户端镜像本身不带协作，这是设计如此 → 部署 excalidraw-room 协作服务，或只当单机白板用。

进阶入口

• 本地开发与 Docker 自托管：dev-docs/docs/introduction/development.mdx
• npm 包接入与 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