244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
<!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"/>
|
|
|
|
<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="doc/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 in HTML</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>This is GoJS 1.8 Beta. See the <a href="doc/changelog.html">changes here</a></h3>
|
|
</div>-->
|
|
<div class="row text-center bg-success">
|
|
<h3>NEW! TypeScript versions of the extension classes at <a href="extensionsTS/index.html">extensionsTS</a></h3>
|
|
</div>
|
|
|
|
<div class="row text-center mt30">
|
|
|
|
<div class="col-md-12">
|
|
<div style="display: inline-block;">
|
|
<a class="imagelink" href="samples/flowchart.html"><img src="assets/images/site1.png" class="img-thumbnail" alt="Flowchart" /></a>
|
|
<a class="imagelink" href="samples/stateChart.html"><img src="assets/images/site6.png" class="img-thumbnail" alt="State Chart" /></a>
|
|
</div>
|
|
<div style="display: inline-block;">
|
|
<a class="imagelink" href="samples/sankey.html"><img src="assets/images/site2.png" class="img-thumbnail" alt="Sankey Diagram" /></a>
|
|
<a class="imagelink" href="samples/leaflet.html"><img src="assets/images/site5.png" class="img-thumbnail" alt="Leaflet Map" /></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row text-center">
|
|
|
|
<div class="col-md-12">
|
|
<div style="display: inline-block;">
|
|
<a class="imagelink" href="samples/orgChartEditor.html"><img src="assets/images/site3.png" class="img-thumbnail" alt="Org Chart" /></a>
|
|
<a class="imagelink" href="samples/dynamicPorts.html"><img src="assets/images/site7.png" class="img-thumbnail" alt="Dynamic Ports Demo" /></a>
|
|
</div>
|
|
<div style="display: inline-block;">
|
|
<a class="imagelink" href="samples/dataVisualization.html"><img src="assets/images/site4.png" class="img-thumbnail" alt="Data Visualization" /></a>
|
|
<a class="imagelink" href="samples/regrouping.html"><img src="assets/images/site8.png" class="img-thumbnail" alt="Regrouping Demo" /></a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="container-fluid plr15">
|
|
|
|
<div class="row mt30 center-block">
|
|
<p><b>GoJS</b> is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations
|
|
across modern web browsers and platforms.
|
|
<b>GoJS</b> makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.
|
|
|
|
<p><b>GoJS</b> 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><b>GoJS</b> is pure JavaScript, so users get interactivity without requiring round-trips to servers and without plugins.
|
|
<b>GoJS</b> normally runs completely in the browser, rendering to an HTML5 Canvas element or SVG without any server-side requirements.
|
|
<b>GoJS</b> does not depend on any JavaScript libraries or frameworks, so it should work with any HTML or JavaScript framework or with no framework at all.
|
|
|
|
<p>Build custom modeling environments and domain-specific visual languages using the powerful features of <b>GoJS</b>.
|
|
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>Yet <b>GoJS</b> is remarkably simple for such a powerful and flexible system.
|
|
Many pages of documentation introduce the basic concepts and demonstrate typical features that most apps want to offer.
|
|
Nodes and links can be arbitrarily detailed according to the needs of the application.
|
|
The API consists of only a few dozen important classes which encapsulate many useful features that interact with each other.
|
|
There are many properties that permit simple customizations; 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 175 sample apps that are flowcharts, org charts, mind maps,
|
|
UML diagrams, BPMN diagrams, graph editors, data visualization, 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 <b>GoJS</b> and some model data.</p>
|
|
<p><a class="btn btn-primary" href="learn/index.html" role="button">Learn with GoJS Tutorials</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="doc/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 <b>GoJS</b> 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</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="doc/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/doc/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>
|
|
|
|
<hr>
|
|
|
|
</div> <!-- /container -->
|
|
|
|
|
|
|
|
<footer id="footer" class="row">
|
|
|
|
<div class="col-sm-4">
|
|
<h3>GoJS</h3>
|
|
<p>by Northwoods Software</p>
|
|
<p>Copyright 1998-2017 <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="doc/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>
|