Criar linhas que interligam as DIV

Boa Tarde.

Pessoal gostaria de saber uma forma que eu possa interligar varias divs com linhas tipo 2 quadrados com uma linha no meio entre eles, automaticamente, sempre que uma div for inserida haja essa ligação.

Sei que explicando não dará muito certo, então seria mais ou menos dessa forma como uma árvore genealogica.

Existe a div Pai e a outra Mão, queria que houvesse uma ligação entre essas duas divs com uma linha demonstrando essa ligação entre os dois. Abaixo existe 2 divs com o filho e filha, queria que atráves da linha ligando os Pais houvesse outra linhas interligando os filhos, demonstrando que os filhos são daqueles pais.

Site de exemplo.

FamilySearch
MyHeritage

Agradeço ajuda.

Qualquer duvida estou a disposição