Home

jQuery Arrows

Demos

Example	Individual styling, draggable nodes, interval update
Graph Sparrow	Interactive editor with force-directed graph layout using jQuery Arrows

Usage

<!-- Include jQuery and the Arrows plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.arrows.js"></script>
<!-- Connect your elements like in this example -->
<script>
  jQuery(document).ready(function() {
    $().arrows({
      within: '#svg-arrows', // Optional (container that will hold the created arrows - set to "body" if not specified)
      id: 'arrow-html-id-tag', // Optional (for unique element identification - set to "arrow-n" if not specified) 
      class: 'arrow-html-class-attribute', // Optional (for arrow class identification and styling)
      name: 'text to display along arrow line', // Optional (no text is shown otherwise)
      from: '#source', // MANDATORY - Any jQuery selector (allowing to choose multiple source elements at once).
      to: '#destination' // MANDATORY - Any jQuery selector (allowing to choose multiple destination elements at once).
    });
  });
</script>

See the API for a complete list of methods and options.