Biblioteca de Javascript: ¿cómo dibujar un organigrama o un diagrama de flujo del árbol genealógico?

I'm having the same problem. Here's what I've found:

• http://astuteo.com/slickmap/

¿Tienes alguna otra solución?

I found 3 methods able to achieve your requirement:

1. BalkanGraph

Link de referencia: https://balkangraph.com/OrgChartJS/Demos/RoyalFamilyTree

2. dTree (Based on D3)

Demostración: https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7

Link de referencia: https://github.com/ErikGartner/dTree

3. GoJS Genogram

Link de referencia: https://gojs.net/latest/samples/genogram.html

I tailored a Graphviz dot-file to produce such output. Currently I'm working on a Rubí script to generate this from a .gedcom file.

Here the .dot contents, the nodes with numbers are just dots and flow the edges the right way.

digraph G {
  graph [nodesep=0.2,splines=ortho,ranksep=0.05]
  node [shape=box,fontname=Helvetica,fontsize=8;color="green",fixedsize=true,width=1,height=0.5,style=filled]
  Grandfather [color="lightblue"]
  Grandmother [color="pink"]
  StephGrandmother [color="pink"]
  Father [color="lightblue"]
  Mother [color="pink"]
  Uncle [color="lightblue"]
  Laurent [color="lightblue"]
  Child2 [color="lightblue"]
  Child3, Child4 [color="pink"]
  node[label="", width=0, height=0];
  edge[arrowhead=none, color=blue];
  {rank=same;StephGrandmother;Grandfather;Grandmother;Grandfather1}
  {rank=same;Father;Father1;Mother;Uncle}
  {rank=same;Laurent;Child2;Child3,Child4}
  {rank=same;Father2;Father3}
  StephGrandmother:e -> Grandfather:w
  Grandfather:e -> Grandfather1
  Grandfather1 -> Grandmother:w
  Grandfather1 -> Grandfather2
  Grandfather2 -> Father:n 
  Grandfather2 -> Uncle:n
  Father:e -> Father1
  Father1 -> Mother:w
  Father1 -> Father2
  Father2:w -> Laurent:n 
  Father2:w -> Child2:n
  Father2 -> Father3
  Father3:e -> Child3:n
  Father3:e -> Child4:n
}

Encontrado TreantJS - might be helpful.

I know I am really late to the party, but when I saw that your sample image was created using yEd, I thought that linking to the underlying software library that yEd is built upon would be a good idea. After all there is a JavaScript version of the graph visualization library that has a specific automatic layout for family trees built-in.

There is a an article about how to use that library to draw family charts in JavaScript, so if this is in a commercial context (this is a commercial library) you might want to take a look, as it specifically solves the problem with the connections ("marriage nodes") you are describing:

The grey round nodes depict marriages and child nodes connect to the marriage node of their respective parents.

If not for the automatic layout, of course you might also want to look at the other libraries in esta pregunta.

^{Disclaimer: I work for the company that provides the linked library, but I do not represent the company on SO. My comments, opinions, and answers are my own.}

While not a "library", a utility exists that allows you to draw precisely what you describe. Called simply "SVG Utility", this is a free piece of software with a graphical designer that allows you to define real family relationships (including multiple spouses, tentative children, etc). See More on SVG Family Trees.

Once designed, the relationships and layout are captured in a simple text-file format so that they can be modified or re-used. The utility generates an SVG version for use in a blog-post or other Web page. There are several possible configurations that allow for multiple SVG images on the same page, tooltip or pop-up information behind person-boxes or "families", pan-zoom of individual trees, thumbnail images together with captions, etc.

The installation kit, documentation, and samples are available in a Dropbox folder. Contact the author of the blog-post mentioned above to get access to it.

The utility was designed to run under Windows, but has been run under the WINE compatibility layer on a Mac, too.