Mi meta
Mi objetivo es desarrollar un sistema que anime cualquier proceso en general que se represente como un diagrama de flujo que se pueda dibujar en la pantalla.
Por ejemplo, una tubería de arquitectura. Consistiría en un montón de rectángulos que representan varios componentes, como el registro, el componente ALU, la memoria, etc. También habría flechas que apuntarían entre sí.
Así que me gustaría tener la capacidad de especificar la cantidad de formas que quiero dibujar, remodelar y agregar texto en ellas y conectarlas con flechas. Finalmente me gustaría mostrar algún tipo de animación entre ellos.
Ejemplo específico
Aquí haré todo lo posible para describir detalladamente lo que hará mi aplicación. Entonces, un usuario podrá dibujar módulos (rectángulos, por ejemplo) y arrastrarlos y soltarlos. Luego, el usuario puede usar flechas para mostrar las conexiones entre ellos. Finalmente, me gustaría mostrar algún tipo de animación que vaya paso a paso de flecha a flecha para mostrar qué módulo (rectángulo) se ejecuta primero. La animación podría ser simplemente cambiar el color de la flecha o el rectángulo mientras se ejecuta.
Mi problema
No sé qué herramientas debo usar para lograr esto. Soy un principiante en el mundo del desarrollo y quiero asegurarme de tener bibliotecas fáciles de código abierto. Me preguntaba si hay bibliotecas de código abierto disponibles en JS. Hasta ahora, conozco el lienzo HTML5. Quiero elegir herramientas fáciles de aprender. Estoy familiarizado con HTML y JS. Así que preferiría que alguien me sugiera qué herramientas puedo usar para lograr mi objetivo. También tenga en cuenta que no sería bueno usando algunas bibliotecas avanzadas de dibujo de diagramas ya que soy muy nuevo.
Básicamente, quiero comenzar con una herramienta simple, de modo que pueda aprenderla fácilmente y también asegurarme de que sea lo suficientemente popular con el apoyo de la comunidad. Sé que esta es una pregunta bastante abierta, por lo que todas las sugerencias son bienvenidas.
Nota : La cuestión es que no quiero perder el tiempo descifrando el dibujo de los rectángulos y la animación, supongo que, dado que el lienzo es rápido y fácil de usar, lo usaré a menos que haya una opción más fácil. De esa manera puedo concentrarme en el concepto principal de mi aplicación.
Un excelente lugar para comenzar a descubrir todo tipo de bibliotecas JS de este tipo es en los módulos de gráficos ...
Aunque está relacionado con Drupal , esta página enlazada contiene muchos enlaces a lo que en Drupal se llama "módulos" (= complementos).
Pero muy a menudo hay punteros en el enlace sugerido a las bibliotecas JS como:
Nota : la pregunta aquí es claramente sobre Gráficos , que no debe confundirse con Gráficos , como las bibliotecas (motores de gráficos) mencionados en la Comparación de módulos de gráficos .
Pruebe jsplumb, jsPlumb proporciona una forma de "conectar" elementos de una interfaz de usuario juntos". El aspecto es agradable. El uso parece bastante simple. http://www.jsplumb.org/demo/flowchart/dom.html
jsPlumb proporciona un medio para que un desarrollador conecte visualmente elementos en sus páginas web. Utiliza SVG en navegadores modernos y VML en IE 8 y versiones anteriores. Como proporciona una forma de unir todos los elementos de una interfaz de usuario. La última versión es 1.7.5. Desde 1.7.0, jsPlumb ya no es compatible con YUI o Mootools; si desea usar alguna biblioteca externa para administrar el arrastre, entonces jQuery es su única opción. Pero se recomienda que use jsPlumb vainilla siempre que sea posible: es más rápido que la versión jQuery, ofrece más funciones (arrastre de elementos múltiples, ámbitos múltiples) y dado que el manejo de eventos y el código de arrastrar/soltar también son proyectos administrados por jsPlumb, usted Es más probable que reciba una solicitud de función para los requisitos relacionados con ese tipo de cosas que sucedan. Más, es muy probable que el soporte para jQuery se elimine en algún momento. Todavía no hay una fecha prevista para esto, pero parece probable.
Essential Diagram for JS hará lo que está buscando.
Demostraciones de diagramas esenciales
Essential Diagram no es de código abierto, pero hay disponible una licencia comunitaria gratuita.
Saludos,
Davis
Nota: trabajo para Syncfusion
Si no le importa usar javascript y HTML, puede explorar THREE.js para este tipo de proyecto. Curva de aprendizaje bastante baja y un poderoso conjunto de herramientas de dibujo que puede usar para comenzar con geometrías simples (cubos, esferas, etc.) y cambiarlas a objetos más específicos más adelante una vez que se comporte de la manera que desea.
Jorge Campos
Aprendiz
Jorge Campos
Aprendiz