На чем сделать стрелки с кружками?

Question

[Енот Енотов]

В бд хранятся связи Объектов: Маша => женя , Женя => Коля
нужно визуализировать, примерно как на картине, самое галвное что бы была какая-либо область + возможность создавать стрелку и отступы.

Подскажите плиз какое-нибудь готовое решение

Comments

[copal]

D3.js

[copal]

Самому было бы легко сделать, если бы не огибание линией объекта.
Если же есть желание сделать самому и допустимо чтобы линии не огибали, а проходили под объектами, но в момент наведения на линии или объект они подсвечивались и меняли свой уровень, то есть становились на уровень выше объектов, то такое не сложно сделать на canvas, если рекурсии и векторная алгебра Ваше все.

Answer 1

[Енот Енотов]

D3.js
Сложновато ( нужно в фреймворке разбираться +  всяческих алгебраических и геометрических формулах )
Просто я не профи в JS.
нет времени неделю сидеть разбираться )
 

Все, Вроде бы нашел:  http://js.cytoscape.org/
http://jsbin.com/gist/aedff159b0df05ccfaa5?js,console,output
Стрелки ставятся через  { source: 'cat', target: 'bird' } 
простой вариант, то что нужно.

если кому инетерсно...

Если у кого-нибудь есть что-то попроще этого, не откажусь)