GoJS — бесплатная альтернатива HTML-фреймворку схемы маршрутизации

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

Но так как мы стартап, у нас нет 3000 долларов США, чтобы потратить на библиотеку GoJS, хотя мне нравится фреймворк, он прост и быстр для понимания. Кроме того, модель входных данных потрясающая. Но, вероятно, слишком сложно для того, что нам нужно.

На вопрос... Кто-нибудь знает хорошую альтернативу, отвечающую требованиям:

• Маршрут от одного элемента к другому и стрелка, как отношения
• Я могу установить цвет отдельных маршрутов (я хочу, чтобы административный маршрут был красным, другие - синими и т. д.)
• Автоматическое позиционирование и прорисовка маршрута
• есть функция связывания (съедает входные данные), где я просто добавляю массив ключей {от: x, до: y, "зеленый"}, и он связывает элемент с #X с элементом с #Y со стрелкой от X до Y с зеленым цветом

Чего нет в GoJS, но было бы здорово: было бы здорово добиться этого с помощью HTML5+CSS3+JS, но все же сложно создать собственный макет на GoJS, который использует openGL.

Моим достижением до того, как я увидел это испытание, было следующее:

Входные данные

nodeDataArray = [
  { key:1,name: "Group 1", category:"decision", a:"1",  aText:"Add UserGroup", aToolTip:"Test",b:"a",bText:"Delete",bToolTip:"sdas"},  // the root node
  { key:2,name: "Group 2", category:"decision", a:"2",  aText:"Add UserGroup", aToolTip:"Test",b:"b",bText:"Delete",bToolTip:"sdas"},
  { key:3,name: "Group 3", category:"decision", a:"3",  aText:"Add UserGroup", aToolTip:"Test",b:"c",bText:"Delete",bToolTip:"sdas"},
  { key:4,name: "Group 4", category:"decision", a:"4", aText:"Add UserGroup", aToolTip:"Test",b:"d",bText:"Delete",bToolTip:"sdas"},
  { key:5,name: "Group 5", category:"decision", a:"5", aText:"Add UserGroup", aToolTip:"Test",b:"e",bText:"Delete",bToolTip:"sdas"},
  { key:6,name: "Group 6", category:"decision", a:"6",  aText:"Add UserGroup", aToolTip:"Test",b:"f",bText:"Delete",bToolTip:"sdas" }
];

linkDataArray = [
{from:"0", to:"1"},
{from:"1", to:"2"},
{from:"1", to:"3"},

{from:"3", to:"1"},
{from:"1", to:"4"},
{from:"4", to:"5"},
{from:"4", to:"6"}


];