JavaScript/HTML5 Netzwerktopologie Drag & Drop

Ich arbeite derzeit an der Entwicklung einer Django/Python-basierten Anwendung, die es Benutzern ermöglicht, eine Leinwand zum Ziehen und Ablegen von Computernetzwerk-basierten Bildern (z. B. Router, Switch usw.) zu haben. Im Wesentlichen möchte ich so etwas wie draw.io erstellen, aber dem Benutzer ermöglichen, ein Endprodukt wie dieses zu entwickeln: http://www.conceptdraw.com/samples/resource/images/solutions/network-diagram/network-diagram -System-Design.png

Im Gegenzug möchte ich diese Netzwerktopologie, die sie entwickelt haben, in eine real funktionierende virtuelle Umgebung konvertieren, indem ich eine benutzerdefinierte API verwende, die ich entwickelt habe (funktioniert mit Puppet, Xen usw.).

Ich suche nach der besten Bibliothek, um die Zeichnung auszuführen. Es gibt so viele JavaScript-Bibliotheken, aber ich bin mir nicht sicher, welche für eine solche Aufgabe am meisten bevorzugt (am einfachsten) ist.

Idealerweise hätte der linke Bereich verschiedene Netzwerk-Tools, die der Benutzer auf eine Leinwand (z. B. Router, PC) ziehen kann. Dann können sie sie miteinander verbinden usw. Ich mache mir keine Sorgen darüber, dass dies mit der API funktioniert ... Ich kann das herausfinden. Aber die geeignete Bibliothek, um ein solches Tool zu erstellen, ist das, wofür ich wirklich Rat brauche!

Ihre professionelle Beratung wird sehr geschätzt. Wenn Sie weitere Details benötigen, lassen Sie es mich bitte wissen.

Vielen Dank.

Antworten (1)

Essential Diagram for JavaScript unterstützt das Erstellen jeder Art von Diagramm, einschließlich Netzwerkdiagrammen. Hier ist ein Beispiel .

Das erstellte Diagramm kann serialisiert und interpretiert werden, um echte Entitäten zu erstellen, wie Sie es beschrieben haben.

Das gesamte Produkt ist kostenlos über die Community-Lizenz erhältlich .

Bildschirmfoto

-Davis (Synchronisation)

Davis, das ist großartig. Vielen Dank! Aber nur eine Frage. Ich konnte in ihrer Community-Edition kein Codebeispiel finden, das diese Bilder enthielt (Computer, Firewall usw.). Woher hast du die?
@JakeZ Die benutzerdefinierten Palettenelemente im Beispiel werden mithilfe von SVG-Pfaden erstellt und sind in JSFiddle selbst enthalten. Sie können beliebige Pfade erstellen und sie als Palettenelement hinzufügen. Bitte senden Sie eine Anfrage an den Support, wenn Sie Hilfe beim Erstellen zusätzlicher Elemente benötigen.
@DavisJebaraj - Danke dafür. Ich habe ähnliche Anforderungen wie die ursprünglich gestellte Frage. Ich möchte dies in einer Meteor-Anwendung implementieren. Können Sie weitere Einzelheiten zu " Das erstellte Diagramm kann serialisiert und interpretiert werden, um echte Entitäten zu erstellen " geben?
@blueren Beispiel zum Speichern und Laden des Diagramms. Könnten Sie bitte ein Ticket bei Syncfusion.com einreichen, um weitere Hilfe zu erhalten, da das Posten in Kommentaren hier begrenzt ist.
JavaScript/HTML5 Netzwerktopologie Drag & Drop
AntwortenHierDatenschutz-Bestimmungen1y, 0v