DEV Community

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

Posted on • Updated on

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:

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 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.

Top comments (1)

Collapse
 
_2082ca7cc65434467c4fb profile image
袁官东

If you need to design 3D software architecture diagram, you can try iCraft Editor : icraft.gantcloud.com/editor, You can also make animations