AI, Tech & Life

I often read the posts shared in LinkedIn, which contain the amazing animation graph. So I am thinking how do I also draw it? Previously, I shared a post, Draw.io, a beautiful tool to draw graph and flow . After googling, it is found Draw.io have the functio, which let us set the propertu of arrow to enable animation. Before introduce how to do, I firstly share how to setup Draw.io, focusing in Ubuntu (Windows should be also easy).

4 ways to use Draw.io

• Draw.io web version
  • It is simple. There is nothing to setup. Just visit the URL .
• Draw.io App
  • If you like install an invidual App, you can visit the URL to download the Windows/Mac/Linux version, and install.
• Draw.io plugin in Visual studio code
  • If you are frequently use VSC to programming and don’t want to switch between VSC and another Draw.io tool, you can install the plugin, Draw.io Integration v1.6.6. Just search draw.io. There are many plugins, I select the Draw.io extension developed by Henning Dieterich.
  • Issue:
    • The functions are similar to the above two. But after completing animation setting, the export svg is still a still image, without animation.
    • Thus, for animation, the web version or App are recommend.
• Jupyterlab-drawio
  • There is plugin in Jupyter-lab. But I find it is not full functions available. For example, I cannot find how load and edit a drawio file. So I do not suggest

How to enable animation of edge?

There is a few difference between the Draw.io App and web version, due to the version of development.

In Draw.io App

In Draw.io web version

Example animation graph:

Animation graph