Ask HN: How to quickly animate sketches and 2D diagrams?

• manim

  159 26,951 9.2 Python

  A community-maintained Python framework for creating mathematical animations. (by ManimCommunity)

  

  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.

  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

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• bpmn-js-token-simulation

  2 259 8.8 JavaScript

  A BPMN 2.0 specification compliant token simulator.

  

  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.

  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

• excalidraw-claymate

  3 493 0.0 TypeScript

  A tool based on Excalidraw to create stop motion animations and slides.

  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.

  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

• GoJS, a JavaScript Library for HTML Diagrams

  15 7,855 6.8 HTML

  JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

  

  GoJS might work for you: https://gojs.net

  Although the focus of the library is interactivity and not setting up sequences of animation, but that is possible too.

• workload-discovery-on-aws

  6 731 6.2 JavaScript

  Workload Discovery on AWS is a solution to visualize AWS Cloud workloads. With it you can build, customize, and share architecture diagrams of your workloads based on live data from AWS. The solution maintains an inventory of the AWS resources across your accounts and regions, mapping their relationships and displaying them in the user interface.

  

• diagrams

  117 39,889 8.4 Python

  :art: Diagram as Code for prototyping cloud system architectures

• theatre

  29 11,415 6.1 TypeScript

  Motion design editor for the web

  

Suggest a related project