Como posso animar um diagrama de "pensamento de sistemas" como este exemplo?

Question

Eu gosto dessa versão baseada em javascript de uma ferramenta de diagramação de pensamento de sistemas. Ela pega relacionamentos e calcula os valores por trás dela, depois anima uma ponto ao longo do caminho.

Então, antes de continuar, postarei outro link para entender um sistema aqui

Pergunta

• Como posso fazer com que o Visio crie esses "diagramas vivos" e como posso facilitar o processo?

Exemplos:

    

Answer 1

Experimente este suplemento Exportar HTML por Nikolay

    

Answer 2

Para fazer isso no Visio, você teria que escrever sua própria automação de software para fazer isso.

Em essência, você precisa:

1. Escreva o código para 'analisar' o mapa na memória, basicamente pegando os nós e os conectores entre eles
2. Escreva o código para 'pixelizar' os conectores em pontos individuais (basta chamar o método .points () na forma do conector e ele retorna uma matriz de coordenadas xy). Em seguida, você precisa reduzir a resolução dos pontos para o número correto para o número de atualizações de animação desejadas para percorrer esse conector.
3. Escreva uma rotina de animação que avance um ou mais sprites ao longo dos conectores, incluindo qualquer lógica pertinente ao sistema que você modelou.

Exportar para SVG e animar com javascript pode ser uma alternativa mais adequada, mas espero que a programação seja semelhante. Seria mais fácil incluir controles de animação em uma página da Web do que tentar fazer isso na página do Visio.