create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
744 lines (683 loc) • 26.7 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="Making SVG" />
<meta property="og:title" content="Making SVG" />
<meta name="twitter:title" content="Making SVG" />
<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/makingSVG.html" />
<meta property="twitter:url" content="https://gojs.net/latest/intro/makingSVG.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Making SVG | 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">
<style type="text/css">
.images {
border: 1px solid rgba(255, 0, 0, 0.4);
}
/* make HRs thicker to set them apart from the code section borders */
hr {
height: 3px;
background: #333;
}
</style>
<h1>Making SVG Images</h1>
<p>
<b>GoJS</b> has one function for creating SVG: <a>Diagram.makeSvg</a>, which returns a new SVGElement with a representation of a GoJS Diagram. The method has
a single argument, a JavaScript Object that contains several definable properties, enumerated in the documentation.
</p>
<p>
SVG export can be useful as content for a PDF, because the rendering is vector oriented instead of raster oriented. Most GoJS users who create PDFs do so by
exporting Diagrams to SVG or images and place that content in their PDFs, on the server or elsewhere.
</p>
<p>
This page is almost identical to the page on <a href="makingImages.html">Making Images</a>, which shows how to render raster images instead of SVG elements.
</p>
<p class="box bg-info">
<a>Diagram.makeSvg</a> produces a static SVG "image" -- the SVG will not be interactive. Note that exporting a diagram to SVG is different from the
functionality introduced in v2.3 that allows the interactive diagram to be rendered in SVG rather than in Canvas. For more information please read:
<a href="SVGContext.html">SVG Drawing Context</a>
</p>
<p>Below are several examples of using <a>Diagram.makeSvg</a> on the following diagram:</p>
<!-- Don't bother showing this source -->
<pre class="lang-js" id="diag" style="display: none"><code>
// define a simple Node template (but use the default Link template)
diagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("RoundedRectangle")
// Shape.fill is bound to Node.data.color
.bind("fill", "color"),
new go.TextBlock({ margin: 3 }) // some room around the text
// TextBlock.text is bound to Node.data.key
.bind("text", "key")
);
// create the model data that will be represented by Nodes and Links
const nodeDataArray = [
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
];
const linkDataArray = [
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
window.myDiagram = diagram;
</code></pre>
<script>
goCode('diag', 300, 150);
</script>
<script>
window.extras = [];
window.goCode2 = pre => extras.push([pre, '2']);
window.goCode3 = pre => extras.push([pre, '3']);
window.addSVG = img => {
obj = document.getElementById('severalImages');
img.className = 'images';
obj.appendChild(img);
};
window.extra = () => {
for (let i = 0; i < extras.length; i++) {
const ex = extras[i];
if (ex[1] === '2') {
// goCode2
const pre = document.getElementById(ex[0]);
const f = eval('(function () {window.img = ' + pre.textContent + '\n})');
f();
pre.parentElement.insertBefore(img, pre.nextSibling);
} else {
// goCode3
const pre = document.getElementById(ex[0]);
const f = eval('(function () {' + pre.textContent + '\n})');
f();
}
}
};
</script>
<hr />
<p>Calling makeSvg with no arguments or with an empty properties object results in a scene that is the same size as the Diagram's viewport.</p>
<pre class="lang-js" id="code0"><code>
myDiagram.makeSvg();
</code></pre>
<script>
goCode2('code0');
</script>
<hr />
<p>
Calling makeSvg with an object that has the "scale" property set to 1 results in a scene that includes the whole diagram, not just the area visible in the
viewport. However, the empty areas around the document bounds are trimmed away.
</p>
<pre class="lang-js" id="codeA"><code>
myDiagram.makeSvg({
scale: 1
});
</code></pre>
<script>
goCode2('codeA');
</script>
<hr />
<p>
Setting the scale property will create a scaled SVG Scene that is precisely large enough to contain the Diagram. The following SVG is created with a scale of
2.
</p>
<pre class="lang-js" id="code1"><code>
myDiagram.makeSvg({
scale: 2
});
</code></pre>
<script>
goCode2('code1');
</script>
<p>
<em>Note how, unlike an image, you can select the text.</em>
</p>
<hr />
<p>
The following SVG is created by setting the size option of makeSvg. Note that the canvas is scaled uniformly and any extra space is placed on the bottom or
right side of the SVG.
</p>
<pre class="lang-js" id="code2"><code>
myDiagram.makeSvg({
size: new go.Size(100,100)
});
</code></pre>
<script>
goCode2('code2');
</script>
<hr />
<p>
The following SVG is also created by setting the size option of makeSvg, but only the width is set. The height will be whatever size is needed to uniformly
contain the Diagram.
</p>
<pre class="lang-js" id="code3"><code>
myDiagram.makeSvg({
size: new go.Size(100,NaN)
});
</code></pre>
<script>
goCode2('code3');
</script>
<hr />
<p>
The parts option allows us to specify an <a>Iterable</a> collection of Parts to draw. This is useful if you only want to make an image of part of the diagram,
such as a selection of nodes.
</p>
<pre class="lang-js" id="code4a"><code>
myPartsList = new go.List();
myPartsList.add(myDiagram.findNodeForKey("Beta"));
myPartsList.add(myDiagram.findNodeForKey("Delta"));
</code></pre>
<script>
goCode3('code4a');
</script>
<pre class="lang-js" id="code4"><code>
myDiagram.makeSvg({
parts: myPartsList
});
</code></pre>
<script>
goCode2('code4');
</script>
<p>Or drawing only the links:</p>
<pre class="lang-js" id="code4-2"><code>
myDiagram.makeSvg({
parts: myDiagram.links
});
</code></pre>
<script>
goCode2('code4-2');
</script>
<hr />
<p>Setting both scale and size creates an image that is scaled specifically and cropped to the given size, as in the following image.</p>
<pre class="lang-js" id="code5"><code>
myDiagram.makeSvg({
scale: 1.5,
size: new go.Size(100,100)
});
</code></pre>
<script>
goCode2('code5');
</script>
<hr />
<p>
We may want a very large, scaled image that has a limit on its size, and we can use the maxSize property to constrain one or both dimensions. The following
image has a very large scale applied but is limited in size horizontally, so some horizontal cropping will occur.
</p>
<p>
The default value for maxSize is <code>go.Size(2000, 2000)</code>, and specifying <code>go.Size(600, NaN)</code> is equivalent to specifying
<code>go.Size(600, 2000)</code>. If we wanted no cropping on the height we could instead write <code>go.Size(600, Infinity)</code>.
</p>
<pre class="lang-js" id="code6"><code>
myDiagram.makeSvg({
scale: 9,
maxSize: new go.Size(600, NaN)
});
</code></pre>
<script>
goCode2('code6');
</script>
<hr />
<p>
Setting both position and size creates a diagram image that is positioned specifically and cropped to the given size. When a position is set but no scale is
set, the scale defaults to 1.
</p>
<pre class="lang-js" id="code7"><code>
myDiagram.makeSvg({
position: new go.Point(20,20),
size: new go.Size(50,50)
});
</code></pre>
<script>
goCode2('code7');
</script>
<p>Setting the background to a CSS color string will replace the transparent Diagram background with the given color.</p>
<pre class="lang-js" id="code8"><code>
myDiagram.makeSvg({
size: new go.Size(NaN,250),
background: "rgba(0, 255, 0, 0.5)" // semi-transparent green background
});
</code></pre>
<script>
goCode2('code8');
</script>
<hr />
<p>
In the following code we use the document bounds to split the Diagram into four equal parts, making four images out of each part. In this way we can prepare
images for pagination, making a gallery, or printing purposes. The four images created are shown below.
</p>
<pre class="lang-js" id="manyImgCode"><code>
const d = myDiagram.documentBounds;
const halfWidth = d.width / 2;
const halfHeight = d.height / 2;
svg = myDiagram.makeSvg({
position: new go.Point(d.x, d.y),
size: new go.Size(halfWidth,halfHeight)
});
addSVG(svg); // Adds the SVG to a DIV below
svg = myDiagram.makeSvg({
position: new go.Point(d.x + halfWidth, d.y),
size: new go.Size(halfWidth,halfHeight)
});
addSVG(svg);
svg = myDiagram.makeSvg({
position: new go.Point(d.x, d.y+ halfHeight),
size: new go.Size(halfWidth,halfHeight)
});
addSVG(svg);
svg = myDiagram.makeSvg({
position: new go.Point(d.x + halfWidth, d.y + halfHeight),
size: new go.Size(halfWidth,halfHeight)
});
addSVG(svg);
</code></pre>
<div id="severalImages"></div>
<script>
goCode3('manyImgCode');
</script>
<hr />
<p>You can open the SVG in a new window by appending it to the DOM of a new page:</p>
<button id="openSVG">Open SVG</button>
<pre class="lang-js" id="codea1"><code>
const button = document.getElementById('openSVG');
button.addEventListener('click', () => {
const newWindow = window.open("","newWindow");
if (!newWindow) return;
const newDocument = newWindow.document;
const svg = myDiagram.makeSvg({
document: newDocument, // create SVG DOM in new document context
scale: 9,
maxSize: new go.Size(600, NaN)
});
newDocument.body.appendChild(svg);
}, false);
</code></pre>
<script>
goCode('codea1');
</script>
<hr />
<h2 id="DownloadingSVGFiles">Downloading SVG Files</h2>
<p>
You do not need to involve the web server if you want the user to download an SVG file. See the sample
<a href="../samples/minimalSvg.html" target="_blank">Minimal SVG</a>. Note that that sample only downloads a single SVG file, but that file can cover the
whole document.
</p>
<h2 id="SVG Data">SVG Data</h2>
<p>
As of version 2.3.11, <a>Diagram.makeSVG</a> and the <a href="SVGContext.html">SVG Rendering Context</a> both set some
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data-*">SVG data attributes</a>
on some of the SVG DOM elements.
These are:
</p>
<ul>
<li><code>portId</code> if a <a>GraphObject.portId</a> is set.</li>
<li><code>itemIndex</code> if a <a>Panel.itemIndex</a> is set.</li>
<li><code>className</code> if a Part.</li>
<li><code>key</code> if a Part, if <a>Part.key</a> is set.</li>
<li><code>fromKey</code> if a Link with a fromNode, the <a>Part.key</a> of that Node.</li>
<li><code>fromPortId</code> if a <a>Link.fromPortId</a> is set.</li>
<li><code>toKey</code> if a Link with a toNode, the <a>Part.key</a> of that Node.</li>
<li><code>toPortId</code> if a <a>Link.toPortId</a> is set.</li>
</ul>
<p>So a Node with Node data with <code>{ key: 'Alpha' }</code> would have data properties:</p>
<pre class="lang-html"><code>
<g transform="matrix(1, 0, 0, 1, 0, 0)" data-class-name="Node" data-key="Alpha">
...
</g>
</code></pre>
<h2 id="ContentSecurityPolicy">Content Security Policy</h2>
<p>
If your app is served with a Content Security Policy, you may need to enable the dynamic rendering of SVG DOM.
Read more at <a href="SVGContext.html#ContentSecurityPolicy">SVG Drawing Context</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>