I am using Basic Primitives Diagrams and it is the only what can work with 2 parents. But the problem is that lines are chaotic and tree becomes total unreadable.
Can anybody help me to make it beauty and readable? Or maybe there is more light library.
I no need any extended actions, I want to display cat's pedigree only.
I am not so good in JS to write such tree myself =(
I read documentation https://www.basicprimitives.com/ and tried to optimize it with simple options, but seems like I need to set some fixed settings like priorityParent or Order, it is not good because this tree will grow time to time and should be dynamically

  <div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>

     <script type='text/javascript'>
        var control;
        document.addEventListener('DOMContentLoaded', function () {
            var options = new primitives.FamConfig();
    
           var items = [
        { id: 1, parents: []},
        { id: 2, parents: []},
        { id: 3, parents: []},
        { id: 4, parents: [] },

        { id: 5, parents: [1,2]},
        { id: 6, parents: [1,3]},
        { id: 7, parents: [2,4]},
        { id: 8, parents: [3,4]},
    ];
options.items = items; 
        options.hasSelectorCheckbox = primitives.Enabled.False;
        options.linesColor = "#7b7b7b";
        options.linesWidth = 1;
        options.showExtraArrows = false;


        options.pageFitMode = primitives.PageFitMode.AutoSize;
        options.cursorItem = 0;
        options.elbowType = primitives.ElbowType.None;   
        options.showNeigboursConnectorsHighlighted = true;  
        options.alignBylevels = true;
        options.groupByType = primitives.GroupByType.Parents;  
        options.hideGrandParentsConnectors  = true;

 control = primitives.FamDiagram(document.getElementById("basicdiagram"), options);
        </script>