Excalidraw云端协作实战:如何用智能绘图打破地理限制?深度解析来了!

发布于:2025-05-22 ⋅ 阅读:(13) ⋅ 点赞:(0)

前言

在数字化进程席卷全球的当下,尽管各类专业可视化工具持续涌现,真正触动人心的创作往往源自带有温度的手绘艺术。设想在远程协作环境中,团队成员突破电子屏幕的限制,借助云端绘图工具重现纸上作画的灵动质感——这一创新场景正逐渐成为现实。本文将深度解析Excalidraw这款简约风格的图形工具部署技巧,并手把手演示其在Windows系统中的配置流程。更值得关注的是,结合Cpolar内网穿透技术的应用,用户不仅能实现跨区域协同创作,还可将思维轨迹实时上传至云端。无论是构建团队知识图谱还是记录个人创意火花,这套技术组合都将重塑您的视觉表达方式,开启高效协作的新纪元。

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的核心功能,更能激发出前所未有的创新性表达能力。当您完成首个团队共创作品时,切记将这份数字创作的喜悦传递给同频共振的伙伴。让我们共同见证,在这个智能化绘图时代,每位用户都能成为推动信息可视化革命的创意革新者!


网站公告

今日签到

点亮在社区的每一天
去签到