-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Expand file tree
/
Copy pathlearn.html
More file actions
382 lines (318 loc) · 96.3 KB
/
Copy pathlearn.html
File metadata and controls
382 lines (318 loc) · 96.3 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!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/2.ONtqHt7v.js" rel="modulepreload">
<link href="./_app/immutable/chunks/DBC7Wr1j.js" rel="modulepreload">
<link href="./_app/immutable/nodes/6.BNyv_24d.js" rel="modulepreload">
<link href="./_app/immutable/chunks/CmgMociJ.js" rel="modulepreload">
<link href="./_app/immutable/chunks/BVhwz5iQ.js" rel="modulepreload">
<!--12qhfyh--><link rel="canonical" href="https://gojs.net/latest/learn"/> <meta property="og:type" content="website"/> <meta property="og:site_name" content="GoJS"/> <meta property="og:url" content="https://gojs.net/latest/learn"/> <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><!----><!----><!--8s3559--><meta property="og:title" content="Quick start | Learn GoJS"/> <meta name="description" content="A dense, single-page primer for GoJS — the fastest path from zero to a working diagram. Designed for both new users and AI coding assistants."/> <meta property="og:description" content="A dense, single-page primer for GoJS — the fastest path from zero to a working diagram. Designed for both new users and AI coding assistants."/><!----><title>Quick start | Learn GoJS</title>
<link href="./_app/immutable/assets/0.vgO-Uy72.css" rel="stylesheet">
<link href="./_app/immutable/assets/CodeSnippet.DOo96Xpn.css" rel="stylesheet">
<link href="./_app/immutable/assets/ContentRenderer.CMpMcMIU.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><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"><!--[--><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">Getting Started</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="./learn" class="inline-block 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">Quick start</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/installation" class="inline-block 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">Installation</a></li><!--]--></ul></div><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">Core Concepts</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="./learn/buildingObjects" class="inline-block 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">Building GraphObjects</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/usingModels" class="inline-block 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">Using Models</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/dataBinding" class="inline-block 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">Data binding</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/nodes" class="inline-block 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">Nodes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/links" class="inline-block 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">Links</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/layouts" class="inline-block 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">Layouts</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/groups" class="inline-block 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">Groups</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/sizing" class="inline-block 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">Sizing of GraphObjects</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/transactions" class="inline-block 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">Transactions and undo</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/viewport" class="inline-block 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">Coordinate systems</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/interactivity" class="inline-block 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">Interactivity</a></li><!--]--></ul></div><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">Building Blocks</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="./learn/panels" class="inline-block 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">Panels</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/shapes" class="inline-block 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">Shapes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/textBlocks" class="inline-block 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">TextBlocks</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/pictures" class="inline-block 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">Pictures</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/tablePanels" class="inline-block 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">Table Panels</a></li><!--]--></ul></div><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">Further Reading</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="./learn/accessibility" class="inline-block 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">Accessibility</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/animation" class="inline-block 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">Animation</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/brush" class="inline-block 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">Brushes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/buttons" class="inline-block 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">Buttons</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/changedEvents" class="inline-block 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">Changed Events</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/collections" class="inline-block 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">Collections</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/commands" class="inline-block 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">Commands</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/contextMenus" class="inline-block 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">Context menus</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/routers" class="inline-block 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">Custom Routers</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/events" class="inline-block 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">Events</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/extensions" class="inline-block 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">Extending GoJS</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/geometry" class="inline-block 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">Geometry path strings</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/graduatedPanels" class="inline-block 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">Graduated Panels</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/graphObject" class="inline-block 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">GraphObject manipulation</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/grids" class="inline-block 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">Grid patterns</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/highlighting" class="inline-block 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">Highlighting</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/HTMLInteraction" class="inline-block 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">HTML interaction</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/initialView" class="inline-block 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">Initial viewport</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/itemArrays" class="inline-block 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">Item arrays</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/layers" class="inline-block 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">Layers</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/legends" class="inline-block 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">Legends and titles</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/connectionPoints" class="inline-block 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">Link connection points</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/linkLabels" class="inline-block 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">Link labels</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/makingImages" class="inline-block 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">Making images</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/makingSVG" class="inline-block 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">Making SVG</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/overview" class="inline-block 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">Overview</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/palette" class="inline-block 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">Palette</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/performance" class="inline-block 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">Performance considerations</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/ports" class="inline-block 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">Ports in Nodes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/printing" class="inline-block 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">Printing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/replacingDeleting" class="inline-block 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">Replace/delete Diagrams</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/resizing" class="inline-block 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">Resizing Diagrams</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/selection" class="inline-block 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">Selection</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/sizedGroups" class="inline-block 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">Sized Groups</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/subtrees" class="inline-block 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">Subtrees</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/SVGContext" class="inline-block 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">SVG renderer</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/templateMaps" class="inline-block 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">Template maps</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/theming" class="inline-block 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">Theming</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/tools" class="inline-block 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">Tools</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/tooltips" class="inline-block 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">Tooltips</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/trees" class="inline-block 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">Trees</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/permissions" class="inline-block 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">User permissions</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/validation" class="inline-block 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">Validation</a></li><!--]--></ul></div><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">Dev Environment</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="./learn/debugging" class="inline-block 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">Debugging suggestions</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/deployment" class="inline-block 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">Deployment</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/testing" class="inline-block 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">Testing GoJS apps</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/typings" class="inline-block 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">Typings</a></li><!--]--></ul></div><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">Frameworks</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="./learn/platforms" class="inline-block 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">GoJS on different platforms</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/angular" class="inline-block 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">Angular</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/nodeJs" class="inline-block 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">Node.js</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/react" class="inline-block 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">React</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/svelte" class="inline-block 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">Svelte</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"><!--[--><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">Getting Started</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="./learn" class="inline-block 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">Quick start</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/installation" class="inline-block 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">Installation</a></li><!--]--></ul></div><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">Core Concepts</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="./learn/buildingObjects" class="inline-block 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">Building GraphObjects</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/usingModels" class="inline-block 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">Using Models</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/dataBinding" class="inline-block 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">Data binding</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/nodes" class="inline-block 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">Nodes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/links" class="inline-block 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">Links</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/layouts" class="inline-block 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">Layouts</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/groups" class="inline-block 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">Groups</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/sizing" class="inline-block 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">Sizing of GraphObjects</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/transactions" class="inline-block 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">Transactions and undo</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/viewport" class="inline-block 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">Coordinate systems</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/interactivity" class="inline-block 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">Interactivity</a></li><!--]--></ul></div><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">Building Blocks</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="./learn/panels" class="inline-block 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">Panels</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/shapes" class="inline-block 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">Shapes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/textBlocks" class="inline-block 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">TextBlocks</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/pictures" class="inline-block 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">Pictures</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/tablePanels" class="inline-block 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">Table Panels</a></li><!--]--></ul></div><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">Further Reading</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="./learn/accessibility" class="inline-block 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">Accessibility</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/animation" class="inline-block 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">Animation</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/brush" class="inline-block 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">Brushes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/buttons" class="inline-block 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">Buttons</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/changedEvents" class="inline-block 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">Changed Events</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/collections" class="inline-block 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">Collections</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/commands" class="inline-block 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">Commands</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/contextMenus" class="inline-block 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">Context menus</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/routers" class="inline-block 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">Custom Routers</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/events" class="inline-block 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">Events</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/extensions" class="inline-block 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">Extending GoJS</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/geometry" class="inline-block 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">Geometry path strings</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/graduatedPanels" class="inline-block 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">Graduated Panels</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/graphObject" class="inline-block 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">GraphObject manipulation</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/grids" class="inline-block 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">Grid patterns</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/highlighting" class="inline-block 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">Highlighting</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/HTMLInteraction" class="inline-block 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">HTML interaction</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/initialView" class="inline-block 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">Initial viewport</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/itemArrays" class="inline-block 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">Item arrays</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/layers" class="inline-block 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">Layers</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/legends" class="inline-block 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">Legends and titles</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/connectionPoints" class="inline-block 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">Link connection points</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/linkLabels" class="inline-block 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">Link labels</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/makingImages" class="inline-block 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">Making images</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/makingSVG" class="inline-block 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">Making SVG</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/overview" class="inline-block 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">Overview</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/palette" class="inline-block 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">Palette</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/performance" class="inline-block 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">Performance considerations</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/ports" class="inline-block 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">Ports in Nodes</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/printing" class="inline-block 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">Printing</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/replacingDeleting" class="inline-block 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">Replace/delete Diagrams</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/resizing" class="inline-block 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">Resizing Diagrams</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/selection" class="inline-block 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">Selection</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/sizedGroups" class="inline-block 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">Sized Groups</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/subtrees" class="inline-block 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">Subtrees</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/SVGContext" class="inline-block 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">SVG renderer</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/templateMaps" class="inline-block 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">Template maps</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/theming" class="inline-block 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">Theming</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/tools" class="inline-block 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">Tools</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/tooltips" class="inline-block 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">Tooltips</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/trees" class="inline-block 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">Trees</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/permissions" class="inline-block 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">User permissions</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/validation" class="inline-block 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">Validation</a></li><!--]--></ul></div><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">Dev Environment</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="./learn/debugging" class="inline-block 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">Debugging suggestions</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/deployment" class="inline-block 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">Deployment</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/testing" class="inline-block 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">Testing GoJS apps</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/typings" class="inline-block 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">Typings</a></li><!--]--></ul></div><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">Frameworks</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="./learn/platforms" class="inline-block 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">GoJS on different platforms</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/angular" class="inline-block 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">Angular</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/nodeJs" class="inline-block 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">Node.js</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/react" class="inline-block 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">React</a></li><li class="-ml-px flex flex-col items-start gap-2"><a href="./learn/svelte" class="inline-block 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">Svelte</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><!--]--><!----> <ol class="sticky ml-4 flex min-w-0 items-center gap-2 text-sm/6 whitespace-nowrap"><!--[-1--><li>Index</li><!--]--></ol><!----></div><!----> <main class="pt-14"><!--[--><article class="prose mx-auto px-4 py-8"><div class="max-w-7xl mx-auto"><!--[--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!----><h1>Get started with GoJS</h1>
<p>
This page covers the basics of GoJS, including installation,
a minimal working diagram, templates, models, and bindings.
</p>
<p>
You can link straight to a GoJS library provided by a
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/CDN">CDN</a>
such as:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">html</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
<code>go</code> is the JavaScript namespace in which all GoJS types reside.
In this documentation all code uses of GoJS classes such as Diagram or Node or Panel or
Shape or TextBlock will be prefixed with <code>go.</code>.
</p>
<p>
If you are using a package manager such as <a target="_blank" href="https://npmjs.com/package/gojs">npm</a>
you can install the "gojs" package:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">shell</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>See detailed installation options <a href="learn/installation">here</a>.</p>
<h3 id="the-hosting-lt-div-gt"><a class="not-prose heading-anchor" href="#the-hosting-lt-div-gt">The hosting <div></a></h3>
<p>
You'll also need a <code><div></code> with an explicit size to host the diagram.
You can style the div, but not anything that GoJS inserts into the div.
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">html</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
In JavaScript code you pass the <code><div></code>'s <code>id</code> when making a Diagram,
or else a reference to the <code><div></code> element:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<h2 id="DiagramsAndModels"><a class="not-prose heading-anchor" href="#DiagramsAndModels">A minimal diagram</a></h2>
<p>
Here's a small GoJS Diagram. Four nodes and four links, undo/redo enabled.
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[0--><div class="code-example dark scheme-dark my-4 p-2 rounded-lg bg-editor-bg flex flex-col gap-1 lg:flex-row lg:items-stretch svelte-1x7kvj4"><!--[0--><div class="flex-[60] lg:min-w-0 lg:flex lg:flex-col lg:gap-1 svelte-1x7kvj4" style="flex: 60"><div class="flex items-center gap-2 bg-editor-bg"><!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Reset to original code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> <span>Reset</span><!----></button><!--]--><!----> <!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Download as HTML file"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <span>Download</span><!----></button><!--]--><!----></div><!----> <!----><div class="overflow-hidden flex flex-col gap-1 svelte-yayuls"><div class="overflow-hidden svelte-yayuls"><div class="svelte-yayuls"></div></div> <!--[-1--><!--]--></div><!----></div><!--]--> <div class="flex justify-center items-start lg:min-w-0 svelte-1x7kvj4" style="flex: 40"><iframe srcdoc="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" title="Diagram Preview" class="w-full h-full min-h-75 lg:min-h-100"></iframe><!----></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
Four major concepts:
</p>
<ul>
<li>A <a href="api/symbols/Diagram.html" target="api">Diagram</a> can be thought of as a view of a <a href="api/symbols/Model.html" target="api">Model</a>.
</li>
<li><a href="api/symbols/Model.html" target="api">Model</a>s hold the data that describe the nodes and links.
Models, not Diagrams, are what you load and then save after editing.
</li>
<li><b>Templates</b> (<a href="api/symbols/Diagram.html#nodetemplate" target="api">Diagram.nodeTemplate</a>, <a href="api/symbols/Diagram.html#linktemplate" target="api">Diagram.linkTemplate</a>)
describe how to render each Node or Link from a data object.
</li>
<li><a href="api/symbols/Binding.html" target="api">Binding</a>s (<a href="api/symbols/GraphObject.html#bind" target="api">GraphObject.bind</a>) connect template properties to
data fields in the model.
</li>
</ul>
<p>
You'll also notice above that some interaction is already possible:
</p>
<ul>
<li>Click and drag the background in the above diagram to pan the view.</li>
<li>Click a node to select it, or click and drag to move it around.</li>
<li>To create a selection box, click and hold on the background, then start dragging.</li>
<li>Use <kbd>Ctrl + C</kbd> and <kbd>Ctrl + V</kbd>, or control-drag-and-drop, to make a copy of the selection.
(On a Mac, use <kbd>⌘</kbd> as the modifier for all commands,
but you must use <kbd>Alt</kbd> as the modifier for a copying drag-and-drop.)
</li>
<li>Press <kbd>Delete</kbd> to delete selected nodes.
(Read about <a href="learn/commands">Keyboard Commands</a>.)
</li>
<li>On touch devices, press and hold to bring up a context menu.
(Read about <a href="learn/contextMenus">Context Menus</a>.)
</li>
<li>Since the undo manager was enabled, <kbd>Ctrl + Z</kbd> and <kbd>Ctrl + Y</kbd> (or <kbd>Ctrl + Shift + Z</kbd>) will undo and redo moves and copies and deletions.</li>
</ul>
<h2 id="BuildingParts"><a class="not-prose heading-anchor" href="#BuildingParts">Building Parts</a></h2>
<p>
A Part (Node, Link, Group) is a tree of visual <a href="api/symbols/GraphObject.html" target="api">GraphObject</a>s, mostly
<a href="api/symbols/Shape.html" target="api">Shape</a>s, <a href="api/symbols/TextBlock.html" target="api">TextBlock</a>s, <a href="api/symbols/Picture.html" target="api">Picture</a>s, and nested <a href="api/symbols/Panel.html" target="api">Panel</a>s.
Construct each object with <code>new</code>,
set properties via the constructor argument, and add elements to Panels with
<a href="api/symbols/Panel.html#add" target="api">Panel.add</a>. GraphObject methods return <code>this</code>, so chaining works.
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[0--><div class="code-example dark scheme-dark my-4 p-2 rounded-lg bg-editor-bg flex flex-col gap-1 lg:flex-row lg:items-stretch svelte-1x7kvj4"><!--[0--><div class="flex-[60] lg:min-w-0 lg:flex lg:flex-col lg:gap-1 svelte-1x7kvj4" style="flex: 60"><div class="flex items-center gap-2 bg-editor-bg"><!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Reset to original code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> <span>Reset</span><!----></button><!--]--><!----> <!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Download as HTML file"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <span>Download</span><!----></button><!--]--><!----></div><!----> <!----><div class="overflow-hidden flex flex-col gap-1 svelte-yayuls"><div class="overflow-hidden svelte-yayuls"><div class="svelte-yayuls"></div></div> <!--[-1--><!--]--></div><!----></div><!--]--> <div class="flex justify-center items-start lg:min-w-0 svelte-1x7kvj4" style="flex: 40"><iframe srcdoc="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" title="Diagram Preview" class="w-full h-full min-h-75 lg:min-h-100"></iframe><!----></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
Panel types control how Panel elements (children) are laid out. The most common:
</p>
<ul>
<li><code>'Auto'</code> or <code>go.PanelTypes.Auto</code> — the first element surrounds all the others (e.g. shape wraps a text block).</li>
<li><code>'Vertical'</code> or <code>go.PanelTypes.Vertical</code> — stack elements top-to-bottom.</li>
<li><code>'Horizontal'</code> or <code>go.PanelTypes.Horizontal</code> — stack elements left-to-right.</li>
<li><code>'Spot'</code> or <code>go.PanelTypes.Spot</code> — position elements at named spots (e.g. <code>go.Spot.Center</code>, <code>go.Spot.TopRight</code>) around the main (first) element.</li>
<li><code>'Table'</code> or <code>go.PanelTypes.Table</code> — grid of rows and columns.</li>
</ul>
<p>
Most of our code uses a quoted string, but the <code>go.PanelTypes</code> constant enumerates all possibilities,
and may be easier to use with auto-completion.
</p>
<p>
See <a href="learn/panels">Panels</a> for the full list, and many Panel examples.
</p>
<h2 id="Models"><a class="not-prose heading-anchor" href="#Models">Models and data</a></h2>
<p>
GoJS has three built-in model types. Choose the type of model based on the relationships in your data:
</p>
<ul>
<li><a href="api/symbols/GraphLinksModel.html" target="api">GraphLinksModel</a> — Arbitrary graphs with independent link data. Also allows <a href="api/symbols/Group.html" target="api">Group</a>s.
Use this unless you have a reason not to.
</li>
<li><a href="api/symbols/TreeModel.html" target="api">TreeModel</a> — Each node data has a <code>parent</code> reference; no
separate link data array. Good for org charts and other pure trees.
</li>
<li><a href="api/symbols/Model.html" target="api">Model</a> — If you don't need <a href="api/symbols/Link.html" target="api">Link</a>s or <a href="api/symbols/Group.html" target="api">Group</a>s and you have a <em>lot</em> of parts,
you can use simple <a href="api/symbols/Part.html" target="api">Part</a>s instead of <a href="api/symbols/Node.html" target="api">Node</a>s for efficiency.
</li>
</ul>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
In TypeScript, models are generic so you can have optional type safety on node/link data:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">ts</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
See <a href="learn/usingModels">Using Models</a> for more discussion.
</p>
<h2 id="Bindings"><a class="not-prose heading-anchor" href="#Bindings">Data bindings</a></h2>
<p>
A binding connects a property of a GraphObject in the template to a property
of the data object in the model. Three forms, from most to least common:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
Use a conversion function when the source property value type doesn't match
the target property type:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
See <a href="learn/dataBinding">Data Binding</a> for full details including
converter signatures and two-way back-converters.
</p>
<h2 id="LinkTemplates"><a class="not-prose heading-anchor" href="#LinkTemplates">Link templates</a></h2>
<p>
Links follow the same template pattern as nodes, but a Link has a special
panel type that normally contains a path Shape and optional arrowheads and labels.
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[0--><div class="code-example dark scheme-dark my-4 p-2 rounded-lg bg-editor-bg flex flex-col gap-1 lg:flex-row lg:items-stretch svelte-1x7kvj4"><!--[0--><div class="flex-[60] lg:min-w-0 lg:flex lg:flex-col lg:gap-1 svelte-1x7kvj4" style="flex: 60"><div class="flex items-center gap-2 bg-editor-bg"><!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Reset to original code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> <span>Reset</span><!----></button><!--]--><!----> <!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Download as HTML file"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <span>Download</span><!----></button><!--]--><!----></div><!----> <!----><div class="overflow-hidden flex flex-col gap-1 svelte-yayuls"><div class="overflow-hidden svelte-yayuls"><div class="svelte-yayuls"></div></div> <!--[-1--><!--]--></div><!----></div><!--]--> <div class="flex justify-center items-start lg:min-w-0 svelte-1x7kvj4" style="flex: 40"><iframe srcdoc="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" title="Diagram Preview" class="w-full h-full min-h-75 lg:min-h-100"></iframe><!----></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>The <code>curve: go.Curve.Bezier</code> Link option gives the Link a Bezier arc path.</p>
<p>See many more Link options on the <a href="learn/links">Links page</a>.</p>
<h2 id="Interaction"><a class="not-prose heading-anchor" href="#Interaction">Interaction and commands</a></h2>
<p>
A diagram has a <a href="api/symbols/CommandHandler.html" target="api">CommandHandler</a> (for standard commands like copy, delete, undo, redo)
and a <a href="api/symbols/ToolManager.html" target="api">ToolManager</a> (for mouse- and touch-driven interaction).
You infrequently construct these for each Diagram; normally you just set their properties.
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
For more on the built-in possibilities, see the <a href="learn/interactivity">Interactivity</a> and <a href="learn/commands">Commands</a> pages.
</p>
<h2 id="Layouts"><a class="not-prose heading-anchor" href="#Layouts">Layouts</a></h2>
<p>
In many diagrams the user can position nodes manually by moving them.
A <a href="api/symbols/Layout.html" target="api">Layout</a> positions nodes automatically according to some algorithm.
Common choices:
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[-1--><div class="dark scheme-dark flex flex-col max-w-5xl my-4 p-2 gap-1 rounded-lg bg-editor-bg overflow-hidden ms-0 2xl:mx-auto"><span class="uppercase text-sm font-semibold text-muted-foreground tracking-tight">js</span> <div class="editor-container svelte-w3xzsj"></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
Automatic layouts occur after nodes or links are added or removed or they change visibility or after nodes change size.
</p>
<p>
If you do not set <a href="api/symbols/Diagram.html#layout" target="api">Diagram.layout</a>, each node must be given a location,
either manually via the user's dragging, or via data binding.
</p>
<p>
For more on how layouts can work, see the <a href="learn/layouts">Layouts</a> page.
</p>
<h2 id="Routing"><a class="not-prose heading-anchor" href="#Routing">Routing</a></h2>
<p>
Each <a href="api/symbols/Link.html" target="api">Link</a> has a built-in efficient behavior that controls the path that it takes, depending on the link's properties,
as you have seen above with the <a href="api/symbols/Link.html#curve" target="api">Link.curve</a> property.
</p>
<p>
More generally, the routes of links can also be determined by a <a href="api/symbols/Router.html" target="api">Router</a>, allowing the consideration of other nodes
or links besides the two nodes connected by the link.
In the following example, the AvoidsNodes router is used to plot a path that avoids crossing over nodes.
The functionality is enabled by setting <a href="api/symbols/Link.html#routing" target="api">Link.routing</a> in the link template:
<code>routing: go.Routing.AvoidsNodes</code>.
</p>
<!----></div><!--]--><!--[-1--><!--[0--><!--[0--><div class="code-example dark scheme-dark my-4 p-2 rounded-lg bg-editor-bg flex flex-col gap-1 lg:flex-row lg:items-stretch svelte-1x7kvj4"><!--[0--><div class="flex-[60] lg:min-w-0 lg:flex lg:flex-col lg:gap-1 svelte-1x7kvj4" style="flex: 60"><div class="flex items-center gap-2 bg-editor-bg"><!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Reset to original code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> <span>Reset</span><!----></button><!--]--><!----> <!--[-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 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-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5" type="button" title="Download as HTML file"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <span>Download</span><!----></button><!--]--><!----></div><!----> <!----><div class="overflow-hidden flex flex-col gap-1 svelte-yayuls"><div class="overflow-hidden svelte-yayuls"><div class="svelte-yayuls"></div></div> <!--[-1--><!--]--></div><!----></div><!--]--> <div class="flex justify-center items-start lg:min-w-0 svelte-1x7kvj4" style="flex: 40"><iframe srcdoc="" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" title="Diagram Preview" class="w-full h-full min-h-75 lg:min-h-100"></iframe><!----></div></div><!--]--><!--]--><!--]--><!--[0--><div class="max-w-5xl ms-0 2xl:mx-auto"><!---->
<p>
Try dragging the "Beta" node around.
The link will automatically try to re-route around Nodes to avoid crossing them,
except when it is unavoidable.
</p>
<p>
For more on how routers can work, see the <a href="learn/routers">Routers</a> page.
</p>
<h2 id="Issues"><a class="not-prose heading-anchor" href="#Issues">Common issues</a></h2>
<ul>
<li>The host <code><div></code> must have an <b>explicit width and
height</b> (CSS units). A zero width or height div renders a blank diagram.
</li>
<li>You <i>do not</i> commonly construct <a href="api/symbols/Node.html" target="api">Node</a> or <a href="api/symbols/Link.html" target="api">Link</a> instances and add
them to a diagram directly. Instead, add <i>data</i> to the model, and GoJS
constructs <a href="api/symbols/Part.html" target="api">Part</a>s from your data, based on your templates.
</li>
<li>To modify the model after the diagram exists, you must call
<a href="api/symbols/Model.html#set" target="api">Model.set</a> or another Model method with the Node data, in a transaction.
Modifying node data in the <code>nodeDataArray</code> directly will not update the diagram.
</li>
<li>Property names in templates are the <b>target</b>; property names in data
are the <b>source</b>. <code>.bind("visible", "vis")</code> means
<i>automatically</i> set the <a href="api/symbols/GraphObject.html#visible" target="api">GraphObject.visible</a> property from the <code>data.vis</code> property.
</li>
</ul>
<h2 id="NextSteps"><a class="not-prose heading-anchor" href="#NextSteps">Where to go next</a></h2>
<ul>
<li><a href="learn/buildingObjects">Building GraphObjects</a> — detail on panels, shapes, text.</li>
<li><a href="learn/usingModels">Using Models and Templates</a> — model types and node/link data conventions.</li>
<li><a href="learn/dataBinding">Data Binding</a> — one-way, two-way, converters, model bindings.</li>
<li><a href="samples">Samples</a> — 200+ examples across every major feature.</li>
<li><a href="api">API Reference</a> — the full type-accurate documentation.</li>
</ul>
<p>
You may want to read more tutorials, such as the
<a href="learn/graphObject">GraphObject Manipulation</a> tutorial and the <a href="learn/interactivity">Interactivity</a> tutorial.
</p>
<p>
If you want to explore by example, have a look at <a href="samples">the samples</a>
to get a feel for what's possible with GoJS.
</p>
<!----></div><!--]--><!--]--></div><!----></article><!--]--><!----></main></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, 2, 6],
data: [null,null,null],
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>