Programster's Blog

Tutorials focusing on Linux, programming, and open-source

Draw.io Flow Animation

This tutorial will show you how to create animated edges/lines in draw.io diagrams that clearly indicate the direction of flow as demonstrated in the diagram below:

Steps

Select the edges that you wish to animate as "flowing". An easy way to select all edges is to press Ctrl + Shift + E.

Then, if you are using the web interface, you can just check the following checkbox:


If you are using the desktop application as I am, then you may have to click on properties:


... and then select the option from within there.

Exporting

Finally, to then be able to use the diagram with the flow animation, the only way to do this is to export it in HTML format and copy the following lines into your web page:

References

https://www.youtube.com/watch?v=MLlal_jRoXQ

Last updated: 20th April 2024
First published: 20th April 2024

This blog is created by Stuart Page

I'm a freelance web developer and technology consultant based in Surrey, UK, with over 10 years experience in web development, DevOps, Linux Administration, and IT solutions.

Need support with your infrastructure or web services?

Get in touch