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