markgojs

<!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">  <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">  <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> </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"> <h2>GoJS 2.0 Beta has been released: <a href="../beta/index.html">Click here to go to the Beta</a></h2> </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. Our thorough documentation introduces 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> <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 <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 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>  <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>