GoJS Samples

Our samples demonstrate several Diagram types and showcase specific features and layouts. You can use the HTML and JavaScript in these samples as the starting point for your application.

If you are done looking around and are ready to experiment with GoJS, read the getting started tutorial.

We are happy to help prospective customers make their proof-of-concept. If you need help getting started, contact us.

If you want to search the source code, you can download a copy of all samples via the npm command:

npm create gojs-kit@latest

Demonstrates custom Links that show the distance between two points.

Dimensioning Links

Demonstrates custom Links that show the distance between two points.

Demonstrates a custom CommandHandler to update an aria-live DIV for accessibility.

ARIA Accessibility

Demonstrates a custom CommandHandler to update an aria-live DIV for accessibility.

The Arranging layout is a layout of layouts, plus a third layout for arranging left-overs.

Arranging Layout

The Arranging layout is a layout of layouts, plus a third layout for arranging left-overs.

A custom Router that moves Link segments to parallelize and avoid overlaps.

Avoids Links Router

A custom Router that moves Link segments to parallelize and avoid overlaps.

Demonstrates custom Links that create a 'Balloon' around the fromNode.

Ballon Links

Demonstrates custom Links that create a 'Balloon' around the fromNode.

Demonstrates custom CommandHandler which uses localStorage as the repository for the clipboard, rather than an in-memory global variable, allowing for copying between tabs and windows.

Local Storage Clipboard

Demonstrates custom CommandHandler which uses localStorage as the repository for the clipboard, rather than an in-memory global variable, allowing for copying between tabs and windows.

A custom Tool that lets the user reshape curved links with a single handle.

Curved Link Reshaping Using Single Handle

A custom Tool that lets the user reshape curved links with a single handle.

Demonstrates custom Links that route parallel to other Links between the same two ports.

Parallel Routing

Demonstrates custom Links that route parallel to other Links between the same two ports.

A simple drop-in for inspecting and editing Part data.

Data Inspector

A simple drop-in for inspecting and editing Part data.

A custom Tool that lets a user draw a box showing where and how large a new node should be.

Drag Creating Tool

A custom Tool that lets a user draw a box showing where and how large a new node should be.

A custom Tool that lets a user draw a box showing what to zoom in to.

Drag Zooming

A custom Tool that lets a user draw a box showing what to zoom in to.

A custom DraggingTool that lets the user drag a translucent image of the Nodes and Links to be moved, leaving them in place until the mouse up.

NonRealtime Dragging

A custom DraggingTool that lets the user drag a translucent image of the Nodes and Links to be moved, leaving them in place until the mouse up.

A custom Tool that lets the user drag a label in a Spot Panel of a Node.

Dragging Node Label

A custom Tool that lets the user drag a label in a Spot Panel of a Node.

A custom Tool that lets the user drag a label on a Link and that keeps its relative position to the link.

Dragging Link Label

A custom Tool that lets the user drag a label on a Link and that keeps its relative position to the link.

A custom Tool that lets the user drag a label on a Link and that keeps the label along the path of the link.

Dragging Link Label along Path

A custom Tool that lets the user drag a label on a Link and that keeps the label along the path of the link.

Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys.

Draw Command Handler

Demonstrates custom CommandHandler which provides alignment commands and additional behaviors for the arrow keys.

A read-only diagram where clicking on a node will open a new webpage.

Euler Diagram

A read-only diagram where clicking on a node will open a new webpage.

The Fishbone or Ishikawa layout is a tree layout for cause-and-effect relationships.

Fishbone Layout

The Fishbone or Ishikawa layout is a tree layout for cause-and-effect relationships.

A custom PanelLayout that arranges panel elements into rows or columns.

Flow Layout in Panels

A custom PanelLayout that arranges panel elements into rows or columns.

A custom Tool that lets the user interactively draw a line, converting it into a Shape.

Freehand Drawing

A custom Tool that lets the user interactively draw a line, converting it into a Shape.

A custom Tool that supports interactive reshaping of Geometries.

Geometry Reshaping

A custom Tool that supports interactive reshaping of Geometries.

A custom DraggingTool that makes guidelines visible as a Part is dragged around a Diagram and is nearly aligned with another Part.

Guided Dragging

A custom DraggingTool that makes guidelines visible as a Part is dragged around a Diagram and is nearly aligned with another Part.

Demonstrates use of the ZoomSlider class to zoom in/out using a control.

HTML Zoom Slider for Zooming

Demonstrates use of the ZoomSlider class to zoom in/out using a control.

Demonstrates usage of the HyperlinkText extension.

Hyperlink Text

Demonstrates usage of the HyperlinkText extension.

A custom Tool that lets the user interactively draw polygons and polyline Shapes.

Interactive Drawing of Polygons or Polylines

A custom Tool that lets the user interactively draw polygons and polyline Shapes.

A custom Layout that assumes there is a single split and a single merge node with parallel lines of nodes connecting them.

Parallel Layout

A custom Layout that assumes there is a single split and a single merge node with parallel lines of nodes connecting them.

