Show HN: Mermaid-animate, GSAP animations for Mermaid sequence and flow diagrams (opens in new tab)

I work in cybersecurity and find that visualizing data flows across multiple disparate systems is incredibly difficult, and often immediately useless (ie the day you author something, is the day it's out of date). I started to think about what sort of novel ways you can demonstrate things like data sprawl, and the issue compounding over time.

This got me thinking about stuff like "is there rendering programs you can use to visualize data like water pipes?"

Of course the WebGL ecosystem isn't quite there, and I wasn't about to learn video production or rent a rendering farm, but I figured I already regularly abuse stuff like PlantUML and Mermaid diagrams for these ad-hoc tasks.. So, why not see if we can animate the paths in SVGs?

In an evening I came up with this demo repo. The initial idea was to add `id` like "A-->B" to each line between nodes (edges), and use an external animation library like GSAP to make it pretty.

.. Then I just sort of.. Kept going.