Estoy usando Diagramas de Primitivas Básicas y es lo único que puede funcionar con 2 padres. Pero el problema es que las líneas son caóticas y el árbol se vuelve totalmente ilegible.
¿Alguien puede ayudarme a hacerlo hermoso y legible? O tal vez hay una biblioteca más ligera.
No necesito ninguna acción extendida, solo quiero mostrar el pedigrí del gato.
No soy tan bueno en JS para escribir ese árbol yo mismo =(
Leí la documentación https://www.basicprimitives.com/ y traté de optimizarla con opciones simples, pero parece que necesito establecer algunas configuraciones fijas como PriorityParent u Order, no es bueno porque este árbol crecerá de vez en cuando y debe ser dinámicamente

 <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>