Создание блок-схемы с HTML / CSS

Question

Я пытаюсь создать структуру с использованием HTML / CSS, которая может вместить несколько узлов. В будущем я намерен интегрировать это с приложением Angular, но на данный момент я только хочу создать эту структуру. Мое желание состоит в том, чтобы создать структуру, которая может принимать несколько узлов последовательности, а иногда и разветвления.

Я пытался создать структуру, используя :: after и :: before из CSS3. Но я думаю, что в итоге я запутался в реализации. Следуйте приведенному ниже коду.

.node:first-child::before {
  border: 0 none;
}

.node::before {
  content: '';
  display: block;
  top: 0;
  right: auto;
  left: 50%;
  border-right: 4px solid #067a2d;
  width: 50%;
  height: 40px;
}

.node:last-child::after {
  border: 0 none;
}

.node span {
  text-align: center;
  padding: 5px 10px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #673ab7;
  display: block;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.nodeBranch {
  column-count: 2;
}

.nodeBranch::before,
.nodeBranch::after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  left: 25%;
  border-top: 4px solid #067a2d;
}

.branch {
  padding: 0px;
}

.branch .node:first-child::before,
.branch .node:last-child::after {
  content: '';
  display: block;
  top: 0;
  right: auto;
  left: 50%;
  border-right: 4px solid #067a2d;
  width: 50%;
  height: 80px;
}

<div class="tree">
  <div class="node">
    <span>Step 1</span>
  </div>
  <div class="node">
    <span>Step 2</span>
  </div>
  <div class="node">
    <span>Step 3</span>
  </div>
  <div class="nodeBranch">
    <div class="branch">
      <div class="node">
        <span>Step 4.1</span>
      </div>
    </div>
    <div class="branch">
      <div class="node">
        <span>Step 4.2</span>
      </div>
      <div class="nodeBranch">
        <div class="branch">
          <div class="node">
            <span>Step 5.1</span>
          </div>
        </div>
        <div class="branch">
          <div class="node">
            <span>Step 5.2</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="node">
    <span>Step 7</span>
  </div>
  <div class="node">
    <span>Step 8</span>
  </div>
</div>

Спасибо за всевозможную помощь.