拟手绘风格白板，好玩好用且开源，支持协作和端到端加密

本篇介绍的Docker项目：Excalidraw。它是一款非常受欢迎、简单易用的画图工具，主要为白板手绘和线框图，被很多用户称为画图界的 Markdown。目前在Github的Star已经有70k ，足见受欢迎程度

做流程图也很好用

官方提供一个开发者文档，可高度自定义及植入更多功能，有需求的朋友可查看

PS：

最初名字叫Excalibur，莫名喜感~Garden of Avalon！

功能特点

💯 免费且开源

🎨 无限、基于画布的白板

✍️ 类似手绘风格

🌓 黑暗模式

🏗️ 可定制

📷 图片支持

😀 素材库支持

👅 本地化（i18n）支持

🖼️ 导出为 PNG、SVG 和剪贴板

💾 开放格式 - 将图纸导出为 .excalidraw json 文件

⚒️ 多种工具 - 矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦...

➡️ 箭头绑定和标记箭头

🔙 撤消/重做

🔍 缩放和平移支持

❗️缓存在本地网页，不小心刷新也没事

部署流程

一、威联通直接部署

打开Container Station，点击右上角【浏览】，输入"excalidraw"，进行搜索，如下图所示，找到名为 excalidraw/excalidraw 的，点击【部署】（其它品牌NAS商店中应该也都能搜到）

版本默认即可，latest意为最新版本，进行【下一步】

容器配置，我们仅需填写一个端口号即可，点击【下一步】

看完摘要，没啥问题点击【完成】创建即可，参照上文此时Web端输入 NAS_IP:8383 即可访问使用

如果因为网络问题无法安装，左侧栏点击【映像】，然后右上角点击【提取】，输入excalidraw/excalidraw:latest，提取后点击小三角部署安装，其它操作没啥差别

二、Docker Compose搭建

SSH进入服务器后台，进入到我们docker常用部署位

# 进入常用的docker部署目录下 cd /root/data/docker # 从github拉取文件 git clone https://github.com/excalidraw/excalidraw.git # 进入下载的文件 cd excalidraw # 修改 vim docker-compose.yml

代码如下，仅需修改端口。英文状态下，输入"i"，可进入编辑模式（左下角显示INSERT）编辑完毕后，按下"ESC"退出编辑模式，然后同时按下"SHIFT"+":"，再输入"wq"并回车，即可保存并退出

version: "3.8" services: excalidraw: build: context: . args: - NODE_ENV=development container_name: excalidraw ports: - "8189:80" # 进行修改 restart: on-failure stdin_open: true healthcheck: disable: true environment: - NODE_ENV=development volumes: - ./:/opt/node_app/app:delegated - ./package.json:/opt/node_app/package.json - ./yarn.lock:/opt/node_app/yarn.lock - notused:/opt/node_app/app/node_modules volumes: notused:

接着输入以下命令，安装并运行excalidraw

docker-compose up -d # 有的可能为 docker compose up -d

反向代理

参照这篇

前端域名、后端地址填写好，点击【修改】即可

使用体验

进入的初始界面，左侧为各种功能栏。下图界面上的引导等内容可参照开发手册进行自定义编辑

深色模式

点击右侧素材库，可以在线添加素材

点击添加后就能使用

对画布右键，可全选、显示网格等操作；对内容右键，可以修改形状、大小、颜色、透明度、图层等

长按鼠标左键支持内容框选

关于箭头绑定，鼠标靠近每个内容，内容周围都会出现一个虚框，选中箭头绘制图标后，点击那个框就开始绘制即可完成绑定。若要转折或绕开其它内容，在途中鼠标左键一下即可；若要中止，则在终点处进行双击。这样便实现箭头追踪

创作完毕后，可左侧栏选择【保存到..】，方便之后修改或继续编辑；也可【导出图片】，支持PNG或SVG

最后

就挺好玩的～比较遗憾的有以下几点：

• 分享链接、多人协作，自托管并不支持

• 不能自定义上传字体（官方说正在开发）

• 中文手绘风支持不到位，体验上差些意思

不过咱们自己搭一个用还是非常不错的！也可以跟官方Demo对比，补全缺失功能的基础上添加了不少其它功能；或者可以看看ReveZone（原Handraw），国内小伙伴做的，可能会更符合咱们需求。

本篇到这就结束啦，觉得不错的朋友欢迎点赞、收藏、关注支持后续我也会定期分享好用、好玩的Docker项目及NAS使用经验，咱们下期再见！