Excalidraw3分钟跑起来的免费开源手绘白板【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw你有没有过这种时刻开会讨论系统架构用正经绘图软件画了半小时线是直的、框是方的反而显得生硬换成随手在纸上画的草图大家讨论起来却顺畅多了。Excalidraw 就是想把这种纸上手绘白板搬进浏览器——它是一个开源的虚拟白板画出来的矩形、箭头、文字都带着微微抖动的笔触看起来像人画的但你可以随意缩放、拖拽、协作编辑。 它能帮你做什么画草图流程图、线框图、思维导图用矩形、圆、菱形、箭头和自由画笔就能搭出来画布无限大画得开就对了一起画生成一个共享链接多人同时编辑同一个白板且传输内容是端到端加密的随手导出画完可以导出 PNG、SVG 图片或直接导出成.excalidraw格式的 JSON 文件方便下次打开继续改嵌入自己的应用它以 React 组件的形式发布装进你的项目里就是一个完整可用的白板 从零到运行的最短路径前提很简单机器上有 Node.js 18 及以上版本以及 Git。把仓库克隆到本地git clone https://gitcode.com/GitHub_Trending/ex/excalidraw cd excalidraw yarn yarn start三条命令做完后浏览器打开http://localhost:3000就是一个完整的 Excalidraw 编辑界面。整个仓库是个 monorepo跑起来的这个应用代码在 excalidraw-app/核心绘图引擎在 packages/excalidraw/。如果你不想装 Node 环境仓库自带 Dockerfile 和 docker-compose.yml用docker-compose up --build -d一条命令就能起一个自托管的白板实例而且这个镜像不带任何统计追踪代码细节可以看 开发文档。 深度体验三个让你留下来的细节手绘风格不是滤镜是笔触本身普通的手绘风往往是给规整图形套个毛边滤镜Excalidraw 是在绘制路径时就让线条本身带有自然抖动你画的每一条线都是独立的手绘作品。仓库示例里那只哆啦A梦就是用这套工具链画出来的你什么时候会用到它给技术文档配图、画产品原型、做课程板书。手绘感的图放进 PPT 和文档里比规整的矢量图更人味读者注意力反而更集中。实时协作与端到端加密多人协作白板常见的尴尬是内容都在服务器上明文存着。Excalidraw 的做法是密钥只在协作各方之间生成服务端只存密文——你共享的链接发给谁就只谁能解开。这个能力对团队内部头脑风暴、远程评审会特别有用不用先担心画的东西谁能看到。给爱折腾的人Stats for nerds 面板键盘按住Option再按/会弹出一个Stats for nerds调试面板能看到当前场景的元素数量、存储占用这些数据。它平时不打扰你但在你排查为什么这张图这么大这类问题时很顺手 融入现有工作流如果你想在自己的产品里塞一块白板不用从零做excalidraw/excalidraw这个 npm 包安装后引入Excalidraw组件、给它一个有高度的容器白板就渲染出来了。仓库里备了两份可以直接翻的示例examples/with-nextjs/Next.js 集成示例里面已经处理好了Excalidraw 不支持服务端渲染、需要动态导入这个最常见的坑集成文档 里有对应的说明examples/with-script-in-browser/不依赖任何框架、用纯脚本在浏览器里嵌入的方式适合静态页面另外两个值得知道的入口安装文档 讲了字体自托管这类生产环境细节packages/excalidraw/data/ 里是导出、加密、恢复等数据层逻辑想读懂一张图是怎么存下来的从这里入手。 下一步建议如果只想玩yarn start之后先试试画两个矩形把箭头拖到矩形边上——箭头会自动吸附绑住框移动框时箭头跟着走这个体验试过一次就回不去了。如果想动手改代码先看 packages/element/矩形、箭头、文本这些图形元素的核心逻辑都在这一层配合 README 里的功能清单挑一个你天天用的工具比如箭头绑定顺着读源码是理解整个项目最快的方式。【免费下载链接】excalidrawVirtual whiteboard for sketching hand-drawn like diagrams项目地址: https://gitcode.com/GitHub_Trending/ex/excalidraw创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考