Create dynamic lines or spokes around a shape

I have to create a 4 level menu where at a time 2 levels will be

displayed. Lets say, there’s user1, user2, user3 and user4. The

hierarchy between these 4 will be:

user1 - primary user
user2 - 1st level (under user1)
user3 - 2nd level (under user2)
user4 - 3rd level (under user3)

The menu will be shown in such a manner where at a time we can see

only 2 levels i.e.

user1 and user2 or user2 and user 3 …so on.

I am attaching a diagram of the menu (something similar).

The middle black circle will contain name of the parent user and all the lines with username are buttons under that user. Cliking on any button, that username will replace the parent user, and new buttons will be created under that user. For example, Tom is the parent user and Jerry is under him. Clicking on Jerry, Tom will dissappear and Jerry will come in his place. And then under Jerry all the other users will be shown. Then again John is under Jerry, clicking on John, Jerry will dissappear and John will replace him…so on.

I need you to point me to right direction regarding this. Also I don’t have any clue how to create dynamic buttons with lines attached to them (users). Also there could be unlimited users under one parent user. Plz advise.