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.

Have you get any library?? am also looking for the same :] – sunny May 24 '13 at 17:15 — sunny, May 24 '13 at 17:15

score 5 · Accepted Answer · edited Jun 01 '19 at 09:08

5

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

http://astuteo.com/slickmap/

Do you have any other solutions?

edited Jun 01 '19 at 09:08

Community

1
1

answered May 17 '12 at 23:37

daigorocub

786
8
15

I think [arrows-and-boxes](http://www.headjump.de/article/arrows-and-boxes) is the best. Try pattern `(Dennis) - (>[d]) - (Hank) || () (d:Susan)` – Larry K Jun 06 '12 at 04:59
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 Jun 06 '12 at 09:18

Jerry Chong · Answer 2 · 2020-08-03T02:55:27.587

5

I found 3 methods able to achieve your requirement:

BalkanGraph

Reference Link: https://balkangraph.com/OrgChartJS/Demos/RoyalFamilyTree

dTree (Based on D3)

Demo: https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7

Reference Link: https://github.com/ErikGartner/dTree

GoJS Genogram

Reference Link: https://gojs.net/latest/samples/genogram.html

edited Aug 03 '20 at 02:55

answered Aug 03 '20 at 02:45

Jerry Chong

7,954
4
45
40

score 2 · Answer 3 · answered Oct 20 '19 at 17:45

2

Found TreantJS - might be helpful.

answered Oct 20 '19 at 17:45

Zeeshan

741
1
7
21

score 1 · Answer 4 · answered Jan 04 '17 at 23:24

I tailored a Graphviz dot-file to produce such output. Currently I'm working on a Ruby 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
}

score 1 · Answer 5 · answered Dec 17 '19 at 10:13

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

score 0 · Answer 6 · answered Oct 13 '17 at 10:28

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.

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

6 Answers6