Features in GoJS
Below are several demonstrations of some of GoJS's most important features.
Templates and Data Binding
Node and Link templates set the visual appearance of Nodes and Links in the Diagram, and aspects of these visuals can be bound to data for live changes. The Diagram can also set a Diagram.nodeTemplateMap and Diagram.linkTemplateMap to use multiple templates that can be chosen in data by a category parameter. Palettes let users drag in new Nodes of any template or data into the Diagram. Drag in and select a Node or a Link below to change its template, or add a new template to the Palette with the new template menu above it.
Learn more about template maps, palettes, data binding, and saving and loading models.
Deep Interactivity Out of the Box
GoJS Diagrams come with event tracking, undo/redo management, permissions control, and various extensible tools without writing any extra code. The UndoManager handles undo and redo, which users can control with Ctrl/Cmd+Z and Ctrl/Cmd+Y, and Diagram attached Tools like the dragging, resizing, linking, and other tools provide other types of built-in interactivity. The visual Adornments for many tools can be customized as well, as shown below. The CommandHandler, which implements standard commands, can be overridden to add custom key controls. In this example, press space when a node is selected to branch off a new node.
Learn more about interactivity, transactions and undo, events, and extending GoJS.
Automatic Layouts
GoJS features several built-in Layouts to automatically arrange Nodes and Links. Click a button below to set Diagram.layout to each of the built-in layouts: TreeLayout, LayeredDigraphLayout, ForceDirectedLayout, CircularLayout, and GridLayout. There are several extension Layouts available as well.
Learn more about Layouts.
Subgraphs and Trees
Groups collect Nodes and Links into a single subgraph that can then be treated as one Node. Drag the individual nodes between the outer Groups to see this in action. Subgraphs can also be collapsed to hide member Parts. The following Groups are arranged in a TreeLayout, whose subtrees can be collapsed as well. Click the arrow buttons to expand/collapse subtrees and the plus/minus buttons to expand/collapse subgraphs.
Learn more about groups, trees, and collapsing subtrees.
Automatic Link Routing
GoJS allows deep customization of the automatic Link paths it creates without explicitly setting the points. This can be done by using different Routers or Routing options to achieve different behavior. Parameters like curve and corner can further customize how paths are drawn. Drag around the nodes to see how the different routing options automatically adjust the Link paths accordingly.
Exporting Images and Printing
Diagram.makeImage and Diagram.makeSvg render a Diagram, or just a selection of Parts, to a raster image or a scalable SVG element. To print, GoJS renders the diagram to SVG and hands it to the browser in a new window.
Choose an export type below to see its output above the diagram (click it again to close it), then use the Download button that appears to save it as a file. Or select some nodes first and check "Selection only" to export just those.
Learn more about making images, making SVG, and printing.