Generate SVG-based Arrows Between Elements - jQuery arrows.js

arrows.js is a simple jQuery plugin that generates styleable SVG arrows along with accompanying text tags between HTML elements on your webpage.

It is designed to create a visual connection that helps illustrate relationships, hierarchies or sequences between the linked UI components. Ideals for infographics, flowcharts, interactive tutorials, and more.

See Also:

• Add Connecting Lines Between Block Elements - Connections
• jQuery plugin To Visualize Connections Between Elements - jqSimpleConnect
• jQuery Plugin To Draw Curved Arrows Using Canvas - Curved Arrow

How to use it:

1. Download the plugin and load the jquery.arrows.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.arrows.js"></script>

2. Initialize the plugin and specify the origin and destination elements.

$().arrows({
  from: '#node-from', 
  to: '#node-to'
});

3. Add custom text to the SVG arrow.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  name: 'i am an arrow',
});

4. Assign a unique ID and/or CSS class(es) to the arrow. OPTIONAL.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  id: 'arrow-id', 
  class: 'arrow-class',
});

5. Specify the container that hold the SVG arrows.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  within: '#container',
});

6. Specify the tab name of the SVG arrows.

$().arrows({
  from: '#node-from', 
  to: '#node-to',
  tag: 'arrow',
});

7. API methods.

// remove arrows
$('.remove').arrows('remove');

// update arrows
$('.update').arrows('update');

Changelog:

2023-07-05

• minor changes

---

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