Get the top HN stories in your inbox every day.
is0tope
I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
makach
that is impressive. just casually dropping such an awesome solution, I tip my hat to you sir.
criddell
Why doesn’t google find this when you search for “animate 2d diagram”? Is it because nobody links to it?
is0tope
I made it to try and learn d3 and typescript in general. I posted it as a "Show HN" but it got no clicks so I sort of just let it sit there. To be honest, when I saw how good most online drawing tools were, and how basic and amateur level my tool was I got demotivated and decided to leave it as is.
tedmcory77
A few things; 1. There's no good onpage stuff to tell google that this is an appropriate word for it. 2. Based on page speed probably wouldn't rank well compared to others 3. As you noted, links.
is0tope
This is a good point. I have been wondering how does one do SEO for such online tools? If you only have the tool present, it will be definition not have much text content which Google uses to gain context for the site.
criddell
Makes me wonder how many other cool projects out there never get discovered because they can’t get by the search engine gate?
pimlottc
Really neat! It would be great the sample diagrams on the homepage linked to editable version so you could play with a completed diagram.
aaserviceshyd
Is there a way to add custom objects if we want different objects for the flows to be created.
rg111
Wow, that's a nice project!
AntonioCao
This is super impressive, would definitely pay for it if more polished. Maybe integrate with tldraw? Anyways, amazing job.
is0tope
Thank you for the kind words! I might see if I can clean it up and at least get an export to gig feature working.
bobe__
Very nice and useful!
rg111
The easiest way to do this is to create the animation in PowerPoint which is trivially easy.
Then export the transitions to a video [0].
[0]: https://support.microsoft.com/en-us/office/save-a-presentati...
durazabu
Draw.io (now diagrams.net) has some support for interactive diagrams.
https://www.diagrams.net/blog/interactive-diagram-layers
https://drawio-app.com/interactive-diagrams-with-custom-link...
Edit: remove links about the obscure undocumented features p=ex and p=anim
Blahah
I have been revisiting that same question for many years!
In the last year I have been using x6 from AntV for animated/interactive graph visualisaton. It is outstandingly powerful and well designed (like all their libraries) - but unless you can read Mandarin you'll eventually be using a translator to read the docs/issues, and reading the code to figure out APIs. That said, I've been able to quickly build out things that I didn't think possible before with x6 and their other libs.
Recently I've also had a good experience with react-flow from webkid - who also make excellent stuff. I'm using this in MDX components for modular documentation. It's quick and simple to create an animated graph visualisation from a JSON representing the graph.
I have on my to-do list to make a mermaid -> react-flow component
AriaMinaei
Theatre.js can definitely drive this type of animation. It’s an animation library that you can hook up to your diagramming library. And it gives you a visual interface for keyframing and tweeting, etc.
Examples here: https://twitter.com/ariaminaei/status/1439918117807853575?s=...
lioeters
Library and docs: https://www.theatrejs.com/
hutzlibu
"Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?"
Adobes flash suite is now called Adobe animate and still works mostly the same and you can export to the html canvas.
Scripting is a bit limited/complicated, compared to doing it with actionscript - but if you worked with flash before, this is probably the most easy solution, as it is still very powerful and straight forward.
melvinroest
Well, if you can program, you could try Pharo (a Smalltalk descendant). I've recently been getting into it and have been able to create sin/cos animations [1] relatively quickly (not sure if this is what you're looking for). For math animations it seems great, because I still don't know much about the library I used (Roassal), all I know was that it showed the mathematical relationships I wanted to showcase.
The video itself shows a debugging issue that I asked the Pharo community, which is the ability to single step through your debugger and see the animation updated. As far as I understood there was a prototype out within a day for that.
[1] https://drive.google.com/file/d/1Z3UwTAj4A2CRo_TXk6JNG-mN9yM...
Minor49er
This might be more primitive than what you're looking for: When I'm explaining something in a video or a presentation, I'll sometimes use Google Slides to put together a diagram, then duplicate the frames to make adjustments to each. Then I cycle through each quickly to give a very basic sense of animation.
Recently, I had a presentation with a diagram showing several components. One slide would have an arrow pointing from Component A to Component B. The next slide had an arrow pointing in the opposite direction. I just pressed back and forward quickly while I was explaining that these two components talk to each other. It got the message across well enough.
On the other hand, if you are explaining known concepts, there might be footage out there already for you to appropriate into your own work
krzysztow
Oh gosh, I do the same and I hate it. Many times was thinking if there's a better approach. Then googled and came up with nothing going back to the same approach.
mynameismon
I think Powerpoint has much more powerful animations, which allow one to basically do the same thing but without having to duplicate slides, yielding a much shorter and smoother presentation.
Minor49er
I have this option available. I'm not sure why I didn't think to use that, but I'll give it a shot. Thank you
fortran77
I like to use the same software that "Stuff Made Here"[0] uses, on a Microsoft Surface laptop:
"Concepts" https://concepts.app/en/
mbforbes
I use Sketch to export SVGs, and animate them with anime.js. Here's an example of some illustrations where I did this [1]. It's not without issues though; using external (i.e., not inlined) SVGs is surprisingly tricky, and you quickly run into edge cases with groups and transforms---some notes here [2].
I like this approach because it decouples drawing and animating, and with SVG it is resolution and bandwidth-friendly. I was already used to making figures for research papers with Sketch, so I just suck with that, and added anime.js on top. However, for more complex motion like you might be hinting with your post, I could imagine a GUI tool with a proper timeline and tweening to be more ergonomic.
[1] https://maxwellforbes.com/posts/every-phd-is-different/ [2] https://maxwellforbes.com/garage/animating-svgs-from-sketch-...
dmje
What about SVG animation, using something like https://www.svgator.com ?
elliekelly
If you can handle some basic web dev you can do this yourself and embed the JS/CSS animation right in the SVG file: https://youtube.com/watch?v=S6P_N2JWSrc
It’s actually a bit easier than basic web dev because you don’t even need to know flexbox!
boomskats
I agree, just like you can quite easily craft reveal.js code by hand instead of using slides.com.
However, I still use slides.com and svgator.com every single time. They let me concentrate on my messaging.
elliekelly
This being hacker news some of us enjoy hacking together our own solutions...
boomskats
I mostly use SVGator for the exact use case the OP describes, in combination with Excalidraw SVG exports.
jopsen
Just wondering, is motion really a good idea?
It distracts, eats cpu/drains battery, can't be printed, has bad UX.
User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast.
pbowyer
It's a good question, and motion should never be used without careful thought.
In my case I've written an article about request coalescing, and the animations are to go alongside the text rather than in place of it. It'll help illustrate the concept and the pitfalls that can happen.
chrismorgan
> User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast.
That’s only badly done animations, using bad file formats like GIF or inappropriate file formats like APNG, or poorly-considered CSS or SMIL animations on SVG or HTML. It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation.
Done well, software-driven animation can even be interactive, which can be especially good for comprehension.
musingsole
> It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation.
Countless presentations that just skipped whatever video content they had due to various technical difficulties say otherwise.
chrismorgan
What of the countless presentations that were improved by doing video content properly? I can easily think of examples in both directions.
It also depends a little on context: I had in mind and was referring to user-driven media (which is fairly clearly the context here). If you’re presenting something to an audience that is at your mercy (which seems to be more what you’re talking about), then the situation is indeed a bit different—though a pause button and scrub bar are still likely to be a good investment.
Get the top HN stories in your inbox every day.
I'm using Mermaid, Excalidraw and PlantUML diagrams to explain and document what I'm working on and they work great and are a lot better than screens of prose, but I've become aware that something is missing: motion.
Animation brings a whole lot more to explanations, making simple explanations of how request coalescing works easy to understand, token simulations [0] through to helping explain concepts like Fresnel lenses [1]. Embedding them into GitHub READMEs, tweets and documentation would be awesome.
Google do it to illustrate posts (e.g. https://blog.chromium.org/2021/03/a-safer-default-for-naviga...).
I found Excalidraw Claymate [2] but the stop motion approach with no tweening support makes it painful to create animations where circles move from place to place. There's also Manim [3] but I think this is more for maths.
Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?
0. https://github.com/bpmn-io/bpmn-js-token-simulation
1. https://news.ycombinator.com/item?id=30576688
2. https://github.com/dai-shi/excalidraw-claymate
3. https://github.com/ManimCommunity/manim