animation graph draw.io

How to draw animation graph using Graph.io

Posted on March 22, 2024


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

  1. Click the edge you want to enable animation

  2. Then in the right menu, find Flow animation under Style. Select it, and you will see the edge is flowing now.

  3. Note: drawio file extension is suggest SVG

In Draw.io web version

  1. Click the edge you want to enable animation

  2. Then in the right menu, click and expand Properties under Style. Scroll down to find Flow animation and select it. You will see the edge is flowing now.

  3. Note: drawio file extension is suggest SVG

Example animation graph:

Animation graph


FEATURED TAGS
computer program javascript nvm node.js Pipenv Python 美食 AI artifical intelligence Machine learning data science digital optimiser user profile Cooking cycling green railway feature spot 景点 work technology F1 中秋节 dog setting sun sql photograph Alexandra canal flowers bee greenway corridors programming C++ passion fruit sentosa Marina bay sands pigeon squirrel Pandan reservoir rain otter Christmas orchard road PostgreSQL fintech sunset thean hou temple in sungai lembing 海上日出 SQL optimization pieces of memory 回忆 garden festival ta-lib backtrader chatGPT stable diffusion webui draw.io streamlit LLM prompt engineering fastapi stock trading artificial-intelligence