GoJS - Kostenlose Routing-Diagramm-HTML-Framework-Alternative

Wir arbeiten in einem kleinen Startup und möchten das Framework GoJS verwenden, um unseren Kunden zu zeigen (da sie nicht verstehen, was eine Benutzergruppe ist), wie Benutzer einer Benutzergruppe beitreten, mit der er andere Benutzergruppen verwalten und welche Berechtigungen für welche Benutzergruppen sie haben .

Aber da wir ein Startup sind, haben wir keine 3000 USD, die wir für die GoJS-Bibliothek ausgeben können, obwohl ich das Framework liebe, es ist einfach und schnell zu verstehen. Auch das Modell der Eingabedaten ist großartig. Aber wahrscheinlich zu komplex für das, was wir brauchen.

Zu der Frage... Kennt jemand eine gute Alternative, die den Anforderungen entspricht:

• Leiten Sie von einem Element zum anderen und zeigen Sie den Pfeil an, wie die Beziehung ist
• Ich kann die Farbe einzelner Routen festlegen (ich möchte, dass die Verwaltungsroute rot ist, andere blau usw.)
• Automatische Positionierung und Routenzeichnung
• habe eine Verknüpfungsfunktion (frisst Eingabedaten), wo ich einfach ein Array von Schlüsseln hinzufüge {from:x,to:y,"green"} und es verknüpft Element mit #X mit Element mit #Y mit Pfeil von X nach Y mit Farbe Grün

Was GoJS nicht hat, aber cool wäre: Es wird großartig sein, dies über HTML5 + CSS3 + JS zu erreichen, aber es ist immer noch schwierig, ein benutzerdefiniertes Layout auf GoJS zu erstellen, das OpenGL verwendet

Meine Errungenschaft, bevor ich sah, dass es sich um eine Prüfung handelt, war folgende:

Eingabedaten

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"}


];