Draw SVG Paths Between Two Elements – leader-line

leader-line is a JavaScript library used to draw customizable SVG based, straight/arc/fluid/magnet/grid paths between two elements. Ideal for creating flowchart and workflow style diagrams.

How to use it:

Load the minified version of the leader-line library in the HTML document.

<script src="leader-line.min.js"></script>

Draw a default line between two elements you specify.

<div id="start">Start</div>
<div id="destination">Destination</div>

var myLine = new LeaderLine(
    document.getElementById('start'),
    document.getElementById('destination')
);

API methods.

/*
  Names of `options`      Keys of API (properties of `newOptions`)
  ----------------------------------------
  anchorSE                start, end
  lineColor               color
  lineSize                size
  socketSE                startSocket, endSocket
  socketGravitySE         startSocketGravity, endSocketGravity
  plugSE                  startPlug, endPlug
  plugColorSE             startPlugColor, endPlugColor
  plugSizeSE              startPlugSize, endPlugSize
  lineOutlineEnabled      outline
  lineOutlineColor        outlineColor
  lineOutlineSize         outlineSize
  plugOutlineEnabledSE    startPlugOutline, endPlugOutline
  plugOutlineColorSE      startPlugOutlineColor, endPlugOutlineColor
  plugOutlineSizeSE       startPlugOutlineSize, endPlugOutlineSize
  labelSEM                startLabel, endLabel, middleLabel
*/
myLine.setOptions(options)
// EffectName: none, fade, draw
// animOptions: {duration: 300, timing: 'linear'}
myLine.show(EffectName, animOptions)
myLine.hide(EffectName, animOptions)
// re-positions the line
myLine.position()
// removes the line
myLine.remove()

Changelog:

07/04/2022

• v1.0.7