把 TCP 握手画出来之后，网络协议没那么吓人了

很多人第一次听到 TCP 三次握手、DNS 查询，会点头。真被问一句“具体发生了什么”，就卡住。

Dilum Sanjaya 做了个网页，把 14 种互联网协议做成可视化速查表，还塞了一个 packet inspector。地址是 Protocol Explorer。

界面分三块。左边按 TCP/IP、UDP、DNS 等分类列协议，中间用客户端请求网页的例子走 HTTP 流程：先查 DNS 拿 IP，再建 TCP 连接，发 HTTP 请求，服务器回数据。底部是 Packet Flow，能看到源地址、目标地址、协议类型这些字段。不是只放一张静态图，动画会把请求和响应一步步跑出来。

这类工具的价值在降低第一道门槛。知道 DNS 会查地址，和看见一次查询怎么发生，是两件事。知道 TCP 要握手，和看见连接建立时数据包怎么走，也是两件事。

有网友在评论区说，动画太快，文字有点吵，界面也偏挤。作者回复，页面里有速度控制，也能暂停，逐步查看。演示视频为了在短时间里展示功能，节奏会快一些，实际使用时可以按自己的速度走。这个细节比演示视频重要。可视化不自动等于好懂，信息密度一高，动画很容易变成噪音。

同一作者还做了几个类似项目。

Learn Arduino 把开发板拆成互动课程。页面上有 3D 主板、引脚说明、示例代码、串口监视器和模拟器，课程从认识主板、点亮一个 LED 开始，再到按下按钮。有人想拿它教孩子，也有人问能不能开源。地址是 Learn Arduino。

Learn ESP32 是同一种思路的另一个版本。用同样的互动方式讲 ESP32，一个电路一个电路往下走。地址是 Learn ESP32。

Backcountry 101 稍微跳开硬件，讲野外生存基础。课程包括生火、发出求救信号、准备生存包、辨认可食和有毒植物。页面用 WebGL 做 3D 交互，有人开玩笑说这是互动版《Dr. Stone》，也有人问没网时能不能离线保存课程。地址是 Backcountry 101。

这些项目都标注用 Opus 5.5 制作。它们共同的做法，是把抽象过程拆成可看的步骤。可视化不自动等于好懂，真正决定体验的，是有没有速度控制、能不能暂停、信息层级是否清楚。演示视频很酷，实际学习时，节奏得交给使用者。