优雅的互动白板excalidraw

概述

搜索了国内外资料，白板相关的开源项目很少，但有一个excalidraw项目，项目是去年1月开始的，但现在github上高达21K star，有以下特点：

• 开源（MIT Lisence）
• 风格舒服，手绘风格
• 功能强大，丰富的图形库，进行流程图绘制时，也会自动吸附箭头等，用起来很方便
• 适配移动端
• 支持多人协作
• 安全，多人协作的传输的数据加密，并且服务端无法解密
• 官方有Bolg对核心原理进行讲解
• excalidraw+版本收费。可完成团队、账号、数据在线存储等管理

效果如下：

image.png

原理

• 手绘风格的实现基于另外一个开源项目实现rough，15.6Kstar，很轻量<9 kB
• 支持npm方式引入画布功能到原有项目。有详细API文档说明。

本地运行

步骤很简单

git clone https://github.com/excalidraw/excalidraw.git
yarn
yarn start

• 单人绘制时，数据存储在localStroage，可通过关闭页签，再清除浏览器缓存得到验证
• 多人绘制时（即左上角创建房间，开启多人协作），通过浏览器控制台可见，与服务端https://firestore.googleapis.com等API有交互，如果想服务端自托管，见下文

如何实现excalidraw自托管

• excalidraw包括三个项目。excalidraw (client)、excalidraw-room(collaboration server) 、excalidraw-json (sharing server)
• 官方支持docker部署client端。链接
• 协作功能暂不支持自托管，但官方介绍未来将支持。#1772
• 但有网友提供整套部署方案（docker方式），经实践，可行。链接