本地化部署Excalidraw企业级协同白板实时协作堪比Miro

前言

在这个数字化时代，尽管各种花哨的图表工具层出不穷，但人们似乎更偏爱那种简单、原始的手绘风格。想象一下，在会议室里大家纷纷拿出平板或电脑，就像回到学生时代用彩笔在纸上涂鸦一样自由自在——这不再是梦！今天就带你体验一款超有爱的手绘神器Excalidraw，并教你如何在Windows上轻松部署它，再搭配Cpolar内网穿透工具实现远程协作。无论是团队共创还是个人发挥创意，Excalidraw都能让你感受到前所未有的便利与乐趣。

1.Excalidraw功能特点

Excalidraw 是一款轻量的手绘风格电子白板在线应用，无论是 Windows / macOS / linux，甚至是手机，打开浏览器就能使用，能简单地画出美观漂亮的流程图、示意图和开发架构图等常用图片，也可以作为会议画板使用，不仅是一款优秀的画图应用，也是一款自由便捷的电子白板应用。用户使用Excalidraw可以通过简单几下点击和拉伸创出所需的图形，而且图形可以通过一个链接就可以分享给你的好友一起协作展示或创作。

Github官方地址：GitHub - excalidraw/excalidraw： 用于绘制手绘图表的虚拟白板

Product showcase

上面这张图是官方在Github上说明文档中的一张截图，下面这种是我个人在使用中自己绘制的一张图。手绘的画风看起来很可爱。

image-20240919133642453

不管是官方的截图还是我自己画的图，看起来是不是都带有一种卡通、有趣的特点呢？试想一下如果在枯燥的技术思维中带有一种有趣的特点，是不是对技术图不显得那么枯燥乏味了呢？说了这么多该如何部署呢，往下看~

2.安装Node.js

下载地址：

https://nodejs.org/en/

image-20240919151845774

image-20240919142605931

3.安装Git

下载地址：

https://git-scm.com/downloads

image-20240919144149505

image-20240919144228038

image-20240919144401702

一直点击Next直到最后一步，安装完成。

4.安装Excalidraw

克隆存储库

点击win+R键，输入“cmd”跳出命令窗口

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

image-20240919144704657

安装yarn

npm install -g yarn

image-20240919152526119

安装依赖项

yarn

image-20240919152548495

跳到excalidraw中

cd excalidraw

启动服务器

yarn start

image-20240919153754190

5.本地链接测试

现在，您就可以通过浏览器直接访问 http://localhost:3000 端口的Excalidraw服务，并开始在自己喜欢的代码编辑器中编码啦！

image-20240919153904426

可以看到，本地连接Excalidraw服务测试成功。

6. 公网远程访问本地Excalidraw

目前我们在本地成功部署了Excalidraw，但是如果我们想实现不在局域网下，在公网能够远程访问Excalidraw的话，我们就可以使用Cpolar内网穿透来实现公网随时随地访问了！免去了复杂得本地部署过程，只需要一个公网地址直接就可以访问。

7.内网穿透工具安装

下面是安装cpolar步骤：

Cpolar官网地址: https://www.cpolar.com

点击进入cpolar官网，点击免费使用注册一个账号，并下载最新版本的Cpolar。

img

登录成功后，点击下载Cpolar到本地并安装（一路默认安装即可）本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后，在浏览器上访问http://localhost:9200，使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

img

接下来配置一下Excalidraw的公网地址~

8.配置公网地址

登录后，点击左侧仪表盘的隧道管理——创建隧道，

创建一个Excalidraw的公网http地址隧道

• 隧道名称：可自定义命名，注意不要与已有的隧道名称重复
• 协议：选择http
• 本地地址：3000 (本地访问的地址)
• 域名类型：免费选择随机域名
• 地区：选择China VIP

image-20240919154546623

隧道创建成功后，点击左侧的状态——在线隧道列表，查看所生成的公网访问地址，有两种访问方式，一种是http和https。

image-20240919154619026

使用上面的Cpolar生成的任意一个公网地址，在手机或任意设备的浏览器进行登录访问，即可成功看到Excalidraw界面。使用了Cpolar的公网域名，无需自己购买云服务器，即可到公网访问Excalidraw随便编辑绘图啦！

image-20240919154821299

小结

为了方便演示，我们在上边的操作过程中使用了cpolar生成的HTTP公网地址隧道，其公网地址是随机生成的。这种随机地址的优势在于建立速度快，可以立即使用。然而，它的缺点是网址是随机生成，这个地址在24小时内会发生随机变化，更适合于临时使用。如果有长期远程访问本地Excalidraw服务的需求，但又不想每天重新配置公网地址，还想地址好看又好记，那我推荐大家选择使用固定的二级子域名方式来远程访问。

9.使用固定公网地址远程访问

登录cpolar官网，点击左侧的预留，选择保留二级子域名，地区选择China VIP，设置一个二级子域名名称，点击保留，保留成功后复制保留的二级子域名名称，这里我填写的是Excalidraw，大家也可以自定义喜欢的名称。

image-20240919155403016

保留成功后复制保留成功的二级子域名的名称：Excalidraw，返回登录Cpolar web UI管理界面，点击左侧仪表盘的隧道管理——隧道列表，找到所要配置的隧道Excalidraw，点击右侧的编辑：

image-20240919155447932

修改隧道信息，将保留成功的二级子域名配置到隧道中

• 域名类型：选择二级子域名
• Sub Domain：填写保留成功的二级子域名：Excalidraw
• 地区：选择China VIP

点击更新(注意,点击一次更新即可,不需要重复提交)

image-20240919155548403

更新完成后，打开在线隧道列表，此时可以看到公网地址已经发生变化，地址名称也变成了固定的二级子域名名称的域名：

image-20240919155625237

最后，我们使用固定的公网https地址在任何浏览器打开访问，可以看到访问Excalidraw成功了这样一个固定且永久不变的公网地址就设置好了。

image-20240919155912702

总结

现在，你和你的团队成员已经准备好开始使用Excalidraw进行远程协作绘制了！无论是绘制复杂的流程图、设计思维导图，还是简单的草图，你们都可以实时协同工作，提高效率。想象一下，无论你在地球的哪个角落，只要打开电脑或手机就能加入团队的创意风暴——这简直是太酷了！希望这篇教程能让你在Excalidraw的世界里玩得开心，创作出更多令人拍案叫绝的作品。最后别忘了给你的小伙伴们也安利一波哦~ 祝你们合作愉快，创意无限！