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

I'm looking for a simple Javascript Library (svg?) that allow me to draw a family tree relationships.

I have searched a lot on google found a lot of interesting libraries like Raphaël and its extention Dracula. Google has its own library to make flowcharts too.

Unfortunately, every library make a relation between nodes with a single line. If A and B has a relation to C, I will obtain 2 line: one from A to C and one from B to C.

What I need is a line from A to B (we call it AB) and a line from AB to C to represent the Marriage of A and B.

Example (Source: example-image): Mi requisito


preguntado el 03 de mayo de 12 a las 11:05

Have you get any library?? am also looking for the same :] -

6 Respuestas

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

¿Tienes alguna otra solución?

Respondido el 01 de junio de 19 a las 10:06

Creo que el flechas-y-cajas is the best. Try pattern (Dennis) - (>[d]) - (Hank) || () (d:Susan) - larry k

arrows and boxes are very good if you build the tree yourself. I'm trying Graphviz and dot language right now. It's very powerfull. - daigorocub

I found 3 methods able to achieve your requirement:

  1. BalkanGraph

enter image description here

Link de referencia:

  1. dTree (Based on D3)

enter image description here


Link de referencia:

  1. GoJS Genogram

enter image description here

Link de referencia:

Respondido 03 ago 20, 03:08

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. enter image description here

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

Respondido el 04 de enero de 17 a las 23:01

Encontrado TreantJS - might be helpful.

Respondido 20 Oct 19, 18:10

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:

Sample Automatic Family Tree Layout

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.

Respondido el 17 de diciembre de 19 a las 10:12

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.

Respondido 13 Oct 17, 11:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.