Draw Line and Arrow Between HTML DOM-elements in JavaScript: Domarrow.js for Beginners

Domarrow.js is a pure javascript library for creating line and arrow connector between html dom-elements. In this tutorial, we will use some steps to illustrate you how to implement these connection.

Live Demo

How to draw line and arrow between two dom-elements using domarrow.js?

1.Import domarrow css and js file

<link rel="stylesheet" type="text/css" href="domarrow.css" />
<script type="text/javascript" src="domarrow.js"></script>

2.Create two div box as html dom-elements

<div id="d1">Box 1</div>
<div id="d2">Box 2</div>

3.Set css style for tow div above in order to make them display in page

<style>
    #d1, #d2 {
      float:left;
      width: 70px;
      height: 70px;
      color:#fff;
    }
    #d1 {
      margin-left:300px;
      background-color: green;
    }
    #d2 {
      margin-left:300px;
      margin-top:200px;
      background-color: blue;
    }
  </style>

4.Draw line and arrow between them

<connection from="#d1" to="#d2" color="red" tail></connection>
<connection from="#d1" to="#d2" color="purple" fromX="0" fromY="1" toX="0" toY="0.75" head tail></connection>
<connection from="#d2" to="#d1" color="#aaaaaa" fromX="1" tail onlyVisible></connection>

We can use connection tag to connect html dom-elements. from and to determine the direction of connection.

color: the color of connection.