forked from NorthwoodsSoftware/GoJS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
336 lines (309 loc) · 18.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<title>GoJS Diagram and Graph Library for JavaScript and TypeScript</title>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- custom CSS after bootstrap -->
<link href="assets/css/main.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.flex-container {
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.flex-item {
width: 220px;
margin: 5px;
}
</style>
<link rel="prerender" href="samples/flowchart.html">
<link rel="prerender" href="samples/index.html">
</head>
<body id="frontpage">
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="learn/index.html">Learn</a></li>
<li><a href="samples/index.html">Samples</a></li>
<li><a href="intro/index.html">Intro</a></li>
<li><a href="api/index.html">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div id="bannertop" class="jumbotron banner">
<div class="container-fluid plr15">
<h1><span id="bannerlogo">GoJS</span></h1>
<h2><span>Interactive JavaScript Diagrams for the Web</span></h2>
<p><a class="btn btn-primary btn-lg" href="samples/index.html" role="button">See samples »</a></p>
</div>
</div>
<div class="container-fluid plr15">
<div class="row" style="border: 10px solid #dff0d8; padding: 10px;">
<h3 class="text-center">GoJS 2.1 Released: read about all <a href="changelog.html">new features and changes here</a></h3>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/animation.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/changelog/2.1linkAnimation.gif"></a>
<a style="margin: 2px;" href="intro/animation.html"><img style="box-shadow: none; width: 60px; height: 80px;" src="assets/images/changelog/2.1nodeAnimation.gif"></a>
<p style="flex-grow: 1; margin: 4px;">
New animation capabilities, including the ability to specify custom animations. See the <a href="intro/animation.html">intro page on animation</a>.
</p>
</div>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/react.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/react-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
New: a React component, <strong><a href="https://github.com/NorthwoodsSoftware/gojs-react">gojs-react</a></strong>, to simplify React integration,
and a React sample using that component, <a href="https://github.com/NorthwoodsSoftware/gojs-react-basic"><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 style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/angular.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/angular-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
New: an Angular component, <strong><a href="https://github.com/NorthwoodsSoftware/gojs-angular">gojs-angular</a></strong>, to simplify Angular integration,
and a Angular sample using that component, <a href="https://github.com/NorthwoodsSoftware/gojs-angular-basic"><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>
<div class="mt30">
<h2><strong>GoJS</strong> is a JavaScript and TypeScript library for building interactive diagrams and graphs</h2>
<p>
From simple flowcharts and org charts to highly-specific industrial diagrams, SCADA and BPMN diagrams, medical diagrams such as genograms and outbreak modeling diagrams, and more.
GoJS makes constructing graphs of complex nodes, links, and groups easy with customizable templates and layouts.
</p>
<p>
GoJS offers advanced features for user interactivity such as drag-and-drop, copy-and-paste,
in-place text editing, tooltips, context menus, automatic layouts, templates, data binding and models, transactional state and undo management,
palettes, overviews, event handlers, commands, extensible tools for custom operations, and customizable animations.
</p>
<p>
We maintain hundreds of <a href="samples/index.html">sample diagrams</a>, detailing different examples of interactivity, templates, and user logic for you to start from.
We offer free developer-to-developer support during evaluation.
</p>
</div>
<div class="flex-container">
<div class="flex-item">
<a class="imagelink" href="samples/flowchart.html"><img src="assets/images/site1.png" alt="Flowchart" class="image img-thumbnail">
<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="flex-item">
<a class="imagelink" href="samples/stateChart.html"><img src="assets/images/site6.png" class="img-thumbnail" 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="flex-item">
<a class="imagelink" href="samples/sankey.html"><img src="assets/images/site2.png" class="img-thumbnail" 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="flex-item">
<a class="imagelink" href="samples/genogram.html"><img src="assets/images/site5.png" class="img-thumbnail" 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="flex-item">
<a class="imagelink" href="samples/orgChartEditor.html"><img src="assets/images/site3.png" class="img-thumbnail" 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="flex-item">
<a class="imagelink" href="samples/dynamicPorts.html"><img src="assets/images/site7.png" class="img-thumbnail" 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="flex-item">
<a class="imagelink" href="samples/productionProcess.html"><img src="assets/images/site4.png" class="img-thumbnail" 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 customers build diagrams.</div>
</div>
<div class="flex-item">
<a class="imagelink" href="samples/regrouping.html"><img src="assets/images/site8.png" class="img-thumbnail" alt="Regrouping Demo" />
<h3>Dynamic Grouping</h3></a>
<div>Use groups as containers and subgraphs, with group members bounds by their own rules and layouts.</div>
</div>
</div>
</div>
<div class="container-fluid plr15">
<div class="row mt30 center-block">
<p>
<strong>GoJS</strong> is implemented in TypeScript and can be used as a JavaScript library or built into your project from TypeScript sources.
GoJS normally runs completely in the browser, rendering to an HTML Canvas element or SVG without any server-side requirements.
It can also run in headless or server environments, like Node.
GoJS does not depend on any libraries or frameworks, and can work alongside Angular, React, within Electron, or with no framework at all.
<p>
Build custom modeling environments and domain-specific visual languages using the powerful features of GoJS.
Provide both a system editor and a read-only status monitor using shared code and templates.
Simultaneously show alternative visualizations of the same data in different diagrams.
Implement drill-down using expansion of subtrees and subgraphs or a detailed view in another diagram.
<p>
Our thorough documentation introduces the basic concepts and demonstrates typical features that most apps want to offer.
Nodes and links can be arbitrarily detailed according to the needs of the application.
There are many properties that permit simple permissions and customizations, and some methods may be overridden for more complicated customizations.
</div>
<div class="row mt30 center-block">
<h2>Use GoJS with your favorite frameworks</h2>
<div style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/react.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/react-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
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 style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="intro/angular.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/angular-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
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 style="width: 100%; margin: 5px 0; display: flex; align-items: center; justify-content: space-between">
<a style="margin: 2px;" href="samples/vue.html"><img style="box-shadow: none; width: 60px; height: 60px;" src="assets/images/vue-icon.svg"></a>
<p style="flex-grow: 1; margin: 4px;">
We have a <a href="samples/vue.html">sample on using Vue.js with GoJS</a>.
</p>
</div>
</div>
<div class="row mt30 center-block">
<div class="col-md-6">
<h2>Explore</h2>
<p>
Run 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>
<p>
<a class="btn btn-primary" href="samples/index.html" role="button">Run Interactive Samples</a>
</p>
</div>
<div class="col-md-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>
<p>
<a class="btn btn-primary" href="learn/index.html" role="button">Learn with GoJS Tutorials</a>
<a class="btn btn-primary" href="https://www.nwoods.com/videos.html" role="button">Watch Videos</a>
</p>
</div>
</div>
<div class="row center-block">
<div class="col-md-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>
<p>
<a class="btn btn-primary" href="download.html" role="button">Download</a>
<a class="btn btn-primary" href="https://github.com/NorthwoodsSoftware/GoJS" role="button">Clone us from GitHub</a>
<a class="btn btn-primary" href="https://www.npmjs.com/package/gojs" role="button">Install via npm</a>
</p>
</div>
<div class="col-md-6">
<h2>Technical Introduction</h2>
<p>
Read our introduction for a overview of GoJS concepts and features,
including hundreds of live interactive examples embedded right in each page.
</p>
<p>
<a class="btn btn-primary" href="intro/index.html" role="button">Read the Introduction Pages</a>
</p>
</div>
</div>
<div class="row center-block">
<div class="col-md-6">
<h2>Unlimited Evaluation</h2>
<p>
Evaluate the full library without any limitations.
Register with us and get free support for a month to help build your app.
</p>
<p>
<a class="btn btn-primary" href="https://www.nwoods.com/products/register.html" role="button">Register for Support</a>
<a class="btn btn-primary" href="https://www.nwoods.com/contact.html" role="button">Contact Us</a>
</p>
</div>
<div class="col-md-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>
<p>
<a class="btn btn-primary" href="api/index.html" role="button">View the API</a>
</p>
</div>
</div>
<div class="row mt30 center-block">
<p>
When upgrading to a newer version, please read the <strong><a href="changelog.html" target="_blank">Change Log</a></strong>.
</p>
</div>
</div> <!-- /container -->
<footer id="footer" class="row">
<div class="col-sm-4">
<h3>GoJS</h3>
<p>by Northwoods Software</p>
<p>Copyright 1998-2020 <a href="https://www.nwoods.com" target="_blank" rel="noopener">Northwoods Software</a></p>
</div>
<div class="col-sm-4">
<ul>
<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>
</div>
<div class="col-sm-4">
<ul>
<li><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://twitter.com/northwoodsgo">Twitter</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
</ul>
</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>