Ask HN: How can I make animated flowcharts to showcase architecture

4 points by start123 2 years ago | 6 comments

I have seen a few websites that showcase design and architecture using animated gifs.

Here is one example(1st image in the link) https://www.confluent.io/blog/confluent-developer-launches-free-apache-kafka-courses-and-tutorials-online/

How can I make one of these where you can visualize packets of data flowing?

brudgers 2 years ago |

There are many tools for doing keyframe animation and have been for many many years.

The difficult part of keyframe animation is not tools.

The difficult part of is keyframe animation is the time and effort it takes to select keyframes, the transitions, and their durations. Making animations is time consuming.

Confluent is a public company. Someone made the animation as part of their job because the time expense of animating had some business rationale.

Anyway the best tool is "I don't care how long it takes to learn from making it." Or not. YMMV. Good luck.

nullindividual 2 years ago | |

I don't think either of us are looking for keyframe tooling (or skills), but rather a Visio-like tool which has the animations built into common components, like connectors.

jschveibinz 2 years ago |

PowerPoint provides animation of shapes that would satisfy your application. It’s a short learning curve. You can create a video, as well. Cheers.

nullindividual 2 years ago |

I’ve also been looking for something like this to show how HTTP traffic flows through my infrastructure.

start123 2 years ago | |

I tried every other tool out there(Miro, Lucid etc) but none of them do this. Then I tried with plain CSS but found it to be very tricky.

nullindividual 2 years ago | | |

I was looking at https://gojs.net/latest/samples/index.html#featured the other day for some ideas, but yes that is more complicated than I want to work with.