平时为了讲清楚各种原理性的东西，往往会添加相应的流程图进行可视化展示说明，那能不能更进一步，让流程图动起来，做成类似GIF的效果。

今天就以 Drawio 的流程图为例，详细介绍如何让一个流程图动起来。

环境准备

Windows 10/11

draw.io

ScreenToGif（下载对应平台的安装包，这里使用的是Windows10的安装包，可能会下载超时，如果无法下载，私信我）

绘制流程图

以 WebSocket 的交互为例，在 drawio 中绘制一个流程图，如下图，里面的交互流程还是静态的，

为了让交互流程动起来，需选中需要支持动效的连线，并在属性列表中勾选 Flow Animation 选项，此时便可在 drawio 中看到动态交互效果。

制作 GIF 动图

打开 ScreenToGif 软件，点击录像机，然后选中需要录制的屏幕区域，这里将录制的界面移到刚刚制作好的流程图上（为了更好的对比，将 drawio 的背景样式改成了深色），调整好大小之后点击录制。

录制完成后，进入 ScreenToGif 软件，会看到如下界面，点击播放查看效果，如果没有问题，就可以另存为 Gif 文件了。

最终的GIF效果如下：

ScreenToGif 功能远不止于此，有时间的小伙可以自行探索，值得一用。