title: Drawing lines between nodes using CSS
body: <p>Am hardly finding right words to describe the challenge i have in hand. I have set of nodes arranged in Organizational Chart way. I want to know if there is a way to connect those nodes through lines and these lines should be dynamic - may be drawing them using CSS would be right way. </p>
  
  <p><a href="https://i.stack.imgur.com/Iql8c.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iql8c.png" alt="enter image description here"></a></p>
  
  <p>Things look similar to what's been shown in pic.</p>
  
  <p>Along with way to draw lines that connects nodes i would be happy to know if there is a more efficient way to generate those nodes dynamically like <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> structure.</p>
  
  <p>Following is the code snippet i have used to generate above image (which has very minimal usage of Bootstrap):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /&gt;
          &lt;title&gt;Oval&lt;/title&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
          &lt;style type="text/css"&gt;
              body{
                  padding-top: 20px;
              }
  
              .oval {
                  width: 400px;
                  height: 160px;
                  background: #5fa2dd;
                  border-radius: 50%;
                  text-align: center;
              }
  
              .circle {
                  width: 190px;
                  height: 190px;
                  background: #9cc96b;
                  border-radius: 50%;
              }
  
              .emptyrow{
                  margin : 50px 0;
              }
  
              .med-circle{
                  width: 150px;
                  height: 150px;
                  background: #9cc96b;
                  border-radius: 50%;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-4 col-lg-offset-4 oval"&gt;&lt;p&gt;key1 : value1&lt;/p&gt;&lt;p&gt;key2 : value2&lt;/p&gt;&lt;p&gt;key3 : value3&lt;/p&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row emptyrow"&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-2 col-lg-offset-2 circle"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-lg-offset-2 circle"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2 col-lg-offset-2 circle"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Question in nutshell :</p>
  
  <ol>
  <li>Better way to generate nodes dynamically</li>
  <li>How to draw lines to connect those nodes ?</li>
  </ol>