forked from NorthwoodsSoftware/GoJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
437 lines (399 loc) · 19.4 KB
/
index.html
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
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="GoJS is a JavaScript library for building interactive diagrams and graphs on the web. Build apps
with flowcharts, org charts, BPMN, UML, modeling, and other visual graph types. Interactivity, data-binding, layouts and
many node and link concepts are built-in to GoJS."/><meta name="keywords" content="JavaScript diagram graph chart drawing visualization modeling component library flowchart orgchart
network BPMN UML ER editor"/><link rel="stylesheet" href="./assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. --> <title> GoJS - Build Interactive Diagrams for the Web </title>
</head>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary opacity-0" href=".">
<h1 class="my-0 p-1 opacity-0">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="./learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="./download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="text-white bg-nwoods-primary">
<div class="container max-w-screen-lg px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<div class="flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left">
<h1 class="my-4 text-5xl font-bold leading-tight">GoJS</h1>
<p class="leading-normal tracking-normal text-2xl mb-2">A Web Framework for Rapidly Building Interactive Diagrams
</p>
<div class="mx-auto">
<a class="hover:shadow-none rounded inline-block mx-auto lg:mr-0 lg:ml-4 text-gray-800 hover:text-white hover:bg-nwoods-secondary bg-white font-bold my-6 p-4 shadow-lg"
href="./samples"> View Samples</a>
<a class="hover:shadow-none rounded inline-block mx-auto lg:mr-0 lg:ml-4 text-gray-800 hover:text-white hover:bg-nwoods-secondary bg-white font-bold my-6 p-4 shadow-lg"
href="./learn"> Take the Tutorial</a>
</div>
</div>
<div class="w-full md:w-3/5">
<img class="md:w-full w-4/5 z-50 mx-auto" src="./assets/images/banner.png" alt="Diagram">
</div>
</div>
</div>
<section class="bg-white border-b pb-8 text-gray-800">
<div class="container max-w-5xl mx-auto mb-8">
<div class="text-center pt-6">
<h2 class="text-lg text-gray-800">January 2023: GoJS 2.3 Released – Featuring a new SVG rendering context.
See the <a href="./changelog.html">changelog</a> for more details.</h2>
</div>
<div class="p-6">
<h2 class="my-3 py-3 text-center">
Build Diagrams for the Web in JavaScript and TypeScript
</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-4">
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/flowchart.html"><img class="border" width="452" height="360"
src="assets/images/site1.png" alt="Flowchart">
<h3>Flowcharts</h3>
</a>
<div>Build interactive flowcharts or flow diagrams. Let your users build, modify, and save Diagrams with JSON
model output.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/stateChart.html"><img class="border" width="452" height="360"
src="assets/images/site6.png" alt="State Chart" />
<h3>State Charts</h3>
</a>
<div>Visualize State Charts and other behavior diagrams.
Create diagrams with live updates to monitor state, or interactive diagrams for planning.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/sankey.html"><img class="border" width="452" height="360"
src="assets/images/site2.png" alt="Sankey Diagram" />
<h3>Sankey Diagrams</h3>
</a>
<div>GoJS allows considerable customization of Links and Nodes to build all kinds of diagrams. Visualize flow,
or connect pipes.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/genogram.html"><img class="border" width="452" height="360"
src="assets/images/site5.png" alt="Leaflet Map" />
<h3>Genogram Diagrams</h3>
</a>
<div>Create Genogram and Medical diagrams, or editable family trees with collapsible levels.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/orgChartEditor.html"><img class="border" width="452"
height="360" src="assets/images/site3.png" alt="Org Chart" />
<h3>Org Charts</h3>
</a>
<div>Create classic org charts for viewing or editing. Automatic layouts make different visualization options
easy.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/dynamicPorts.html"><img class="border" width="452" height="360"
src="assets/images/site7.png" alt="Dynamic Ports Demo" />
<h3>Dynamic Ports</h3>
</a>
<div>Dynamically add ports and custom link routing. Use data-bindings to save and load routes within the Model
JSON.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/productionProcess.html"><img class="border" width="452"
height="360" src="assets/images/site4.png" alt="Data Visualization" />
<h3>Industrial Processes</h3>
</a>
<div>Model industrial processes, workflows, SCADA diagrams and more. Permissions and validation make it easy to
add rules and constraints when your users build diagrams.</div>
</div>
<div class="p-2">
<a class="text-nwoods-secondary" href="./samples/regrouping.html"><img class="border" width="452" height="360"
src="assets/images/site8.png" alt="Regrouping Demo" />
<h3>Dynamic Grouping</h3>
</a>
<div>Use groups as containers and subgraphs, with group members bound by their own rules and layouts.</div>
</div>
</div>
<div class="p-6">
<h2 class="my-3 py-3 border-t text-center">
Built-in features and interactivity to develop your projects faster
</h2>
</div>
<div class="feature-grid py-6 px-2 lg:px-0 grid grid-cols-2 lg:grid-cols-3 gap-x-12">
<div>
<h3>Automatic Layouts</h3>
<p>GoJS includes several built-in <a href="./intro/layouts.html">layouts</a>, and many samples of custom layouts
to be used or adapted.</p>
</div>
<div>
<h3>Node and Link Templates</h3>
<p>Quickly set the look for your diagram parts while keeping appearance separate from data.</p>
</div>
<div>
<h3>Data Binding</h3>
<p>GoJS models can automatically keep your data in sync with your display, and vice versa.</p>
</div>
<div>
<h3>Undo & Redo</h3>
<p>GoJS has built-in state management to record a history of Diagram and Model changes. Users can easily undo
and redo, and cancelled tool operations can be rolled back. This state can be inspected for futher
customization.</p>
</div>
<div>
<h3>Keyboard Shortcuts</h3>
<p>GoJS implements a number of common <a href="./intro/commands.html">keyboard commands</a> and gestures, which
can be customized.</p>
</div>
<div>
<h3>Subgraphs</h3>
<p>GoJS Groups provide subgraphs to apply different rules or layouts to their members.</p>
</div>
<div>
<h3>Extensible Tools</h3>
<p>GoJS input is routed through <a href="./intro/tools.html">tools</a> that can be customized and extended to
give your users the interaction they need.</p>
</div>
<div>
<h3>Customizable Events and Permissions</h3>
<p>Execute custom logic or notifications when users do certain actions or key presses, or disable different
interactions altogether.</p>
</div>
<div>
<h3>Context Menus and Tooltips</h3>
<p>GoJS has built-in Context Menu and tooltips, which can be extended in-canvas or with HTML.</p>
</div>
</div>
<div class="p-6 flex-wrap flex-col-reverse sm:flex-row">
<h2 class="mb-3 text-center">
Compatible with Modern Frameworks
</h2>
<span>
<a href="./intro/react.html"><img class="inline-block w-12" alt="react" src="assets/images/react-icon.svg"></a>
<a href="./intro/angular.html"><img class="inline-block w-12" alt="angular"
src="assets/images/angular-icon.svg"></a>
<a href="./samples/vue.html"><img class="inline-block w-12" alt="vue" src="assets/images/vue-icon.svg"></a>
</span>
<div>
<p>
We publish a React component, <strong><a
href="https://github.com/NorthwoodsSoftware/gojs-react">gojs-react</a></strong> to simplify React
integration,
and host a <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic">React sample using GoJS called
<strong>gojs-react-basic</strong></a>.
See the <a href="./intro/react.html">GoJS with React introduction page</a> for more information.
</p>
</div>
<div>
<p>
We publish an Angular component, <strong><a
href="https://github.com/NorthwoodsSoftware/gojs-angular">gojs-angular</a></strong> to simplify Angular
integration,
and host a <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic">Angular sample using GoJS called
<strong>gojs-angular-basic</strong></a>.
See the <a href="./intro/angular.html">GoJS with Angular introduction page</a> for more information.
</p>
</div>
<div>
<p>
We have a <a href="./samples/vue.html">sample on using <strong>Vue.js</strong> with GoJS</a>.
</p>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h2>Explore</h2>
<p>
Start from over 200 sample apps that demonstrate flowcharts, org charts, mind maps, UML diagrams, BPMN
diagrams, graph editors, data visualization, custom tools and layouts, and much more.
</p>
<div class="">
<a class="button bigger" href="./samples/index.html">View Interactive Samples</a>
</div>
</div>
<div class="w-full sm:w-1/2 p-6">
<h2>Learn</h2>
<p>
Get started with a step-by-step description of how to build a JavaScript diagram in HTML using GoJS and some
model data.
</p>
<div class="">
<a class="button bigger" href="./learn/index.html">Learn with GoJS Tutorials</a>
<a class="button bigger" href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Watch Videos</a>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h2>Download</h2>
<p>
Get a copy of the library and all of the samples, extensions, and documentation. Search the JavaScript code
and modify the samples to start your app.
</p>
<div class="">
<a class="button bigger" href="./download.html">Download</a>
<a class="button bigger" href="https://www.npmjs.com/package/gojs">Install via npm</a>
</div>
</div>
<div class="w-full sm:w-1/2 p-6">
<h2>Technical Introduction</h2>
<p>
Read our introduction for an overview of GoJS concepts and features, including hundreds of live interactive
examples embedded right in each page.
</p>
<div class="">
<a class="button bigger" href="./intro/index.html">Read the Introduction Pages</a>
</div>
</div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h2>Free Evaluation</h2>
<p>
Evaluate the full library without any limitations. Register for free support for a month to help build your
app.
</p>
<div class="">
<a class="button bigger" href="https://www.nwoods.com/products/register.html">Register for Support</a>
<a class="button bigger" href="https://www.nwoods.com/contact.html">Contact Us</a>
</div>
</div>
<div class="w-full sm:w-1/2 p-6">
<h2>API Documentation</h2>
<p>
Read our comprehensive documentation for an in-depth reference of the properties and methods of all of the
JavaScript classes.
</p>
<div class="">
<a class="button bigger" href="./api/index.html">View the API</a>
</div>
</div>
</div>
</div>
</section>
<div class="bg-nwoods-primary">
<section class="text-white container mx-auto text-center py-2">
<h3 class="my-4 text-2xl font-semibold tracking-wide">By Northwoods Software</h3>
</section>
</div>
<footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto px-8">
<div class="w-full py-6">
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
<ul class="text-sm font-medium pb-6 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">GoJS</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="./samples/index.html">Samples</a>
</li>
<li>
<a href="./learn/index.html">Learn</a>
</li>
<li>
<a href="./intro/index.html">Intro</a>
</li>
<li>
<a href="./api/index.html">API</a>
</li>
<li>
<a href="./changelog.html">Changelog</a>
</li>
<li>
<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
</li>
</ul>
</li>
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs">Forum</a>
</li>
<li>
<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
</li>
<li>
<a href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
</li>
</ul>
</li>
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://www.nwoods.com">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/about.html">About Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a>
</li>
</ul>
</li>
</ul>
<p class="text-sm text-gray-100 md:mb-6">
Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
</p>
</div>
</div>
</footer> </body>
<link rel="prefetch" as="script" href="./release/go.js">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
</script>
</html>