Part of the problem was that your Link.fromEndSegmentLength and toEndSegmentLength were too long and there wasn’t enough space between the nodes (i.e. GridLayout.spacing was too small) and there wasn’t enough room between the Group header panel and the Placeholder, so the links were forced to go “through” nodes or groups.
Maybe it would be better if all of those mostly horizontal links connecting those blue nodes in the first “row” connected with the bottom ports of those nodes, rather than with the top ports where there is less room between the group header and the placeholder.
Copy the old (and not so good) AvoidsLinksRouter.js from our website into your project.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="myDiagramDiv" style="border: 1px solid black; width: 100%; height: 700px; min-width: 200px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);"></div>
<script src="https://unpkg.com/gojs@2.3"></script>
<script src="https://gojs.net/temp/AvoidsLinksRouter.js"></script>
<script id="code">
const $ = go.GraphObject.make;
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const myRouter = new AvoidsLinksRouter();
myDiagram = new go.Diagram('myDiagramDiv', // the ID of the DIV HTML element
{
//initialAutoScale: go.AutoScale.Uniform, // an initial automatic zoom-to-fit
contentAlignment: go.Spot.Center, // align document to the center of the viewport
layout: $(go.LayeredDigraphLayout,
{
alignOption: go.LayeredDigraphLayout.AlignAll,
setsPortSpots: false,
columnSpacing: 50,
layerSpacing: 180,
direction: 90,
isOngoing: false,
isRealtime: false,
linkSpacing: 30
}
),
"LayoutCompleted": e =>
myRouter.avoidOrthogonalOverlaps(e.diagram.links)
}
);
myDiagram.nodeTemplate =
$(go.Node, "Auto", {
mouseDrop: (e, node) => this.finishDrop(e, node.containingGroup),
click: (e, node) => {
var diagram = node.diagram;
diagram.startTransaction("highlight");
diagram.clearHighlighteds();
node.findLinksOutOf().each(l => l.isHighlighted = true);
node.findNodesOutOf().each(n => n.isHighlighted = true);
diagram.commitTransaction("highlight");
}
},
$(go.Shape, 'RoundedRectangle', {
fill: '#009eff',
stroke: '#009eff',
cursor: "pointer",
minSize: new go.Size(100, 40),
portId: "",
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
},
new go.Binding("figure"),
new go.Binding("strokeWidth", "thickness")),
$(go.TextBlock,
{ margin: 10, textAlign: "center", stroke: '#ffffff', font: "bold 12px sans-serif", overflow: go.TextBlock.OverflowEllipsis, editable: true },
new go.Binding("text").makeTwoWay(),
),
makePort("T", go.Spot.Top, true, true),
makePort("B", go.Spot.Bottom, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: (e, node) => showSmallPorts(node, true),
mouseLeave: (e, node) => showSmallPorts(node, false)
}
);
class CustomGroup extends go.Group {
constructor(init) {
super();
this.avoidableMembers = true;
if (init) Object.assign(this, init);
}
getAvoidableRect(result) {
const header = this.findObject("HEADER");
if (header) return header.getDocumentBounds(result).addMargin(this.avoidableMargin);
return super.getAvoidableRect(result);
}
}
myDiagram.groupTemplateMap.add("lightgreen",
$(CustomGroup, "Auto", {
locationSpot: go.Spot.Left,
isShadowed: false,
shadowBlur: 1,
//avoidableMargin: 10,
shadowOffset: new go.Point(0, 1),
shadowColor: "rgba(0, 0, 0, .14)",
isSubGraphExpanded: true,
selectionObjectName: "GROUPS",
layout: makeLayout('col-infi'),
minSize: this.isAllView ? new go.Size(NaN, NaN) : new go.Size(150, 100),
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, 'RoundedRectangle',
{
fill: 'white',
stroke: '#009eff',
strokeWidth: 1,
portId: "",
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
}),
$(go.Placeholder, { background: "transparent", margin: 20, padding: 30 }),
$(go.Panel, "Horizontal",
{ name: "HEADER", alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, margin: new go.Margin(5, 5, 0, 0), },
$(go.Picture,
{ source: "", width: 20, height: 20, margin: 5 },
new go.Binding("source", "ApplicationID", (appid) => this.getImageUrl(appid)).makeTwoWay(),
new go.Binding("visible", "ApplicationID", (ApplicationID) => ApplicationID != '' ? true : false).makeTwoWay()
),
$(go.TextBlock,
{
alignment: go.Spot.Left, alignmentFocus: go.Spot.Bottom,
font: "bold 12pt sans-serif", editable: true, stroke: '#000000', margin: 5,
},
new go.Binding("text", 'text')),
)
));
myDiagram.groupTemplateMap.add("dotColor",
$(CustomGroup, "Auto", {
locationSpot: go.Spot.Left,
isSubGraphExpanded: true,
//avoidableMargin: 10,
selectionObjectName: "SUBGROUPS",
layout: makeLayout('col-infi'),
computesBoundsAfterDrag: true,
computesBoundsIncludingLocation: true,
mouseDrop: (e, grp) => this.finishDrop(e, grp),
handlesDragDropForMembers: true,
},
{ // what to do when a drag-over or a drag-drop occurs on a Group
mouseDragEnter: (e, grp, prev) => {
if (grp.canAddMembers(grp.diagram.toolManager.draggingTool.draggingParts)) {
const shape = grp.findObject("SUBGROUPS");
if (shape) shape.fill = '#ffffff';
grp.diagram.currentCursor = "";
} else {
grp.diagram.currentCursor = "no-drop";
}
},
mouseDragLeave: (e, grp, next) => {
const shape = grp.findObject("SUBGROUPS");
if (shape) shape.fill = '#ffffff';
grp.diagram.currentCursor = "";
},
mouseDrop: (e, grp) => {
const ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
}
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, 'RoundedRectangle',
{
fill: 'white',
stroke: '#009eff',
strokeWidth: 1,
strokeDashArray: [4, 4],
portId: "",
fromLinkableDuplicates: true,
toLinkableDuplicates: true,
fromSpot: go.Spot.AllSides,
toSpot: go.Spot.AllSides,
}),
$(go.Placeholder, { background: "transparent", margin: 20, padding: 30 }),
$(go.Panel, "Horizontal",
{ name: "HEADER", alignment: go.Spot.Top, alignmentFocus: go.Spot.Bottom, margin: new go.Margin(5, 5, 10, 5), },
$(go.TextBlock,
{
alignment: go.Spot.Left, alignmentFocus: go.Spot.Bottom,
font: "bold 12pt sans-serif", editable: true, stroke: '#000000', margin: 5,
},
new go.Binding("text", 'text')),
$("SubGraphExpanderButton"),
),
makePort("T", go.Spot.Top, true, true),
makePort("B", go.Spot.Bottom, true, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: (e, node) => showSmallPorts(node, true),
mouseLeave: (e, node) => showSmallPorts(node, false)
}
));
myDiagram.linkTemplate =
$(go.Link, // subclass of Link, defined below
{
routing: go.Link.AvoidsNodes,
corner: 5,
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
fromLinkable: true,
fromLinkableSelfNode: true,
fromLinkableDuplicates: true,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
fromEndSegmentLength: 15,
toEndSegmentLength: 15,
fromShortLength: 4,
toShortLength: 4,
},
$(go.Shape, { strokeWidth: 2 }, new go.Binding('stroke', 'color')),
$(go.Shape, { toArrow: 'Standard', scale: 1, strokeWidth: 0 }, new go.Binding('fill', 'color'))
);
const data = { "class": "GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"nodeDataArray": [
{"key":"zy15KuXOoh","text":"Oracle Fusion","id":"dd63a04f-d241-4402-bf23-4c0cf0e103c8","loc":"1267.4980774720802 122.79569499661588","icons":"/erp/application/b5332b9b-aec4-4236-967c-2ffe2a737338/","isGroup":true,"ApplicationID":"b5332b9b-aec4-4236-967c-2ffe2a737338","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"f8bsVOcXj2","text":"Financials","isGroup":true,"group":"zy15KuXOoh","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1300.7595012212341 115.30711874576984"},
{"key":"Z0ERzVcAeL","text":"Payables","isGroup":true,"group":"f8bsVOcXj2","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1334.020924970388 115.30711874576986"},
{"key":"voNG2Oso11","text":"Invoice ID","ApplicationID":"","group":"Z0ERzVcAeL","fill":"#ffffff","stroke":"#000000"},
{"key":"55edDrUk5j","text":"Receivables","isGroup":true,"group":"f8bsVOcXj2","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1521.020924970388 115.30711874576987"},
{"key":"ka5nLnCkA9","text":"Transactio ID","ApplicationID":"","group":"55edDrUk5j","fill":"#ffffff","stroke":"#000000"},
{"key":"Ya9gHo1U5I","text":"Fixed Assets","isGroup":true,"group":"f8bsVOcXj2","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1708.020924970388 115.30711874576987"},
{"key":"9u9vdXuVpn","text":"Asset ID","ApplicationID":"","group":"Ya9gHo1U5I","fill":"#ffffff","stroke":"#000000"},
{"key":"YudYlXm4Rf","text":"General Ledger","isGroup":true,"group":"f8bsVOcXj2","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1895.020924970388 115.30711874576987"},
{"key":"cH1gDy06w8","text":"Journal Batch ID","ApplicationID":"","group":"YudYlXm4Rf","fill":"#ffffff","stroke":"#000000"},
{"key":"nNRvWjaCbo","text":"HCM","isGroup":true,"group":"zy15KuXOoh","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2136.759501221234 122.79569499661585"},
{"key":"cwfIIKfRt6","text":"Global HR","isGroup":true,"group":"nNRvWjaCbo","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2170.020924970388 130.2842712474619"},
{"key":"qSIvyYYkaw","text":"Person Number","ApplicationID":"","group":"cwfIIKfRt6","fill":"#ffffff","stroke":"#000000"},
{"key":"OJTTNGrgKp","text":"Payroll","isGroup":true,"group":"nNRvWjaCbo","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2368.020924970388 130.2842712474619"},
{"key":"QQKu9j8Kkj","text":"Employee Name","ApplicationID":"","group":"OJTTNGrgKp","fill":"#ffffff","stroke":"#000000"},
{"key":"auElGAF6Y4","text":"Absence Management","isGroup":true,"group":"nNRvWjaCbo","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2579.136159345388 130.2842712474619"},
{"key":"LoACxh4hhy","text":"Employee Name","ApplicationID":"","group":"auElGAF6Y4","fill":"#ffffff","stroke":"#000000"},
{"key":"Cq0MOB0JLF","text":"Inventory Management","isGroup":true,"group":"nNRvWjaCbo","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2814.472096845388 130.2842712474619"},
{"key":"1qE2qmY54f","text":"Person Number","ApplicationID":"","group":"Cq0MOB0JLF","fill":"#ffffff","stroke":"#000000"},
{"key":"n5UnTYiJ5d","text":"Supply Chain Management","isGroup":true,"group":"zy15KuXOoh","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3060.759501221234 115.30711874576984"},
{"key":"RzkZuZFSlM","text":"Procurement","isGroup":true,"group":"n5UnTYiJ5d","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3094.020924970388 115.30711874576987"},
{"key":"I3R9DfXsnV","text":"Requisition Header ID","ApplicationID":"","group":"RzkZuZFSlM","fill":"#ffffff","stroke":"#000000"},
{"key":"6mmzB7fD4P","text":"Purchase Order Header ID","ApplicationID":"","group":"RzkZuZFSlM","fill":"#ffffff","stroke":"#000000"},
{"key":"K02oCDt5bR","text":"Order Management","isGroup":true,"group":"n5UnTYiJ5d","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3512.020924970388 115.30711874576987"},
{"key":"9iGGWBKrtz","text":"Sales Order Header ID","ApplicationID":"","group":"K02oCDt5bR","fill":"#ffffff","stroke":"#000000"},
{"key":"m5LQmiqDoU","text":"Shipment ID","ApplicationID":"","group":"K02oCDt5bR","fill":"#ffffff","stroke":"#000000"},
{"key":"AGsZEgsJZR","text":"Inventory Management","isGroup":true,"group":"n5UnTYiJ5d","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3888.9112549695424 115.30711874576987"},
{"key":"IFHBVrlqPk","text":"Item ID","ApplicationID":"","group":"AGsZEgsJZR","fill":"#ffffff","stroke":"#000000"},
{"key":"xwR1XNuUjl","text":"SAP","loc":"383.82996624407804 590.8528137423857","icons":"/erp/application/66ce22a6-6e65-4654-a5d8-ce491cc3546b/","isGroup":true,"ApplicationID":"66ce22a6-6e65-4654-a5d8-ce491cc3546b","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"JysMwufdpa","text":"SAP M1","isGroup":true,"group":"xwR1XNuUjl","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"417.091389993232 590.8528137423857"},
{"key":"lLuTUsdjyn","text":"SAP SM1","isGroup":true,"group":"JysMwufdpa","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"450.35281374238593 590.8528137423858"},
{"key":"artClyJYNB","text":"SAP O1","ApplicationID":"","group":"lLuTUsdjyn","fill":"#ffffff","stroke":"#000000"},
{"key":"st4GU66zRZ","text":"Salesforce","loc":"754.3985087390021 590.8528137423857","icons":"/erp/application/be798343-51a1-4fd9-a289-8b83c2c1a0e3/","isGroup":true,"ApplicationID":"be798343-51a1-4fd9-a289-8b83c2c1a0e3","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"qoxLMvUeva","text":"SFDC M1","isGroup":true,"group":"st4GU66zRZ","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"787.6599324881561 590.8528137423857"},
{"key":"7WHubSc2AJ","text":"SFDC SM1","isGroup":true,"group":"qoxLMvUeva","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"820.9213562373101 590.8528137423858"},
{"key":"xR0D2uIhdT","text":"SFDC O1","ApplicationID":"","group":"7WHubSc2AJ","fill":"#ffffff","stroke":"#000000"},
{"key":"gqOoQVxmlZ","text":"PeopleSoft","loc":"1124.9670512339255 590.8528137423857","icons":"/erp/application/ae0960e2-b78f-4ad5-b010-c666438d044d/","isGroup":true,"ApplicationID":"ae0960e2-b78f-4ad5-b010-c666438d044d","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"DzSsqSm4Fx","text":"PS M1","isGroup":true,"group":"gqOoQVxmlZ","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1158.2284749830794 590.8528137423857"},
{"key":"T0FunsQtn5","text":"PS SM1","isGroup":true,"group":"DzSsqSm4Fx","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1191.4898987322333 590.8528137423858"},
{"key":"eZlu2jh4QW","text":"PS O1","ApplicationID":"","group":"T0FunsQtn5","fill":"#ffffff","stroke":"#000000"},
{"key":"a8oSdeLY7E","text":"Workday","loc":"1495.5355937288496 590.8528137423857","icons":"/erp/application/942bb275-ebe8-496f-a6b7-a7502ccd6daa/","isGroup":true,"ApplicationID":"942bb275-ebe8-496f-a6b7-a7502ccd6daa","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"jxbcGz5TnI","text":"WD M1","isGroup":true,"group":"a8oSdeLY7E","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1528.7970174780035 590.8528137423857"},
{"key":"5desCxyOpY","text":"WD SM1","isGroup":true,"group":"jxbcGz5TnI","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1562.0584412271573 590.8528137423858"},
{"key":"UsSsroq9KQ","text":"WD O1","ApplicationID":"","group":"5desCxyOpY","fill":"#ffffff","stroke":"#000000"},
{"key":"INxVZGOL97","text":"WD M2","isGroup":true,"group":"a8oSdeLY7E","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1781.7970174780035 590.8528137423857"},
{"key":"fvM4sM1kqD","text":"WD SM2","isGroup":true,"group":"INxVZGOL97","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"1815.0584412271573 590.8528137423858"},
{"key":"RdjsmICn9s","text":"WD O2","ApplicationID":"","group":"fvM4sM1kqD","fill":"#ffffff","stroke":"#000000"},
{"key":"ldeNE0HQnc","text":"WD M3","isGroup":true,"group":"a8oSdeLY7E","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2034.7970174780035 590.8528137423857"},
{"key":"1mKQcMEX5s","text":"WD SM3","isGroup":true,"group":"ldeNE0HQnc","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2068.0584412271573 590.8528137423858"},
{"key":"GVAL0DcKE8","text":"WD O3","ApplicationID":"","group":"1mKQcMEX5s","fill":"#ffffff","stroke":"#000000"},
{"key":"1uMoDndM34","text":"Oracle EBS","loc":"2742.6726787186963 590.8528137423857","icons":"/erp/application/358f84f2-d8d2-4226-9f66-af69013051a7/","isGroup":true,"ApplicationID":"358f84f2-d8d2-4226-9f66-af69013051a7","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"vZgZf37aMI","text":"EBS M1","isGroup":true,"group":"1uMoDndM34","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2775.93410246785 590.8528137423857"},
{"key":"tUVbQmcDEo","text":"EBS SM1","isGroup":true,"group":"vZgZf37aMI","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2809.195526217004 590.8528137423858"},
{"key":"iqfuO3Igut","text":"EBS O1","ApplicationID":"","group":"tUVbQmcDEo","fill":"#ffffff","stroke":"#000000"},
{"key":"IiRIsBCDub","text":"MS Dynamics FSO","loc":"3113.2412212136196 590.8528137423857","icons":"/erp/application/b8e80ef1-cb8f-4070-b140-1be4f132a88b/","isGroup":true,"ApplicationID":"b8e80ef1-cb8f-4070-b140-1be4f132a88b","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"tQac2kbARj","text":"MSD M1","isGroup":true,"group":"IiRIsBCDub","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3146.5026449627735 590.8528137423857"},
{"key":"U2h57thpiZ","text":"MSD SM1","isGroup":true,"group":"tQac2kbARj","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3179.7640687119274 590.8528137423858"},
{"key":"15COjPI9UY","text":"MSD O1","ApplicationID":"","group":"U2h57thpiZ","fill":"#ffffff","stroke":"#000000"},
{"key":"GGVprguHZT","text":"Coupa","loc":"3854.3783062034663 590.8528137423857","icons":"/erp/application/2e23cf1e-74e7-45e9-a46f-ebd8beb0f47b/","isGroup":true,"ApplicationID":"2e23cf1e-74e7-45e9-a46f-ebd8beb0f47b","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"EI72Zf3ozA","text":"CP M1","isGroup":true,"group":"GGVprguHZT","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3887.63972995262 590.8528137423857"},
{"key":"KrCId6dI5S","text":"CP SM1","isGroup":true,"group":"EI72Zf3ozA","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3920.901153701774 590.8528137423858"},
{"key":"FJrQ77ZaYf","text":"CP O1","ApplicationID":"","group":"KrCId6dI5S","fill":"#ffffff","stroke":"#000000"},
{"key":"Vqk05FSFVM","text":"Veeva Vault","loc":"4595.515391193313 590.8528137423857","icons":"/erp/application/617ad9d9-cc44-44a0-adda-275f981c734a/","isGroup":true,"ApplicationID":"617ad9d9-cc44-44a0-adda-275f981c734a","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"gKshHQYQ2z","text":"VV M1","isGroup":true,"group":"Vqk05FSFVM","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"4628.776814942467 590.8528137423857"},
{"key":"lfuFgZv8Y7","text":"VV SM1","isGroup":true,"group":"gKshHQYQ2z","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"4662.038238691622 590.8528137423858"},
{"key":"0I3GPFm5Fq","text":"VV O1","ApplicationID":"","group":"lfuFgZv8Y7","fill":"#ffffff","stroke":"#000000"},
{"key":"c0KiQPVVNG","text":"Integration 1","loc":"5336.652476183161 590.8528137423857","icons":"/erp/application/b0f109c0-2368-4e47-b695-ece6b9ff2123/","isGroup":true,"ApplicationID":"b0f109c0-2368-4e47-b695-ece6b9ff2123","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"yn2RpLughR","text":"I1 M1","isGroup":true,"group":"c0KiQPVVNG","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"5369.913899932315 590.8528137423857"},
{"key":"X6YXMZ4Mrk","text":"I1 SM1","isGroup":true,"group":"yn2RpLughR","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"5403.175323681469 590.8528137423858"},
{"key":"tlnrx2Kb23","text":"I1 O1","ApplicationID":"","group":"X6YXMZ4Mrk","fill":"#ffffff","stroke":"#000000"},
{"key":"wZNduXh9sf","text":"Integration 2","loc":"13.261423749153998 590.8528137423857","icons":"/erp/application/13e148bf-ce19-482d-b210-6c4de1a70990/","isGroup":true,"ApplicationID":"13e148bf-ce19-482d-b210-6c4de1a70990","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"vRBoDc9eu3","text":"I2 M1","isGroup":true,"group":"wZNduXh9sf","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"46.522847498307954 590.8528137423857"},
{"key":"eQmb0vRWy4","text":"I2 SM1","isGroup":true,"group":"vRBoDc9eu3","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"79.7842712474619 590.8528137423858"},
{"key":"scBJYC7R8F","text":"I2 O1","ApplicationID":"","group":"eQmb0vRWy4","fill":"#ffffff","stroke":"#000000"},
{"key":"LIefK66ADJ","text":"Service Now","loc":"2372.104136223773 590.8528137423857","icons":"/erp/application/b272adf8-79fe-43b8-88ed-c11f73e7a356/","isGroup":true,"ApplicationID":"b272adf8-79fe-43b8-88ed-c11f73e7a356","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"o4Ok9qI7BM","text":"SN M1","isGroup":true,"group":"LIefK66ADJ","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2405.365559972927 590.8528137423857"},
{"key":"Ih0YaVEby7","text":"SN SM1","isGroup":true,"group":"o4Ok9qI7BM","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"2438.6269837220807 590.8528137423858"},
{"key":"5gEMklMqUb","text":"SN O1","ApplicationID":"","group":"Ih0YaVEby7","fill":"#ffffff","stroke":"#000000"},
{"key":"h0fW1lnBig","text":"Integration 3","loc":"3483.809763708543 590.8528137423857","icons":"/erp/application/ce9a59a4-a55f-4998-879f-9907a9ee7191/","isGroup":true,"ApplicationID":"ce9a59a4-a55f-4998-879f-9907a9ee7191","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"EJqWyOFeWB","text":"I3 M1","isGroup":true,"group":"h0fW1lnBig","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3517.071187457697 590.8528137423857"},
{"key":"6Mf0LVLTfJ","text":"I3 SM1","isGroup":true,"group":"EJqWyOFeWB","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"3550.3326112068507 590.8528137423858"},
{"key":"kihJ7x6yDZ","text":"I3 O1","ApplicationID":"","group":"6Mf0LVLTfJ","fill":"#ffffff","stroke":"#000000"},
{"key":"nILEOM0Xit","text":"Integration 4","loc":"4224.946848698391 590.8528137423857","icons":"/erp/application/6b8bb514-dba6-46b8-8f77-2a9d15d0c66e/","isGroup":true,"ApplicationID":"6b8bb514-dba6-46b8-8f77-2a9d15d0c66e","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"UrfNGPWGVD","text":"I4 M1","isGroup":true,"group":"nILEOM0Xit","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"4258.208272447545 590.8528137423857"},
{"key":"zrAwsoa6Ua","text":"I4 SM1","isGroup":true,"group":"UrfNGPWGVD","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"4291.469696196699 590.8528137423858"},
{"key":"xygskqvpOm","text":"I4 O1","ApplicationID":"","group":"zrAwsoa6Ua","fill":"#ffffff","stroke":"#000000"},
{"key":"91ZvMH2LSz","text":"Integration 5","loc":"4966.083933688237 590.8528137423857","icons":"/erp/application/e3e63881-4ab2-4d07-8cda-10967e781015/","isGroup":true,"ApplicationID":"e3e63881-4ab2-4d07-8cda-10967e781015","category":"lightgreen","fill":"#e2eed0","stroke":"#7ab648"},
{"key":"M1VCa43RLE","text":"I5 M1","isGroup":true,"group":"91ZvMH2LSz","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"4999.345357437392 590.8528137423857"},
{"key":"x9sKpMeelp","text":"I5 SM1","isGroup":true,"group":"M1VCa43RLE","ApplicationID":"","category":"dotColor","fill":"#d7e5f2","stroke":"#999898","loc":"5032.606781186546 590.8528137423858"},
{"key":"YVt91qwD8e","text":"I5 O1","ApplicationID":"","group":"x9sKpMeelp","fill":"#ffffff","stroke":"#000000"}
],
"linkDataArray": [
{"from":"voNG2Oso11","to":"qSIvyYYkaw","integration_type":"Inbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":120,"step_id":"dd63a04f-d241-4402-bf23-4c0cf0e103c8","toPort":"T","fromPort":"T","category":"curve","color":"#F2F4A1"},
{"from":"ka5nLnCkA9","to":"artClyJYNB","integration_type":"Outbound","medium":"File","is_menu":true,"is_connect":true,"curviness":0,"step_id":"77cf2b3b-d253-49ad-8f31-2ce8bc19d9ba","toPort":null,"fromPort":null,"category":"nocurve","color":"#D16C9E"},
{"from":"9u9vdXuVpn","to":"xR0D2uIhdT","integration_type":"Both","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"4f5d8370-0936-4085-bac8-c66046f84c12","toPort":null,"fromPort":null,"category":"nocurve","color":"#67576C"},
{"from":"cH1gDy06w8","to":"eZlu2jh4QW","integration_type":"Inbound","medium":"File","is_menu":true,"is_connect":true,"curviness":0,"step_id":"63906b53-6a72-4f19-916c-cb64dedf28ea","toPort":null,"fromPort":null,"category":"nocurve","color":"#216ECC"},
{"from":"qSIvyYYkaw","to":"UsSsroq9KQ","integration_type":"Outbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"ed86bf01-685f-4a03-b6b0-68d4496d5901","toPort":null,"fromPort":null,"category":"nocurve","color":"#748244"},
{"from":"QQKu9j8Kkj","to":"iqfuO3Igut","integration_type":"Outbound","medium":"File","is_menu":true,"is_connect":true,"curviness":0,"step_id":"ccaae58c-3762-4aa7-af98-a0e512a79543","toPort":null,"fromPort":null,"category":"nocurve","color":"#ECCE8B"},
{"from":"LoACxh4hhy","to":"15COjPI9UY","integration_type":"Inbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"a7b25996-e95d-41b6-bf3c-53df6e5835d4","toPort":null,"fromPort":null,"category":"nocurve","color":"#B95836"},
{"from":"I3R9DfXsnV","to":"FJrQ77ZaYf","integration_type":"Inbound","medium":"File","is_menu":true,"is_connect":true,"curviness":0,"step_id":"668e2aac-ae73-4444-8384-4f695f9f51ed","toPort":null,"fromPort":null,"category":"nocurve","color":"#C28397"},
{"from":"9iGGWBKrtz","to":"0I3GPFm5Fq","integration_type":"Inbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"69962383-210a-4bf7-b2ca-5a460f179816","toPort":null,"fromPort":null,"category":"nocurve","color":"#417945"},
{"from":"IFHBVrlqPk","to":"tlnrx2Kb23","integration_type":"Outbound","medium":"File","is_menu":true,"is_connect":true,"curviness":0,"step_id":"e0c826ea-b826-4fd3-a6b0-397120645d9d","toPort":null,"fromPort":null,"category":"nocurve","color":"#E907AE"},
{"from":"voNG2Oso11","to":"scBJYC7R8F","integration_type":"Inbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"0e161e41-4a39-4bb7-991b-90a64c1762f7","toPort":null,"fromPort":null,"category":"nocurve","color":"#DFEEE1"},
{"from":"qSIvyYYkaw","to":"5gEMklMqUb","integration_type":"Both","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"a534aca2-6201-4987-8f9d-221dcf4c8753","toPort":null,"fromPort":null,"category":"nocurve","color":"#29F111"},
{"from":"1qE2qmY54f","to":"kihJ7x6yDZ","integration_type":"Outbound","medium":"File","is_menu":true,"is_connect":true,"curviness":0,"step_id":"673d0255-b86d-409c-8ddf-ab4f630c098e","toPort":null,"fromPort":null,"category":"nocurve","color":"#3F32A2"},
{"from":"6mmzB7fD4P","to":"xygskqvpOm","integration_type":"Inbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"7a5b97ef-515d-4913-860e-ccd28c54bce0","toPort":null,"fromPort":null,"category":"nocurve","color":"#84EFE4"},
{"from":"m5LQmiqDoU","to":"YVt91qwD8e","integration_type":"Outbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"9f6dc2f0-1140-4948-8fcc-138affc10f77","toPort":null,"fromPort":null,"category":"nocurve","color":"#B886B9"},
{"from":"qSIvyYYkaw","to":"RdjsmICn9s","integration_type":"Outbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"0d4928e0-f832-422e-8059-e1c0570baa47","toPort":null,"fromPort":null,"category":"nocurve","color":"#DAB0CD"},
{"from":"qSIvyYYkaw","to":"GVAL0DcKE8","integration_type":"Outbound","medium":"WebService","is_menu":true,"is_connect":true,"curviness":0,"step_id":"03f4fecf-2d26-44ce-843a-3d066e93e72b","toPort":null,"fromPort":null,"category":"nocurve","color":"#B53DC7"},
{"from":"ka5nLnCkA9","to":"qSIvyYYkaw","fromPort":"T","toPort":"T"},
{"from":"9u9vdXuVpn","to":"QQKu9j8Kkj","fromPort":"T","toPort":"T"},
{"from":"cH1gDy06w8","to":"LoACxh4hhy","fromPort":"T","toPort":"T"},
{"from":"qSIvyYYkaw","to":"QQKu9j8Kkj","fromPort":"T","toPort":"T"},
{"from":"QQKu9j8Kkj","to":"1qE2qmY54f","fromPort":"T","toPort":"T"},
{"from":"voNG2Oso11","to":"QQKu9j8Kkj","fromPort":"T","toPort":"T"}
]};
myDiagram.model = new go.GraphLinksModel(data);
function makeLayout(horiz) {
if (horiz == 'col-infi') {
return new go.GridLayout(
{
wrappingWidth: Infinity,
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
spacing: new go.Size(20, 10),
isOngoing: true,
isRealtime: true
});
} else if (horiz == 'col-3') {
return new go.GridLayout(
{
wrappingColumn: 3,
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
spacing: new go.Size(20, 10),
isOngoing: true,
isRealtime: true
});
} else if (horiz == 'col-2') {
return new go.GridLayout(
{
wrappingColumn: 2,
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
spacing: new go.Size(20, 10),
isOngoing: true,
isRealtime: true
});
} else if (horiz == 'col-1') {
return new go.GridLayout(
{
wrappingColumn: 1,
alignment: go.GridLayout.Position,
cellSize: new go.Size(1, 1),
spacing: new go.Size(20, 10),
isOngoing: true,
isRealtime: true
});
}
}
function makePort(name, spot, output, input) {
let port = $(go.Shape, "Circle", {
fill: null,
stroke: null,
desiredSize: new go.Size(10, 10),
alignment: spot,
alignmentFocus: spot,
portId: name,
fromSpot: spot,
toSpot: spot,
fromLinkable: output,
toLinkable: input,
cursor: "pointer",
});
return port;
}
function showSmallPorts(node, show) {
node.ports.each(port => {
if (port.portId !== "") {
port.fill = show ? "rgba(0,0,0,.3)" : null;
}
});
}
</script>
</body>
</html>
