Draw SVG Paths Between Two Elements – leader-line

Category: Javascript , Recommended | October 15, 2018
Author: anseki
Views Total: 15,634 views
Official Page: Go to website
Last Update: October 15, 2018
License: MIT


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(

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

// EffectName: none, fade, draw
// animOptions: {duration: 300, timing: 'linear'}
myLine.show(EffectName, animOptions)
myLine.hide(EffectName, animOptions)

// re-positions the line

// removes the line



  • v1.0.4

You Might Be Interested In:

3 thoughts on “Draw SVG Paths Between Two Elements – leader-line

  1. Jinghui Niu

    Wonderful design! Only problem I have encountered is when involving an element inside a shadow dom, it reports error, saying the element has disconnected.

  2. Lorenzo Colen

    Is it possible to see a working demo of this?
    I’ve just started to study JS, and for the love of me, I can’t get the options to work!
    Thank you!

  3. belrick

    Works great for me. wish i could discover a manual for it though. for example to know what all the valid options are for plugs. But yeah it is amazing. One minor issue is that resizing the screen will move the lines.


Leave a Reply