create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
4,926 lines • 279 kB
HTML
<!DOCTYPE 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"/>
<meta name="description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other
visual graph types." />
<meta itemprop="description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other
visual graph types." />
<meta property="og:description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other
visual graph types." />
<meta name="twitter:description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other
visual graph types." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<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/samples/" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>Samples Index | GoJS</title>
</head>
<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="" data-name="all">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'all\']').click();" type="checkbox"/>
<span>all</span>
<span>(0)</span>
</a><a href="#animation" data-name="animation">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'animation\']').click();" type="checkbox"/>
<span>animation</span>
<span>(0)</span>
</a><a href="#buttons" data-name="buttons">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'buttons\']').click();" type="checkbox"/>
<span>buttons</span>
<span>(0)</span>
</a><a href="#charts" data-name="charts">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'charts\']').click();" type="checkbox"/>
<span>charts</span>
<span>(0)</span>
</a><a href="#circle-like" data-name="circle-like">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'circle-like\']').click();" type="checkbox"/>
<span>circle-like</span>
<span>(0)</span>
</a><a href="#circularlayout" data-name="circularlayout">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'circularlayout\']').click();" type="checkbox"/>
<span>circularlayout</span>
<span>(0)</span>
</a><a href="#collections" data-name="collections">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'collections\']').click();" type="checkbox"/>
<span>collections</span>
<span>(0)</span>
</a><a href="#commands" data-name="commands">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'commands\']').click();" type="checkbox"/>
<span>commands</span>
<span>(0)</span>
</a><a href="#contextmenus" data-name="contextmenus">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'contextmenus\']').click();" type="checkbox"/>
<span>contextmenus</span>
<span>(0)</span>
</a><a href="#customlayout" data-name="customlayout">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'customlayout\']').click();" type="checkbox"/>
<span>customlayout</span>
<span>(0)</span>
</a><a href="#export" data-name="export">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'export\']').click();" type="checkbox"/>
<span>export</span>
<span>(0)</span>
</a><a href="#extensions" data-name="extensions">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'extensions\']').click();" type="checkbox"/>
<span>extensions</span>
<span>(0)</span>
</a><a href="#force-directed" data-name="force-directed">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'force-directed\']').click();" type="checkbox"/>
<span>force-directed</span>
<span>(0)</span>
</a><a href="#frameworks" data-name="frameworks">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'frameworks\']').click();" type="checkbox"/>
<span>frameworks</span>
<span>(0)</span>
</a><a href="#gauges" data-name="gauges">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'gauges\']').click();" type="checkbox"/>
<span>gauges</span>
<span>(0)</span>
</a><a href="#geometries" data-name="geometries">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'geometries\']').click();" type="checkbox"/>
<span>geometries</span>
<span>(0)</span>
</a><a href="#grid" data-name="grid">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'grid\']').click();" type="checkbox"/>
<span>grid</span>
<span>(0)</span>
</a><a href="#gridlayout" data-name="gridlayout">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'gridlayout\']').click();" type="checkbox"/>
<span>gridlayout</span>
<span>(0)</span>
</a><a href="#groups" data-name="groups">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'groups\']').click();" type="checkbox"/>
<span>groups</span>
<span>(0)</span>
</a><a href="#html" data-name="html">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'html\']').click();" type="checkbox"/>
<span>html</span>
<span>(0)</span>
</a><a href="#inspector" data-name="inspector">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'inspector\']').click();" type="checkbox"/>
<span>inspector</span>
<span>(0)</span>
</a><a href="#itemarrays" data-name="itemarrays">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'itemarrays\']').click();" type="checkbox"/>
<span>itemarrays</span>
<span>(0)</span>
</a><a href="#layered-digraph" data-name="layered-digraph">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'layered-digraph\']').click();" type="checkbox"/>
<span>layered-digraph</span>
<span>(0)</span>
</a><a href="#legend" data-name="legend">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'legend\']').click();" type="checkbox"/>
<span>legend</span>
<span>(0)</span>
</a><a href="#links" data-name="links">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'links\']').click();" type="checkbox"/>
<span>links</span>
<span>(0)</span>
</a><a href="#monitoring" data-name="monitoring">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'monitoring\']').click();" type="checkbox"/>
<span>monitoring</span>
<span>(0)</span>
</a><a href="#overview" data-name="overview">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'overview\']').click();" type="checkbox"/>
<span>overview</span>
<span>(0)</span>
</a><a href="#palette" data-name="palette">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'palette\']').click();" type="checkbox"/>
<span>palette</span>
<span>(0)</span>
</a><a href="#performance" data-name="performance">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'performance\']').click();" type="checkbox"/>
<span>performance</span>
<span>(0)</span>
</a><a href="#ports" data-name="ports">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'ports\']').click();" type="checkbox"/>
<span>ports</span>
<span>(0)</span>
</a><a href="#process" data-name="process">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'process\']').click();" type="checkbox"/>
<span>process</span>
<span>(0)</span>
</a><a href="#routers" data-name="routers">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'routers\']').click();" type="checkbox"/>
<span>routers</span>
<span>(0)</span>
</a><a href="#scada" data-name="scada">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'scada\']').click();" type="checkbox"/>
<span>scada</span>
<span>(0)</span>
</a><a href="#svelte" data-name="svelte">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'svelte\']').click();" type="checkbox"/>
<span>svelte</span>
<span>(0)</span>
</a><a href="#svg" data-name="svg">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'svg\']').click();" type="checkbox"/>
<span>svg</span>
<span>(0)</span>
</a><a href="#tables" data-name="tables">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'tables\']').click();" type="checkbox"/>
<span>tables</span>
<span>(0)</span>
</a><a href="#theme" data-name="theme">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'theme\']').click();" type="checkbox"/>
<span>theme</span>
<span>(0)</span>
</a><a href="#tools" data-name="tools">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'tools\']').click();" type="checkbox"/>
<span>tools</span>
<span>(0)</span>
</a><a href="#tooltips" data-name="tooltips">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'tooltips\']').click();" type="checkbox"/>
<span>tooltips</span>
<span>(0)</span>
</a><a href="#treelayout" data-name="treelayout">
<input class="mr-2 cursor-pointer accent-nwoods-accent" onclick="document.querySelector('[data-name=\'treelayout\']').click();" type="checkbox"/>
<span>treelayout</span>
<span>(0)</span>
</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>GoJS Samples</h1>
<div class="row">
<div class="col-md-6">
<p>
Our samples demonstrate several Diagram types and showcase specific features and layouts. You can use the HTML and
JavaScript in these samples as the
starting point for your application.
</p>
<p>If you are done looking around and are ready to experiment with GoJS, <a href="../learn/index.html">read the
getting started tutorial.</a></p>
<p>
We are happy to help prospective customers make their proof-of-concept. If you need help getting started,
<a href="https://nwoods.com/support.html?samples" target="_blank">contact us</a>.
</p>
<p>If you want to search the source code, you can download a copy of all samples via the npm command:</p>
<p>
<code>npm create gojs-kit@latest</code>
</p>
</div>
</div>
<div>
<div id="samplesDiv" class="mt-6 grid grid-cols-2 gap-y-10 gap-x-3 md:grid-cols-3 lg:grid-cols-4 xl:gap-x-6"><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="palette,svg,process,theme">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/flowchart.png"
alt="A flowchart and palette, showing different node templates and data bindings. Each node has only one port element. Links are orthogonal and automatically route to avoid nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/flowchart.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Interactive Flowchart
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A flowchart and palette, showing different node templates and data bindings. Each node has only one port element. Links are orthogonal and automatically route to avoid nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout,contextmenus,buttons,inspector,theme">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/orgcharteditor.png"
alt="An organizational chart that allows user editing and re-organizing of the hierarchy." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/orgChartEditor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Organizational Chart Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An organizational chart that allows user editing and re-organizing of the hierarchy.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="buttons,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/statechart.png"
alt="A state chart diagram that also shows dynamic creation of new nodes and links on a button press." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/stateChart.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
State Chart Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A state chart diagram that also shows dynamic creation of new nodes and links on a button press.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/familytree.png"
alt="Shows a standard family tree." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/familyTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Family Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a standard family tree.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout,overview">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/orgchartstatic.png"
alt="Shows an organizational chart, uses an in-laid Overview to aid the user in navigation, and allows the user to search by example." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/orgChartStatic.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Org Chart with Overview
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows an organizational chart, uses an in-laid Overview to aid the user in navigation, and allows the user to search by example.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,collections,layered-digraph,customlayout,geometries,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/genogram.png"
alt="A genogram or pedigree chart is an extended family tree diagram that show information about each person or each relationship." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/genogram.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Genogram Family Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A genogram or pedigree chart is an extended family tree diagram that show information about each person or each relationship.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries,links,process,monitoring,itemarrays,scada">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/industrialmonitor.png"
alt="Example of a SCADA industrial monitoring diagram with updating data." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/industrialMonitor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
SCADA Industrial Monitor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Example of a SCADA industrial monitoring diagram with updating data.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="palette,links,groups">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/networkconfig.png"
alt="Shows a CISCO-style network configuration diagram, with the ability to group nodes into subnetworks." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/networkConfig.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Network Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a CISCO-style network configuration diagram, with the ability to group nodes into subnetworks.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries,grid,process,monitoring,animation,scada">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/processflow.png"
alt="Industrial process flow diagram containing tanks, valves, and pipes, with animated flow in the pipes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/processFlow.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Process Flow
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Industrial process flow diagram containing tanks, valves, and pipes, with animated flow in the pipes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="animation,geometries,monitoring,palette,tooltips,scada">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/security.png"
alt="Example of a security dashboard made with GoJS. Diagram for monitoring live video feeds and swipe access doors." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/security.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Security Monitor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Example of a security dashboard made with GoJS. Diagram for monitoring live video feeds and swipe access doors.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="monitoring,grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/warehouse.png"
alt="Warehouse design diagram with reshapable areas and disconnected links." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/warehouse.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Warehouse Designer
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Warehouse design diagram with reshapable areas and disconnected links.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,layered-digraph,customlayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/sankey.png"
alt="Sankey diagrams show the amount of flow between nodes by the width of the links." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/sankey.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Sankey Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Sankey diagrams show the amount of flow between nodes by the width of the links.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="commands,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/orgcharteditor.png"
alt="Demonstrates a customized CommandHandler to update a live HTML element for accessibility." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Accessibility.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
ARIA Accessibility
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a customized CommandHandler to update a live HTML element for accessibility.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,links,ports,contextmenus,buttons,theme,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dynamicports.png"
alt="Add ports to a selected node by clicking buttons or by using a context menu. Draw links by dragging between ports. If you select a link you can relink or reshape it." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dynamicPorts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Dynamic Ports
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Add ports to a selected node by clicking buttons or by using a context menu. Draw links by dragging between ports. If you select a link you can relink or reshape it.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="animation,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/belts.png"
alt="Show continuous belts winding by circular rollers" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/belts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Belts and Rollers
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Show continuous belts winding by circular rollers</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,gridlayout,layered-digraph,customlayout,groups,tools,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/swimlanes.png"
alt="Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/swimLanes.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Swim Lanes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,gridlayout,customlayout,groups,buttons,process,legend">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/kanban.png"
alt="A Kanban board editor, allowing the categorization of editable tasks." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/kanban.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Kanban Board Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Kanban board editor, allowing the categorization of editable tasks.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tooltips,palette,grid,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/logiccircuit.png"
alt="A functioning logic circuit diagram, which allows the user to make circuits using gates and wires." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/logicCircuit.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Logic Circuit
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A functioning logic circuit diagram, which allows the user to make circuits using gates and wires.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,treelayout,customlayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/swimbands.png"
alt="Layer Bands are automatically created for each 'layer' of a TreeLayout, and run perpendicular to the layout." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/swimBands.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Layer Bands
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Layer Bands are automatically created for each 'layer' of a TreeLayout, and run perpendicular to the layout.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,collections,contextmenus,tools,palette,buttons,geometries,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/pipes.png"
alt="Showcasing nodes (Pipes) that can be joined, and will snap and drag together." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pipes.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Pipes Diagram Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Showcasing nodes (Pipes) that can be joined, and will snap and drag together.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,palette,html,commands,animation,buttons,geometries,itemarrays,tables,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/vendingPlanogram.png"
alt="Drag and drop sodas from the Palette onto the vending machine. Use tools to edit the vending machine as well." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/vendingPlanogram.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Vending Planogram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Drag and drop sodas from the Palette onto the vending machine. Use tools to edit the vending machine as well.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries,svg,process,palette,inspector,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/productioneditor.png"
alt="A designer for creating production process diagrams." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/productionEditor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Production Process Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A designer for creating production process diagrams.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tooltips,geometries,svg,process,monitoring,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/productionprocess.png"
alt="Partially describes the production process for converting natural gas and oil byproducts into their end products." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/productionProcess.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Production Process
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Partially describes the production process for converting natural gas and oil byproducts into their end products.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/records.png"
alt="Displays a variable number of fields for each record, with links mapping one field to another." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/records.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Record Mapper
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Displays a variable number of fields for each record, with links mapping one field to another.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gridlayout,groups,palette,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/regrouping.png"
alt="Allows the user to drag nodes, including groups, into and out of groups, both from the Palette as
well as from within the Diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/regrouping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Regrouping Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Allows the user to drag nodes, including groups, into and out of groups, both from the Palette as
well as from within the Diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,palette">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/seatingchart.png"
alt="This sample demonstrates custom logic in a GoJS diagram - a 'Person' node can be dropped onto a 'Table' node, causing the person to be assigned a position at the closest empty seat at that table." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/seatingChart.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Seating Chart
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">This sample demonstrates custom logic in a GoJS diagram - a 'Person' node can be dropped onto a 'Table' node, causing the person to be assigned a position at the closest empty seat at that table.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="process,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/systemdynamics.png"
alt="A System Dynamics diagram shows the storages and flows of material in some system, and the factors that influence the rates of flow." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/systemDynamics.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
System Dynamics Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A System Dynamics diagram shows the storages and flows of material in some system, and the factors that influence the rates of flow.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,treelayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/treemapper.png"
alt="Displays two trees, allowing the user to dynamically draw or reconnect links mapping data from field to another." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/treeMapper.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tree Mapper
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Displays two trees, allowing the user to dynamically draw or reconnect links mapping data from field to another.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="palette,geometries,links,ports,groups,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/circuit.png"
alt="A diagram and palette of circuit componenets that allows for the creation of circuit schematics with manually shaped and routed links that save to a JSON model." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/circuitDesigner.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Circuit Designer
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A diagram and palette of circuit componenets that allows for the creation of circuit schematics with manually shaped and routed links that save to a JSON model.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gridlayout,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/shapes.png"
alt="Showcases all GoJS figures. You can define your own named Shape figures." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/shapes.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Shape Figures
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Showcases all GoJS figures. You can define your own named Shape figures.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/treeview.png"
alt="Demonstrates a traditional 'Tree View' in a GoJS diagram, with optional orthogonal links between the nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/treeView.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tree View
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a traditional 'Tree View' in a GoJS diagram, with optional orthogonal links between the nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dimensioning.png"
alt="Demonstrates custom Links that show the distance between two points." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Dimensioning.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Dimensioning Links
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates custom Links that show the distance between two points.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="svg,gridlayout,animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/fonticons.png"
alt="An example of how to use icon fonts with GOJS, making sure the fonts load fully before creating the diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/fonticons.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Font Icons
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An example of how to use icon fonts with GOJS, making sure the fonts load fully before creating the diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gridlayout,treelayout,tooltips,geometries,svg,theme,animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/svgicons.png"
alt="Create your own custom Shapes using SVG path strings. This sample uses SVG strings from a free icon set." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/icons.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
SVG Icons
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Create your own custom Shapes using SVG path strings. This sample uses SVG strings from a free icon set.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/blockeditor.png"
alt="A simple block diagram editor that makes it easy for the user to chain together new nodes, with
context menus for changing shapes and colors." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/blockEditor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Block Diagram Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A simple block diagram editor that makes it easy for the user to chain together new nodes, with
context menus for changing shapes and colors.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gauges,geometries,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/controlgauges.png"
alt="Various meters and gauges that show particular values and can be modified by the user by dragging." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/controlGauges.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Meters and Gauges
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Various meters and gauges that show particular values and can be modified by the user by dragging.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="animation,links,monitoring">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/pathfinder.png"
alt="GoJS diagram demonstrating the versatility of the available tools. Using the avoid nodes link router to give nodes path finding for navigating through a house with fluid movements from animations." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pathFinder.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Path Finder
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">GoJS diagram demonstrating the versatility of the available tools. Using the avoid nodes link router to give nodes path finding for navigating through a house with fluid movements from animations.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/absolute.png"
alt="A diagram that does not scroll or zoom or allow parts to be dragged out of a fixed area." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/absolute.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Absolute Positioning
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A diagram that does not scroll or zoom or allow parts to be dragged out of a fixed area.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/addremovecolumns.png"
alt="Demonstrates adding and removing and swapping columns of a Table Panel." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/addRemoveColumns.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Add/Remove/Swap Columns in Table Panels
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates adding and removing and swapping columns of a Table Panel.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="palette,overview">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/addtopalette.png"
alt="Select and edit a node and add a copy of it to the palette." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/addToPalette.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Adding Node to Palette
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Select and edit a node and add a copy of it to the palette.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,circularlayout,tooltips,geometries,circle-like">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/arrowheads.png"
alt="Showcases all pre-defined Link arrowheads. You can define your own named arrowhead geometries." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/arrowheads.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
All Predefined Arrowheads for Links
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Showcases all pre-defined Link arrowheads. You can define your own named arrowhead geometries.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,links,tools,palette,geometries,grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/draggablelink.png"
alt="Showcases draggable disconnectable links that can be connected by dropping one or both ends at a valid port." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/draggableLink.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Draggable Link
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Showcases draggable disconnectable links that can be connected by dropping one or both ends at a valid port.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/animatedfocus.png"
alt="Aninmated focus by scrolling to a node along with animation of the size of the node to draw attention to it.." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/animatedFocus.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Animated Node Attention
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Aninmated focus by scrolling to a node along with animation of the size of the node to draw attention to it..</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,force-directed,animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/pathanimation.png"
alt="Animation of diagram parts (tokens) along link paths." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pathAnimation.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Animation of Tokens along Link Paths
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Animation of diagram parts (tokens) along link paths.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gridlayout,customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/arranging.png"
alt="The Arranging layout is a layout of layouts, plus a third layout for arranging left-overs." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Arranging.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Arranging Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">The Arranging layout is a layout of layouts, plus a third layout for arranging left-overs.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,routers,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/avoidslinksrouter.png"
alt="A custom Router that moves Link segments to parallelize and avoid overlaps." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/AvoidsLinksRouter.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Avoids Links Router
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Router that moves Link segments to parallelize and avoid overlaps.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,geometries,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/balloonlink.png"
alt="Demonstrates custom Links that create a 'Balloon' around the fromNode." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/BalloonLink.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Ballon Links
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates custom Links that create a 'Balloon' around the fromNode.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,tooltips,charts">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/barcharts.png"
alt="Simple bar charts or histograms within nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/barCharts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Bar Charts in Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Simple bar charts or histograms within nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,tooltips,contextmenus,buttons,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/basic.png"
alt="Shows many of the commands possible in GoJS, templates for Links and for Groups, plus tooltips and context menus for Nodes, for Links, for Groups, and for the Diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/basic.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Basic with ToolTips and Context Menus
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows many of the commands possible in GoJS, templates for Links and for Groups, plus tooltips and context menus for Nodes, for Links, for Groups, and for the Diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="layered-digraph">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/beatpaths.png"
alt="Demonstrates reading JSON data describing the relative rankings of NFL teams at a particular moment in time and generating a diagram from that data." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/beatPaths.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Beat Paths
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates reading JSON data describing the relative rankings of NFL teams at a particular moment in time and generating a diagram from that data.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,collections,customlayout,groups,tooltips,contextmenus,tools,palette,overview,buttons,geometries,html,frameworks">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/bpmn.png"
alt="The start of a Business Process Model and Notation editor." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/bpmn/BPMN.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
BPMN Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">The start of a Business Process Model and Notation editor.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/hoverbuttons.png"
alt="Shows buttons in an Adornment upon hover over a node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/hoverButtons.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Buttons Shown on Hover
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows buttons in an Adornment upon hover over a node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,geometries,charts">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/candlestickcharts.png"
alt="Simple candlestick or range charts within nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/candlestickCharts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Candlestick Charts
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Simple candlestick or range charts within nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="charts,html,frameworks">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/canvases.png"
alt="Shows how to render a data-driven chart within each Node using the Chart.js library." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/canvases.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Chart.js Charts in Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows how to render a data-driven chart within each Node using the Chart.js library.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,circularlayout,circle-like,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/clayout.png"
alt="Shows CircularLayout and options. This layout positions nodes in a circular arrangement." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/cLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Circular Layout Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows CircularLayout and options. This layout positions nodes in a circular arrangement.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/classhierarchy.png"
alt="Displays the GoJS Class Hierarchy as a series of trees. Double-click to go to the class's API documentation." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/classHierarchy.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Class Hierarchy Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Displays the GoJS Class Hierarchy as a series of trees. Double-click to go to the class's API documentation.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,treelayout,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/comments.png"
alt="GoJS supports the notion of 'Comments', including the ability to create balloon-like comments." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/comments.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Comment Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">GoJS supports the notion of 'Comments', including the ability to create balloon-like comments.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="force-directed">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/conceptmap.png"
alt="A web of interlinked concepts displayed with a ForceDirected Layout, showcasing link labels." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/conceptMap.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Concept Map
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A web of interlinked concepts displayed with a ForceDirected Layout, showcasing link labels.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/linkstolinks.png"
alt="Demonstrates the ability for a Link to appear to connect with another Link, using label nodes that belong to links. " class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/linksToLinks.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Connecting Links to Links Using Link Label Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates the ability for a Link to appear to connect with another Link, using label nodes that belong to links. </p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,links,ports">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/connectionboxnode.png"
alt="A Node containing ports that allow linking between them, within the node as well as between nodes, with custom link validation." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/connectionBoxNode.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Connection Box Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Node containing ports that allow linking between them, within the node as well as between nodes, with custom link validation.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tooltips,monitoring">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/kittenmonitor.png"
alt="Kitten Monitor with constant size markers and tooltips when zooming out." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/constantSize.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Constant Size Nodes While Zooming in or out
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Kitten Monitor with constant size markers and tooltips when zooming out.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/contentalign.png"
alt="Showcases alignment properties of the Diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/contentAlign.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Content Alignment Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Showcases alignment properties of the Diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,groups,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/grouping.png"
alt="Demonstrates subgraphs that are created only as groups are expanded." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/grouping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Grouping
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates subgraphs that are created only as groups are expanded.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,tools,buttons,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/curvedlinkreshaping.png"
alt="A custom Tool that lets the user reshape curved links with a single handle." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/CurvedLinkReshaping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Curved Link Reshaping Using Single Handle
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user reshape curved links with a single handle.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,links">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/multinodepathlinks.png"
alt="Demonstrates custom routing for Links running through other Nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/multiNodePathLinks.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Curved Multi-Node Path Link Routes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates custom routing for Links running through other Nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/treeloadanimation.png"
alt="Shows how to create a custom Diagram loading animation." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/treeLoadAnimation.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Custom Animations Loading Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows how to create a custom Diagram loading animation.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="layered-digraph,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/customexpandcollapse.png"
alt="Shows how to create Buttons with custom behavior for expanding/collapsing of a graph." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/customExpandCollapse.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Custom Expand/Collapse
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows how to create Buttons with custom behavior for expanding/collapsing of a graph.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="contextmenus,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/customcontextmenu.png"
alt="Demonstrates the implementation of a custom HTML context menu." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/customContextMenu.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
HTML Context Menu
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates the implementation of a custom HTML context menu.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,geometries,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/parallelroute.png"
alt="Demonstrates custom Links that route parallel to other Links between the same two ports." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ParallelRoute.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Parallel Routing
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates custom Links that route parallel to other Links between the same two ports.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/customanimations.png"
alt="Shows how to create several custom Node animations." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/customAnimations.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Custom Node Animations
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows how to create several custom Node animations.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/panellayout.png"
alt="Shows how to create a custom PaneLayout." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/panelLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Custom Panel Layout: Cascading Elements
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows how to create a custom PaneLayout.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/customtexteditingtool.png"
alt="Demonstrates using a custom HTML element for in-place editing of a TextBlock." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/customTextEditingTool.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Custom Text Editors
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates using a custom HTML element for in-place editing of a TextBlock.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,layered-digraph,ports,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dataflow.png"
alt="Show the processing steps involved in a database transformation or query, with labeled ports." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dataFlow.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Data Flow Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Show the processing steps involved in a database transformation or query, with labeled ports.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,extensions,inspector,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/datainspector.png"
alt="A simple drop-in for inspecting and editing Part data." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/DataInspector.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Data Inspector
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A simple drop-in for inspecting and editing Part data.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tooltips,html,animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/datavisualization.png"
alt="A data-visualization demonstration that showcases GoJS interacting with other elements on the page." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dataVisualization.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Data Visualization
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A data-visualization demonstration that showcases GoJS interacting with other elements on the page.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/scrollmodes.png"
alt="Shows infinite scrolling and positionComputation." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/scrollModes.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Diagram Scroll Modes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows infinite scrolling and positionComputation.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries,grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/rulereddiagram.png"
alt="A diagram with Graduated Panels at the edges acting as rulers." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ruleredDiagram.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Diagram with Rulers
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A diagram with Graduated Panels at the edges acting as rulers.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,geometries,charts">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/donutcharts.png"
alt="Ring-shaped pie charts within nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/donutCharts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Donut Charts in Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Ring-shaped pie charts within nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/doubletree.png"
alt="Displays a single diagram of two trees sharing a single root node growing in opposite directions, using the DoubleTreeLayout extension." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/doubleTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Double Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Displays a single diagram of two trees sharing a single root node growing in opposite directions, using the DoubleTreeLayout extension.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,collections,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/records.png"
alt="Drag and drop fields from/to record Nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dragDropFields.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Drag and Drop Fields Between Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Drag and drop fields from/to record Nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="palette,html,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/htmldragdrop.png"
alt="Demonstrates dragging and dropping from HTML, and pasting from the external clipboard." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/htmlDragDrop.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Drag and Drop From HTML Element to Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates dragging and dropping from HTML, and pasting from the external clipboard.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dragcreating.png"
alt="A custom Tool that lets a user draw a box showing where and how large a new node should be." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/DragCreating.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Drag Creating Tool
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets a user draw a box showing where and how large a new node should be.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,collections,tools,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/records.png"
alt="Drag out fields from record Nodes to an HTML element." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dragOutFields.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Drag Fields Out of Diagram to HTML Element
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Drag out fields from record Nodes to an HTML element.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dragzooming.png"
alt="A custom Tool that lets a user draw a box showing what to zoom in to." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/DragZooming.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Drag Zooming
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets a user draw a box showing what to zoom in to.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Demonstrates drag and drop between two different diagrams using a shared UndoManager." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/twoDiagrams.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Two Diagrams Drag-and-Drop
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates drag and drop between two different diagrams using a shared UndoManager.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/nonrealtimedragging.png"
alt="A custom DraggingTool that lets the user drag a translucent image of the Nodes and Links to be moved, leaving them in place until the mouse up." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/NonRealtimeDragging.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
NonRealtime Dragging
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom DraggingTool that lets the user drag a translucent image of the Nodes and Links to be moved, leaving them in place until the mouse up.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/nodelabeldragging.png"
alt="A custom Tool that lets the user drag a label in a Spot Panel of a Node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/NodeLabelDragging.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Dragging Node Label
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user drag a label in a Spot Panel of a Node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/linklabeldragging.png"
alt="A custom Tool that lets the user drag a label on a Link and that keeps its relative position to the link." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/LinkLabelDragging.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Dragging Link Label
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user drag a label on a Link and that keeps its relative position to the link.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/linklabelonpathdragging.png"
alt="A custom Tool that lets the user drag a label on a Link and that keeps the label along the path of the link." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/LinkLabelOnPathDragging.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Dragging Link Label along Path
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user drag a label on a Link and that keeps the label along the path of the link.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="extensions,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/drawcommandhandler.png"
alt="Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/DrawCommandHandler.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Draw Command Handler
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,force-directed,buttons,theme">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/entityrelationship.png"
alt="An entity relationship diagram, showcasing data binding with item arrays." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/entityRelationship.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Entity Relationship Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An entity relationship diagram, showcasing data binding with item arrays.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/euler.png"
alt="A read-only diagram where clicking on a node will open a new webpage." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/euler.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Euler Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A read-only diagram where clicking on a node will open a new webpage.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="force-directed,buttons,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/incrementaltree.png"
alt="Demonstrates the expansion of a tree where nodes are only created 'on-demand', when the user clicks on the 'expand' Button." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/incrementalTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Incremental Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates the expansion of a tree where nodes are only created 'on-demand', when the user clicks on the 'expand' Button.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout,tooltips,legend">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/familytreejp.png"
alt="Shows a standard family tree." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/familyTreeJP.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Family Tree Diagram, Japanese
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a standard family tree.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/faulttree.png"
alt="A fault tree diagram with collapsing/expanding subtrees and gates at each non-root node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/faultTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Fault Tree Analysis
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A fault tree diagram with collapsing/expanding subtrees and gates at each non-root node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,force-directed,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/distances.png"
alt="Show distances between two nodes and highlights one of all possible paths between the nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/distances.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Distances and Paths
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Show distances between two nodes and highlights one of all possible paths between the nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,links,treelayout,customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/fishbone.png"
alt="The Fishbone or Ishikawa layout is a tree layout for cause-and-effect relationships." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Fishbone.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Fishbone Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">The Fishbone or Ishikawa layout is a tree layout for cause-and-effect relationships.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="layered-digraph,contextmenus,tools,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/flowbuilder.png"
alt="Demonstrates a flow builder where nodes/links can be created or dropped onto a recycling node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/flowBuilder.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Flow Builder for Building Acyclic Graphs
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a flow builder where nodes/links can be created or dropped onto a recycling node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/panellayoutflow.png"
alt="A custom PanelLayout that arranges panel elements into rows or columns." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PanelLayoutFlow.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Flow Layout in Panels
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom PanelLayout that arranges panel elements into rows or columns.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,force-directed,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/fdlayout.png"
alt="Shows ForceDirectedLayout and options. Treats the graph as if it were a system of physical bodies with forces acting on them and between them." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/fdLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Force Directed Layout Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows ForceDirectedLayout and options. Treats the graph as if it were a system of physical bodies with forces acting on them and between them.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/freehanddrawing.png"
alt="A custom Tool that lets the user interactively draw a line, converting it into a Shape." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/FreehandDrawing.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Freehand Drawing
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user interactively draw a line, converting it into a Shape.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="circularlayout,customlayout,circle-like">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/friendwheel.png"
alt="Demonstrates a customized CircularLayout." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/friendWheel.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Friend Wheel
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a customized CircularLayout.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/localview.png"
alt="Two diagrams, the one on top showing a full tree and the one below focusing on a specific node in the tree and those nodes that are logically 'near' it." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/localView.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Diagram and Local View
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Two diagrams, the one on top showing a full tree and the one below focusing on a specific node in the tree and those nodes that are logically 'near' it.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/gameoflife.png"
alt="A cellular automation simulation." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/gameOfLife.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Game of Life Cellular Automation
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A cellular automation simulation.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tooltips,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/leaflet.png"
alt="A GoJS diagram atop a Leaflet.js map, with nodes placed at latitude and longitude based locations." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/leaflet.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Diagrams and Leaflet.js
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A GoJS diagram atop a Leaflet.js map, with nodes placed at latitude and longitude based locations.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/geometryreshaping.png"
alt="A custom Tool that supports interactive reshaping of Geometries." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/GeometryReshaping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Geometry Reshaping
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that supports interactive reshaping of Geometries.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="vue">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/seatingchartvue.png"
alt="A seating chart demo app built with GoJS and Vue" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../projects/gojs-seatingchart/index.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
GoJS Seating Chart Creator
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A seating chart demo app built with GoJS and Vue</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="svelte">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/3d.png"
alt="A three-dimensional viewer demo app built with GoJS, ThreeJS, and Svelte" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../projects/gojs-3d/index.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
GoJS with 3D
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A three-dimensional viewer demo app built with GoJS, ThreeJS, and Svelte</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,tooltips,tools,buttons,geometries,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/grafcet.png"
alt="A Grafcet is a kind of sequential function chart used in automation design." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/grafcet.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Grafcet Diagram Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Grafcet is a kind of sequential function chart used in automation design.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gridlayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/glayout.png"
alt="Shows GridLayout and options. Places all of the Parts in a grid-like arrangement, ordered, spaced apart, and wrapping as needed." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/gLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Grid Layout Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows GridLayout and options. Places all of the Parts in a grid-like arrangement, ordered, spaced apart, and wrapping as needed.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/roundedgroups.png"
alt="Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/roundedGroups.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Groups with Rounded Headers and Footers
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/guideddragging.png"
alt="A custom DraggingTool that makes guidelines visible as a Part is dragged around a Diagram and is nearly aligned with another Part." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/GuidedDragging.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Guided Dragging
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom DraggingTool that makes guidelines visible as a Part is dragged around a Diagram and is nearly aligned with another Part.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,links,customlayout,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/timeline.png"
alt="A simple timeline with events arranged along a line." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/timeline.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Timeline
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A simple timeline with events arranged along a line.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="palette,html,inspector,frameworks">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/htmlinteraction.png"
alt="Contains two draggable HTML elements (using jQuery UI). One of the two HTML elements houses a panel that interacts with the main Diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/htmlInteraction.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
HTML Interaction
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Contains two draggable HTML elements (using jQuery UI). One of the two HTML elements houses a panel that interacts with the main Diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="extensions,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/zoomslider.png"
alt="Demonstrates use of the ZoomSlider class to zoom in/out using a control." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ZoomSlider.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
HTML Zoom Slider for Zooming
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates use of the ZoomSlider class to zoom in/out using a control.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/hyperlink.png"
alt="Demonstrates usage of the HyperlinkText extension." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Hyperlink.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Hyperlink Text
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates usage of the HyperlinkText extension.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gauges,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/instrumentgauge.png"
alt="A gauge using a scale made with a Graduated Panel." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/instrumentGauge.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Instrument Gauges
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A gauge using a scale made with a Graduated Panel.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,layered-digraph,palette,overview">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/flowgrammer.png"
alt="Demonstrates a flow-chart-like editor of a restricted syntax language. Uses the ParallelLayout extension." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/flowgrammer.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Flowgrammer Visual Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a flow-chart-like editor of a restricted syntax language. Uses the ParallelLayout extension.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,tooltips,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/decisiontree.png"
alt="Allows a user to make progressive decisions." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/decisionTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Decision Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Allows a user to make progressive decisions.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/polygondrawing.png"
alt="A custom Tool that lets the user interactively draw polygons and polyline Shapes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PolygonDrawing.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Interactive Drawing of Polygons or Polylines
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user interactively draw polygons and polyline Shapes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="force-directed,customlayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/interactiveforce.png"
alt="A continuous ForceDirectedLayout that occurs as the user drags around a node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/interactiveForce.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Continuous Interactive Force Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A continuous ForceDirectedLayout that occurs as the user drags around a node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/gantt.png"
alt="Demonstrates a Gantt chart with a collapsible tree of tasks" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/gantt.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Gantt Chart
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a Gantt chart with a collapsible tree of tasks</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,treelayout,contextmenus,buttons,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/mindmap.png"
alt="A Mind Map, a double-tree whose nodes have an 'add' button when selected and a context menu." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/mindMap.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Mind Map Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Mind Map, a double-tree whose nodes have an 'add' button when selected and a context menu.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="react">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/tictactoe.png"
alt="A GoJS Diagram component in React" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../projects/gojs-tictactoe/index.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Interactive React Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A GoJS Diagram component in React</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,treelayout,buttons,theme">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/ivrtree.png"
alt="Diagram representation of an Interactive Voice Response Tree (IVR tree). Nodes may have a collapsible list of details." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/IVRtree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
IVR Tree Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Diagram representation of an Interactive Voice Response Tree (IVR tree). Nodes may have a collapsible list of details.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="svelte">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/jsondiagram.png"
alt="A Demo using GoJS, Monaco, and Svelte to create an editable JSON Diagram" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../projects/gojs-jsondiagram/index.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
JSON Diagram editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Demo using GoJS, Monaco, and Svelte to create an editable JSON Diagram</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/lassoselecting.png"
alt="A custom Tool that replaces the standard DragSelectingTool to allow the user to draw a lasso around the Parts they want to select." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/LassoSelecting.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Lasso Selecting
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that replaces the standard DragSelectingTool to allow the user to draw a lasso around the Parts they want to select.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,layered-digraph,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/ldlayout.png"
alt="Shows LayeredDigraphLayout and options. Arranges nodes of directed graphs into layers (rows or columns)." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ldLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Layered Digraph Layout Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows LayeredDigraphLayout and options. Arranges nodes of directed graphs into layers (rows or columns).</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,customlayout,groups,buttons,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/parallel.png"
alt="A custom Layout that assumes there is a single split and a single merge node with parallel lines of nodes connecting them." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Parallel.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Parallel Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that assumes there is a single split and a single merge node with parallel lines of nodes connecting them.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="contextmenus,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/htmllightboxcontextmenu.png"
alt="Shows a LightBox style HTML Context Menu." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/htmlLightBoxContextMenu.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
LightBox Style HTML Context Menu
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a LightBox style HTML Context Menu.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dragunoccupied.png"
alt="Demonstrates a function to avoid any overlapping of nodes during dragging." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dragUnoccupied.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Drag Unoccupied
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a function to avoid any overlapping of nodes during dragging.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/polylinelinking.png"
alt="A custom LinkingTool that lets the user determine the route of a new Link by clicking." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PolylineLinking.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Polyline Linking
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom LinkingTool that lets the user determine the route of a new Link by clicking.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,palette">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/macros.png"
alt="Demonstrates an automatic ungrouping of nodes when dropping an element on the diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/macros.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Macros from Palette
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates an automatic ungrouping of nodes when dropping an element on the diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout,overview,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/magnifier.png"
alt="An Overview used as a magnifying glass." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/magnifier.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Magnifier View
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An Overview used as a magnifying glass.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Shows default Diagram interactivity and basic data binding. Select, move, copy, delete, undo, redo with keyboard or touch." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/minimal.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Minimal
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows default Diagram interactivity and basic data binding. Select, move, copy, delete, undo, redo with keyboard or touch.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="export">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Minimal, showing image Blob creation with Diagram.makeImageData, and download." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/minimalBlob.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Download Image Blob
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Minimal, showing image Blob creation with Diagram.makeImageData, and download.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="svg,export">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Minimal, showing SVG creation with Diagram.makeSvg, and download." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/minimalSvg.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Download SVG
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Minimal, showing SVG creation with Diagram.makeSvg, and download.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="frameworks">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/vue.png"
alt="Minimal, using Vue.js." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/vue.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Minimal Vue.js Sample
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Minimal, using Vue.js.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,force-directed,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/multicolorlinks.png"
alt="Demonstrates a custom Link that can be stroked with multiple consecutive colors." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/multiColorLinks.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Multi-color Link Paths
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a custom Link that can be stroked with multiple consecutive colors.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,force-directed,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/multiarrow.png"
alt="A custom orthogonal Link that draws arrowheads at the end of each segment." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/multiArrow.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Multiple Arrowheads Along Link Path
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom orthogonal Link that draws arrowheads at the end of each segment.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,circularlayout,circle-like">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/doublecircle.png"
alt="Multiple circles using repeated CircularLayouts." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/doubleCircle.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Double Circle
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Multiple circles using repeated CircularLayouts.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout,tooltips,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/orgchartassistants.png"
alt="Shows an org chart with assistant nodes at the side, above regular child nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/orgChartAssistants.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Org Chart with Assistants on the Side
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows an org chart with assistant nodes at the side, above regular child nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout,tooltips,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/orgchartextras.png"
alt="Shows an org chart with extra links and expand/collapse functionality." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/orgChartExtras.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Org Chart With Extra Relationships
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows an org chart with extra links and expand/collapse functionality.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/packedhierarchy.png"
alt="A customized PackedLayout that arranges nested circular groups." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PackedHierarchy.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Packed Hierarchy of Groups
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A customized PackedLayout that arranges nested circular groups.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/packedlayout.png"
alt="A custom Layout that positions nodes in a packed area." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PackedLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Packed Layout Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that positions nodes in a packed area.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,layered-digraph,palette,buttons,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/pageflow.png"
alt="A diagram representation of webpage flow." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pageFlow.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Page Flow Diagram Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A diagram representation of webpage flow.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,customlayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/parsetree.png"
alt="A Parse tree representing the syntactic structure of a sentence. The leaf nodes are shown in a horizontal line." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/parseTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Parse Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Parse tree representing the syntactic structure of a sentence. The leaf nodes are shown in a horizontal line.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="export">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Generating a PDF file holding all of the pages of a Diagram's rendering." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pdf/minimalPDF.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
PDF generation
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Generating a PDF file holding all of the pages of a Diagram's rendering.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,layered-digraph,legend">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/pert.png"
alt="A simple PERT chart, showcasing GoJS table panels and RowColumnDefinition properties." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PERT.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
PERT Chart with Legend
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A simple PERT chart, showcasing GoJS table panels and RowColumnDefinition properties.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,collections,tooltips,buttons,geometries,charts,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dynamicpiechart.png"
alt="Dynamic pie chart with selectable slices that can change size." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dynamicPieChart.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Dynamic Pie Chart
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Dynamic pie chart with selectable slices that can change size.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,tooltips,geometries,charts">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/piecharts.png"
alt="Simple pie charts within nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pieCharts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Pie Charts
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Simple pie charts within nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/pipetree.png"
alt="A tree layout with rectangular nodes at alternating angles and no links." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pipeTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Pipe Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A tree layout with rectangular nodes at alternating angles and no links.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="groups,palette,grid,frameworks,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/planogram.png"
alt="Drag-and-drop items from the Palette onto racks in the Diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/planogram.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Planogram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Drag-and-drop items from the Palette onto racks in the Diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,groups,tooltips">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/navigation.png"
alt="Displays relationships between different parts of a diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/navigation.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Navigation
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Displays relationships between different parts of a diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="buttons,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/radialadornment.png"
alt="An adornment showing buttons in a circle on one selected node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/radialAdornment.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Radial Adornment
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An adornment showing buttons in a circle on one selected node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,treelayout,tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/realtimedragselecting.png"
alt="A custom Tool that lets a user drag and create a box to select nodes and links." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/RealtimeDragSelecting.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Realtime Selection
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets a user drag and create a box to select nodes and links.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,tooltips,circle-like,customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/radial.png"
alt="Arrange people in circles around a central person, in layers according to distance from the central person." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/radial.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Radial Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Arrange people in circles around a central person, in layers according to distance from the central person.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,tooltips,geometries,circle-like,customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/radialpartition.png"
alt="Arrange people in rings around a central person, in layers according to distance from the central person." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/radialPartition.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Radial Partition
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Arrange people in rings around a central person, in layers according to distance from the central person.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,gridlayout,treelayout,groups,buttons,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/regrouping.png"
alt="Regrouping with tree view of grouping hierarchy." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/regroupingTreeView.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Regrouping Editor and Simultaneous Tree View
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Regrouping with tree view of grouping hierarchy.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="svg,export">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/svgdataurl.png"
alt="In makeSvg, replace image sources with Base64" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/svgDataUrl.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Rendering SVG to Data URL with Inline Images
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">In makeSvg, replace image sources with Base64</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/rescaling.png"
alt="A custom Tool that lets a user change the scale of an object." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Rescaling.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Rescaling by Dragging Handle
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets a user change the scale of an object.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/sectorreshaping.png"
alt="A custom Tool that supports interactive reshaping of pie-shaped sectors of circles." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/SectorReshaping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Reshaping and Rotating Sectors of Circles
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that supports interactive reshaping of pie-shaped sectors of circles.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,tools,palette,extensions,grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/snaplinkreshaping.png"
alt="A custom Tool that allows reshaping links with grid snapping." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/SnapLinkReshaping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Reshaping Links Snaps to Grid
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that allows reshaping links with grid snapping.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/orthogonallinkreshaping.png"
alt="A custom Tool that lets the user reshape orthogonal links by dragging entire segments." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/OrthogonalLinkReshaping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Orthogonal Link Reshaping
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user reshape orthogonal links by dragging entire segments.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/resizemultiple.png"
alt="A custom ResizingTool that lets the user resize many selected objects at once." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ResizeMultiple.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Resizing Multiple
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom ResizingTool that lets the user resize many selected objects at once.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,overview,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/overviewresizing.png"
alt="A custom Tool which allows the user to resize the overview box." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/OverviewResizing.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Resizing of Overview Box
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool which allows the user to resize the overview box.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/columnresizing.png"
alt="Two custom Tools that let the user resize the width of columns or the height of rows in a Table Panel of a Node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ColumnResizing.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Table Row and Column Resizing
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Two custom Tools that let the user resize the width of columns or the height of rows in a Table Panel of a Node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Demonstrates customization of pinch-zooming to scale a node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/pinchResizing.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Resizing via Pinch Zooming
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates customization of pinch-zooming to scale a node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/rotatemultiple.png"
alt="A custom RotatingTool that lets the user rotate many selected objects at once." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/RotateMultiple.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Rotate Multiple
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom RotatingTool that lets the user rotate many selected objects at once.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tools,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/spotrotating.png"
alt="A custom RotatingTool that lets the user shift the rotation point." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/SpotRotating.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Rotating Node about Movable Rotation Spot
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom RotatingTool that lets the user shift the rotation point.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="routers,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dynamicports.png"
alt="A demonstration of the LinkLabelRouter extension based on the Dynamic Ports sample. Move Nodes or create new links to demonstrate that link labels will automatically move to a nearby location to avoid overlapping." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/LinkLabelRouter.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Link Label Router
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A demonstration of the LinkLabelRouter extension based on the Dynamic Ports sample. Move Nodes or create new links to demonstrate that link labels will automatically move to a nearby location to avoid overlapping.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="extensions,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Demonstrates saving and loading model files on the local machine" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/saveAndLoadLocalFiles.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Local Files
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates saving and loading model files on the local machine</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,buttons,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/scrollingtable.png"
alt="Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/ScrollingTable.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Scrolling Table Panels with ScrollBars
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/selectablefields.png"
alt="Records with fields that the user can select." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/selectableFields.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Selectable Fields in Record Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Records with fields that the user can select.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="itemarrays,ports,geometries,commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/selectableports.png"
alt="A Node with ports that can be selected and deleted." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/selectablePorts.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Selectable, Deletable Ports in Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A Node with ports that can be selected and deleted.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="buttons,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/adornmentbuttons.png"
alt="Selected nodes show a row of buttons that execute commands or start tools." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/adornmentButtons.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Adornment Buttons
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Selected nodes show a row of buttons that execute commands or start tools.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,groups,tools,grid,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/sequencediagram.png"
alt="A sequence diagram illustrates how different processes interact with one-another and in what order." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/sequenceDiagram.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Sequence Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A sequence diagram illustrates how different processes interact with one-another and in what order.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="layered-digraph,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/sequentialfunction.png"
alt="A sequence diagram that shows different node templates, LayeredDigraphLayout and in-place text editing." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/sequentialFunction.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Sequential Function Chart
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A sequence diagram that shows different node templates, LayeredDigraphLayout and in-place text editing.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/serpentine.png"
alt="A custom Layout that positions a chain of nodes in rows of alternating direction." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Serpentine.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Serpentine Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that positions a chain of nodes in rows of alternating direction.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,customlayout,groups,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/sharedstates.png"
alt="As an alternative to using Groups, this manages Nodes that simultaneously belong to multiple containers." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/sharedStates.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Shared States not using Groups
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">As an alternative to using Groups, this manages Nodes that simultaneously belong to multiple containers.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,tools,extensions,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/linkshifting.png"
alt="A custom Tool that adds handles on Links to allow the user to shift the end point of the Link along the sides of the port without disconnecting it." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/LinkShifting.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Shifting Link Connections
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that adds handles on Links to allow the user to shift the end point of the Link along the sides of the port without disconnecting it.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="ports,tooltips,tools,palette,extensions,grid">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/portshifting.png"
alt="A custom Tool that lets the user drag a port in a Spot Panel of a Node." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/PortShifting.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Shifting Ports in Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Tool that lets the user drag a port in a Spot Panel of a Node.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="monitoring,animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/shopfloormonitor.png"
alt="Shows the continuously updating state of a number of stations on an imaginary shop floor." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/shopFloorMonitor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Shop Floor Monitor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows the continuously updating state of a number of stations on an imaginary shop floor.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/domtree.png"
alt="Shows the DOM of this page displayed as a tree. Selection highlights the DOM element in the page." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/DOMTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
DOM Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows the DOM of this page displayed as a tree. Selection highlights the DOM element in the page.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,contextmenus,palette,buttons,extensions,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/robot.png"
alt="Demonstrates use of the Robot class to simulate mouse events." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Robot.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Simulating Input using Robot
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates use of the Robot class to simulate mouse events.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="grid,legend">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/singlepage.png"
alt="Show a diagram on a sheet of paper, limiting dragging and resizing to stay within the page minus margins." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/singlePage.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Single Page Diagram Editor with Legend
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Show a diagram on a sheet of paper, limiting dragging and resizing to stay within the page minus margins.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,geometries,charts">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/sparklinegraphs.png"
alt="Simple sparkline charts within nodes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/sparklineGraphs.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Sparkline Charts in Nodes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Simple sparkline charts within nodes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/spiral.png"
alt="A custom Layout that positions a chain of nodes in a spiral." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Spiral.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Spiral Layout of Node Chains
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that positions a chain of nodes in a spiral.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,buttons,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/spreadsheet.png"
alt="An example of nested Table Panels forming a spreadsheet-like grid." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/spreadsheet.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Spreadsheet-like Nested Table Panels
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An example of nested Table Panels forming a spreadsheet-like grid.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="html,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/texteditor.png"
alt="Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/TextEditor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Standard HTMLInfo Text Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="buttons,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/statechart.png"
alt="State Chart using incremental JSON." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/stateChartIncremental.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
State Chart Editor Saving Incremental JSON
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">State Chart using incremental JSON.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="svelte,extensions,tools">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/floorplanner.png"
alt="A floor planner demo app built with GoJS and Svelte" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../projects/gojs-floorplanner/index.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Svelte Floorplanner
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A floor planner demo app built with GoJS and Svelte</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/swimlanelayout.png"
alt="A custom Layout that puts nodes into swimlanes with dependencies that cross lanes." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/SwimLaneLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Swim Lane Layout Keeps Nodes in their Lanes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that puts nodes into swimlanes with dependencies that cross lanes.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,collections,customlayout,groups,tools,palette,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/table.png"
alt="A custom Layout that arranges Nodes just as a Table Panel arranges GraphObjects." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Table.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Table Layout of Nodes in Rows and Columns
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that arranges Nodes just as a Table Panel arranges GraphObjects.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,force-directed,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/taperedlinks.png"
alt="Demonstrates a custom Geometry for Link paths." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/taperedLinks.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tapered Links
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a custom Geometry for Link paths.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gauges,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/thermometer.png"
alt="Graduated thermometer scales using Graduated Panel." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/thermometer.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Thermometer Nodes using Graduated Panels
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Graduated thermometer scales using Graduated Panel.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries,svg">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/tiger.png"
alt="Shows a tiger rendered in SVG without using a Picture" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/tiger.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
SVG Tiger using Shapes
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a tiger rendered in SVG without using a Picture</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/tournament.png"
alt="Tournament bracket with dynamic advancement as scores are entered." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/tournament.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tournament Bracket
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Tournament bracket with dynamic advancement as scores are entered.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,treelayout,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/tlayout.png"
alt="Shows TreeLayout and options. Positions nodes of a tree-structured graph in layers (rows or columns). " class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/tLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tree Layout Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows TreeLayout and options. Positions nodes of a tree-structured graph in layers (rows or columns). </p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,customlayout,groups,tooltips,extensions,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/treemap.png"
alt="A custom Layout that renders nested Groups into the viewport with each Node having an area proportional to its declared 'size'." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/TreeMap.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tree Map of Nested Groups
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A custom Layout that renders nested Groups into the viewport with each Node having an area proportional to its declared 'size'.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/tristatecheckboxtree.png"
alt="Demonstrates a traditional 'Tree View' in a GoJS diagram, where each item has a checkbox with three states." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/triStateCheckBoxTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Tri-state CheckBox Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates a traditional 'Tree View' in a GoJS diagram, where each item has a checkbox with three states.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/twohalves.png"
alt="Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/twoHalves.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Two Rounded Halves
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,treelayout,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/umlclass.png"
alt="A UML Class diagram shows software classes and their properties and methods, and the relationships between them." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/umlClass.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
UML Class Diagram Editor
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A UML Class diagram shows software classes and their properties and methods, and the relationships between them.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,buttons,html">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/updatedemo.png"
alt="Showcases two Diagrams observing the same Model. Modifying positions in one Diagram will modify them in the model, updating the other Diagram as well." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/updateDemo.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Update Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Showcases two Diagrams observing the same Model. Modifying positions in one Diagram will modify them in the model, updating the other Diagram as well.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="Shows different options for ToolManager's gestureBehavior." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/gestureBehavior.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Various Gestures Demo
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows different options for ToolManager's gestureBehavior.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,buttons,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/checkboxes.png"
alt="Demonstrates simple uses of CheckBoxButtons." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/CheckBoxes.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
CheckBox Styles
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates simple uses of CheckBoxButtons.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,itemarrays,buttons,extensions">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/Toggles.png"
alt="Demonstrates simple uses of ToggleSwitches." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/Toggles.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Toggle Styles
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates simple uses of ToggleSwitches.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,links,treelayout,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/relationships.png"
alt="Shows how you can create custom renderings for Links by repeatedly drawing GraphObjects along the route." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/relationships.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Visual Relationships
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows how you can create custom renderings for Links by repeatedly drawing GraphObjects along the route.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,circularlayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/venn.png"
alt="Venn Diagram of Common Glyphs in Greek, Latin, and Russian" class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/venn.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Venn Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Venn Diagram of Common Glyphs in Greek, Latin, and Russian</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,layered-digraph,ports,process">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/dataflowvertical.png"
alt="Same as Data Flow, but vertically oriented, and with slightly different styling." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/dataFlowVertical.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Data Flow Diagram (Vertical)
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Same as Data Flow, but vertically oriented, and with slightly different styling.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tables,gridlayout,layered-digraph,customlayout,groups,tools,buttons">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/swimlanesvertical.png"
alt="Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/swimLanesVertical.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Swim Lanes (Vertical)
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,groups,tooltips,buttons,performance">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/virtualized.png"
alt="Virtualized no Layout, an example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/virtualized.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Virtualized Diagram no Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Virtualized no Layout, an example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,force-directed,customlayout,tooltips,performance">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/virtualizedforcelayout.png"
alt="Shows a virtualized ForceDirectedLayout with GraphLinksModel." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/virtualizedForceLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Virtualized Diagram with Force Directed Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a virtualized ForceDirectedLayout with GraphLinksModel.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="customlayout,extensions,performance">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/virtualizedpacked.png"
alt="A virtualized version of PackedLayout that positions nodes in a packed area." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/VirtualizedPacked.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Virtualized Diagram with Packed Layout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A virtualized version of PackedLayout that positions nodes in a packed area.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout,tooltips,performance">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/virtualizedtree.png"
alt="An example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/virtualizedTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Virtualized Tree
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">An example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="collections,treelayout,customlayout,tooltips,performance">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/virtualizedtree.png"
alt="Shows a virtualized TreeLayout with TreeModel." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/virtualizedTreeLayout.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Virtualized Tree with TreeLayout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a virtualized TreeLayout with TreeModel.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="treelayout">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/visualtree.png"
alt="This sample shows the actual visual tree of a running Diagram, using a second Diagram." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/visualTree.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Visual Tree of another Diagram
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">This sample shows the actual visual tree of a running Diagram, using a second Diagram.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="gridlayout,treelayout,groups">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/visualtreegrouping.png"
alt="This shows the same visual tree using nested Groups instead of nodes and links." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/visualTreeGrouping.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Visual Tree using Groups
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">This shows the same visual tree using nested Groups instead of nodes and links.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,treelayout,geometries">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/wordcloud.png"
alt="A word cloud visualization using the PackedLayout extension." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/wordcloud.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Word Cloud using PackedLayout
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A word cloud visualization using the PackedLayout extension.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="commands">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/minimal.png"
alt="When zooming, change the spacing of the Nodes, not the Diagram.scale." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/spacingZoom.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Spacing Zoom
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">When zooming, change the spacing of the Nodes, not the Diagram.scale.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="tooltips,monitoring,animation">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/kittenmonitor.png"
alt="A monitoring diagram where the nodes (kittens) move on a background image (a house plan), with
tooltips describing kittens." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/kittenMonitor.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Monitor with Background
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">A monitoring diagram where the nodes (kittens) move on a background image (a house plan), with
tooltips describing kittens.</p>
</div>
</div><div
class="group relative before:absolute before:-inset-2.5 before:rounded-lg before:bg-gray-50 before:opacity-0 hover:before:opacity-100"
data-tags="links,palette,overview">
<div class="relative aspect-square overflow-hidden rounded-lg bg-gray-100 ring-1 ring-gray-900/10">
<img src="../assets/images/screenshots/network.png"
alt="Shows a network configurator with a Palette and Overview." class="absolute inset-0 h-full w-full" />
</div>
<div class="mt-4">
<h4 class="mt-4">
<a href="../samples/network.html" class="!border-0 hover:no-underline">
<span class="absolute -inset-2.5 z-10"></span>
<span class="relative text-lg font-semibold leading-7 text-gray-900 group-hover:text-nwoods-accent">
Network Editor with Bars
</span>
</a>
</h4>
<p class="relative mt-1.5 text-base leading-7 text-gray-600">Shows a network configurator with a Palette and Overview.</p>
</div>
</div></div>
<div>
<h3><a href="all.html">Complete list of all samples</a></h3>
</div>
</div>
<script src="index.js"></script>
<link rel="prefetch" as="script" href="../release/go.js" />
</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>
</html>