Samples Index

Flowchart

A flowchart and palette, showing different node templates and data bindings. Each node has 3 or 4 port elements. Links are orthogonal and automatically avoidnodes.

OrgChart Editor

An organizational chart that allows user editing and re-organizing of the hierarchy.

State Chart

A state chart diagram that also shows dynamic creation of new nodes and links on a button press.

OrgChart (Static)

Shows an organizational chart, uses an in-laid Overview to aid the user in navigation, and allows the user to search by example.

Genogram

A genogram or pedigree chart is an extended family tree diagram that show information about each person or each relationship.

Network Configuration

Shows a CISCO-style network configuration diagram, with the ability to group nodes into subnetworks.

Warehouse Design

Warehouse design diagram with reshapable areas and disconnected links.

Sankey

Sankey diagrams show the amount of flow between nodes by the width of the links.

Dynamic Ports

Add ports to a selected node by clicking buttons or by using a context menu. Draw links by dragging between ports. If you select a link you can relink or reshape it.

Industrial Monitor

Example of an industrial monitoring diagram with updating data.

Kanban Board

A Kanban board editor, allowing the categorization of editable tasks.

Kitten Monitor

A monitoring diagram where the nodes (kittens) move on a background image (a house plan), with tooltips describing kittens.

Layer Bands

Layer Bands are automatically created for each 'layer' of a TreeLayout, and run perpendicular to the layout.

Logic Circuit

A functioning logic circuit diagram, which allows the user to make circuits using gates and wires.

Pipes

Showcasing nodes (Pipes) that can be joined, and will snap and drag together.

Process Editor

A designer for creating production process diagrams.

Process Flow

Tanks, valves, and pipes, with animated flow in the pipes.

Production Process

Partially describes the production process for converting natural gas and oil byproducts into their end products.

Record Mapper

Displays a variable number of fields for each record, with links mapping one field to another.

Regrouping

Allows the user to drag nodes, including groups, into and out of groups, both from the Palette as well as from within the Diagram.

Seating Chart

This sample demonstrates custom logic in a GoJS diagram - a 'Person' node can be dropped onto a 'Table' node, causing the person to be assigned a position at the closest empty seat at that table.

Swim Lanes

Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane.

System Dynamics

A System Dynamics diagram shows the storages and flows of material in some system, and the factors that influence the rates of flow.

Tree Mapper

Displays two trees, allowing the user to dynamically draw or reconnect links mapping data from field to another.

Shapes

Showcases all pre-defined GoJS figures. You can define your own named Shape figures.

Tree View

Demonstrates a traditional 'Tree View' in a GoJS diagram, with optional orthogonal links between the nodes.

Dimensioning

Demonstrates custom Links that show the distance between two points.

Block Diagram

A simple block diagram editor that makes it easy for the user to chain together new nodes, with context menus for changing shapes and colors.

Meter and Gauge Controls

Various meters and gauges that show particular values and can be modified by the user by dragging.

Absolute Positioning

A diagram that does not scroll or zoom or allow parts to be dragged out of a fixed area.

Accessibility with AriaCommandHandler

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

Add/Remove Table Columns

Demonstrates adding and removing columns of a Table Panel.

Adding Nodes to the Palette

Select and edit a node and add a copy of it to the palette.

Adornment Buttons

Selected nodes show a row of buttons that execute commands or start tools.

Animated Scroll and Attention

Aninmated focus by scrolling to a node along with animation of the size of the node to draw attention to it..

Arranging Layout

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

Arrowheads

Showcases all pre-defined Link arrowheads. You can define your own named arrowhead geometries.

Avoids Links Router

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

Balloon Links

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

Bar Charts

Simple bar charts or histograms within nodes.

Basic

Shows many of the commands possible in GoJS, templates for Links and for Groups, plus tooltips and context menus for Nodes, for Links, for Groups, and for the Diagram.

Beat Paths

Demonstrates reading JSON data describing the relative rankings of NFL teams at a particular moment in time and generating a diagram from that data.

Belts and Rollers

Show continuous belts winding by circular rollers

BPMN Editor

The start of a Business Process Model and Notation editor.

Candlestick Charts

Simple candlestick or range charts within nodes.

Charts in Nodes

Shows how to render a data-driven chart within each Node using the Chart.js library.

Checkboxes

Demonstrates simple uses of CheckBoxButtons.

Circular Layout

Shows CircularLayout and options. This layout positions nodes in a circular arrangement.

Class Hierarchy

Displays the GoJS Class Hierarchy as a series of trees. Double-click to go to the class's API documentation.

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.

Comments

GoJS supports the notion of 'Comments', including the ability to create balloon-like comments.

Concept Map

A web of interlinked concepts displayed with a ForceDirected Layout, showcasing link labels.

Connection Box

A Node containing ports that allow linking between them, within the node as well as between nodes, with custom link validation.

Constant Size

Kitten Monitor with constant size markers and tooltips when zooming out.

Content Alignment

Showcases alignment properties of the Diagram.

