Drawing a connecting line between two elements

Question

How can I (or what tools are available) for drawing a line between two or more elements to connect them? Any combination of HTML/CSS/JavaScript/SVG/Canvas is fine.

If your answer supports any of these, then do mention it:

• draggable elements
• draggable/editable connections
• element overlap avoidance

This question has been updated to consolidate the numerous variations of it.

Answer 1

jsPlumb is an option available that supports drag and drop, as seen by its numerous demos, including the Flowchart demo.

It is available in a free Community edition, and a paid Toolkit edition.

The Toolkit edition wraps the Community edition with a comprehensive data binding layer, as well as several UI widgets for building applications and integrations for popular libraries, and is commercially licensed.

Answer 2

JointJS/Rappid supports this use case with its Kitchensink example which supports dragging and dropping of elements, and repositioning of connections. It has many examples.

This answer is based off of Vainbhav Jain's answer.

Answer 3

VisJS supports this with its Arrows example, that supports draggable elements.

It also supports editable connections, with its Interaction Events example.

Answer 4

GoJS supports this, with its State Chart example, that supports dragging and dropping of elements, and editing of connections.

This answer is based off of Walter Northwoods' answer.

Answer 5

mxGraph — used by draw.io — supports this use case, with its Grapheditor example. Documentation. Examples.

This answer is based off of Vainbhav Jain's answer.

Answer 6

D3 has hundreds of examples, some of which are suitable for this question.

Examples without drag and drop, that are fixed:

• https://beta.observablehq.com/@mbostock/d3-cluster-dendrogram
• https://beta.observablehq.com/@mbostock/d3-tidy-tree
• https://beta.observablehq.com/@mbostock/d3-hierarchical-edge-bundling
• https://beta.observablehq.com/@mbostock/d3-radial-dendrogram
• https://beta.observablehq.com/@mbostock/d3-sankey-diagram
• https://www.jasondavies.com/collatz-graph/
• https://bost.ocks.org/mike/hive/
• https://bost.ocks.org/mike/fisheye/
• https://bl.ocks.org/wvengen/cab9b01816490edb7083

Examples without drag and drop, that are interactive:

• https://beta.observablehq.com/@mbostock/collapsible-tree
• https://beta.observablehq.com/@mbostock/d3-force-directed-graph

Examples with dragging and dropping:

• http://bl.ocks.org/MoritzStefaner/1377729
• http://bl.ocks.org/Neilos/584b9a5d44d5fe00f779

This answer is based off of Glenn Dayton's answer.