企业官网建设流程全解析

Excalidraw 快速上手：手绘风虚拟白板 4 个实操要点

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

评审会上架构还在大家脑子里，白板上画着画着就乱成一团。Excalidraw 这款开源手绘风虚拟白板，能把这类图变成几次拖拽的事——本文带你在本地跑起来，再看几个让效率翻倍的用法。

手绘风格 + 无限画布，它凭什么值得用

Excalidraw 的界面就一条工具栏加一块画布，上手成本接近于零，但底层是全数字化的：每个图形可编辑、可绑定、可分组，不像马克笔画完只能拍照。

它的核心差异有两点：一是手绘渲染风格，线条故意带点抖动，草图感强、不会显得"过于正式"而让讨论陷入像素级争论；二是无限画布加实时协作，图再大也画得下，团队还能通过分享链接同时改同一张图。

图：Excalidraw 欢迎界面，左侧是工具栏提示，中间是 Open/Help 入口

把微服务调用链画成一张图

先画两个矩形代表网关和订单服务，选箭头工具从网关边缘拉到订单服务上——箭头两端会自动吸附并绑定元素，之后拖动矩形，箭头跟着走，不用再手动对齐。

把会议结论变成流程图

会上的口述流程，回来后用文本工具把每个步骤打出来，选中某个矩形按Ctrl+D快速复制出下一个节点，改文字即可。整张图画完按Ctrl+G分组，移动时不会散架，最后从左上角菜单导出 PNG 或 SVG 贴进文档。

复杂图卡顿？用统计面板查一下

图元素多了画面卡顿时，打开左上角菜单选 "Stats for nerds"（快捷键Alt+/，macOS 为Option+/），右侧会弹出面板，直接显示当前场景的元素数量、画布宽高和存储占用，是定位"到底是不是元素太多"最快的办法。

图：Stats for nerds 面板展示元素数量、画布尺寸与存储占用

如果确实元素量大，按Alt+R切到 View mode（查看模式），画布只读但滚动和缩放会明显更顺。

三步跑通本地环境

1. 克隆源码

git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw

2. 安装依赖

yarn install

提示：要求 Node.js 18 及以上版本；安装报依赖冲突时，可以直接跑仓库自带的yarn clean-install，它会清掉 node_modules 后重装。

3. 启动开发服务器

yarn start

执行后浏览器会自动打开http://localhost:3000，看到的就是前面那张手绘风欢迎界面，画布即刻可用。

提示：如果提示 3000 端口被占用，在项目根目录建一个.env文件，写入VITE_APP_PORT=3001，vite 会自动读取这个变量换端口，不用改代码。

更多开发细节可以看 开发文档，主题变量等自定义项集中在packages/excalidraw/css/theme.scss里。

现在动手试一下：用 3 个矩形 + 2 条箭头画一个登录流程，从左上角菜单导出 PNG。你的第一张手绘风架构图，五分钟内就能成型。

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