Context Menu

Demonstrates the implementation of a custom HTML context menu.

Curved Link Reshaping

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

Custom Animations

Shows how to create several custom Node animations.

Custom Expand and Collapse

Shows how to create Buttons with custom behavior for expanding/collapsing of a graph.

Custom Text Editor

Demonstrates using a custom HTML element for in-place editing of a TextBlock.

Data Flow

Show the processing steps involved in a database transformation or query, with labeled ports.

Data Flow Vertical

Same as Data Flow, but vertically oriented, and with slightly different styling.

Data Inspector

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

Data Visualization

A data-visualization demonstration that showcases GoJS interacting with other elements on the page.

Decision Tree

Allows a user to make progressive decisions.

Distances & Paths

Show distances between two nodes and highlights one of all possible paths between the nodes.

DOM Tree

Shows the DOM of this page displayed as a tree. Selection highlights the DOM element in the page.

Double Circle

Multiple circles using repeated CircularLayouts.

Double Tree

Displays a single diagram of two trees sharing a single root node growing in opposite directions, using the DoubleTreeLayout extension.

Drag and Drop Fields

Drag and drop fields from/to record Nodes.

Drag Out Fields

Drag out fields from record Nodes to an HTML element.

Drag Unoccupied

Demonstrates a function to avoid any overlapping of nodes during dragging.

Drag Zooming

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

DragCreating

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

Draggable Link

Showcases draggable disconnectable links that can be connected by dropping one or both ends at a valid port.

Drawing Commands

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

Dynamic Pie Chart

Dynamic pie chart with selectable slices that can change size.

Entity Relationship

An entity relationship diagram, showcasing data binding with item arrays.

Euler Diagram

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

Fault Tree

A fault tree diagram with collapsing/expanding subtrees and gates at each non-root node.

Fishbone Layout

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

Flow Builder

Demonstrates a flow builder where nodes/links can be created or dropped onto a recycling node.

Flow PanelLayout

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

Flowgrammer

Demonstrates a flow-chart-like editor of a restricted syntax language. Uses the ParallelLayout extension.

Force Directed

Shows ForceDirectedLayout and options. Treats the graph as if it were a system of physical bodies with forces acting on them and between them.

Freehand Drawing

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

Friend Wheel

Demonstrates a customized CircularLayout.

Geometry Reshaping

A custom Tool that supports interactive reshaping of Geometries.

Gesture Behavior

Shows different options for ToolManager's gestureBehavior.

GoJS and Leaflet Map

A GoJS diagram atop a Leaflet.js map, with nodes placed at latitude and longitude based locations.

Grafcet Diagrams

A Grafcet is a kind of sequential function chart used in automation design.

Grid Layout

Shows GridLayout and options. Places all of the Parts in a grid-like arrangement, ordered, spaced apart, and wrapping as needed.

Grouping

Demonstrates subgraphs that are created only as groups are expanded.

Guided Dragging

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

Hover Buttons

Shows buttons in an Adornment upon hover over a node.

HTML Drag and Drop

Demonstrates dragging and dropping from HTML, and pasting from the external clipboard.

HTML Interaction

Contains two draggable HTML elements (using jQuery UI). One of the two HTML elements houses a panel that interacts with the main Diagram.

HTML LightBox Context Menu

Shows a LightBox style HTML Context Menu.

HTMLInfo Text Editor

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

Hyperlinks

Demonstrates usage of the HyperlinkText extension.

Incremental Tree

Demonstrates the expansion of a tree where nodes are only created 'on-demand', when the user clicks on the 'expand' Button.

Instrument Gauge

A gauge using a scale made with a Graduated Panel.

Interactive Force

A continuous ForceDirectedLayout that occurs as the user drags around a node.

IVR Tree

Diagram representation of an Interactive Voice Response Tree (IVR tree). Nodes may have a collapsible list of details.

Layered Digraph

Shows LayeredDigraphLayout and options. Arranges nodes of directed graphs into layers (rows or columns).

Link Label Dragging

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

Link Label On Path Dragging

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

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 Shifting

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.

Links to Links

Demonstrates the ability for a Link to appear to connect with another Link, using label nodes that belong to links.

Local Storage Commands

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 View

Two diagrams, the one on top showing a full tree and the one below focusing on a specific node in the tree and those nodes that are logically 'near' it.

Macros

Demonstrates an automatic ungrouping of nodes when dropping an element on the diagram.

Magnifier

An Overview used as a magnifying glass.

Mind Map

A Mind Map, a double-tree whose nodes have an 'add' button when selected and a context menu.

Minimal

Shows default Diagram interactivity and basic data binding. Select, move, copy, delete, undo, redo with keyboard or touch.

Minimal Image Download

Minimal, showing image Blob creation with Diagram.makeImageData, and download.

Minimal SVG Download

Minimal, showing SVG creation with Diagram.makeSvg, and download.

Minimal Vue.js

Minimal, using Vue.js.

Multi-color Links

Demonstrates a custom Link that can be stroked with multiple consecutive colors.

