animation graph draw.io

How to draw animation graph using Graph.io

Posted on March 22, 2024 at 11:28 AM


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 AI goverance prompt engineering fastapi stock trading artificial-intelligence Tariffs AI coding AI agent FastAPI 人工智能 Tesla AI5 AI6 FSD AI Safety AI governance LLM risk management Vertical AI Insight by LLM LLM evaluation AI safety AI Governance Privacy & Data Protection Compliance Microsoft Scale AI Claude Anthropic 新加坡传统早餐 咖啡 Coffee Singapore traditional coffee breakfast Quantitative Assessment Oracle OpenAI Market Analysis Dot-Com Era AI Era Rise and fall of U.S. High-Tech Companies Technology innovation Sun Microsystems Bell Lab Agentic AI McKinsey report Dot.com era AI era Speech recognition Natural language processing Privacy Google Enterprise AI Nvdia AI cluster COE Singapore Shadow AI AI Goverance & risk Tiny Hopping Robot Robot Materials SCIGEN RL environments Reinforcement learning Continuous learning Google play store AI strategy Model Minimalism Fine-tuning smaller models LLM inference Closed models Open models Privacy trade-off MIT Innovations Investor Sentiment AI Innovation