I am planning on creating like a family tree appearance in this scenario.
Is it possible to connect two separate layouts via a line tool or any connector ?
So far all I have done was static images of lines and aligning the layout so it appears connected to the other
Is there even something like a family tree Out of the box from Pega ?
Family tree kind of view is not present in Pega.
Similar kind of requirement came to me as well few years ago. That time I created my own html Section and css files.
I picked the idea from google to show list tags (li) in form of connected lines.
An example of the idea : https://jwcooney.com/2016/08/21/example-pure-css-family-tree-markup/
An example of connected div layout : http://jsfiddle.net/sbaBG/1
Under list tag I used Pega tags to show property values.
