DEV Community

Cover image for Adding Smooth Animations to Diagrams in
Khaled Abdel-Fattah
Khaled Abdel-Fattah

Posted on

Adding Smooth Animations to Diagrams in

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. 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 We will use a simple example that we will animate. Here is the initial diagram:

Our diagram with no animation

Here's what we want to achieve

Arrow animation using draw io

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".
    Flow Animation Checkbox

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

Exporting Animatied Diagram

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

By following these steps, your diagram will be exported as an SVG, keeping the animation intact. If you find yourself on a platform that doesn't support SVG, you can use external programs like ScreenToGif. This program lets you record your screen and export the recording as a GIF. Handy for platforms that prefer GIFs over SVGs.

Top comments (0)