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

Excalidraw 虚拟白板4 条命令本地跑起来10 分钟画完一张手绘架构图【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidrawExcalidraw 是一个开源虚拟白板提供无限画布和手绘风格支持在线协作绘图与端到端加密。这篇文章带你把它跑在本地走一遍画系统架构图的完整流程并给出核心功能、常用快捷键和常见问题解答。⚡ 三分钟跑起来Excalidraw 本地启动环境要求Node.js 18 和 yarngit 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环境变量控制。首次启动是欢迎界面工具栏每个图标上标着快捷键数字照着按就能上手。✏️ 用一个真实任务上手画一张系统架构图按下面顺序做边画边认识每个工具画框按2选矩形工具拖出一个框当前端按4选椭圆工具再画一个数据库。连箭头按5选箭头工具从一个形状边缘朝另一个形状拖箭头会自动吸附并绑定到形状上之后移动形状箭头跟着走。加文字按8选文本工具直接在空白处写字或者双击已画好的形状在里面打字。整理画布按住空格拖动可以平移左下角的 − / / 百分比按钮控制缩放。选中全部CtrlA后按CtrlG组合CtrlD可以整套复制再改。导出点左上角汉堡菜单 → Export / Copy to clipboard选 PNG 或 SVG想留个能再编辑的版本就同时下载.excalidraw文件本质是 JSON以后在同一菜单里随时打开。手绘风格导出到文档、邮件里比规整图形更像草图评审更容易聚焦结构本身。 核心功能速览实时在线协作拉个房间一起画干什么开启协作后把链接发给别人双方光标和改动实时同步会话是端到端加密的。 入口顶部菜单 → Share / Collaborate地址栏会追加#room参数整条链接就是房间地址。 适合远程需求评审、架构图走查会。形状库常用图标一键插入干什么把数据库、用户、服务器这类形状收进库画图时一键插入不用每次重画。 入口顶部工具栏右侧的小书本图标支持导入.excalidrawlib库文件。 适合架构图中大量重复元素、UI 线框图拼装。统计面板查元素数量和画布大小干什么显示场景元素数量、画布宽高和存储占用一眼看出画面多大。 入口左上角菜单 → Stats for nerdsmacOS 快捷键Option/。 适合导出前检查性能分享前确认场景尺寸。暗色模式与主题定制干什么切换深色画布开发者还能改配色方案、字体大小。 入口菜单里直接切换暗色模式改主题编辑packages/excalidraw/css/theme.scss。 适合长时间低光环境画图或把白板嵌进自有产品后统一品牌色。 遇到问题先查这里yarn install报依赖错误原因项目是 monorepoexcalidraw-app和packages/*共用依赖树残留的旧node_modules容易造成冲突。 解决在项目根目录运行yarn clean-install它会清空 node_modules 再重新安装。启动提示 Port 3000 is already in use原因3000 端口被占用。 解决换端口启动VITE_APP_PORT3001 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考