6

I'm currently working on developing a Django/Python based application which enables users to have a canvas for dragging and dropping computer network-based images (e.g. Router, Switch, etc.). Essentially, I want to build something like draw.io but enable the user to come up with a final product like this: http://www.conceptdraw.com/samples/resource/images/solutions/network-diagram/network-diagram-System-Design.png

In turn, I want to convert that network topology they've devised into a real working virtual environment, using a custom API I developed (works with Puppet, Xen, etc.).

I'm looking for the best library to carry out the drawing. There are so many JavaScript libraries, but I'm not quite sure which is the most preferred (easiest) for such a task.

Ideally, the left pane would have different network tools that the user can drag onto some canvas (e.g. Router, PC). Then they can connect them to each other, etc. I'm not concerned about making this work with the API...I can figure that out. But the appropriate library to build such a tool is what I really need advise on!

Your professional advise is much valued. If you need more details, please let me know.

Thank you.

Improve this question

1 Answer 1

Reset to default
6

Essential Diagram for JavaScript supports creating any kind of diagram including network diagrams. Here is an example.

The created diagram can be serialized and interpreted to create real entities as you have described.

The whole product is available for free through the community license.

screenshot

-Davis(Syncfusion)

Improve this answer
4
  • Davis, this is awesome. Thank you! Just a question though. I couldn't find a sample of the code in their community edition that had those images (computer, firewall, etc.). Where did you get those from?
    – Jake Z
    Commented May 13, 2015 at 2:16
  • @JakeZ The custom palette items in the sample are created using SVG paths and they are included in the JSFiddle itself. You can create any path and add them as a palette item. Please submit a request to support if you need help creating additional items.
    – Davis Jebaraj
    Commented May 13, 2015 at 10:22
  • @DavisJebaraj - Thanks for this. I have similar requirements as the original question posted. I Would like to implement this within a meteor application. Would you be able to give more details on "The created diagram can be serialized and interpreted to create real entities"
    – blueren
    Commented Dec 10, 2017 at 10:16
  • @blueren Sample for saving and loading Diagram. Could you please submit a ticket at Syncfusion.com for more help as posting in comments here is limiting.
    – Davis Jebaraj
    Commented Dec 12, 2017 at 20:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.