GoJS makes it easy to construct interactive diagrams of Nodes, Links, and Groups, with customizable templates and layouts. GoJS supports graphical templates and data-binding of object properties to model data. Only the model, consisting of simple jаvascript objects, needs to be saved and restored. GoJS makes it easy to read and write models in JSON format. We provide comprehensive API documentation and in-depth overviews of GoJS concepts, with interactive examples. With over 90 samples, you'll find numerous examples of GoJS properties and methods.

Fully Interactive Diagrams
Extensible Layouts and Tool System
Data-Binding and Models
Transactional State and Undo-Management
Mobile Support

Lightning Fast Diagramming in the Browser
GoJS takes advantage of the HTML Canvas to support high-performance diagrams. For creating static documents and printable resources, GoJS supports exporting Diagrams to images and SVG.

GoJS supports all modern browsers (IE9+), including mobile browsers.

Diagrams and Models
The Nodes and Links of a Diagram are visualizations of data that is managed by a Model. GoJS has a model-view architecture, where Models hold the data (arrays of jаvascript objects) that describe nodes and links, and Diagrams act as views to visualize this data using actual Node and Link objects. Models, not Diagrams, are what you load and then save after editing. You add whatever properties you need for your app on the data objects in the model; you do not add properties to or modify the prototype of the Diagram and GraphObject classes.

The diagram displays the three nodes that are in the model. Some interaction is already possible:

Click and drag the background in the above diagram to pan the view.
Click a node to select it, or press down on and drag a node to move it around.
To create a selection box, click and hold on the background, then start dragging.
Use CTRL-C and CTRL-V, or control-drag-and-drop, to make a copy of the selection.
Press the Delete key to delete selected nodes. (Read about more Keyboard Commands.)
Since the undo manager was enabled, CTRL-Z and CTRL-Y will undo and redo moves and copies and deletions.
Styling Nodes
Nodes are styled by creating templates consisting of GraphObjects and setting properties on those objects. To create a Node, we have several building block classes at our disposal:

Shape, to display pre-defined or custom geometry with colors
TextBlock, to display (potentially editable) text in various fonts
Picture, to display images
Panel, containers to hold a collection of other objects that can be positioned and sized in different manners according to the type of the Panel (like tables, vertical stacks, and stretching containers)
All of these building blocks are derived from the GraphObject abstract class, so we casually refer to them as GraphObjects or objects or elements. Note that a GraphObject is not an HTML DOM element, so there is not as much overhead in creating or modifying such objects.

We want the model data properties to affect our Nodes, and this is done by way of data bindings. Data bindings allow us to change the appearance and behavior of GraphObjects in Nodes by automatically setting properties on those GraphObjects to values that are taken from the model data. The model data objects are plain jаvascript objects. You can choose to use whatever property names you like on the node data in the model.

Kinds of Models
With a custom node template our diagram is becoming a pretty sight, but perhaps we want to show more. Perhaps we want an organizational chart to show that Don Meow is really the boss of a cat cartel. So we will create a complete organization chart diagram by adding some Links to show the relationship between individual nodes and a Layout to automatically position the nodes.

In order to get links into our diagram, the basic Model is not going to cut it. We are going to have to pick one of the other two models in GoJS, both of which support Links. These are GraphLinksModel and TreeModel. (Read more about models here.)

In GraphLinksModel, we have model.linkDataArray in addition to the model.nodeDataArray. It holds an array of jаvascript objects, each describing a link by specifying the "to" and "from" node keys. Here's an example where node A links to node B and where node B links to node C:

Diagram Layouts
As you can see the TreeModel automatically creates the necessary Links to associate the Nodes, but it's hard to tell whose parent is who.

Diagrams have a default layout which takes all nodes that do not have a location and gives them locations, arranging them in a grid. We could explicitly give each of our nodes a location to sort out this organizational mess, but as an easier solution in our case, we will use a layout that gives us good locations automatically.

We want to show a hierarchy, and are already using a TreeModel, so the most natural layout choice is TreeLayout. TreeLayout defaults to flowing from left to right, so to get it to flow from top to bottom (as is common in organizational diagrams), we will set the angle property to 90.



Only for V.I.P