create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
661 lines (625 loc) • 27.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Ports in Nodes" />
<meta property="og:title" content="Ports in Nodes" />
<meta name="twitter:title" content="Ports in Nodes" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/defaultCard.png" />
<meta property="og:url" content="https://gojs.net/latest/intro/ports.html" />
<meta property="twitter:url" content="https://gojs.net/latest/intro/ports.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Ports in Nodes | GoJS
</title>
<link rel="stylesheet" href="../assets/css/prism.css"/>
</head>
<script>
window.diagrams = [];
window.goCode = function (pre, w, h, parentid, animation) {
window
.diagrams
.push([pre, w, h, parentid, animation]);
}
</script>
<body>
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="sticky top-0 left-0 z-10 px-2 w-full bg-white border-b border-b-gray-200 md:hidden">
<button id="sidenavButton" class="flex p-2 text-gray-900 bg-inherit shadow-none items-center text-sm font-semibold hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block mr-2" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Menu</span>
</button>
</div>
<script>
window.addEventListener("DOMContentLoaded", function () {
// sidenav
var sideButton = document.getElementById("sidenavButton");
var sidenav = document.getElementById("sidenav");
if (sideButton && sidenav) {
sideButton.addEventListener("click", function (e) {
sidenav
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!sidenav.classList.contains("hidden") && !e.target.closest("#sidenavList")) {
sideButton.click();
}
});
}
});
</script>
<div class="flex flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<aside id="sidenav"
class="hidden fixed top-0 left-0 z-10 w-full bg-black/10 min-h-screen max-h-screen overflow-x-hidden overflow-y-auto shrink-0
md:block md:sticky md:w-52 md:min-h-0 md:bg-inherit md:border-r md:border-r-gray-200 md:overscroll-auto">
<nav id="sidenavList" class="flex flex-col bg-white w-52 min-h-screen pl-2 pt-4 pb-24 md:w-full md:min-h-0">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="svelte.html">GoJS with Svelte</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="typings.html">Typings</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="routers.html">Routers</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="theming.html">Theming</a>
<a href="tooltips.html">ToolTips</a>
<a href="contextMenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="accessibility.html">Accessibility</a>
<a href="buttons.html">Buttons</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="animation.html">Animation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers & Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="SVGContext.html">Rendering to SVG</a>
<a href="makingSVG.html">Snapshot to SVG</a>
<a href="makingImages.html">Diagram Images</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="performance.html">Performance</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
</nav>
</aside>
<script>
var navList = document.getElementById('sidenavList');
if (navList !== null) {
var url = window.location.href;
var lindex = url.lastIndexOf('/');
url = url
.slice(lindex + 1)
.toLowerCase();
var aTags = navList.getElementsByTagName('a');
var currentindex = -1;
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.indexOf('/' + url) !== -1) {
currentindex = i;
aTags[i]
.classList
.add('active');
break;
}
}
}
</script>
<div class="px-4 pb-16 w-full overflow-hidden prose">
<h1>Ports in Nodes</h1>
<p>
Although you have some control over where links will connect to a node
(at a particular spot, along one or more sides, or at the intersection with the edge),
there are times when you want to have different logical and graphical places at which links should connect.
The elements at which a link may connect are called <i>ports</i>.
There may be any number of ports in a node.
By default there is just one port, the whole node, which results in the effect of having the whole node act as the port,
as you have seen in all of the previous examples.
</p>
<p>
To declare that a particular element in a <a>Node</a> is a port, set the <a>GraphObject.portId</a> property to a string.
Note that the port-or-link-related properties may apply to any element in the visual tree of the node,
which is why they are properties of <a>GraphObject</a> rather than <a>Node</a>.
</p>
<p>
Port-like GraphObjects can only be in <a>Node</a>s or <a>Group</a>s, not in <a>Link</a>s or <a>Adornment</a>s or simple <a>Part</a>s.
So there is no reason to try to set <a>GraphObject.portId</a> on any object in a Link.
</p>
<p>
<p>
See samples that make use of ports in the <a href="../samples/index.html#ports">samples index</a>.
</p>
</p>
<h2 id="SinglePorts">Single Ports</h2>
<p>
In many situations you want to consider links logically related to the node as a whole but you don't want links
connecting to the whole node.
In this case each node has only one port, but you do not want the whole node to act as the one port.
</p>
<p>
For example, consider how links connect to the nodes when the whole node is acting as a port in one common manner.
The <a>GraphObject.fromSpot</a> and <a>GraphObject.toSpot</a> are at the middles of the sides.
Because the height of the whole node includes the text label,
the middle of the side is not the middle of the "icon", which in this case is a circle.
</p>
<pre class="lang-js" id="defaultPort"><code>
diagram.nodeTemplate =
new go.Node("Vertical",
{ fromSpot: go.Spot.Right, toSpot: go.Spot.Left }) // port properties on the node
.add(
new go.Shape("Ellipse",
{ width: 30, height: 30, fill: "green" }),
new go.TextBlock({ font: "20px sans-serif" })
.bind("text")
);
const nodeDataArray = [
{ key: 1, text: "Alpha" },
{ key: 2, text: "Beta" }
];
const linkDataArray = [
{ from: 1, to: 2 }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</code></pre>
<script>goCode("defaultPort", 600, 150)</script>
<p>
This appearance does not look or behave quite right.
Really we want links to connect to the circular <a>Shape</a>.
</p>
<p>
If you want a particular element to act as the port rather than the whole node,
just set its <a>GraphObject.portId</a> to the empty string.
The empty string is the name of the default port.
</p>
<p>
In this example, we set <a>GraphObject.portId</a> on the circular shape.
Note that we move the other port-related properties, such as the port spots, to that object too.
</p>
<pre class="lang-js" id="singlePort"><code>
diagram.nodeTemplate =
new go.Node("Vertical")
.add(
new go.Shape("Ellipse",
{ width: 30, height: 30, fill: "green",
portId: "", // now the Shape is the port, not the whole Node
fromSpot: go.Spot.Right, // port properties go on the port!
toSpot: go.Spot.Left
}),
new go.TextBlock({ font: "20px sans-serif" })
.bind("text")
);
const nodeDataArray = [
{ key: 1, text: "Alpha" },
{ key: 2, text: "Beta" }
];
const linkDataArray = [
{ from: 1, to: 2 }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
</code></pre>
<script>goCode("singlePort", 600, 150)</script>
<p>
Notice how the links nicely connect the circular shapes by ignoring the text labels.
</p>
<h2 id="GeneralPorts">General Ports</h2>
<p>
It is also common to have diagrams where you want more than one port in a node.
The number of ports might even vary dynamically.
</p>
<p>
In order for a link data object to distinguish which port the link should connect to,
the <a>GraphLinksModel</a> supports two additional data properties that identify the names of the ports in the nodes
at both ends of the link.
<a>GraphLinksModel.getToKeyForLinkData</a> identifies the node to connect to;
<a>GraphLinksModel.getToPortIdForLinkData</a> identifies the port within the node.
Similarly, <a>GraphLinksModel.getFromKeyForLinkData</a> and <a>GraphLinksModel.getFromPortIdForLinkData</a> identify the node and its port.
</p>
<p>
Normally a <a>GraphLinksModel</a> assumes that there is no need to recognize port information on link data.
If you want to support port identifiers on link data, you need to set <a>GraphLinksModel.linkToPortIdProperty</a>
and <a>GraphLinksModel.linkFromPortIdProperty</a> to be the names of the link data properties.
If you do not set these properties, all port identifiers are assumed to be the empty string,
which is the name of the one default port for a node.
</p>
<p class="box bg-danger">
If you have set or bound <a>GraphObject.portId</a> on any element to be a non-empty string,
you will need to use a <a>GraphLinksModel</a> and set <a>GraphLinksModel.linkToPortIdProperty</a>
and <a>GraphLinksModel.linkFromPortIdProperty</a> to be the names of two properties on your link data,
or you will need to hard code the portId names in the link template(s)
(i.e. <a>Link.fromPortId</a> and <a>Link.toPortId</a>),
in order for the user to be able to link with those ports.
</p>
<pre class="lang-js" id="ports"><code>
diagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("Rectangle", { fill: "lightgray" }),
new go.Panel("Table")
.addColumnDefinition(0, { alignment: go.Spot.Left })
.addColumnDefinition(2, { alignment: go.Spot.Right })
.add(
new go.TextBlock( // the node title
{ column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Center,
font: "bold 10pt sans-serif", margin: new go.Margin(4, 2) })
.bind("text"),
new go.Panel("Horizontal",
{ column: 0, row: 1 })
.add(
new go.Shape( // the "A" port
{ width: 6, height: 6, portId: "A", toSpot: go.Spot.Left }),
new go.TextBlock("A") // "A" port label
),
new go.Panel("Horizontal",
{ column: 0, row: 2 })
.add(
new go.Shape( // the "B" port
{ width: 6, height: 6, portId: "B", toSpot: go.Spot.Left }),
new go.TextBlock("B") // "B" port label
),
new go.Panel("Horizontal",
{ column: 2, row: 1, rowSpan: 2 })
.add(
new go.TextBlock("Out"), // "Out" port label
new go.Shape( // the "Out" port
{ width: 6, height: 6, portId: "Out", fromSpot: go.Spot.Right })
)
)
);
diagram.linkTemplate =
new go.Link({ routing: go.Routing.Orthogonal, corner: 3 })
.add(
new go.Shape(),
new go.Shape({ toArrow: "Standard" })
);
diagram.layout = new go.LayeredDigraphLayout({ columnSpacing: 10 });
diagram.model =
new go.GraphLinksModel(
{ linkFromPortIdProperty: "fromPort", // required information:
linkToPortIdProperty: "toPort", // identifies data property names
nodeDataArray: [
{ key: 1, text: "Add1" },
{ key: 2, text: "Add2" },
{ key: 3, text: "Subtract1" }
],
linkDataArray: [
{ from: 1, fromPort: "Out", to: 3, toPort: "A" },
{ from: 2, fromPort: "Out", to: 3, toPort: "B" }
] });
</code></pre>
<script>goCode("ports", 600, 200)</script>
<h2 id="DrawingNewLinks">Drawing new Links</h2>
<p>
Setting either or both of the <a>GraphObject.fromLinkable</a> and <a>GraphObject.toLinkable</a>
properties to true allows users to interactively draw new links between ports.
</p>
<p>
To draw a new link, mouse down on an "Out" port, move (drag) to nearby an input port,
and then mouse-up to complete the link.
</p>
<pre class="lang-js" id="linkablePorts"><code>
diagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("Rectangle", { fill: "lightgray" }),
new go.Panel("Table")
.addColumnDefinition(0, { alignment: go.Spot.Left })
.addColumnDefinition(2, { alignment: go.Spot.Right })
.add(
new go.TextBlock( // the node title
{ column: 0, row: 0, columnSpan: 3, alignment: go.Spot.Center,
font: "bold 10pt sans-serif", margin: new go.Margin(4, 2) })
.bind("text"),
new go.Panel("Horizontal",
{ column: 0, row: 1 })
.add(
new go.Shape( // the "A" port
{ width: 6, height: 6, portId: "A", toSpot: go.Spot.Left,
toLinkable: true, toMaxLinks: 1 }), // allow user-drawn links to here
new go.TextBlock( "A") // "A" port label
),
new go.Panel("Horizontal",
{ column: 0, row: 2 })
.add(
new go.Shape( // the "B" port
{ width: 6, height: 6, portId: "B", toSpot: go.Spot.Left,
toLinkable: true, toMaxLinks: 1 }), // allow user-drawn links to here
new go.TextBlock( "B") // "B" port label
),
new go.Panel("Horizontal",
{ column: 2, row: 1, rowSpan: 2 })
.add(
new go.TextBlock( "Out"), // "Out" port label
new go.Shape( // the "Out" port
{ width: 6, height: 6, portId: "Out", fromSpot: go.Spot.Right,
fromLinkable: true, cursor: "pointer" }) // allow user-drawn links from here
)
)
);
diagram.linkTemplate =
new go.Link({ routing: go.Routing.Orthogonal, corner: 3 })
.add(
new go.Shape(),
new go.Shape({ toArrow: "Standard" })
);
diagram.layout = new go.LayeredDigraphLayout({ columnSpacing: 10 });
diagram.toolManager.linkingTool.temporaryLink.routing = go.Routing.Orthogonal;
diagram.model =
new go.GraphLinksModel(
{ linkFromPortIdProperty: "fromPort", // required information:
linkToPortIdProperty: "toPort", // identifies data property names
nodeDataArray: [
{ key: 1, text: "Add1" },
{ key: 2, text: "Add2" },
{ key: 3, text: "Subtract1" }
],
linkDataArray: [
// no predeclared links
] });
</code></pre>
<script>goCode("linkablePorts", 600, 250)</script>
<p>
By default the user may not draw more than one link in the same direction between any pair of ports,
nor may the user draw a link connecting a node with itself.
Please read a general discussion of <a href="validation.html">Linking Validation</a>.
</p>
<p>
By setting <a>GraphObject.toMaxLinks</a> to 1, as shown in this example, the user may draw at most one link going into that port.
And because <a>GraphObject.fromLinkable</a> is false for that port element, the user will not be able to connect any links coming out of that port.
</p>
<p>
If you want to prevent the user from connecting any more than one Link with a Node, regardless of direction,
you will need to implement a <a>LinkingBaseTool.linkValidation</a> or a <a>Node.linkValidation</a> predicate.
See the discussion about <a href="validation.html#GeneralLinkingValidation">General Linking Validation</a>
</p>
</div>
</div>
<footer class="bg-white text-gray-900 border-t border-t-gray-200">
<div class="w-full max-w-screen-lg mx-auto px-4 py-6">
<p id="version" class="text-xs text-gray-900 m-0"></p>
<div class="text-sm px-0 mb-4 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<div>
<h2 class="text-base font-semibold text-nwoods-primary">GoJS</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="../samples/index.html">Samples</a>
</li>
<li>
<a href="../learn/index.html">Learn</a>
</li>
<li>
<a href="../intro/index.html">Intro</a>
</li>
<li>
<a href="../api/index.html">API</a>
</li>
<li>
<a href="../changelog.html">Changelog</a>
</li>
<li>
<a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener">GitHub</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a>
</li>
<li>
<a href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</li>
<li>
<a href="https://nwoods.com/register.html" target="_blank" rel="noopener">Register</a>
</li>
</ul>
</div>
<div>
<h2 class="text-base font-semibold text-nwoods-primary">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/about.html" target="_blank" rel="noopener">About Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/contact.html" target="_blank" rel="noopener">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://nwoods.com/consulting.html" target="_blank" rel="noopener">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener">Twitter</a>
</li>
</ul>
</div>
</div>
<p class="text-sm text-gray-900 md:mb-6">
Copyright 1998-2025 <a href="https://nwoods.com">Northwoods Software</a>
</p>
</div>
</footer>
</body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function (url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
const params = new URL(document.location).searchParams
let a = params.get('a');
if (a) localStorage.setItem('a', a);
a = localStorage.getItem('a');
if (a) {
const links = [...document.body.getElementsByTagName("a")].filter((l) => l.href.includes('nwoods.com'));
for (const l of links) {
const url = new URL(l.href);
url.searchParams.set('a', a);
l.href = url;
}
}
</script>
<script src="../assets/js/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
if (window.go)
document
.getElementById('version')
.textContent = "GoJS version " + go.version;
if (window.goDoc)
window.goDoc();
var d = window.diagrams;
for (var i = 0; i < d.length; i++) {
var dargs = d[i];
goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
}
if (window.extra)
window.extra();
}
);
</script>
</html>