Необходимо нарисовать на холсти элементы с возможностью хранить при каждом изменении через ajax элементы на этой холсти.

При нажатии правой кнопкой мыши на холст меню:

При нажатии кросс, муфта, коммутатор или сплиттер, спрашивает сколько портов:

После нажатия "ок", создается один из выбранных элементов с количеством портов (красным отметком порты)

Среди них можно создать еще один элемент (кабель):


С помощью этого кабеля можно соединить элементы цветными (избранная политра) линиями:

Это все чудо реализовано на библиотеке: https://js.cytoscape.org/#demos
Например, где посмотреть схему и ознакомиться с функцией можно: https://all-optic.com/cgi-bin/stat.pl?a=main&gid= (создать новую схему)

Необходимо шос похож, возможно без этой библотеки, но суть всего чеб-то пытался выложить (обязательное сохранение должно быть через ajax). Буду благодарна за предложения, возможные решения и приблизную оценку в затратах.