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.
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.
A custom Router that moves Link segments to parallelize and avoid overlaps.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Demonstrates use of the ZoomSlider class to zoom in/out using a control.
Demonstrates usage of the HyperlinkText extension.
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.
A custom LinkingTool that lets the user determine the route of a new Link by clicking.
A customized PackedLayout that arranges nested circular groups.
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.
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.
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.
A custom Tool that allows reshaping links with grid snapping.
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.
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.
A custom RotatingTool that lets the user rotate many selected objects at once.
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.
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.
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.
Demonstrates use of the Robot class to simulate mouse events.
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.
A floor planner demo app built with GoJS and Svelte
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.
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.
A virtualized version of PackedLayout that positions nodes in a packed area.