Animated Flow Diagram

I share the results of my research on how to create the animated flow charts that I constantly encounter on social media, in 3 steps.

A- Create a visual
Usually draw.io is used and I used this solution for the article. In addition, there are different solutions such as d2lang.

After selecting the line, you can animate the line by selecting Flow Animation.

There is no gif among the draw.io export options, so we need to obtain gif indirectly.

B- Screen recording
You can use the free OBS Studio to screen record the animated graphic whose design is completed.

OBS Studio interface

Step by step instructions for screen recording
1- Select the screen as the video source with “Display Capture”
2- Select the area to be recorded on the screen
3- The area selected in Preview is transferred to the Program area with “Cut”
4- Recording is done with “Start Recoding”

With video recording, we obtain our design as a video in mp4 format.

C- Creating Gifs
You can convert video to gif format on the ezgif.com.

The result can be seen below.

For an alternative method with Powerpoint, you can check out the video below.
Create animated architecture diagrams in minutes on powerpoint