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

Found TreantJS - might be helpful.

I found 3 methods able to achieve your requirement:

1. BalkanGraph

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

2. dTree (Based on D3)

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

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

3. GoJS Genogram

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

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

• http://astuteo.com/slickmap/

Do you have any other solutions?

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
}