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