Marco Javascript para crear diagramas de flujo

Question

vainolo

Estoy buscando un marco para crear y editar diagramas de flujo, como se hace en sitios como Google Drawings, www.draw.io ( código abierto ), Gliffy y LucidChart .

Características más importantes requeridas:

Dibujar elementos simples (rectángulos, elipses)
Crear conexiones entre los elementos.
Poder cambiar el aspecto de las conexiones y agregar decoradores a las conexiones
Fácil edición, movimiento, cambio de tamaño de los elementos, cambio de punto de inicio/fin de conexión, etc.

Simón Sarris · Answer 1

Es una biblioteca de JavaScript que debería poder hacer todo lo que espera con Diagrams:

Use plantillas para nodos, enlaces y grupos, puede ser arbitrariamente complejo e incluir formas/geometrías personalizadas
Compatibilidad con enlaces creados por el usuario con validación de enlace arbitraria
Con enlaces, enrutamiento de enlaces ortogonales y Bézier con las opciones "Evita nodos" y "Saltar por encima"
Enlace de datos con datos JSON
Funcionalidad intuitiva de arrastrar y soltar y copiar y pegar
Deshacer y rehacer extensibles ilimitados
Soporte de mouse y táctil con herramientas personalizables
Diseño automático de gráficos
Paletas y vistas generales

GoJS no tiene una herramienta de dibujo incorporada, pero es fácil crear una, y hay una muestra de algunas posibilidades aquí .

¿Permite "agregar decoradores a las conexiones"? Una captura de pantalla de eso sería genial :-) Por favor, aborde de manera similar cada punto de la pregunta. Además, según lo exige meta.softwarerecs.stackexchange.com/questions/356/… ¿le importaría revelar su afiliación e indicar cuál es la licencia de esta solución? ¡Gracias!

jsperrito · Answer 2

Te recomiendo un D3.js. Utiliza HTML y SVG: la API está al alcance.

Otra recomendación es Raphael . También funciona con HTML y SVG

En ambos puedes crear primitivas, conectarlas. También pueden manejar interactivos.

¡Bienvenido a Recomendaciones de software! Lea meta.softwarerecs.stackexchange.com/questions/356/… ¿Podría mencionar la licencia de esta solución? Gracias :-)
¿Permite "agregar decoradores a las conexiones"? Una captura de pantalla de eso sería genial :-) Por favor, aborde de manera similar cada punto de la pregunta, ¡gracias!

davis jebaraj · Answer 3

Essential Diagram for JavaScript admite la creación de cualquier tipo de diagrama.

Dibujar elementos simples (rectángulos, elipses): Compatible
Crear conexiones entre los elementos: Compatible
Poder cambiar el aspecto de las conexiones y agregar decoradores a las conexiones: Compatible
Fácil edición, movimiento, cambio de tamaño de los elementos, cambio del punto de inicio/fin de la conexión, etc.: Compatible.

Todo el producto está disponible de forma gratuita a través de la licencia comunitaria si califica.

Trabajo para Syncfusion.