bpmn-js-token-simulation VS studio-issues

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

Nice work! Anything that helps visualise state I'm happy to see.

Reading the linked article I'm unclear: does Stately generate output that we run with XState? Or is it a SaaS where we design and run the state machine (a bit like Camunda provides for running BPMN diagrams)?

If not already present, a visual runner would be awesome - like https://github.com/bpmn-io/bpmn-js-token-simulation allows, to explore the state.

Hello everyone - David (creator of XState) from Stately here!

Excited (also anxious) to see this on Hacker News. Please keep in mind that it is a public beta: we have many features and improvements planned.

If you have any suggestions, comments, or bug reports, please post them here: https://github.com/statelyai/editor-feedback/issues

Thanks, and happy diagramming!