Olá, Robert!

Gostei da sua ideia, mas algumas partes ficaram confusas. Para que eu possa ajudar melhor, poderia compartilhar mais detalhes do seu projeto, como um print ou uma visão geral? Se possível, também seria bom ter acesso ao código para que eu possa contribuir no refinamento da solução.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Recentemente, tive a ideia de utilizar CSS puro. Anteriormente, utilizei a biblioteca BALKANTree JS para resolver meu problema, a qual, até certo ponto, foi útil. No entanto, encontrei uma limitação em sua capacidade de representar casos em que um indivíduo possui filhos com diferentes parceiras. Assim, devido à dificuldade de encontrar uma solução usando a biblioteca, passei a buscar resolver isso utilizando CSS. Sinceramente não sei se é o melhor caminho, mas estou disposto a aceitar qualquer ajuda.

No final do texto, colei uma imagem de exemplo do que eu espero atingir.

Link da documentação da Biblioteca javascript https://balkan.app/FamilyTreeJS/Docs/GettingStarted

Imagem do que eu conseguir fazer até o momento.

Exemplo do Resultado Esperado

Exemplo do que eu pretendo conseguir, perceba que no exemplo abaixo, o Viserys tem uma filha com a Aemma, entretanto, Visery tambem tem duas filha com a Alicent. Seria uma situação como essa que eu espero poder representar em meu gráfico.

codigo de javascript que fiz para utilizar a biblioteca js

document.addEventListener("DOMContentLoaded", function() {
    
        let nos = []
        
        fetch("/api/listarArvore",{method: "GET"}).then(dados =>{
            return dados.json();	
        }).then(cavalos=>{
            cavalos.forEach(c=>{
                nos.push({
                        id: c.id,
                        fid: c.idPai,
                        mid: c.idMae,
                        name: c.nome,
                        gender: c.sexo,
                        pids: c.idCompanheiros	
                    });
            }
                
            )
            
            console.log(cavalos)
        });
        
        
        let family = new FamilyTree(document.querySelector("#tree"), {
            mouseScrool: FamilyTree.action.none,
            
            nodeBinding: {
                field_0: "name"
            },
            nodes: nos 
        });
        
        var c = document.querySelector("svg");
        c.click();
    });

Codigo do Css

.arvore{
    min-width: 100%;
    min-height: 100%;
}

.node.MASCULINO rect{
    fill: blue !important;
    stroke: blue !important;
}
.node.FEMININO rect{
    fill: RED !important;
    stroke: RED !important;
}
.bft-light{
    background: var(--cor-dois);
    border-radius: 40px;
}

Codigo Css pagina

@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-straight/css/uicons-regular-straight.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-bold-straight/css/uicons-bold-straight.css');

:root{
    --cor-claro-um: #dee1e2;
    --cor-claro-dois:#79A8B8;
    --cor-medio-um: #205363;
    --cor-medio-dois: #205363;
    --cor-escuro-um: #092D39;
    --cor-escuro-dois: #333;
    --cor-btn-confirmar:#20D47D;
    --cor-btn-apagar:#DB2210;
    
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style-type: none;

}

body{
    display: flex;
    flex-direction: column;
    min-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}

header{
    top: 0;
    left: 0;
    align-items:center;
    background: var(--cor-claro-um);
    padding: 20px 40px;
    box-shadow: 0 15px 15px rgba(0,0,0, 0.05);
    display: flex;
    justify-content: space-between;
    width: 100vw;
    flex-wrap: wrap;
}
.cabecalho_titulo{
    letter-spacing: 0.1em;
}

header ul li{
    display: flex;
    gap: 50px;
}

header ul li a{
    display: flex;
    gap: 10px;
    position: relative;
    color: var(--cor-escuro-um);
    font-weight: bold;	
}	

header ul li a::before{
    content: "";
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 2px;
    background: var(--cor-escuro-dois);
    transform: scaleX(0);
    transition: transform 0.5s ease-in-out;
    transform-origin: right;
}

header ul li a:hover::before{
    transform: scaleX(1);
    transform-origin: left;
}



main{
    background: var(--cor-medio-um);
    min-height: 90vh;
    padding: 0% 5%;
    padding-top: 2vh; 
}


.rodape{
    background: var(--cor-claro-um);
    text-align: center;
    padding: 0% 5%;
}

.rodape img{
    width: 25px;
    height: 25px;
}

button{
    width: 100%;
    padding: 1%;
    border-radius:40px;
    cursor: pointer;
    font-weight: bold;
}

Codigo Html PAgina Arvore

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" media="screen" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/arvoregenealogica.css}" media="screen" />
</head>
<body>
   <header th:insert="~{layout :: cabecalho}"/>
   </header>
    <main>
    <div id="tree" class="arvore">

        </div>
    </main>
    <footer th:insert="~{layout :: rodape}">
    </footer>
    <script th:src="@{/js/familytree.js}" type="text/javascript"></script>
    <script th:src="@{/js/arvoregenealogica.js}" type="text/javascript"></script>
</body>
</html>

Codigo Html "Template Pagina"

<html lang="pt-br">
<body>
   <header th:fragment="cabecalho">
        <div class="cabecalho_titulo">
            <h1>ÁRVORE GENEALÓGICA</h1>
        </div>
        <div class="cabecalho_navegacao">
            <ul>
                <li>
                    <a href="/"><span><i class="fi fi-rr-house-chimney"></span></i>Pagina Inicial</a>
                    <a href="/arvoregenealogica"><span><i class="fi fi-ss-chart-tree"></i></span>Grafico</a>
                    <a href="/grafico"><span><i class="fi fi-rs-exit"></i></span>Sair</a>
                </li>
            </ul>
            
        </div>
   </header>
    <main>
    
    </main>
    <footer  th:fragment="rodape">
    <div  class="rodape">
        <div class="rodape_logo">
            <img src="/imagem/logo.png">
        </div>
        <div>
            <h6>Desenvolvido por: Robert Hichert Vieira Nascimento</h6>
            <h6>Telefone:(75) 9 9897-2255</h6>			
        </div>
    </div>
    </footer>
</body>
</html>

Olá Robert!

Desculpa a demora.

Tive alguns imprevisto com o seu projeto e não conseguir simular, se tiver o projeto no github seria bacana para eu acompanhar.

Esse gráfico será fixo? Se sim, já pensou em algo como um SVG, às vezes o simples funciona.

Caso contrário, quando utilizado HTML e CSS puro, requer maiores conhecimentos. A biblioteca mencionada vai te dar algumas limitações realmente, mas utilizando essa biblioteca de árvore genealógica que você mencionou, só que com o exemplo, utilizando a família britânica, adicionei mais uma situação na qual Charles tem mais dois filhos com a Camila, algo nessa linha certo?

E adicionei apenas essas duas linhas:

{ id: 19, fid: 6, mid: 8, name: "Fulana", img: "image1.png", gender: 'female' },
    { id: 20, fid: 6, mid: 8, name: "Ciclano", img: "image2.png", gender: 'male' }

Caso seja esse o seu desejo recomendo que use biblioteca, pois vai facilitar e muito o seu desenvolvimento, ou explore por exemplos tais como esses no codePen.

Espero ter ajudado! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Exato, Muitissimo obrigado