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,
|
20 | including data visualizations, drawing tools, and graph editors.
|
21 | There are samples for
|
22 | [flowchart](https://gojs.net/latest/samples/flowchart.html),
|
23 | [org chart](https://gojs.net/latest/samples/orgChartEditor.html),
|
24 | [business process BPMN](https://gojs.net/latest/samples/bpmn/BPMN.html),
|
25 | [swimlanes](https://gojs.net/latest/samples/swimlanes.html),
|
26 | [timelines](https://gojs.net/latest/samples/timeline.html),
|
27 | [state charts](https://gojs.net/latest/samples/statechart.html),
|
28 | [kanban](https://gojs.net/latest/samples/kanban.html),
|
29 | [network](https://gojs.net/latest/samples/network.html),
|
30 | [mindmap](https://gojs.net/latest/samples/mindMap.html),
|
31 | [sankey](https://gojs.net/latest/samples/sankey.html),
|
32 | [family trees](https://gojs.net/latest/samples/familyTree.html) and [genogram charts](https://gojs.net/latest/samples/genogram.html),
|
33 | [fishbone diagrams](https://gojs.net/latest/samples/Fishbone.html),
|
34 | [floor plans](https://gojs.net/latest/samples/floorplannerTS/index.html),
|
35 | [UML](https://gojs.net/latest/samples/umlClass.html),
|
36 | [decision trees](https://gojs.net/latest/samples/decisionTree.html),
|
37 | [PERT charts](https://gojs.net/latest/samples/PERT.html),
|
38 | [Gantt](https://gojs.net/latest/samples/gantt.html), and
|
39 | [hundreds more](https://gojs.net/latest/samples/index.html).
|
40 | GoJS includes a number of built in layouts including tree layout, force directed, circular, and layered digraph layout,
|
41 | and many custom layout extensions and examples.
|
42 |
|
43 | GoJS is renders either to an HTML Canvas element (with export to SVG or image formats) or directly as SVG DOM.
|
44 | GoJS can run in a web browser, or server side in [Node](https://nodejs.org/en/) or [Puppeteer](https://github.com/GoogleChrome/puppeteer).
|
45 | GoJS Diagrams are backed by Models, with saving and loading typically via JSON-formatted text.
|
46 |
|
47 | [<img src="https://raw.githubusercontent.com/NorthwoodsSoftware/GoJS/master/.github/github-970x354.png">](https://gojs.net/latest/samples/index.html)
|
48 |
|
49 | Read more about GoJS at [gojs.net](https://gojs.net)
|
50 |
|
51 | This repository contains only the library.
|
52 | The sources for all samples, extensions, and documentation can be installed by running:
|
53 | ```html
|
54 | $ npm create gojs-kit
|
55 | ```
|
56 | 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).
|
57 |
|
58 | <h2>Minimal Sample</h2>
|
59 |
|
60 | Graphs are constructed by creating one or more templates, with desired properties data-bound, and adding model data.
|
61 |
|
62 | ```html
|
63 | <div id="myDiagramDiv" style="width:400px; height:150px;"></div>
|
64 |
|
65 | <script src="https://unpkg.com/gojs"></script>
|
66 |
|
67 | <script>
|
68 | const myDiagram =
|
69 | new go.Diagram("myDiagramDiv", // create a Diagram for the HTML Div element
|
70 | { "undoManager.isEnabled": true }); // enable undo & redo
|
71 |
|
72 | // define a simple Node template
|
73 | myDiagram.nodeTemplate =
|
74 | new go.Node("Auto") // the Shape will automatically surround the TextBlock
|
75 | // add a Shape and a TextBlock to this "Auto" Panel
|
76 | .add(new go.Shape("RoundedRectangle",
|
77 | { strokeWidth: 0, fill: "white" }) // no border; default fill is white
|
78 | .bind("fill", "color")) // Shape.fill is bound to Node.data.color
|
79 | .add(new go.TextBlock({ margin: 8, stroke: "#333" }) // some room around the text
|
80 | .bind("text", "key")); // TextBlock.text is bound to Node.data.key
|
81 |
|
82 | // but use the default Link template, by not setting Diagram.linkTemplate
|
83 |
|
84 | // create the model data that will be represented by Nodes and Links
|
85 | myDiagram.model = new go.GraphLinksModel(
|
86 | [
|
87 | { key: "Alpha", color: "lightblue" },
|
88 | { key: "Beta", color: "orange" },
|
89 | { key: "Gamma", color: "lightgreen" },
|
90 | { key: "Delta", color: "pink" }
|
91 | ],
|
92 | [
|
93 | { from: "Alpha", to: "Beta" },
|
94 | { from: "Alpha", to: "Gamma" },
|
95 | { from: "Beta", to: "Beta" },
|
96 | { from: "Gamma", to: "Delta" },
|
97 | { from: "Delta", to: "Alpha" }
|
98 | ]);
|
99 | </script>
|
100 | ```
|
101 |
|
102 | The above diagram and model code creates the following graph.
|
103 | 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.
|
104 |
|
105 | [<img width="200" height="200" src="https://gojs.net/latest/assets/images/screenshots/minimal.png">](https://gojs.net/latest/samples/minimal.html)
|
106 |
|
107 | *Click the image to see the interactive GoJS Diagram*
|
108 |
|
109 |
|
110 | <h2>Support</h2>
|
111 |
|
112 | Northwoods Software offers a month of free developer-to-developer support for GoJS to prospective customers so you can finish your project faster.
|
113 |
|
114 | Read and search the official <a href="https://forum.nwoods.com/c/gojs">GoJS forum</a> for any topics related to your questions.
|
115 |
|
116 | Posting in the forum is the fastest and most effective way of obtaining support for any GoJS related inquiries.
|
117 | Please register for support at Northwoods Software's <a href="https://www.nwoods.com/register.html">registration form</a> before posting in the forum.
|
118 |
|
119 | For any nontechnical questions about GoJS, such as about sales or licensing,
|
120 | please visit Northwoods Software's <a href="https://www.nwoods.com/contact.html">contact form</a>.
|
121 |
|
122 |
|
123 | <h2>License</h2>
|
124 |
|
125 | The GoJS <a href="https://gojs.net/latest/license.html">software license</a>.
|
126 |
|
127 |
|
128 | Copyright (c) Northwoods Software Corporation
|