Draw Directional Path Between Two Elements - jointerJS

jointerJS is a simple, plain jQuery plugin that draws a directional connecting line between two DOM elements. Ideal for flow chart, decision chart, and much more. Works with modern browsers that support SVG element.

Alternative plugins:

• Connect HTML Elements with Lines - HTML SVG connect
• Visualize connections Between Elements - jqSimpleconnect
• Connect Two Html Elements with A Line
• Add connecting Lines Between Block Elements - connections

Alternative libraries (PURE JS):

• Draw Directional SVG Paths Between Elements
• Draw SVG Paths Between Two Elements – leader-line

How to use it:

1. Include the minified version of the jQuery jointerJS plugin after jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="jointer.min.js"></script>

2. Initialize the jointerJS plugin and we're ready to go.

var jointer = new $().jointer();

3. Connect two elements with a SVG line.

<div id="el1">
  Element 1
</div>

<div id="el2">
  Element 2
</div>

jointer.connectElements('#el1', '#el2');

4. To customize the connecting line, passing the following parameters to the jointer() function.

• connectionColor: line color
• connectionCircleColor: circle color
• useMargin: whether to use margin

// jointer(connectionColor,connectionCircleColor,useMargin);
var jointer = new $().jointer('black','red', true);

5. Remove the connecting line(s).

// remove the line
jointer.clearConnection('#el1');

// remove all
jointer.clearAllConnection();

---

This awesome jQuery plugin is developed by AICDEV. For more Advanced Usages, please check the demo page or visit the official website.