企业官网建设流程全解析

Excalidraw 虚拟白板：4 条命令本地跑起来，10 分钟画完一张手绘架构图

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

Excalidraw 是一个开源虚拟白板，提供无限画布和手绘风格，支持在线协作绘图与端到端加密。这篇文章带你把它跑在本地，走一遍画系统架构图的完整流程，并给出核心功能、常用快捷键和常见问题解答。

⚡ 三分钟跑起来：Excalidraw 本地启动

环境要求：Node.js 18+ 和 yarn，git clone 后安装依赖即可。

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

运行yarn start，浏览器打开http://localhost:3000就是画布。端口默认 3000，由excalidraw-app/vite.config.mts里的VITE_APP_PORT环境变量控制。首次启动是欢迎界面，工具栏每个图标上标着快捷键数字，照着按就能上手。

✏️ 用一个真实任务上手：画一张系统架构图

按下面顺序做，边画边认识每个工具：

1. 画框：按2选矩形工具，拖出一个框当"前端"；按4选椭圆工具，再画一个"数据库"。
2. 连箭头：按5选箭头工具，从一个形状边缘朝另一个形状拖，箭头会自动吸附并绑定到形状上，之后移动形状，箭头跟着走。
3. 加文字：按8选文本工具直接在空白处写字，或者双击已画好的形状，在里面打字。
4. 整理画布：按住空格拖动可以平移，左下角的 − / + / 百分比按钮控制缩放。选中全部（Ctrl+A）后按Ctrl+G组合，Ctrl+D可以整套复制再改。
5. 导出：点左上角汉堡菜单 → Export / Copy to clipboard，选 PNG 或 SVG；想留个能再编辑的版本，就同时下载.excalidraw文件（本质是 JSON），以后在同一菜单里随时打开。

手绘风格导出到文档、邮件里，比规整图形更像"草图评审"，更容易聚焦结构本身。

📌 核心功能速览

实时在线协作：拉个房间一起画

干什么：开启协作后把链接发给别人，双方光标和改动实时同步，会话是端到端加密的。 入口：顶部菜单 → Share / Collaborate，地址栏会追加#room=参数，整条链接就是房间地址。 适合：远程需求评审、架构图走查会。

形状库：常用图标一键插入

干什么：把数据库、用户、服务器这类形状收进库，画图时一键插入，不用每次重画。 入口：顶部工具栏右侧的小书本图标，支持导入.excalidrawlib库文件。 适合：架构图中大量重复元素、UI 线框图拼装。

统计面板：查元素数量和画布大小

干什么：显示场景元素数量、画布宽高和存储占用，一眼看出画面多大。 入口：左上角菜单 → Stats for nerds（macOS 快捷键Option+/）。 适合：导出前检查性能，分享前确认场景尺寸。

暗色模式与主题定制

干什么：切换深色画布；开发者还能改配色方案、字体大小。 入口：菜单里直接切换暗色模式；改主题编辑packages/excalidraw/css/theme.scss。 适合：长时间低光环境画图，或把白板嵌进自有产品后统一品牌色。

🔍 遇到问题先查这里

yarn install报依赖错误原因：项目是 monorepo，excalidraw-app和packages/*共用依赖树，残留的旧node_modules容易造成冲突。 解决：在项目根目录运行yarn clean-install，它会清空 node_modules 再重新安装。

启动提示 "Port 3000 is already in use"原因：3000 端口被占用。 解决：换端口启动，VITE_APP_PORT=3001 yarn start，然后访问http://localhost:3001。

协作链接打不开、画不出第二个人原因：本地开发环境不包含协作服务端。 解决：协作需要另外启动 excalidraw-room 服务，或直接用线上服务；本地先把单人画图流程跑熟即可。

🧭 下一步往哪走

• 官方文档在 dev-docs/docs/，涵盖本地开发、贡献流程和组件用法。
• 仓库自带两个接入示例：examples/with-nextjs/ 把白板嵌进 Next.js 站点，examples/with-script-in-browser/ 演示用 script 标签加载。
• 两个可扩展方向：用 npm 包@excalidraw/excalidraw把白板作为组件嵌入自己的 React 应用；参考 Dockerfile 自托管一个私有实例。

Excalidraw 的核心很简单：无限画布、手绘风格、实时协作。本地启动只要 4 行命令，画一张能导出的手绘架构图只要几分钟。先照着第 2 节把项目跑起来，浏览器里打开一块空白画布试试。

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