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

4 pointsstart1232y ago6 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?

6 comments

brudgers2y 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.

nullindividual2y 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.

jschveibinz2y 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.

nullindividual2y ago

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

start123OP2y 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.

nullindividual2y 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.

j / k navigate · click thread line to collapse

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

4 pointsstart1232y ago6 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?

6 comments

brudgers2y 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.

nullindividual2y 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.

jschveibinz2y 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.

nullindividual2y ago

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

start123OP2y 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.

nullindividual2y 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.

j / k navigate · click thread line to collapse