How to do Visio-like diagramming with HTML5 + Javascript?

Question

I'm looking for options to draw Visio-like diagrams using HTML and Javascript.

Some examples of what I'm trying to accomplish:

• https://live.yworks.com/demos/view/vsdxexport/ (the computer-network example)
• This Lucidchart example

So far options I can think to explore are:

• Drag and Drop API with SVGs
• d3.js
• HTML5 Canvas

Is there any other tech or NPM packages that I should be aware of? It's not a free-form Visio clone, there's a fixed set of icons that I need to be able to "snap" together with lines. Lines can be straight or curved at 90 degrees like here:

And the icons can be dragged around in the canvas

Answer 1

You can use the mxGraph library, licensed under Apache 2.0.

Distributed as an npm package, on his source code you can find a fantastic example of an editor build upon it that you can also try online.