用 Excalidraw+cpolar 做会议协作,像素级还原实体白板体验


文章目录

前言

在扁平化设计盛行的今天,Excalidraw以算法模拟真实纸笔质感,重新定义了数字创作的温度------其核心引擎能将标准矢量线条转化为带有自然倾斜、抖动和粗细变化的手绘效果,支持从流程图到头脑风暴的全场景创作。特别适合远程团队需要快速可视化创意,或教育工作者制作亲和力教学素材的场景。

作为高校讲师,我曾为在线课程设计示意图时陷入两难:专业绘图软件太僵硬,手绘拍照又无法编辑。Excalidraw的出现让课件既有手写温度又保持可修改性,配合cpolar穿透后,学生甚至能实时在我的画布上标注疑问------这种"虚拟教室后排涂鸦"的互动感,让在线教学参与度提升35%。

但纯内网协作仍有局限:校外专家无法参与课程设计讨论,跨校区团队必须约定时间同步修改;重要教学素材分散在个人设备,备份恢复成为负担。尤其在疫情期间,实验室白板上的灵感无法及时转化为数字资产,常常造成创意流失。

cpolar的安全隧道方案打通了这些堵点:通过3000端口映射,将教研室的Excalidraw服务安全暴露至公网。现在外校合作导师能直接参与教案共创,毕业答辩时学生可远程修改图纸细节。最动人的是保留了协作过程中的"思考痕迹"------不像传统工具只能看到最终结果,这里能回溯每个线条的修改历程,让知识传递更完整。

本文主要介绍如何在Windows系统电脑端使用这款超好用的白板手绘工具Excalidraw,并结合cpolar内网穿透轻松实现使用客户端异地远程访问本地服务端使用白板手绘工具。

1.Excalidraw功能特点

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

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

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

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

2.安装Node.js

下载地址:

复制代码
https://nodejs.org/en/

3.安装Git

下载地址:

复制代码
https://git-scm.com/downloads

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

4.安装Excalidraw

克隆存储库

点击win+R键,输入"cmd"跳出命令窗口

复制代码
git clone https://github.com/excalidraw/excalidraw.git

安装yarn

复制代码
npm install -g yarn

安装依赖项

复制代码
yarn

跳到excalidraw中

复制代码
cd excalidraw

启动服务器

复制代码
yarn start

5.本地链接测试

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

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

6. 公网远程访问本地Excalidraw

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

7.内网穿透工具安装

下面是安装cpolar步骤:

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

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

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

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

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

8.配置公网地址

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

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

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

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

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

小结

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

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

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

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

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

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

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

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

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

总结

Excalidraw是一款免费、有趣味性、丰富组件库的作图工具,如果你喜欢绘制一些趣味图,对于任何寻求简单、直观的绘图和图表工具的人来说,Excalidraw是一款出色的工具。它的易用性、灵活性、安全和协作功能使其成为各种用例的绝佳选择,也可以直接借助AI让其创作变得更加容易,最重要这是一款开源软件你可以将将其随时扩展到你的应用中去。

以上就是如何在Windows系统部署Excalidraw容器,并结合cpolar内网穿透工具实现公网远程访问内网本地服务的全部流程,感谢您的观看。

当怀旧美学遇上穿透技术,不仅是工具的革新,更是协作体验的回归。这种"数字画布+实体协作感"的模式,正在重新定义远程创意工作的可能性。

cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站

相关推荐
victory04317 小时前
whisper 模型处理音频办法与启示
1024程序员节
Dovis(誓平步青云)7 小时前
《KingbaseES数据库:首个多院区异构多活容灾架构,浙人医创新开新篇》
1024程序员节
软件2057 小时前
【final、finally和 finalize的区别】
1024程序员节
Jing_jing_X7 小时前
Spring Boot 启动时,JVM 是如何工作的?
java·后端·spring·1024程序员节
小满、7 小时前
什么是栈?深入理解 JVM 中的栈结构
java·jvm·1024程序员节
方二华8 小时前
5 mysql源码中B+树的构建
数据库·mysql·1024程序员节
侯喵喵8 小时前
Jetson orin agx配置ultralytics 使用docker或conda
yolo·docker·1024程序员节·ultralytics
星火科技探索实验室8 小时前
【实战经验】飞牛云 如何使用 SSD 缓存加速?
1024程序员节
千百元8 小时前
java 程序Apache log4j JDBCAppender SQL注入漏洞(CVE-2022-23305)
1024程序员节