You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
291 lines
14 KiB
291 lines
14 KiB
<!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 on HTML web pages. 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 Diagrams for JavaScript and HTML, by Northwoods Software</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 text-center bg-success">
|
|
<h3>GoJS version 2.0: read about the <a href="changelog.html">new features and changes here</a></h3>
|
|
</div>
|
|
|
|
<div class="mt30">
|
|
<p>
|
|
<strong>GoJS</strong> is a JavaScript and TypeScript library for building interactive diagrams and graphs.
|
|
|
|
GoJS allows you to build all kinds of diagrams and graphs for your users,
|
|
from simple flowcharts and org charts to highly-specific industrial diagrams, SCADA and BPMN diagrams, medical diagrams like genograms, and more.
|
|
|
|
GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.
|
|
<p>
|
|
GoJS offers many 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, and an extensible tool system for custom operations.
|
|
<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 HTML5 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">
|
|
<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>
|
|
<!--
|
|
<p>
|
|
You can explore the newest features and samples in the <a href="../beta/index.html" target="_blank">GoJS Beta</a> for the next version,
|
|
if a next version is available. Read the <a href="../beta/changelog.html" target="_blank">beta change log</a> for the new features.
|
|
Please note that our <a href="https://github.com/NorthwoodsSoftware/GoJS" target="_blank">GitHub</a> directory does not have the beta files.
|
|
</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-2019 <a href="https://www.nwoods.com" target="_blank">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>
|