JavaScript/HTML5 Topología de red Arrastrar y soltar

Actualmente estoy trabajando en el desarrollo de una aplicación basada en Django/Python que permite a los usuarios tener un lienzo para arrastrar y soltar imágenes basadas en redes informáticas (por ejemplo, enrutador, conmutador, etc.). Esencialmente, quiero construir algo como draw.io pero permitir que el usuario presente un producto final como este: http://www.conceptdraw.com/samples/resource/images/solutions/network-diagram/network-diagram -Diseño-del-Sistema.png

A su vez, quiero convertir esa topología de red que han ideado en un entorno virtual de trabajo real, utilizando una API personalizada que desarrollé (funciona con Puppet, Xen, etc.).

Estoy buscando la mejor biblioteca para llevar a cabo el dibujo. Hay tantas bibliotecas de JavaScript, pero no estoy muy seguro de cuál es la más preferida (la más fácil) para tal tarea.

Idealmente, el panel izquierdo tendría diferentes herramientas de red que el usuario puede arrastrar a algún lienzo (por ejemplo, enrutador, PC). Luego pueden conectarlos entre sí, etc. No me preocupa hacer que esto funcione con la API... Puedo resolverlo. ¡Pero la biblioteca apropiada para construir una herramienta de este tipo es lo que realmente necesito asesoramiento!

Su consejo profesional es muy valorado. Si necesita más detalles, por favor hágamelo saber.

Gracias.

Respuestas (1)

Essential Diagram for JavaScript admite la creación de cualquier tipo de diagrama, incluidos los diagramas de red. Aquí hay un ejemplo .

El diagrama creado se puede serializar e interpretar para crear entidades reales como ha descrito.

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

captura de pantalla

-Davis (sinfusión)

Davis, esto es increíble. ¡Gracias! Aunque solo una pregunta. No pude encontrar una muestra del código en su edición comunitaria que tuviera esas imágenes (computadora, firewall, etc.). ¿De dónde sacaste esos?
@JakeZ Los elementos de paleta personalizados en la muestra se crean utilizando rutas SVG y se incluyen en el propio JSFiddle. Puede crear cualquier ruta y agregarla como un elemento de paleta. Envíe una solicitud a soporte si necesita ayuda para crear elementos adicionales.
@DavisJebaraj - Gracias por esto. Tengo requisitos similares a los de la pregunta original publicada. Me gustaría implementar esto dentro de una aplicación de meteoritos. ¿Podría dar más detalles sobre " El diagrama creado se puede serializar e interpretar para crear entidades reales "?
@blueren Muestra para guardar y cargar Diagrama. ¿Podría enviar un ticket en Syncfusion.com para obtener más ayuda, ya que publicar comentarios aquí es limitante?
JavaScript/HTML5 Topología de red Arrastrar y soltar
RespuestasAquíPolítica de privacidad1y, 1v