-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Expand file tree
/
Copy pathsamples.html
More file actions
100 lines (97 loc) · 234 KB
/
Copy pathsamples.html
File metadata and controls
100 lines (97 loc) · 234 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en" class="scheme-light dark:scheme-dark">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
<meta name="theme-color" content="#1f4963" />
<!-- Self-hosted variable font. Declared here (not in CSS) so .
resolves the /fonts/ asset under the base path, and preloaded with a matching
crossorigin so the @font-face fetch reuses it. -->
<link
rel="preload"
as="font"
type="font/woff2"
href="./fonts/InterVariable.woff2"
crossorigin />
<style>
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('./fonts/InterVariable.woff2') format('woff2');
}
</style>
<!-- Google Analytics -->
<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');
</script>
<link href="./_app/immutable/entry/start.DUcLjgjT.js" rel="modulepreload">
<link href="./_app/immutable/chunks/DTR9fq_7.js" rel="modulepreload">
<link href="./_app/immutable/chunks/BY_RssUb.js" rel="modulepreload">
<link href="./_app/immutable/entry/app.uWGY7NCW.js" rel="modulepreload">
<link href="./_app/immutable/chunks/kNaey6uv.js" rel="modulepreload">
<link href="./_app/immutable/chunks/xihTtKlq.js" rel="modulepreload">
<link href="./_app/immutable/nodes/0.DBSBeCFO.js" rel="modulepreload">
<link href="./_app/immutable/chunks/DDjqDG21.js" rel="modulepreload">
<link href="./_app/immutable/chunks/c0gyX4Uy.js" rel="modulepreload">
<link href="./_app/immutable/chunks/CxMCXhHm.js" rel="modulepreload">
<link href="./_app/immutable/chunks/CVMOr__I.js" rel="modulepreload">
<link href="./_app/immutable/nodes/3.JgNq0TJX.js" rel="modulepreload">
<link href="./_app/immutable/nodes/80.BEbnuaEk.js" rel="modulepreload">
<link href="./_app/immutable/chunks/DBC7Wr1j.js" rel="modulepreload">
<link href="./_app/immutable/chunks/BjDsAonG.js" rel="modulepreload">
<!--12qhfyh--><link rel="canonical" href="https://gojs.net/latest/samples"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="GoJS"/> <meta property="og:url" content="https://gojs.net/latest/samples"/> <meta property="og:image" content="https://gojs.net/latest/assets/images/fp/og.png"/> <meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:site" content="@northwoodsgo"/> <meta name="twitter:image" content="https://gojs.net/latest/assets/images/fp/og.png"/> <!----><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://gojs.net/#organization","name":"Northwoods Software","url":"https://nwoods.com","logo":"https://gojs.net/latest/assets/images/fp/og.png","sameAs":["https://github.com/NorthwoodsSoftware/GoJS","https://twitter.com/northwoodsgo","https://www.npmjs.com/package/gojs"]},{"@type":"SoftwareApplication","@id":"https://gojs.net/latest/#gojs","name":"GoJS","applicationCategory":"DeveloperApplication","operatingSystem":"Web","programmingLanguage":["JavaScript","TypeScript"],"description":"GoJS is a JavaScript and TypeScript library for building interactive diagramming apps - org charts, flowcharts, BPMN, SCADA, UML, and custom visual editors.","url":"https://gojs.net/latest/","publisher":{"@id":"https://gojs.net/#organization"},"offers":{"@type":"Offer","url":"https://nwoods.com/sales","category":"Commercial software license"}}]}</script><!----><!----><!--1cmi4dh--><script>
document.documentElement.classList.toggle(
'dark',
localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
);
</script><!----><!----><!--erxr18--><meta name="description" content="GoJS JavaScript diagram samples for HTML, including many kinds of flowcharts, org charts, BPMN, and other visual graph types."/><!----><title>GoJS Samples | GoJS Diagramming Library</title>
<link href="./_app/immutable/assets/0.vgO-Uy72.css" rel="stylesheet">
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents"><!--[--><!--[0--><!--[--><a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:rounded focus:bg-background focus:px-3 focus:py-2 focus:text-foreground focus:outline-2 focus:outline-nwoods-primary">Skip to main content</a> <nav id="navTop" class="sticky top-0 w-full z-30 bg-background border-b"><div class="flex flex-wrap items-center justify-between"><a class="text-white bg-nwoods-primary leading-[calc(var(--topnav-h)-1px)] font-bold my-0 px-3 text-5xl logo " href="./">GoJS</a> <div class="flex items-center mr-2"><div class="relative"><!--[-1--><button data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-9 sm:hidden" type="button" aria-label="Navigation" title="Navigation"><svg viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></g></svg><!----></button><!--]--><!----> <div id="topnavList" class="hidden sm:block"><div class="absolute right-0 z-30 flex flex-col gap-1 items-end rounded-lg border mr-4 p-4 pl-12 shadow bg-background text-foreground font-semibold sm:relative sm:flex-row sm:gap-2 md:gap-3 lg:gap-4 sm:items-start sm:border-0 sm:p-0 sm:shadow-none sm:bg-inherit"><!--[--><!--[0--><a data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="./learn"><!---->Learn<!----></a><!--]--><!--[0--><a data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="./samples"><!---->Samples<!----></a><!--]--><!--[0--><a data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="./api/index.html"><!---->API<!----></a><!--]--><!--[0--><a data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener"><!---->Forum<!----></a><!--]--><!--[0--><a data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="https://nwoods.com/contact.html" target="_blank" rel="noopener"><!---->Contact<!----></a><!--]--><!--[0--><a data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2" href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener"><!---->Buy<!----></a><!--]--><!--]--> <!--[-1--><button data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-9" type="button" aria-label="Toggle theme" title="Toggle theme"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="dark:hidden"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden dark:block"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path></svg> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----></div></div></div></div></div></nav><!----> <main id="main"><!--[0--><!--[--><div class="w-full"><!--[--><div><dialog id="sidebar" class="fixed inset-0 lg:hidden"><div class="fixed inset-0 bg-background/80" inert=""></div> <div class="fixed inset-0 flex"><div class="relative flex bg-background"><nav class="flex flex-col w-68 pl-6 pr-3 gap-8 overflow-y-auto bg-background py-6"><a href="../samples" class="text-sm/6 tracking-widest my-0 uppercase sm:text-xs/6 border-foreground font-semibold text-foreground">All Samples</a> <!--[--><div class="flex flex-col gap-3"><h3 class="text-sm/6 font-medium tracking-widest my-0 text-foreground/70 uppercase sm:text-xs/6">Tags</h3> <ul class="flex flex-col gap-2 border-l border-l-foreground/20"><!--[--><li class="-ml-px flex flex-col items-start gap-2"><a href="#animation" data-name="animation" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Animation</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#buttons" data-name="buttons" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Buttons</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#charts" data-name="charts" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Charts</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#circularlayout" data-name="circularlayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Circular Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#collections" data-name="collections" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Collections</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#commands" data-name="commands" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Commands</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#contextmenus" data-name="contextmenus" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Context Menus</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#customlayout" data-name="customlayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Custom Layouts</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#routers" data-name="routers" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Custom Link Routing</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#inspector" data-name="inspector" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Data Inspector</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#export" data-name="export" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Exporting Raster Images</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#svg" data-name="svg" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Exporting SVGs</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#force-directed" data-name="force-directed" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Force Directed Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#gauges" data-name="gauges" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Gauges</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#geometries" data-name="geometries" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Geometry Path Strings</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#extensions" data-name="extensions" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>GoJS Extensions</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#frameworks" data-name="frameworks" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>GoJS on Different Platforms</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#gridlayout" data-name="gridlayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Grid Layouts</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#grid" data-name="grid" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Grid Patterns</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#groups" data-name="groups" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Groups</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#html" data-name="html" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>HTML Interaction</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#itemarrays" data-name="itemarrays" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Item Arrays</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#layered-digraph" data-name="layered-digraph" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Layered Digraph Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#legend" data-name="legend" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Legend</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#links" data-name="links" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Links</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#monitoring" data-name="monitoring" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Monitoring</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#overview" data-name="overview" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Overview Diagrams</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#palette" data-name="palette" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Palette</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#performance" data-name="performance" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Performance</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#ports" data-name="ports" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Ports in Nodes</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#process" data-name="process" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Process</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#react" data-name="react" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>React</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#scada" data-name="scada" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>SCADA Diagrams</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#svelte" data-name="svelte" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Svelte</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#tables" data-name="tables" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Table Panels</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#theme" data-name="theme" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Theming</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#tools" data-name="tools" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Tools</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#tooltips" data-name="tooltips" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>ToolTips</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#treelayout" data-name="treelayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Tree Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#vue" data-name="vue" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Vue</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><!--]--></ul></div><!--]--></nav><!----> <div class="absolute top-6 right-6 flex"><!--[-1--><button data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 border bg-clip-padding font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 border-border hover:bg-muted hover:text-foreground dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3 bg-foreground/2 text-foreground/70 dark:bg-foreground/10" type="button" command="close" commandfor="sidebar"><!---->esc<!----></button><!--]--><!----></div></div></div></dialog> <aside class="hidden relative lg:fixed lg:flex-col lg:border-r lg:inset-y-0 lg:z-20 lg:top-(--topnav-h) lg:h-[calc(100vh-var(--topnav-h))] lg:overflow-y-auto"><nav class="flex flex-col w-68 pl-6 pr-3 gap-8 overflow-y-auto bg-background py-6"><a href="../samples" class="text-sm/6 tracking-widest my-0 uppercase sm:text-xs/6 border-foreground font-semibold text-foreground">All Samples</a> <!--[--><div class="flex flex-col gap-3"><h3 class="text-sm/6 font-medium tracking-widest my-0 text-foreground/70 uppercase sm:text-xs/6">Tags</h3> <ul class="flex flex-col gap-2 border-l border-l-foreground/20"><!--[--><li class="-ml-px flex flex-col items-start gap-2"><a href="#animation" data-name="animation" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Animation</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#buttons" data-name="buttons" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Buttons</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#charts" data-name="charts" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Charts</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#circularlayout" data-name="circularlayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Circular Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#collections" data-name="collections" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Collections</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#commands" data-name="commands" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Commands</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#contextmenus" data-name="contextmenus" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Context Menus</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#customlayout" data-name="customlayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Custom Layouts</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#routers" data-name="routers" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Custom Link Routing</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#inspector" data-name="inspector" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Data Inspector</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#export" data-name="export" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Exporting Raster Images</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#svg" data-name="svg" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Exporting SVGs</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#force-directed" data-name="force-directed" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Force Directed Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#gauges" data-name="gauges" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Gauges</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#geometries" data-name="geometries" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Geometry Path Strings</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#extensions" data-name="extensions" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>GoJS Extensions</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#frameworks" data-name="frameworks" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>GoJS on Different Platforms</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#gridlayout" data-name="gridlayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Grid Layouts</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#grid" data-name="grid" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Grid Patterns</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#groups" data-name="groups" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Groups</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#html" data-name="html" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>HTML Interaction</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#itemarrays" data-name="itemarrays" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Item Arrays</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#layered-digraph" data-name="layered-digraph" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Layered Digraph Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#legend" data-name="legend" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Legend</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#links" data-name="links" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Links</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#monitoring" data-name="monitoring" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Monitoring</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#overview" data-name="overview" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Overview Diagrams</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#palette" data-name="palette" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Palette</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#performance" data-name="performance" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Performance</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#ports" data-name="ports" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Ports in Nodes</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#process" data-name="process" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Process</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#react" data-name="react" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>React</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#scada" data-name="scada" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>SCADA Diagrams</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#svelte" data-name="svelte" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Svelte</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#tables" data-name="tables" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Table Panels</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#theme" data-name="theme" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Theming</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#tools" data-name="tools" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Tools</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#tooltips" data-name="tooltips" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>ToolTips</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#treelayout" data-name="treelayout" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Tree Layout</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="#vue" data-name="vue" data-sveltekit-reload="" class="inline-flex items-center gap-1 border-l border-transparent text-base/8 text-foreground/80 hover:border-foreground/25 hover:text-foreground sm:text-sm/6 pl-5 sm:pl-4 dark:text-foreground/85"><span>Vue</span> <span class="hidden"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-3"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg></span></a></li><!--]--></ul></div><!--]--></nav><!----> <!--[-1--><button data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-9 absolute top-4 right-6" type="button" aria-label="Toggle sidebar" title="Toggle sidebar" command="show-modal" commandfor="sidebar"><span class="absolute top-1/2 left-1/2 size-11 -translate-1/2 pointer-fine:hidden"></span> <svg viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></g></svg><!----></button><!--]--><!----></aside> <div class="fixed top-(calc(var(--topnav-h)-1px)) w-full h-14 z-20 flex items-center px-2 bg-background border-b"><!--[-1--><button data-slot="button" class="not-prose cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-foreground text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground size-9 relative" type="button" aria-label="Toggle sidebar" title="Toggle sidebar" command="show-modal" commandfor="sidebar"><span class="absolute top-1/2 left-1/2 size-11 -translate-1/2 pointer-fine:hidden"></span> <svg viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></g></svg><!----></button><!--]--><!----> <ul class="sticky ml-4 flex min-w-0 items-center gap-2 text-sm/6 whitespace-nowrap"><!--[-1--><li class="truncate text-foreground">All Samples</li><!--]--></ul><!----></div><!----> <main class="pt-14"><div class="max-w-7xl mx-auto px-4 py-8"><div class="max-w-5xl mx-auto"><h1>GoJS Samples</h1> <div class="prose"><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">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" rel="noopener">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: <code>npm create gojs-kit@latest</code></p></div></div> <div id="samplesDiv" class="mt-6 grid grid-cols-1 gap-y-4 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-10 xl:grid-cols-4 xl:gap-x-8"><!--[--><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="palette,svg,process,theme"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/flowchart"><span aria-hidden="true" class="absolute inset-0"></span> Interactive Flowchart</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout,contextmenus,buttons,inspector,theme"><!--[-1--><!--]--> <img src="./assets/images/screenshots/orgcharteditor.png" alt="An organizational chart that allows user editing and re-organizing of the hierarchy." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/orgChartEditor"><span aria-hidden="true" class="absolute inset-0"></span> Organizational Chart Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">An organizational chart that allows user editing and re-organizing of the hierarchy.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="buttons,process"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/stateChart"><span aria-hidden="true" class="absolute inset-0"></span> State Chart Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/familytree.png" alt="Shows a standard family tree." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/familyTree"><span aria-hidden="true" class="absolute inset-0"></span> Family Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a standard family tree.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout,overview"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/orgChartStatic"><span aria-hidden="true" class="absolute inset-0"></span> Org Chart with Overview</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,collections,layered-digraph,customlayout,geometries,commands"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/genogram"><span aria-hidden="true" class="absolute inset-0"></span> Genogram Family Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="geometries,links,process,monitoring,itemarrays,scada"><!--[-1--><!--]--> <img src="./assets/images/screenshots/industrialmonitor.png" alt="Example of a SCADA industrial monitoring diagram with updating data." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/industrialMonitor"><span aria-hidden="true" class="absolute inset-0"></span> SCADA Industrial Monitor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Example of a SCADA industrial monitoring diagram with updating data.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="palette,links,groups"><!--[-1--><!--]--> <img src="./assets/images/screenshots/networkconfig.png" alt="Shows a CISCO-style network configuration diagram, with the ability to group nodes into subnetworks." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/networkConfig"><span aria-hidden="true" class="absolute inset-0"></span> Network Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a CISCO-style network configuration diagram, with the ability to group nodes into subnetworks.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="geometries,grid,process,monitoring,animation,scada"><!--[-1--><!--]--> <img src="./assets/images/screenshots/processflow.png" alt="Industrial process flow diagram containing tanks, valves, and pipes, with animated flow in the pipes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/processFlow"><span aria-hidden="true" class="absolute inset-0"></span> Process Flow</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Industrial process flow diagram containing tanks, valves, and pipes, with animated flow in the pipes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="animation,geometries,monitoring,palette,tooltips,scada"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/security"><span aria-hidden="true" class="absolute inset-0"></span> Security Monitor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions,groups,monitoring"><!--[-1--><!--]--> <img src="./assets/images/screenshots/wafermap.png" alt="Example of a semiconductor manufacturing wafer map tool." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/waferMap"><span aria-hidden="true" class="absolute inset-0"></span> Wafer Map</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Example of a semiconductor manufacturing wafer map tool.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="vue"><!--[-1--><!--]--> <img src="./assets/images/screenshots/seatingchartvue.png" alt="A seating chart demo app built with GoJS and Vue" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="https://gojs.net/latest/projects/gojs-seatingchart/"><span aria-hidden="true" class="absolute inset-0"></span> GoJS Seating Chart Creator</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A seating chart demo app built with GoJS and Vue</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="svelte,extensions,tools"><!--[-1--><!--]--> <img src="./assets/images/screenshots/floorplanner.png" alt="A floor planner demo app built with GoJS and Svelte" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="https://gojs.net/latest/projects/gojs-floorplanner/"><span aria-hidden="true" class="absolute inset-0"></span> Svelte Floorplanner</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A floor planner demo app built with GoJS and Svelte</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="monitoring,scada,process,gauges,itemarrays,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/hmioperatorscreen.png" alt="A modern ISA-101 style high-performance HMI for a process skid: live simulation, an alarm banner, moving analog indicators, and clickable equipment icons." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/hmiOperatorScreen"><span aria-hidden="true" class="absolute inset-0"></span> HMI Operator Screen</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A modern ISA-101 style high-performance HMI for a process skid: live simulation, an alarm banner, moving analog indicators, and clickable equipment icons.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="palette,geometries,links,ports,groups,tools"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/circuitDesigner"><span aria-hidden="true" class="absolute inset-0"></span> Circuit Designer</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="links,layered-digraph,customlayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/sankey.png" alt="Sankey diagrams show the amount of flow between nodes by the width of the links." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/sankey"><span aria-hidden="true" class="absolute inset-0"></span> Sankey Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Sankey diagrams show the amount of flow between nodes by the width of the links.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="commands,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/orgcharteditor.png" alt="Demonstrates a customized CommandHandler to update a live HTML element for accessibility." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Accessibility"><span aria-hidden="true" class="absolute inset-0"></span> ARIA Accessibility</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a customized CommandHandler to update a live HTML element for accessibility.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,links,ports,contextmenus,buttons,theme,commands"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dynamicPorts"><span aria-hidden="true" class="absolute inset-0"></span> Dynamic Ports</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="animation,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/belts.png" alt="Show continuous belts winding by circular rollers" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/belts"><span aria-hidden="true" class="absolute inset-0"></span> Belts and Rollers</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Show continuous belts winding by circular rollers</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,gridlayout,layered-digraph,customlayout,groups,tools,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/swimLanes"><span aria-hidden="true" class="absolute inset-0"></span> Swim Lanes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="svelte"><!--[-1--><!--]--> <img src="./assets/images/screenshots/3d.png" alt="A three-dimensional viewer demo app built with GoJS, ThreeJS, and Svelte" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="https://gojs.net/latest/projects/gojs-3d/"><span aria-hidden="true" class="absolute inset-0"></span> GoJS with 3D</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A three-dimensional viewer demo app built with GoJS, ThreeJS, and Svelte</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,gridlayout,customlayout,groups,buttons,process,legend"><!--[-1--><!--]--> <img src="./assets/images/screenshots/kanban.png" alt="A Kanban board editor, allowing the categorization of editable tasks." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/kanban"><span aria-hidden="true" class="absolute inset-0"></span> Kanban Board Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A Kanban board editor, allowing the categorization of editable tasks.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tooltips,palette,grid,process"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/logicCircuit"><span aria-hidden="true" class="absolute inset-0"></span> Logic Circuit</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A functioning logic circuit diagram, which allows the user to make circuits using gates and wires.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,collections,contextmenus,tools,palette,buttons,geometries,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/pipes.png" alt="Showcasing nodes (Pipes) that can be joined, and will snap and drag together." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pipes"><span aria-hidden="true" class="absolute inset-0"></span> Pipes Diagram Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Showcasing nodes (Pipes) that can be joined, and will snap and drag together.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="groups,palette,html,commands,animation,buttons,geometries,itemarrays,tables,tools"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/vendingPlanogram"><span aria-hidden="true" class="absolute inset-0"></span> Vending Planogram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/records"><span aria-hidden="true" class="absolute inset-0"></span> Record Mapper</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Displays a variable number of fields for each record, with links mapping one field to another.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gridlayout,groups,palette,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/regrouping"><span aria-hidden="true" class="absolute inset-0"></span> Regrouping Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="process,tools"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/systemDynamics"><span aria-hidden="true" class="absolute inset-0"></span> System Dynamics Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="groups,treelayout,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/treeMapper"><span aria-hidden="true" class="absolute inset-0"></span> Tree Mapper</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="svelte"><!--[-1--><!--]--> <img src="./assets/images/screenshots/jsondiagram.png" alt="A Demo using GoJS, Monaco, and Svelte to create an editable JSON Diagram" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="https://gojs.net/latest/projects/gojs-jsondiagram/"><span aria-hidden="true" class="absolute inset-0"></span> JSON Diagram editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A Demo using GoJS, Monaco, and Svelte to create an editable JSON Diagram</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gridlayout,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/shapes.png" alt="Showcases all GoJS figures. You can define your own named Shape figures." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/shapes"><span aria-hidden="true" class="absolute inset-0"></span> Shape Figures</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Showcases all GoJS figures. You can define your own named Shape figures.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/treeView"><span aria-hidden="true" class="absolute inset-0"></span> Tree View</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a traditional 'Tree View' in a GoJS diagram, with optional orthogonal links between the nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="monitoring,grid"><!--[-1--><!--]--> <img src="./assets/images/screenshots/warehouse.png" alt="Warehouse layout designer with a drag-and-drop palette, reshapable areas, and disconnected links." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/warehouse"><span aria-hidden="true" class="absolute inset-0"></span> Warehouse Designer</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Warehouse layout designer with a drag-and-drop palette, reshapable areas, and disconnected links.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/dimensioning.png" alt="Demonstrates custom Links that show the distance between two points." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Dimensioning"><span aria-hidden="true" class="absolute inset-0"></span> Dimensioning Links</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates custom Links that show the distance between two points.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="react"><!--[-1--><!--]--> <img src="./assets/images/screenshots/tictactoe.png" alt="A GoJS Diagram component in React" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="https://gojs.net/latest/projects/gojs-tictactoe/"><span aria-hidden="true" class="absolute inset-0"></span> Interactive React Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A GoJS Diagram component in React</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,treelayout,customlayout"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/swimBands"><span aria-hidden="true" class="absolute inset-0"></span> Layer Bands</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Layer Bands are automatically created for each 'layer' of a TreeLayout, and run perpendicular to the layout.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="svg,gridlayout,animation"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/fonticons"><span aria-hidden="true" class="absolute inset-0"></span> Font Icons</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="gridlayout,treelayout,tooltips,geometries,svg,theme,animation"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/icons"><span aria-hidden="true" class="absolute inset-0"></span> SVG Icons</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="geometries,commands"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/blockEditor"><span aria-hidden="true" class="absolute inset-0"></span> Block Diagram Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="gauges,geometries,tools"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/controlGauges"><span aria-hidden="true" class="absolute inset-0"></span> Meters and Gauges</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Various meters and gauges that show particular values and can be modified by the user by dragging.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="animation,links,monitoring"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pathFinder"><span aria-hidden="true" class="absolute inset-0"></span> Path Finder</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="geometries,svg,process,palette,inspector,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/productioneditor.png" alt="A designer for creating production process diagrams." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/productionEditor"><span aria-hidden="true" class="absolute inset-0"></span> Production Process Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A designer for creating production process diagrams.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tooltips,geometries,svg,process,monitoring,html"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/productionProcess"><span aria-hidden="true" class="absolute inset-0"></span> Production Process</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Partially describes the production process for converting natural gas and oil byproducts into their end products.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/absolute"><span aria-hidden="true" class="absolute inset-0"></span> Absolute Positioning</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/addremovecolumns.png" alt="Demonstrates adding and removing and swapping columns of a Table Panel." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/addRemoveColumns"><span aria-hidden="true" class="absolute inset-0"></span> Add/Remove/Swap Columns in Table Panels</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates adding and removing and swapping columns of a Table Panel.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="palette,overview"><!--[-1--><!--]--> <img src="./assets/images/screenshots/addtopalette.png" alt="Select and edit a node and add a copy of it to the palette." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/addToPalette"><span aria-hidden="true" class="absolute inset-0"></span> Adding Node to Palette</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Select and edit a node and add a copy of it to the palette.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,circularlayout,tooltips,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/arrowheads.png" alt="Showcases all pre-defined Link arrowheads. You can define your own named arrowhead geometries." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/arrowheads"><span aria-hidden="true" class="absolute inset-0"></span> All Predefined Arrowheads for Links</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Showcases all pre-defined Link arrowheads. You can define your own named arrowhead geometries.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,links,tools,palette,geometries,grid"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/draggableLink"><span aria-hidden="true" class="absolute inset-0"></span> Draggable Link</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="animation"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/animatedFocus"><span aria-hidden="true" class="absolute inset-0"></span> Animated Node Attention</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="collections,force-directed,animation"><!--[-1--><!--]--> <img src="./assets/images/screenshots/pathanimation.png" alt="Animation of diagram parts (tokens) along link paths." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pathAnimation"><span aria-hidden="true" class="absolute inset-0"></span> Animation of Tokens along Link Paths</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Animation of diagram parts (tokens) along link paths.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gridlayout,customlayout,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Arranging"><span aria-hidden="true" class="absolute inset-0"></span> Arranging Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">The Arranging layout is a layout of layouts, plus a third layout for arranging left-overs.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,routers,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/avoidslinksrouter.png" alt="A custom Router that moves Link segments to parallelize and avoid overlaps." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/AvoidsLinksRouter"><span aria-hidden="true" class="absolute inset-0"></span> Avoids Links Router</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Router that moves Link segments to parallelize and avoid overlaps.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,geometries,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/balloonlink.png" alt="Demonstrates custom Links that create a 'Balloon' around the fromNode." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/BalloonLink"><span aria-hidden="true" class="absolute inset-0"></span> Ballon Links</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates custom Links that create a 'Balloon' around the fromNode.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,tooltips,charts"><!--[-1--><!--]--> <img src="./assets/images/screenshots/barcharts.png" alt="Simple bar charts or histograms within nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/barCharts"><span aria-hidden="true" class="absolute inset-0"></span> Bar Charts in Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Simple bar charts or histograms within nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="groups,tooltips,contextmenus,buttons,commands"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/basic"><span aria-hidden="true" class="absolute inset-0"></span> Basic with ToolTips and Context Menus</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="layered-digraph"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/beatPaths"><span aria-hidden="true" class="absolute inset-0"></span> Beat Paths</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/hoverbuttons.png" alt="Shows buttons in an Adornment upon hover over a node." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/hoverButtons"><span aria-hidden="true" class="absolute inset-0"></span> Buttons Shown on Hover</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows buttons in an Adornment upon hover over a node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,geometries,charts"><!--[-1--><!--]--> <img src="./assets/images/screenshots/candlestickcharts.png" alt="Simple candlestick or range charts within nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/candlestickCharts"><span aria-hidden="true" class="absolute inset-0"></span> Candlestick Charts</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Simple candlestick or range charts within nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="charts,html,frameworks"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/canvases"><span aria-hidden="true" class="absolute inset-0"></span> Chart.js Charts in Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows how to render a data-driven chart within each Node using the Chart.js library.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,circularlayout,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/clayout.png" alt="Shows CircularLayout and options. This layout positions nodes in a circular arrangement." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/cLayout"><span aria-hidden="true" class="absolute inset-0"></span> Circular Layout Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows CircularLayout and options. This layout positions nodes in a circular arrangement.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/classHierarchy"><span aria-hidden="true" class="absolute inset-0"></span> Class Hierarchy Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="links,treelayout,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/comments.png" alt="GoJS supports the notion of 'Comments', including the ability to create balloon-like comments." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/comments"><span aria-hidden="true" class="absolute inset-0"></span> Comment Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">GoJS supports the notion of 'Comments', including the ability to create balloon-like comments.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="force-directed"><!--[-1--><!--]--> <img src="./assets/images/screenshots/conceptmap.png" alt="A web of interlinked concepts displayed with a ForceDirected Layout, showcasing link labels." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/conceptMap"><span aria-hidden="true" class="absolute inset-0"></span> Concept Map</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A web of interlinked concepts displayed with a ForceDirected Layout, showcasing link labels.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/linksToLinks"><span aria-hidden="true" class="absolute inset-0"></span> Connecting Links to Links Using Link Label Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,links,ports"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/connectionBoxNode"><span aria-hidden="true" class="absolute inset-0"></span> Connection Box Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tooltips,monitoring"><!--[-1--><!--]--> <img src="./assets/images/screenshots/kittenmonitor.png" alt="Kitten Monitor with constant size markers and tooltips when zooming out." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/constantSize"><span aria-hidden="true" class="absolute inset-0"></span> Constant Size Nodes While Zooming in or out</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Kitten Monitor with constant size markers and tooltips when zooming out.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/contentalign.png" alt="Showcases alignment properties of the Diagram." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/contentAlign"><span aria-hidden="true" class="absolute inset-0"></span> Content Alignment Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Showcases alignment properties of the Diagram.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,groups,buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/grouping.png" alt="Demonstrates subgraphs that are created only as groups are expanded." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/grouping"><span aria-hidden="true" class="absolute inset-0"></span> Grouping</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates subgraphs that are created only as groups are expanded.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,tools,buttons,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/curvedlinkreshaping.png" alt="A custom Tool that lets the user reshape curved links with a single handle." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/CurvedLinkReshaping"><span aria-hidden="true" class="absolute inset-0"></span> Curved Link Reshaping Using Single Handle</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets the user reshape curved links with a single handle.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,links"><!--[-1--><!--]--> <img src="./assets/images/screenshots/multinodepathlinks.png" alt="Demonstrates custom routing for Links running through other Nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/multiNodePathLinks"><span aria-hidden="true" class="absolute inset-0"></span> Curved Multi-Node Path Link Routes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates custom routing for Links running through other Nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="animation"><!--[-1--><!--]--> <img src="./assets/images/screenshots/treeloadanimation.png" alt="Shows how to create a custom Diagram loading animation." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/treeLoadAnimation"><span aria-hidden="true" class="absolute inset-0"></span> Custom Animations Loading Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows how to create a custom Diagram loading animation.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="layered-digraph,buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/customexpandcollapse.png" alt="Shows how to create Buttons with custom behavior for expanding/collapsing of a graph." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/customExpandCollapse"><span aria-hidden="true" class="absolute inset-0"></span> Custom Expand/Collapse</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows how to create Buttons with custom behavior for expanding/collapsing of a graph.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="contextmenus,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/customcontextmenu.png" alt="Demonstrates the implementation of a custom HTML context menu." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/customContextMenu"><span aria-hidden="true" class="absolute inset-0"></span> HTML Context Menu</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates the implementation of a custom HTML context menu.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,geometries,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/parallelroute.png" alt="Demonstrates custom Links that route parallel to other Links between the same two ports." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ParallelRoute"><span aria-hidden="true" class="absolute inset-0"></span> Parallel Routing</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates custom Links that route parallel to other Links between the same two ports.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="animation"><!--[-1--><!--]--> <img src="./assets/images/screenshots/customanimations.png" alt="Shows how to create several custom Node animations." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/customAnimations"><span aria-hidden="true" class="absolute inset-0"></span> Custom Node Animations</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows how to create several custom Node animations.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border"><!--[-1--><!--]--> <img src="./assets/images/screenshots/panellayout.png" alt="Shows how to create a custom PaneLayout." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/panelLayout"><span aria-hidden="true" class="absolute inset-0"></span> Custom Panel Layout: Cascading Elements</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows how to create a custom PaneLayout.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/customtexteditingtool.png" alt="Demonstrates using a custom HTML element for in-place editing of a TextBlock." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/customTextEditingTool"><span aria-hidden="true" class="absolute inset-0"></span> Custom Text Editors</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates using a custom HTML element for in-place editing of a TextBlock.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,layered-digraph,ports,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/dataflow.png" alt="Show the processing steps involved in a database transformation or query, with labeled ports." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dataFlow"><span aria-hidden="true" class="absolute inset-0"></span> Data Flow Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Show the processing steps involved in a database transformation or query, with labeled ports.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="groups,extensions,inspector,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/datainspector.png" alt="A simple drop-in for inspecting and editing Part data." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/DataInspector"><span aria-hidden="true" class="absolute inset-0"></span> Data Inspector</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A simple drop-in for inspecting and editing Part data.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tooltips,html,animation"><!--[-1--><!--]--> <img src="./assets/images/screenshots/datavisualization.png" alt="A data-visualization demonstration that showcases GoJS interacting with other elements on the page." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dataVisualization"><span aria-hidden="true" class="absolute inset-0"></span> Data Visualization</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A data-visualization demonstration that showcases GoJS interacting with other elements on the page.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="grid"><!--[-1--><!--]--> <img src="./assets/images/screenshots/scrollmodes.png" alt="Shows infinite scrolling and positionComputation." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/scrollModes"><span aria-hidden="true" class="absolute inset-0"></span> Diagram Scroll Modes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows infinite scrolling and positionComputation.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="geometries,grid"><!--[-1--><!--]--> <img src="./assets/images/screenshots/rulereddiagram.png" alt="A diagram with Graduated Panels at the edges acting as rulers." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ruleredDiagram"><span aria-hidden="true" class="absolute inset-0"></span> Diagram with Rulers</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A diagram with Graduated Panels at the edges acting as rulers.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,geometries,charts"><!--[-1--><!--]--> <img src="./assets/images/screenshots/donutcharts.png" alt="Ring-shaped pie charts within nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/donutCharts"><span aria-hidden="true" class="absolute inset-0"></span> Donut Charts in Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Ring-shaped pie charts within nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,treelayout"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/doubleTree"><span aria-hidden="true" class="absolute inset-0"></span> Double Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,collections,tools"><!--[-1--><!--]--> <img src="./assets/images/screenshots/records.png" alt="Drag and drop fields from/to record Nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dragDropFields"><span aria-hidden="true" class="absolute inset-0"></span> Drag and Drop Fields Between Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Drag and drop fields from/to record Nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="palette,html,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/htmldragdrop.png" alt="Demonstrates dragging and dropping from HTML, and pasting from the external clipboard." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/htmlDragDrop"><span aria-hidden="true" class="absolute inset-0"></span> Drag and Drop From HTML Element to Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates dragging and dropping from HTML, and pasting from the external clipboard.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/DragCreating"><span aria-hidden="true" class="absolute inset-0"></span> Drag Creating Tool</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,collections,tools,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/records.png" alt="Drag out fields from record Nodes to an HTML element." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dragOutFields"><span aria-hidden="true" class="absolute inset-0"></span> Drag Fields Out of Diagram to HTML Element</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Drag out fields from record Nodes to an HTML element.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/DragZooming"><span aria-hidden="true" class="absolute inset-0"></span> Drag Zooming</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets a user draw a box showing what to zoom in to.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="Demonstrates drag and drop between two different diagrams using a shared UndoManager." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/twoDiagrams"><span aria-hidden="true" class="absolute inset-0"></span> Two Diagrams Drag-and-Drop</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates drag and drop between two different diagrams using a shared UndoManager.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/NonRealtimeDragging"><span aria-hidden="true" class="absolute inset-0"></span> NonRealtime Dragging</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/NodeLabelDragging"><span aria-hidden="true" class="absolute inset-0"></span> Dragging Node Label</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets the user drag a label in a Spot Panel of a Node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/LinkLabelDragging"><span aria-hidden="true" class="absolute inset-0"></span> Dragging Link Label</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/LinkLabelOnPathDragging"><span aria-hidden="true" class="absolute inset-0"></span> Dragging Link Label along Path</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="extensions,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/drawcommandhandler.png" alt="Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/DrawCommandHandler"><span aria-hidden="true" class="absolute inset-0"></span> Draw Command Handler</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,force-directed,buttons,theme"><!--[-1--><!--]--> <img src="./assets/images/screenshots/entityrelationship.png" alt="An entity relationship diagram, showcasing data binding with item arrays." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/entityRelationship"><span aria-hidden="true" class="absolute inset-0"></span> Entity Relationship Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">An entity relationship diagram, showcasing data binding with item arrays.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/euler.png" alt="A read-only diagram where clicking on a node will open a new webpage." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/euler"><span aria-hidden="true" class="absolute inset-0"></span> Euler Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A read-only diagram where clicking on a node will open a new webpage.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="force-directed,buttons,commands"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/incrementalTree"><span aria-hidden="true" class="absolute inset-0"></span> Incremental Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout,tooltips,legend"><!--[-1--><!--]--> <img src="./assets/images/screenshots/familytreejp.png" alt="Shows a standard family tree." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/familyTreeJP"><span aria-hidden="true" class="absolute inset-0"></span> Family Tree Diagram, Japanese</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a standard family tree.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/faulttree.png" alt="A fault tree diagram with collapsing/expanding subtrees and gates at each non-root node." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/faultTree"><span aria-hidden="true" class="absolute inset-0"></span> Fault Tree Analysis</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A fault tree diagram with collapsing/expanding subtrees and gates at each non-root node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,force-directed,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/distances.png" alt="Show distances between two nodes and highlights one of all possible paths between the nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/distances"><span aria-hidden="true" class="absolute inset-0"></span> Distances and Paths</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Show distances between two nodes and highlights one of all possible paths between the nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,links,treelayout,customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/fishbone.png" alt="The Fishbone or Ishikawa layout is a tree layout for cause-and-effect relationships." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Fishbone"><span aria-hidden="true" class="absolute inset-0"></span> Fishbone Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">The Fishbone or Ishikawa layout is a tree layout for cause-and-effect relationships.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="layered-digraph,contextmenus,tools,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/flowBuilder"><span aria-hidden="true" class="absolute inset-0"></span> Flow Builder for Building Acyclic Graphs</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a flow builder where nodes/links can be created or dropped onto a recycling node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/panellayoutflow.png" alt="A custom PanelLayout that arranges panel elements into rows or columns." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PanelLayoutFlow"><span aria-hidden="true" class="absolute inset-0"></span> Flow Layout in Panels</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom PanelLayout that arranges panel elements into rows or columns.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,force-directed,html"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/fdLayout"><span aria-hidden="true" class="absolute inset-0"></span> Force Directed Layout Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions,geometries"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/FreehandDrawing"><span aria-hidden="true" class="absolute inset-0"></span> Freehand Drawing</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets the user interactively draw a line, converting it into a Shape.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="circularlayout,customlayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/friendwheel.png" alt="Demonstrates a customized CircularLayout." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/friendWheel"><span aria-hidden="true" class="absolute inset-0"></span> Friend Wheel</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a customized CircularLayout.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/localView"><span aria-hidden="true" class="absolute inset-0"></span> Diagram and Local View</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border"><!--[-1--><!--]--> <img src="./assets/images/screenshots/gameoflife.png" alt="A cellular automation simulation." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/gameOfLife"><span aria-hidden="true" class="absolute inset-0"></span> Game of Life Cellular Automation</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A cellular automation simulation.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tooltips,tools"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/leaflet"><span aria-hidden="true" class="absolute inset-0"></span> Diagrams and Leaflet.js</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A GoJS diagram atop a Leaflet.js map, with nodes placed at latitude and longitude based locations.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/geometryreshaping.png" alt="A custom Tool that supports interactive reshaping of Geometries." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/GeometryReshaping"><span aria-hidden="true" class="absolute inset-0"></span> Geometry Reshaping</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that supports interactive reshaping of Geometries.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,tooltips,tools,buttons,geometries,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/grafcet.png" alt="A Grafcet is a kind of sequential function chart used in automation design." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/grafcet"><span aria-hidden="true" class="absolute inset-0"></span> Grafcet Diagram Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A Grafcet is a kind of sequential function chart used in automation design.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gridlayout"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/gLayout"><span aria-hidden="true" class="absolute inset-0"></span> Grid Layout Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="groups,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/roundedgroups.png" alt="Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/roundedGroups"><span aria-hidden="true" class="absolute inset-0"></span> Groups with Rounded Headers and Footers</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/GuidedDragging"><span aria-hidden="true" class="absolute inset-0"></span> Guided Dragging</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,links,customlayout,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/timeline.png" alt="A simple timeline with events arranged along a line." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/timeline"><span aria-hidden="true" class="absolute inset-0"></span> Timeline</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A simple timeline with events arranged along a line.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="palette,html,inspector,frameworks"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/htmlInteraction"><span aria-hidden="true" class="absolute inset-0"></span> HTML Interaction</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="extensions,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/zoomslider.png" alt="Demonstrates use of the ZoomSlider class to zoom in/out using a control." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ZoomSlider"><span aria-hidden="true" class="absolute inset-0"></span> HTML Zoom Slider for Zooming</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates use of the ZoomSlider class to zoom in/out using a control.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/hyperlink.png" alt="Demonstrates usage of the HyperlinkText extension." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Hyperlink"><span aria-hidden="true" class="absolute inset-0"></span> Hyperlink Text</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates usage of the HyperlinkText extension.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gauges,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/instrumentgauge.png" alt="A gauge using a scale made with a Graduated Panel." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/instrumentGauge"><span aria-hidden="true" class="absolute inset-0"></span> Instrument Gauges</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A gauge using a scale made with a Graduated Panel.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,layered-digraph,palette,overview"><!--[-1--><!--]--> <img src="./assets/images/screenshots/flowgrammer.png" alt="Demonstrates a flow-chart-like editor of a restricted syntax language. Uses the ParallelLayout extension." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/flowgrammer"><span aria-hidden="true" class="absolute inset-0"></span> Flowgrammer Visual Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a flow-chart-like editor of a restricted syntax language. Uses the ParallelLayout extension.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,tooltips,buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/decisiontree.png" alt="Allows a user to make progressive decisions." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/decisionTree"><span aria-hidden="true" class="absolute inset-0"></span> Decision Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Allows a user to make progressive decisions.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/polygondrawing.png" alt="A custom Tool that lets the user interactively draw polygons and polyline Shapes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PolygonDrawing"><span aria-hidden="true" class="absolute inset-0"></span> Interactive Drawing of Polygons or Polylines</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets the user interactively draw polygons and polyline Shapes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="force-directed,customlayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/interactiveforce.png" alt="A continuous ForceDirectedLayout that occurs as the user drags around a node." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/interactiveForce"><span aria-hidden="true" class="absolute inset-0"></span> Continuous Interactive Force Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A continuous ForceDirectedLayout that occurs as the user drags around a node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="grid"><!--[-1--><!--]--> <img src="./assets/images/screenshots/gantt.png" alt="Demonstrates a Gantt chart with a collapsible tree of tasks" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/gantt"><span aria-hidden="true" class="absolute inset-0"></span> Gantt Chart</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a Gantt chart with a collapsible tree of tasks</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,treelayout,contextmenus,buttons,commands"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/mindMap"><span aria-hidden="true" class="absolute inset-0"></span> Mind Map Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,treelayout,buttons,theme"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/IVRtree"><span aria-hidden="true" class="absolute inset-0"></span> IVR Tree Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/LassoSelecting"><span aria-hidden="true" class="absolute inset-0"></span> Lasso Selecting</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="collections,layered-digraph,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/ldlayout.png" alt="Shows LayeredDigraphLayout and options. Arranges nodes of directed graphs into layers (rows or columns)." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ldLayout"><span aria-hidden="true" class="absolute inset-0"></span> Layered Digraph Layout Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows LayeredDigraphLayout and options. Arranges nodes of directed graphs into layers (rows or columns).</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,customlayout,groups,buttons,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Parallel"><span aria-hidden="true" class="absolute inset-0"></span> Parallel Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="contextmenus,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/htmllightboxcontextmenu.png" alt="Shows a LightBox style HTML Context Menu." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/htmlLightBoxContextMenu"><span aria-hidden="true" class="absolute inset-0"></span> LightBox Style HTML Context Menu</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a LightBox style HTML Context Menu.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border"><!--[-1--><!--]--> <img src="./assets/images/screenshots/dragunoccupied.png" alt="Demonstrates a function to avoid any overlapping of nodes during dragging." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dragUnoccupied"><span aria-hidden="true" class="absolute inset-0"></span> Drag Unoccupied</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a function to avoid any overlapping of nodes during dragging.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PolylineLinking"><span aria-hidden="true" class="absolute inset-0"></span> Polyline Linking</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom LinkingTool that lets the user determine the route of a new Link by clicking.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="groups,palette"><!--[-1--><!--]--> <img src="./assets/images/screenshots/macros.png" alt="Demonstrates an automatic ungrouping of nodes when dropping an element on the diagram." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/macros"><span aria-hidden="true" class="absolute inset-0"></span> Macros from Palette</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates an automatic ungrouping of nodes when dropping an element on the diagram.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout,overview,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/magnifier.png" alt="An Overview used as a magnifying glass." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/magnifier"><span aria-hidden="true" class="absolute inset-0"></span> Magnifier View</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">An Overview used as a magnifying glass.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/minimal"><span aria-hidden="true" class="absolute inset-0"></span> Minimal</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="export"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="Minimal, showing image Blob creation with Diagram.makeImageData, and download." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/minimalBlob"><span aria-hidden="true" class="absolute inset-0"></span> Download Image Blob</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Minimal, showing image Blob creation with Diagram.makeImageData, and download.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="svg,export"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="Minimal, showing SVG creation with Diagram.makeSvg, and download." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/minimalSvg"><span aria-hidden="true" class="absolute inset-0"></span> Download SVG</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Minimal, showing SVG creation with Diagram.makeSvg, and download.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,force-directed,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/multicolorlinks.png" alt="Demonstrates a custom Link that can be stroked with multiple consecutive colors." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/multiColorLinks"><span aria-hidden="true" class="absolute inset-0"></span> Multi-color Link Paths</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a custom Link that can be stroked with multiple consecutive colors.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,force-directed,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/multiarrow.png" alt="A custom orthogonal Link that draws arrowheads at the end of each segment." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/multiArrow"><span aria-hidden="true" class="absolute inset-0"></span> Multiple Arrowheads Along Link Path</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom orthogonal Link that draws arrowheads at the end of each segment.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,circularlayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/doublecircle.png" alt="Multiple circles using repeated CircularLayouts." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/doubleCircle"><span aria-hidden="true" class="absolute inset-0"></span> Double Circle</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Multiple circles using repeated CircularLayouts.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout,tooltips,buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/orgchartassistants.png" alt="Shows an org chart with assistant nodes at the side, above regular child nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/orgChartAssistants"><span aria-hidden="true" class="absolute inset-0"></span> Org Chart with Assistants on the Side</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows an org chart with assistant nodes at the side, above regular child nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout,tooltips,buttons"><!--[-1--><!--]--> <img src="./assets/images/screenshots/orgchartextras.png" alt="Shows an org chart with extra links and expand/collapse functionality." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/orgChartExtras"><span aria-hidden="true" class="absolute inset-0"></span> Org Chart With Extra Relationships</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows an org chart with extra links and expand/collapse functionality.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/packedhierarchy.png" alt="A customized PackedLayout that arranges nested circular groups." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PackedHierarchy"><span aria-hidden="true" class="absolute inset-0"></span> Packed Hierarchy of Groups</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A customized PackedLayout that arranges nested circular groups.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/packedlayout.png" alt="A custom Layout that positions nodes in a packed area." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PackedLayout"><span aria-hidden="true" class="absolute inset-0"></span> Packed Layout Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Layout that positions nodes in a packed area.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,layered-digraph,palette,buttons,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/pageflow.png" alt="A diagram representation of webpage flow." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pageFlow"><span aria-hidden="true" class="absolute inset-0"></span> Page Flow Diagram Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A diagram representation of webpage flow.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,customlayout,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/parseTree"><span aria-hidden="true" class="absolute inset-0"></span> Parse Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tables,layered-digraph,legend"><!--[-1--><!--]--> <img src="./assets/images/screenshots/pert.png" alt="A simple PERT chart, showcasing GoJS table panels and RowColumnDefinition properties." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PERT"><span aria-hidden="true" class="absolute inset-0"></span> PERT Chart with Legend</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A simple PERT chart, showcasing GoJS table panels and RowColumnDefinition properties.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,collections,tooltips,buttons,geometries,charts,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/dynamicpiechart.png" alt="Dynamic pie chart with selectable slices that can change size." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dynamicPieChart"><span aria-hidden="true" class="absolute inset-0"></span> Dynamic Pie Chart</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Dynamic pie chart with selectable slices that can change size.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,tooltips,geometries,charts"><!--[-1--><!--]--> <img src="./assets/images/screenshots/piecharts.png" alt="Simple pie charts within nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pieCharts"><span aria-hidden="true" class="absolute inset-0"></span> Pie Charts</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Simple pie charts within nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/pipetree.png" alt="A tree layout with rectangular nodes at alternating angles and no links." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pipeTree"><span aria-hidden="true" class="absolute inset-0"></span> Pipe Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A tree layout with rectangular nodes at alternating angles and no links.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="groups,palette,grid,frameworks,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/planogram.png" alt="Drag-and-drop items from the Palette onto racks in the Diagram." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/planogram"><span aria-hidden="true" class="absolute inset-0"></span> Planogram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Drag-and-drop items from the Palette onto racks in the Diagram.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,groups,tooltips"><!--[-1--><!--]--> <img src="./assets/images/screenshots/navigation.png" alt="Displays relationships between different parts of a diagram." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/navigation"><span aria-hidden="true" class="absolute inset-0"></span> Navigation</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Displays relationships between different parts of a diagram.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="buttons,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/radialadornment.png" alt="An adornment showing buttons in a circle on one selected node." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/radialAdornment"><span aria-hidden="true" class="absolute inset-0"></span> Radial Adornment</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">An adornment showing buttons in a circle on one selected node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,treelayout,tools,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/RealtimeDragSelecting"><span aria-hidden="true" class="absolute inset-0"></span> Realtime Selection</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets a user drag and create a box to select nodes and links.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,tooltips,customlayout,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/radial"><span aria-hidden="true" class="absolute inset-0"></span> Radial Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Arrange people in circles around a central person, in layers according to distance from the central person.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,tooltips,geometries,customlayout,extensions"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/radialPartition"><span aria-hidden="true" class="absolute inset-0"></span> Radial Partition</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Arrange people in rings around a central person, in layers according to distance from the central person.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,gridlayout,treelayout,groups,buttons,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/regroupingtreeview.png" alt="Regrouping with tree view of grouping hierarchy." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/regroupingTreeView"><span aria-hidden="true" class="absolute inset-0"></span> Regrouping Editor and Simultaneous Tree View</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Regrouping with tree view of grouping hierarchy.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="svg,export"><!--[-1--><!--]--> <img src="./assets/images/screenshots/svgdataurl.png" alt="In makeSvg, replace image sources with Base64" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/svgDataUrl"><span aria-hidden="true" class="absolute inset-0"></span> Rendering SVG to Data URL with Inline Images</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">In makeSvg, replace image sources with Base64</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/rescaling.png" alt="A custom Tool that lets a user change the scale of an object." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Rescaling"><span aria-hidden="true" class="absolute inset-0"></span> Rescaling by Dragging Handle</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets a user change the scale of an object.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/sectorreshaping.png" alt="A custom Tool that supports interactive reshaping of pie-shaped sectors of circles." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/SectorReshaping"><span aria-hidden="true" class="absolute inset-0"></span> Reshaping and Rotating Sectors of Circles</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that supports interactive reshaping of pie-shaped sectors of circles.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,tools,palette,extensions,grid"><!--[-1--><!--]--> <img src="./assets/images/screenshots/snaplinkreshaping.png" alt="A custom Tool that allows reshaping links with grid snapping." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/SnapLinkReshaping"><span aria-hidden="true" class="absolute inset-0"></span> Reshaping Links Snaps to Grid</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that allows reshaping links with grid snapping.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,tools,extensions,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/orthogonallinkreshaping.png" alt="A custom Tool that lets the user reshape orthogonal links by dragging entire segments." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/OrthogonalLinkReshaping"><span aria-hidden="true" class="absolute inset-0"></span> Orthogonal Link Reshaping</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets the user reshape orthogonal links by dragging entire segments.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/resizemultiple.png" alt="A custom ResizingTool that lets the user resize many selected objects at once." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ResizeMultiple"><span aria-hidden="true" class="absolute inset-0"></span> Resizing Multiple</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom ResizingTool that lets the user resize many selected objects at once.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,overview,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/overviewresizing.png" alt="A custom Tool which allows the user to resize the overview box." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/OverviewResizing"><span aria-hidden="true" class="absolute inset-0"></span> Resizing of Overview Box</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool which allows the user to resize the overview box.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,tools,extensions,geometries"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ColumnResizing"><span aria-hidden="true" class="absolute inset-0"></span> Table Row and Column Resizing</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="tools"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="Demonstrates customization of pinch-zooming to scale a node." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/pinchResizing"><span aria-hidden="true" class="absolute inset-0"></span> Resizing via Pinch Zooming</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates customization of pinch-zooming to scale a node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/rotatemultiple.png" alt="A custom RotatingTool that lets the user rotate many selected objects at once." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/RotateMultiple"><span aria-hidden="true" class="absolute inset-0"></span> Rotate Multiple</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom RotatingTool that lets the user rotate many selected objects at once.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/spotrotating.png" alt="A custom RotatingTool that lets the user shift the rotation point." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/SpotRotating"><span aria-hidden="true" class="absolute inset-0"></span> Rotating Node about Movable Rotation Spot</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom RotatingTool that lets the user shift the rotation point.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="routers,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/linklabelrouter.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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/LinkLabelRouter"><span aria-hidden="true" class="absolute inset-0"></span> Link Label Router</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="extensions,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="Demonstrates saving and loading model files on the local machine" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/saveAndLoadLocalFiles"><span aria-hidden="true" class="absolute inset-0"></span> Local Files</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates saving and loading model files on the local machine</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,buttons,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/scrollingtable.png" alt="Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/ScrollingTable"><span aria-hidden="true" class="absolute inset-0"></span> Scrolling Table Panels with ScrollBars</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/selectablefields.png" alt="Records with fields that the user can select." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/selectableFields"><span aria-hidden="true" class="absolute inset-0"></span> Selectable Fields in Record Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Records with fields that the user can select.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="itemarrays,ports,geometries,commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/selectableports.png" alt="A Node with ports that can be selected and deleted." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/selectablePorts"><span aria-hidden="true" class="absolute inset-0"></span> Selectable, Deletable Ports in Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A Node with ports that can be selected and deleted.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="buttons,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/adornmentbuttons.png" alt="Selected nodes show a row of buttons that execute commands or start tools." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/adornmentButtons"><span aria-hidden="true" class="absolute inset-0"></span> Adornment Buttons</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Selected nodes show a row of buttons that execute commands or start tools.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,groups,tools,grid,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/sequencediagram.png" alt="A sequence diagram illustrates how different processes interact with one-another and in what order." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/sequenceDiagram"><span aria-hidden="true" class="absolute inset-0"></span> Sequence Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A sequence diagram illustrates how different processes interact with one-another and in what order.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="layered-digraph,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/sequentialfunction.png" alt="A sequence diagram that shows different node templates, LayeredDigraphLayout and in-place text editing." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/sequentialFunction"><span aria-hidden="true" class="absolute inset-0"></span> Sequential Function Chart</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A sequence diagram that shows different node templates, LayeredDigraphLayout and in-place text editing.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/serpentine.png" alt="A custom Layout that positions a chain of nodes in rows of alternating direction." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Serpentine"><span aria-hidden="true" class="absolute inset-0"></span> Serpentine Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Layout that positions a chain of nodes in rows of alternating direction.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,customlayout,groups,tools"><!--[-1--><!--]--> <img src="./assets/images/screenshots/sharedstates.png" alt="As an alternative to using Groups, this manages Nodes that simultaneously belong to multiple containers." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/sharedStates"><span aria-hidden="true" class="absolute inset-0"></span> Shared States not using Groups</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">As an alternative to using Groups, this manages Nodes that simultaneously belong to multiple containers.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,tools,extensions,geometries"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/LinkShifting"><span aria-hidden="true" class="absolute inset-0"></span> Shifting Link Connections</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="ports,tooltips,tools,palette,extensions,grid"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/PortShifting"><span aria-hidden="true" class="absolute inset-0"></span> Shifting Ports in Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Tool that lets the user drag a port in a Spot Panel of a Node.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="monitoring,animation"><!--[-1--><!--]--> <img src="./assets/images/screenshots/shopfloormonitor.png" alt="Shows the continuously updating state of a number of stations on an imaginary shop floor." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/shopFloorMonitor"><span aria-hidden="true" class="absolute inset-0"></span> Shop Floor Monitor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows the continuously updating state of a number of stations on an imaginary shop floor.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/DOMTree"><span aria-hidden="true" class="absolute inset-0"></span> DOM Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="collections,contextmenus,palette,buttons,extensions,html"><!--[-1--><!--]--> <img src="./assets/images/screenshots/robot.png" alt="Demonstrates use of the Diagram methods to simulate mouse events." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Robot"><span aria-hidden="true" class="absolute inset-0"></span> Simulating Input using InputEvents</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates use of the Diagram methods to simulate mouse events.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="grid,legend"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/singlePage"><span aria-hidden="true" class="absolute inset-0"></span> Single Page Diagram Editor with Legend</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,geometries,charts"><!--[-1--><!--]--> <img src="./assets/images/screenshots/sparklinegraphs.png" alt="Simple sparkline charts within nodes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/sparklineGraphs"><span aria-hidden="true" class="absolute inset-0"></span> Sparkline Charts in Nodes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Simple sparkline charts within nodes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/spiral.png" alt="A custom Layout that positions a chain of nodes in a spiral." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Spiral"><span aria-hidden="true" class="absolute inset-0"></span> Spiral Layout of Node Chains</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Layout that positions a chain of nodes in a spiral.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,buttons,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/spreadsheet.png" alt="An example of nested Table Panels forming a spreadsheet-like grid." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/spreadsheet"><span aria-hidden="true" class="absolute inset-0"></span> Spreadsheet-like Nested Table Panels</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">An example of nested Table Panels forming a spreadsheet-like grid.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="html,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/texteditor.png" alt="Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/TextEditor"><span aria-hidden="true" class="absolute inset-0"></span> Standard HTMLInfo Text Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="buttons,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/statechartincremental.png" alt="State Chart using incremental JSON." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/stateChartIncremental"><span aria-hidden="true" class="absolute inset-0"></span> State Chart Editor Saving Incremental JSON</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">State Chart using incremental JSON.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/swimlanelayout.png" alt="A custom Layout that puts nodes into swimlanes with dependencies that cross lanes." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/SwimLaneLayout"><span aria-hidden="true" class="absolute inset-0"></span> Swim Lane Layout Keeps Nodes in their Lanes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Layout that puts nodes into swimlanes with dependencies that cross lanes.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,collections,customlayout,groups,tools,palette,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/table.png" alt="A custom Layout that arranges Nodes just as a Table Panel arranges GraphObjects." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Table"><span aria-hidden="true" class="absolute inset-0"></span> Table Layout of Nodes in Rows and Columns</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A custom Layout that arranges Nodes just as a Table Panel arranges GraphObjects.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,force-directed,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/taperedlinks.png" alt="Demonstrates a custom Geometry for Link paths." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/taperedLinks"><span aria-hidden="true" class="absolute inset-0"></span> Tapered Links</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates a custom Geometry for Link paths.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gauges,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/thermometer.png" alt="Graduated thermometer scales using Graduated Panel." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/thermometer"><span aria-hidden="true" class="absolute inset-0"></span> Thermometer Nodes using Graduated Panels</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Graduated thermometer scales using Graduated Panel.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="geometries,svg"><!--[-1--><!--]--> <img src="./assets/images/screenshots/tiger.png" alt="Shows a tiger rendered in SVG without using a Picture" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/tiger"><span aria-hidden="true" class="absolute inset-0"></span> SVG Tiger using Shapes</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a tiger rendered in SVG without using a Picture</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,treelayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/tournament.png" alt="Tournament bracket with dynamic advancement as scores are entered." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/tournament"><span aria-hidden="true" class="absolute inset-0"></span> Tournament Bracket</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Tournament bracket with dynamic advancement as scores are entered.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,treelayout,html"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/tLayout"><span aria-hidden="true" class="absolute inset-0"></span> Tree Layout Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows TreeLayout and options. Positions nodes of a tree-structured graph in layers (rows or columns). </p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,customlayout,groups,tooltips,extensions,html"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/TreeMap"><span aria-hidden="true" class="absolute inset-0"></span> Tree Map of Nested Groups</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/triStateCheckBoxTree"><span aria-hidden="true" class="absolute inset-0"></span> Tri-state CheckBox Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/twohalves.png" alt="Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/twoHalves"><span aria-hidden="true" class="absolute inset-0"></span> Two Rounded Halves</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,treelayout,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/umlClass"><span aria-hidden="true" class="absolute inset-0"></span> UML Class Diagram Editor</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A UML Class diagram shows software classes and their properties and methods, and the relationships between them.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,buttons,html"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/updateDemo"><span aria-hidden="true" class="absolute inset-0"></span> Update Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="Shows different options for ToolManager's gestureBehavior." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/gestureBehavior"><span aria-hidden="true" class="absolute inset-0"></span> Various Gestures Demo</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows different options for ToolManager's gestureBehavior.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,buttons,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/checkboxes.png" alt="Demonstrates simple uses of CheckBoxButtons." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/CheckBoxes"><span aria-hidden="true" class="absolute inset-0"></span> CheckBox Styles</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates simple uses of CheckBoxButtons.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,itemarrays,buttons,extensions"><!--[-1--><!--]--> <img src="./assets/images/screenshots/Toggles.png" alt="Demonstrates simple uses of ToggleSwitches." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/Toggles"><span aria-hidden="true" class="absolute inset-0"></span> Toggle Styles</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Demonstrates simple uses of ToggleSwitches.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="collections,links,treelayout,geometries"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/relationships"><span aria-hidden="true" class="absolute inset-0"></span> Visual Relationships</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows how you can create custom renderings for Links by repeatedly drawing GraphObjects along the route.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,circularlayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/venn.png" alt="Venn Diagram of Common Glyphs in Greek, Latin, and Russian" class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/venn"><span aria-hidden="true" class="absolute inset-0"></span> Venn Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Venn Diagram of Common Glyphs in Greek, Latin, and Russian</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,layered-digraph,ports,process"><!--[-1--><!--]--> <img src="./assets/images/screenshots/dataflowvertical.png" alt="Same as Data Flow, but vertically oriented, and with slightly different styling." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/dataFlowVertical"><span aria-hidden="true" class="absolute inset-0"></span> Data Flow Diagram (Vertical)</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Same as Data Flow, but vertically oriented, and with slightly different styling.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tables,gridlayout,layered-digraph,customlayout,groups,tools,buttons"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/swimLanesVertical"><span aria-hidden="true" class="absolute inset-0"></span> Swim Lanes (Vertical)</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="collections,groups,tooltips,buttons,performance"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/virtualized"><span aria-hidden="true" class="absolute inset-0"></span> Virtualized Diagram no Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="collections,force-directed,customlayout,tooltips,performance"><!--[-1--><!--]--> <img src="./assets/images/screenshots/virtualizedforcelayout.png" alt="Shows a virtualized ForceDirectedLayout with GraphLinksModel." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/virtualizedForceLayout"><span aria-hidden="true" class="absolute inset-0"></span> Virtualized Diagram with Force Directed Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a virtualized ForceDirectedLayout with GraphLinksModel.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="customlayout,extensions,performance"><!--[-1--><!--]--> <img src="./assets/images/screenshots/virtualizedpacked.png" alt="A virtualized version of PackedLayout that positions nodes in a packed area." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/VirtualizedPacked"><span aria-hidden="true" class="absolute inset-0"></span> Virtualized Diagram with Packed Layout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A virtualized version of PackedLayout that positions nodes in a packed area.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout,tooltips,performance"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/virtualizedTree"><span aria-hidden="true" class="absolute inset-0"></span> Virtualized Tree</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="collections,treelayout,customlayout,tooltips,performance"><!--[-1--><!--]--> <img src="./assets/images/screenshots/virtualizedtree.png" alt="Shows a virtualized TreeLayout with TreeModel." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/virtualizedTreeLayout"><span aria-hidden="true" class="absolute inset-0"></span> Virtualized Tree with TreeLayout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a virtualized TreeLayout with TreeModel.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="treelayout"><!--[-1--><!--]--> <img src="./assets/images/screenshots/visualtree.png" alt="This sample shows the actual visual tree of a running Diagram, using a second Diagram." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/visualTree"><span aria-hidden="true" class="absolute inset-0"></span> Visual Tree of another Diagram</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">This sample shows the actual visual tree of a running Diagram, using a second Diagram.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="gridlayout,treelayout,groups"><!--[-1--><!--]--> <img src="./assets/images/screenshots/visualtreegrouping.png" alt="This shows the same visual tree using nested Groups instead of nodes and links." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/visualTreeGrouping"><span aria-hidden="true" class="absolute inset-0"></span> Visual Tree using Groups</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">This shows the same visual tree using nested Groups instead of nodes and links.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="links,treelayout,geometries"><!--[-1--><!--]--> <img src="./assets/images/screenshots/wordcloud.png" alt="A word cloud visualization using the PackedLayout extension." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/wordcloud"><span aria-hidden="true" class="absolute inset-0"></span> Word Cloud using PackedLayout</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">A word cloud visualization using the PackedLayout extension.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="commands"><!--[-1--><!--]--> <img src="./assets/images/screenshots/minimal.png" alt="When zooming, change the spacing of the Nodes, not the Diagram.scale." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/spacingZoom"><span aria-hidden="true" class="absolute inset-0"></span> Spacing Zoom</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">When zooming, change the spacing of the Nodes, not the Diagram.scale.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tooltips,monitoring,animation"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/kittenMonitor"><span aria-hidden="true" class="absolute inset-0"></span> Monitor with Background</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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 flex flex-col overflow-hidden rounded-lg border" data-tags="links,palette,overview"><!--[-1--><!--]--> <img src="./assets/images/screenshots/network.png" alt="Shows a network configurator with a Palette and Overview." class="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/network"><span aria-hidden="true" class="absolute inset-0"></span> Network Editor with Bars</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">Shows a network configurator with a Palette and Overview.</p></div></div><div class="group relative flex flex-col overflow-hidden rounded-lg border" data-tags="tools,palette"><!--[-1--><!--]--> <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="aspect-square w-full bg-background object-cover group-hover:opacity-75"/> <div class="flex flex-1 flex-col p-4 space-y-2"><h3 class="text-sm font-medium text-foreground"><a href="./samples/seatingChart"><span aria-hidden="true" class="absolute inset-0"></span> Seating Chart</a></h3> <p class="text-sm text-foreground/80 dark:text-foreground/85">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></div> <link rel="prefetch" as="script" href="./release/go.js"/></main></div><!--]--><!----></div><!--]--><!--]--><!----></main> <footer class="text-foreground border-t mt-16 py-16"><div class="max-w-7xl mx-auto px-6 lg:px-8"><div class="xl:grid xl:grid-cols-2 xl:gap-8"><div class="logo h-10 w-10 text-[1.65rem] flex items-center justify-center rounded-lg text-white font-bold bg-nwoods-primary"><span class="leading-none">Go</span></div> <div class="mt-16 grid grid-cols-2 gap-8 sm:grid-cols-3 xl:mt-0"><div><h3 class="text-sm/6 font-semibold text-foreground">GoJS</h3> <ul class="list-none mt-6 space-y-1"><li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="./samples">Samples</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="./learn">Learn</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="./api/">API</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="./changelog">Changelog</a></li><!----></ul></div> <div><h2 class="text-sm/6 font-semibold text-foreground">Support</h2> <ul class="list-none mt-6 space-y-1"><li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/sales" target="_blank" rel="noopener">Buy</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/contact" target="_blank" rel="noopener">Contact</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/register" target="_blank" rel="noopener">Register</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://forum.nwoods.com/c/gojs" target="_blank" rel="noopener">Forum</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/app/activate.aspx?sku=gojs" target="_blank" rel="noopener">Activate</a></li><!----></ul></div> <div><h2 class="text-sm/6 font-semibold text-foreground">Company</h2> <ul class="list-none mt-6 space-y-1"><li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com" target="_blank" rel="noopener">Northwoods</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/about" target="_blank" rel="noopener">About Us</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/contact" target="_blank" rel="noopener">Contact Us</a></li><!----> <li><a class="text-sm/6 text-foreground/70 hover:text-foreground" href="https://nwoods.com/consulting" target="_blank" rel="noopener">Consulting</a></li><!----></ul></div></div></div> <div class="mt-12 pt-8 md:flex md:items-center md:justify-between"><div class="flex gap-x-6 md:order-2"><a class="text-foreground/70 hover:text-foreground self-center" href="https://www.npmjs.com/package/gojs" target="_blank" rel="noopener"><span class="sr-only">npm</span> <svg viewBox="0 0 780 250" fill="currentColor" aria-hidden="true" class="size-7"><path d="M240,250h100v-50h100V0H240V250z M340,50h50v100h-50V50z M480,0v200h100V50h50v150h50V50h50v150h50V0H480z
M0,200h100V50h50v150h50V0H0V200z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></a> <a class="text-foreground/70 hover:text-foreground" href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank" rel="noopener"><span class="sr-only">GitHub</span> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-6"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></a> <a class="text-foreground/70 hover:text-foreground" href="https://twitter.com/northwoodsgo" target="_blank" rel="noopener"><span class="sr-only">Twitter/X</span> <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-6"><path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z"></path></svg></a></div> <p class="mt-8 text-xs/6 text-muted-foreground md:mt-0 md:order-1">© 1998-2026 Northwoods Software</p></div> <!--[-1--><!--]--></div></footer><!----><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
<script>
{
__sveltekit_19dmgt3 = {
base: new URL(".", location).pathname.slice(0, -1),
assets: "/4.0.0"
};
const element = document.currentScript.parentElement;
Promise.all([
import("./_app/immutable/entry/start.DUcLjgjT.js"),
import("./_app/immutable/entry/app.uWGY7NCW.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 3, 80],
data: [null,null,null],
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>