|
| 1 | +<h1>GoJS, a JavaScript Library for HTML Diagrams</h1> |
| 2 | +<img align="right" height="150" src="https://www.nwoods.com/images/go.png"> |
| 3 | +<p><a href="https://gojs.net">GoJS</a> is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs.</p> |
| 4 | +<p><a href="https://www.npmjs.com/package/gojs"><img src="https://img.shields.io/github/release/NorthwoodsSoftware/GoJS.svg" alt="npm"></a> |
| 5 | +<a href="https://github.com/NorthwoodsSoftware/GoJS/issues"><img src="https://img.shields.io/github/issues-raw/NorthwoodsSoftware/GoJS.svg" alt="open issues"></a> |
| 6 | +<a href="https://github.com/NorthwoodsSoftware/GoJS/commits/master"><img src="https://img.shields.io/github/last-commit/NorthwoodsSoftware/GoJS.svg" alt="last commit"></a> |
| 7 | +<a href="https://www.npmjs.com/package/gojs"><img src="https://img.shields.io/npm/dw/gojs.svg" alt="downloads"></a> |
| 8 | +<a href="https://twitter.com/NorthwoodsGo"><img src="https://img.shields.io/twitter/follow/NorthwoodsGo.svg?style=social&label=Follow" alt="Twitter Follow"></a></p> |
| 9 | +<p><a href="https://gojs.net/latest/samples">See GoJS Samples</a></p> |
| 10 | +<p><a href="https://gojs.net/latest/learn">Get Started with GoJS</a></p> |
| 11 | +<p>GoJS is a flexible library that can be used to create a number of different kinds of interactive diagrams, |
| 12 | +including data visualizations, drawing tools, and graph editors. |
| 13 | +There are samples for |
| 14 | +<a href="https://gojs.net/latest/samples/flowchart.html">flowchart</a>, |
| 15 | +<a href="https://gojs.net/latest/samples/orgChartEditor.html">org chart</a>, |
| 16 | +<a href="https://gojs.net/latest/samples/bpmn/BPMN.html">business process BPMN</a>, |
| 17 | +<a href="https://gojs.net/latest/samples/swimlanes.html">swimlanes</a>, |
| 18 | +<a href="https://gojs.net/latest/samples/timeline.html">timelines</a>, |
| 19 | +<a href="https://gojs.net/latest/samples/statechart.html">state charts</a>, |
| 20 | +<a href="https://gojs.net/latest/samples/kanban.html">kanban</a>, |
| 21 | +<a href="https://gojs.net/latest/samples/network.html">network</a>, |
| 22 | +<a href="https://gojs.net/latest/samples/mindMap.html">mindmap</a>, |
| 23 | +<a href="https://gojs.net/latest/samples/sankey.html">sankey</a>, |
| 24 | +<a href="https://gojs.net/latest/samples/familyTree.html">family trees</a> and <a href="https://gojs.net/latest/samples/genogram.html">genogram charts</a>, |
| 25 | +<a href="https://gojs.net/latest/samples/Fishbone.html">fishbone diagrams</a>, |
| 26 | +<a href="https://gojs.net/latest/samples/floorplannerTS/index.html">floor plans</a>, |
| 27 | +<a href="https://gojs.net/latest/samples/umlClass.html">UML</a>, |
| 28 | +<a href="https://gojs.net/latest/samples/decisionTree.html">decision trees</a>, |
| 29 | +<a href="https://gojs.net/latest/samples/PERT.html">PERT charts</a>, |
| 30 | +<a href="https://gojs.net/latest/samples/gantt.html">Gantt</a>, and |
| 31 | +<a href="https://gojs.net/latest/samples/index.html">hundreds more</a>. |
| 32 | +GoJS includes a number of built in layouts including tree layout, force directed, circular, and layered digraph layout, |
| 33 | +and many custom layout extensions and examples.</p> |
| 34 | +<p>GoJS is renders either to an HTML Canvas element (with export to SVG or image formats) or directly as SVG DOM. |
| 35 | +GoJS can run in a web browser, or server side in <a href="https://nodejs.org/en/">Node</a> or <a href="https://github.com/GoogleChrome/puppeteer">Puppeteer</a>. |
| 36 | +GoJS Diagrams are backed by Models, with saving and loading typically via JSON-formatted text.</p> |
| 37 | +<p><a href="https://gojs.net/latest/samples/index.html"><img src="https://raw.githubusercontent.com/NorthwoodsSoftware/GoJS/master/.github/github-970x354.png"></a></p> |
| 38 | +<p>Read more about GoJS at <a href="https://gojs.net">gojs.net</a></p> |
| 39 | +<p>This repository contains only the library. |
| 40 | +The sources for all samples, extensions, and documentation can be installed by running:</p> |
| 41 | +<pre><code class="language-html">$ npm create gojs-kit |
| 42 | +</code></pre> |
| 43 | +<p>You can use the GitHub repository to quickly <a href="https://github.com/NorthwoodsSoftware/GoJS-Samples/search?q=setDataProperty&type=Code">search through all of the sources</a>.</p> |
| 44 | +<h2>Minimal Sample</h2> |
| 45 | +<p>Graphs are constructed by creating one or more templates, with desired properties data-bound, and adding model data.</p> |
| 46 | +<pre><code class="language-html"><div id="myDiagramDiv" style="width:400px; height:150px;"></div> |
| 47 | + |
| 48 | +<script src="https://unpkg.com/gojs"></script> |
| 49 | + |
| 50 | +<script> |
| 51 | +const myDiagram = |
| 52 | + new go.Diagram("myDiagramDiv", // create a Diagram for the HTML Div element |
| 53 | + { "undoManager.isEnabled": true }); // enable undo & redo |
| 54 | + |
| 55 | +// define a simple Node template |
| 56 | +myDiagram.nodeTemplate = |
| 57 | + new go.Node("Auto") // the Shape will automatically surround the TextBlock |
| 58 | + // add a Shape and a TextBlock to this "Auto" Panel |
| 59 | + .add(new go.Shape("RoundedRectangle", |
| 60 | + { strokeWidth: 0, fill: "white" }) // no border; default fill is white |
| 61 | + .bind("fill", "color")) // Shape.fill is bound to Node.data.color |
| 62 | + .add(new go.TextBlock({ margin: 8, stroke: "#333" }) // some room around the text |
| 63 | + .bind("text", "key")); // TextBlock.text is bound to Node.data.key |
| 64 | + |
| 65 | +// but use the default Link template, by not setting Diagram.linkTemplate |
| 66 | + |
| 67 | +// create the model data that will be represented by Nodes and Links |
| 68 | +myDiagram.model = new go.GraphLinksModel( |
| 69 | + [ |
| 70 | + { key: "Alpha", color: "lightblue" }, |
| 71 | + { key: "Beta", color: "orange" }, |
| 72 | + { key: "Gamma", color: "lightgreen" }, |
| 73 | + { key: "Delta", color: "pink" } |
| 74 | + ], |
| 75 | + [ |
| 76 | + { from: "Alpha", to: "Beta" }, |
| 77 | + { from: "Alpha", to: "Gamma" }, |
| 78 | + { from: "Beta", to: "Beta" }, |
| 79 | + { from: "Gamma", to: "Delta" }, |
| 80 | + { from: "Delta", to: "Alpha" } |
| 81 | + ]); |
| 82 | +</script> |
| 83 | +</code></pre> |
| 84 | +<p>The above diagram and model code creates the following graph. |
| 85 | +The user can now click on nodes or links to select them, copy-and-paste them, drag them, delete them, scroll, pan, and zoom, with a mouse or with fingers.</p> |
| 86 | +<p><a href="https://gojs.net/latest/samples/minimal.html"><img width="200" height="200" src="https://gojs.net/latest/assets/images/screenshots/minimal.png"></a></p> |
| 87 | +<p><em>Click the image to see the interactive GoJS Diagram</em></p> |
| 88 | +<h2>Support</h2> |
| 89 | +<p>Northwoods Software offers a month of free developer-to-developer support for GoJS to prospective customers so you can finish your project faster.</p> |
| 90 | +<p>Read and search the official <a href="https://forum.nwoods.com/c/gojs">GoJS forum</a> for any topics related to your questions.</p> |
| 91 | +<p>Posting in the forum is the fastest and most effective way of obtaining support for any GoJS related inquiries. |
| 92 | +Please register for support at Northwoods Software's <a href="https://www.nwoods.com/register.html">registration form</a> before posting in the forum.</p> |
| 93 | +<p>For any nontechnical questions about GoJS, such as about sales or licensing, |
| 94 | +please visit Northwoods Software's <a href="https://www.nwoods.com/contact.html">contact form</a>.</p> |
| 95 | +<h2>License</h2> |
| 96 | +<p>The GoJS <a href="https://gojs.net/latest/license.html">software license</a>.</p> |
| 97 | +<p>Copyright (c) Northwoods Software Corporation</p> |
0 commit comments