How can I animate a "systems thinking" diagram like this example?

Question

I like this javascript based version of a systems thinking diagramming tool. It takes relationships and calculates the values behind it, then animates a dot along the path.

So before I get further, I'll post another link to understanding a system here

Question

• How can I make Visio create these "living diagrams", and how can I make the process easier?

Examples:

Answer 1

Try this add-in HTML Export by Nikolay

Answer 2

To do it in Visio you'd have to write your own software automation to do it.

In essence, you'd have to:

1. Write code to 'parse' the map to memory, basically picking up the nodes and the connectors between them
2. Write code to 'pixelate' the connectors into individual points (you just call the .points() method on the connector shape, and it returns an array of xy coords). You then have to downsample the points to the correct number for the number of animation updates you want for traversing that connector.
3. Write an animation routine that advances one or more sprites along the connectors, including whatever logic is pertinent to the system you have modeled.

Exporting to SVG and animating with javascript may be a more suitable alternative, but I expect the programming would be similar. It would be easier to include animation controls on a web page than to try and do it on the Visio page.