Excalidraw 免费手绘白板快速上手指南3 条命令画出第一张手绘架构图【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw写技术文档时画出来的图总显得死板。线条太直配色太正式文档瞬间变得难亲近。Excalidraw 是一个开源虚拟手绘白板能把这些图变成随手画的草图还支持实时协作免费开源。这篇指南带你从零跑起它3 条命令装好环境3 个场景学会动手画顺带看清手绘效果背后的门道。 本地跑起手绘白板只需 3 条命令先确认环境Node.js 18.0.0 以上GitYarn。然后克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn安装完成后启动开发服务器yarn start首次启动会编译 monorepo稍等一两分钟浏览器打开http://localhost:3000手绘白板就出现了。 三个场景画出第一张手绘图画一张系统架构图。顶部工具栏选矩形拖出几个方块写上服务名。再选箭头工具连线箭头会自动吸附在形状边缘。双击箭头还能加文字标签比如请求回调。一张清晰的手绘架构图就成了。粘贴 Mermaid 代码生成图。如果你习惯写代码定义图直接粘贴 Mermaid 文本Excalidraw 会自动识别并转成手绘图形。识别逻辑在 packages/excalidraw/mermaid.ts支持流程图、时序图、甘特图等十几种类型。团队头脑风暴。线上版创建房间后分享链接成员各自打开就能画光标位置实时可见。协作走端到端加密通道源码见 excalidraw-app/collab/。教学演示。演示时按?打开快捷键帮助Cmd切换网格OptionZ进入禅模式隐藏所有工具栏画面只剩画布学生注意力全在内容上。 手绘质感是怎么来的很多人好奇这些歪歪扭扭的线是怎么画出来的关键在每个元素身上的一个seed字段。打开 packages/element/src/types.ts 能看到注释这个随机整数用于给形状生成提供种子保证 Rough.js 渲染出的手绘线条稳定一致。换句话说线条不是画好的图片而是 Canvas 实时算出来的手绘笔触同一个 seed重绘时笔触不会抖动换一个 seed同一批形状会重新抖动一遍像换了一种画风这就是手绘白板能无限缩放还不糊的原因也是它区别于静态图片工具的地方。另外藏了个调试彩蛋按Option/打开 Stats for nerds 面板能看到元素数量、画布尺寸、存储空间占用。排查大图卡顿时很有用。❓ 常见坑看这里问yarn装依赖失败或特别慢清掉缓存重装yarn cache clean yarn install --force仓库根目录还提供了yarn clean-install一步删掉旧依赖再全新安装。问yarn start后页面一直白屏多半还在编译。项目是 monorepo首次启动慢很正常等几分钟。不想等 Node 环境的话仓库带了 Docker 方案docker-compose up --build -d问本地跑了实时协作却是灰的协作依赖一个独立的 collab 服务excalidraw-room本地开发环境不带它。想试协作需要单独把该服务跑起来单人使用不受影响。把手绘白板嵌入你自己的项目Excalidraw 以 npm 包excalidraw/excalidraw发布一行命令引入yarn add react react-dom excalidraw/excalidraw仓库里有两个官方示例可以参考Next.js 集成见 examples/with-nextjs/纯脚本嵌入浏览器见 examples/with-script-in-browser/。想深入改看这几个地方就够packages/excalidraw/核心引擎画布、工具、快捷键都在这里packages/element/元素模型与几何计算excalidraw-app/独立应用主题、界面文案可在这里调欢迎界面本身就是组件化的想定制首屏可以参考它的结构图最快的上手方式就是动手。打开终端把前面那 3 条命令贴进去等页面加载完先画一个歪歪扭扭的矩形。画完它你就入门了。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考