Javascript Library - How to draw Family Tree Orgchart or Flowchart?

Question

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

Thanks.

Answer 1

Found TreantJS - might be helpful.

Answer 2

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 this question.

^{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.}