Multi-Node Path Links

Demonstrates custom routing for Links running through other Nodes.

Multiple Arrowheads

A custom orthogonal Link that draws arrowheads at the end of each segment.

Navigation

Displays relationships between different parts of a diagram.

Network

Shows a network configurator with a Palette and Overview.

Node Label Dragging

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

Non Realtime 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.

Org Chart Assistants

Shows an org chart with assistant nodes at the side, above regular child nodes.

Org Chart Extras

Shows an org chart with extra links and expand/collapse functionality.

Orthogonal Link Reshaping

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

Overview Resizing

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

Packed Hierarchy

A customized PackedLayout that arranges nested circular groups.

Packed Layout

A custom Layout that positions nodes in a packed area.

Page Flow

A diagram representation of webpage flow.

Panel Layout

Shows how to create a custom PaneLayout.

Parallel Layout

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

Parallel Route Links

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

Parse Tree

A Parse tree representing the syntactic structure of a sentence. The leaf nodes are shown in a horizontal line.

Path Animation

Animation of diagram parts (tokens) along link paths.

PDF generation

Generating a PDF file holding all of the pages of a Diagram's rendering.

PERT

A simple PERT chart, showcasing GoJS table panels and RowColumnDefinition properties.

Pie Charts

Simple pie charts within nodes.

Pinch Zooming

Demonstrates customization of pinch-zooming to scale a node.

Pipe Tree

A tree layout with rectangular nodes at alternating angles and no links.

Planogram

Drag-and-drop items from the Palette onto racks in the Diagram.

Polygon Drawing

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

Polyline Linking

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

Port Shifting

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

Radial Adornment Buttons

An adornment showing buttons in a circle on one selected node.

Radial Partition

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

Realtime Drag Selecting

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

Recentering Radial

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

Regrouping Tree View

Regrouping with tree view of grouping hierarchy.

Relationships

Shows how you can create custom renderings for Links by repeatedly drawing GraphObjects along the route.

Rescaling

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

Resize Multiple

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

Rotate Multiple

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

Rounded Groups

Groups consisting of a RoundedTopRectangle and a RoundedBottomRectangle figure surrounding the Group's Placeholder.

Rulered Diagram

A diagram with Graduated Panels at the edges acting as rulers.

Scroll Modes

Shows infinite scrolling and positionComputation.

Scrolling Table

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

Sector Reshaping

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

Selectable Fields

Records with fields that the user can select.

Selectable Ports

A Node with ports that can be selected and deleted.

Sequence Diagram

A sequence diagram illustrates how different processes interact with one-another and in what order.

Sequential Function

A sequence diagram that shows different node templates, LayeredDigraphLayout and in-place text editing.

Serpentine Layout

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

Shared States

As an alternative to using Groups, this manages Nodes that simultaneously belong to multiple containers.

Shop Floor Monitor

Shows the continuously updating state of a number of stations on an imaginary shop floor.

Simulating Input

Demonstrates use of the Robot class to simulate mouse events.

Single Page View

Show a diagram on a sheet of paper, limiting dragging and resizing to stay within the page minus margins.

Snap Link Reshaping

A custom Tool that allows reshaping links with grid snapping.

Spacing Zoom

When zooming, change the spacing of the Nodes, not the Diagram.scale.

Sparkline Graphs

Simple sparkline charts within nodes.

Spiral Layout

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

Spot Rotating

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

Spreadsheet

An example of nested Table Panels forming a spreadsheet-like grid.

SVG Data URL

In makeSvg, replace image sources with Base64

SVG Icons

Create your own custom Shapes using SVG path strings. This sample uses SVG strings from a free icon set.

SVG Tiger

Shows a tiger rendered in SVG without using a Picture

Swim Lane Layout

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

Swim Lanes Vertical

Demonstrates collapsible, resizable, re-orderable swimlanes, a kind of process-flow diagram, with custom dragging rules that disallow nodes from leaving their lane.

Table Layout

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

Tapered Links

Demonstrates a custom Geometry for Link paths.

Thermometer

Graduated thermometer scales using Graduated Panel.

Timeline

A simple timeline with events arranged along a line.

Tournament

Tournament bracket with dynamic advancement as scores are entered.

Tree Layout

Shows TreeLayout and options. Positions nodes of a tree-structured graph in layers (rows or columns).

Tree Load Animation

Shows how to create a custom Diagram loading animation.

Tree Map Layout

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

Tri-state CheckBox Tree

Demonstrates a traditional 'Tree View' in a GoJS diagram, where each item has a checkbox with three states.

Two Diagrams

Demonstrates drag and drop between two different diagrams using a shared UndoManager.

Two Halves

Nodes consisting of two Panels, using a RoundedTopRectangle and a RoundedBottomRectangle figure.

UML Class

A UML Class diagram shows software classes and their properties and methods, and the relationships between them.

Update Demo

Showcases two Diagrams observing the same Model. Modifying positions in one Diagram will modify them in the model, updating the other Diagram as well.