Adding Smooth Animations to Diagrams in Draw.io

As a technical writer, I often create diagrams and strive to make them visually appealing. Recently, I discovered the benefits of adding animations to my diagrams to make them more engaging. Draw.io is an excellent tool for this purpose as it allows me to animate arrows smoothly.

Today, we will demonstrate how to animate a diagram using draw.io. We will use a simple example that we will animate. Here is the initial diagram:

Here's what we want to achieve

Adding Animation Steps

1. Choose the arrow you want to animate and go to the "style" option on the right sidebar.
   Tip: To select multiple arrows, hold down the CTRL button while clicking on the arrows.

2. Scroll down until you see "Property" and click to expand. Then, just check the box next to "Flow Animation".
   

After doing this, your diagram will become animated. Feel free to make additional adjustments to the arrow according to your liking.

Exporting an Animated Diagram

Steps to Export as SVG:

1. Go to the top bar and click on "File."
2. From the dropdown menu, select "Export as."
3. Choose "SVG."

By following these steps, your diagram will be exported as an SVG, retaining the animation.

If SVG is Not Supported:

If you're working on a platform that doesn't support SVG, you have a couple of alternatives:

1. Convert SVG to GIF:

   • Use an online tool such as HTML5 Animation to GIF.
   • Upload your SVG file to the tool, and it will convert it to a GIF while preserving the animation.

2. Record as GIF:

   • Use an external program like ScreenToGif.
   • This tool allows you to record your screen and export the recording as a GIF, which is ideal for platforms that prefer GIFs over SVGs.