A custom LinkingTool that lets the user determine the route of a new Link by clicking.

Polyline Linking

A custom LinkingTool that lets the user determine the route of a new Link by clicking.

A customized PackedLayout that arranges nested circular groups.

Packed Hierarchy of Groups

A customized PackedLayout that arranges nested circular groups.

A custom Layout that positions nodes in a packed area.

Packed Layout Demo

A custom Layout that positions nodes in a packed area.

A custom Tool that lets a user drag and create a box to select nodes and links.

Realtime Selection

A custom Tool that lets a user drag and create a box to select nodes and links.

Arrange people in circles around a central person, in layers according to distance from the central person.

Radial Layout

Arrange people in circles around a central person, in layers according to distance from the central person.

Arrange people in rings around a central person, in layers according to distance from the central person.

Radial Partition

Arrange people in rings around a central person, in layers according to distance from the central person.

A custom Tool that lets a user change the scale of an object.

Rescaling by Dragging Handle

A custom Tool that lets a user change the scale of an object.

A custom Tool that supports interactive reshaping of pie-shaped sectors of circles.

Reshaping and Rotating Sectors of Circles

A custom Tool that supports interactive reshaping of pie-shaped sectors of circles.

A custom Tool that allows reshaping links with grid snapping.

Reshaping Links Snaps to Grid

A custom Tool that allows reshaping links with grid snapping.

A custom Tool that lets the user reshape orthogonal links by dragging entire segments.

Orthogonal Link Reshaping

A custom Tool that lets the user reshape orthogonal links by dragging entire segments.

A custom ResizingTool that lets the user resize many selected objects at once.

Resizing Multiple

A custom ResizingTool that lets the user resize many selected objects at once.

A custom Tool which allows the user to resize the overview box.

Resizing of Overview Box

A custom Tool which allows the user to resize the overview box.

Two custom Tools that let the user resize the width of columns or the height of rows in a Table Panel of a Node.

Table Row and Column Resizing

Two custom Tools that let the user resize the width of columns or the height of rows in a Table Panel of a Node.

A custom RotatingTool that lets the user rotate many selected objects at once.

Rotate Multiple

A custom RotatingTool that lets the user rotate many selected objects at once.

A custom RotatingTool that lets the user shift the rotation point.

Rotating Node about Movable Rotation Spot

A custom RotatingTool that lets the user shift the rotation point.

A demonstration of the LinkLabelRouter extension based on the Dynamic Ports sample. Move Nodes or create new links to demonstrate that link labels will automatically move to a nearby location to avoid overlapping.

Link Label Router

A demonstration of the LinkLabelRouter extension based on the Dynamic Ports sample. Move Nodes or create new links to demonstrate that link labels will automatically move to a nearby location to avoid overlapping.

Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons.

Scrolling Table Panels with ScrollBars

Demonstrates a custom Table Panel with a scrollbar implemented in GoJS, including two AutoRepeatButtons.

A custom Layout that positions a chain of nodes in rows of alternating direction.

Serpentine Layout

A custom Layout that positions a chain of nodes in rows of alternating direction.

A custom Tool that adds handles on Links to allow the user to shift the end point of the Link along the sides of the port without disconnecting it.

Shifting Link Connections

A custom Tool that adds handles on Links to allow the user to shift the end point of the Link along the sides of the port without disconnecting it.

A custom Tool that lets the user drag a port in a Spot Panel of a Node.

Shifting Ports in Nodes

A custom Tool that lets the user drag a port in a Spot Panel of a Node.

Demonstrates use of the Robot class to simulate mouse events.

Simulating Input using Robot

Demonstrates use of the Robot class to simulate mouse events.

A custom Layout that positions a chain of nodes in a spiral.

Spiral Layout of Node Chains

A custom Layout that positions a chain of nodes in a spiral.

Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor.

Standard HTMLInfo Text Editor

Demonstrates using an HTMLInfo that acts as a re-implementation of the default text editor.

A floor planner demo app built with GoJS and Svelte

Svelte Floorplanner

A floor planner demo app built with GoJS and Svelte

A custom Layout that puts nodes into swimlanes with dependencies that cross lanes.

Swim Lane Layout Keeps Nodes in their Lanes

A custom Layout that puts nodes into swimlanes with dependencies that cross lanes.

A custom Layout that arranges Nodes just as a Table Panel arranges GraphObjects.

Table Layout of Nodes in Rows and Columns

A custom Layout that arranges Nodes just as a Table Panel arranges GraphObjects.

A custom Layout that renders nested Groups into the viewport with each Node having an area proportional to its declared 'size'.

Tree Map of Nested Groups

A custom Layout that renders nested Groups into the viewport with each Node having an area proportional to its declared 'size'.

Demonstrates simple uses of CheckBoxButtons.

CheckBox Styles

Demonstrates simple uses of CheckBoxButtons.

A virtualized version of PackedLayout that positions nodes in a packed area.

Virtualized Diagram with Packed Layout

A virtualized version of PackedLayout that positions nodes in a packed area.

Complete list of all samples