Flowchart

A standard flowchart, showing different node templates and several data-bindings. Each node has 3 or 4 port elements. Links are orthogonal and avoid nodes.

OrgChart (Static)

Shows an organizational chart diagram and uses an in-laid GoJS Overview to aid the user in navigation.

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.

Minimal

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

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.

Shapes

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

SVG Icons

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

Class Hierarchy

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

DOM Tree

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

Visual Tree

This sample shows the actual visual tree of a running Diagram, using a second Diagram.

Visual Tree Using Groups

This shows the same visual tree using nested Groups instead of nodes and links.

Arrowheads

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

Navigation

Displays relationships between different parts of a diagram.

Family Tree

Shows a standard family tree.

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.

Decision Tree

Allows a user to make progressive decisions.

Incremental Tree

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

Double Tree

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

Mind Map

Mind Map demonstration.

Tournament

Tournament bracket with dynamic advancement as scores are entered.

Tree View

Demonstrates a traditional "Tree View" in a GoJS diagram.

Pipe Tree

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

Genogram

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

IVR Tree

Diagram representation of an Interactive Voice Response Tree (IVR tree)

Parse Tree

A Parse tree representing the syntactic structure of a sentence.

Beat Paths

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

Concept Map

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

Euler Diagram

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

Data Visualization

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

Entity Relationship

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

Friend Wheel

Demonstrates a customized CircularLayout.

Recentering Radial

Click on a Node to center it and show its relationships.

Distances & Paths

Show distances from a node and highlighting paths between two nodes.

Sankey

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

PERT

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

Gantt

Demonstrates a simple Gantt chart.

Timeline

A simple timeline with events arranged along a line.

Shop Floor Monitor

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

Kitten Monitor

A monitoring diagram where the nodes (kittens) move about a house, with tooltips for each kitten.

Grouping

Demonstrates subgraphs that are created only as groups are expanded.

Layer Bands

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

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.

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.

Spreadsheet

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

UML Class

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

Virtualized Tree

An example of virtualization where the model holds 123,456 node data yet the diagram only creates a few nodes at a time.

Page Flow

A diagram representation of webpage flow

Process Flow

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

Shared States

Demonstrating nodes that simultaneously belong to multiple containers.

Sequential Function

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

Grafcet Diagrams

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

Sequence Diagram

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

Logic Circuit

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

Record Mapper

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

Selectable Fields

Records with fields that the user can select.

Add/Remove Table Columns

Adding and removing columns of a Table Panel.

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.

Dynamic Ports

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

Selectable Ports

A Node with ports that can be selected and deleted.

Draggable Ports

A Group with Nodes acting as ports that can be dragged within and between nodes.

Planogram

Drag-and-drop items from the Palette onto racks in 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.

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.

Pipes

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

Draggable Link

Showcases draggable, disconnected links.

Links to Links

Demonstrates the ability for a Link to appear to connect with another Link.

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.

Curviness of Links

An example customization of the Link.curviness property.

Multi-Node Path Links

Demonstrates custom routing for Links running through other Nodes.

Tapered Links

Demonstrates custom geometries for Links.

Multiple Arrowheads

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

Bar Charts

Simple bar charts within nodes.

Pie Charts

Simple pie charts within nodes.

Candlestick Charts

Simple candlestick or range charts within nodes.

Sparkline Graphs

Simple sparkline charts within nodes.

Content Alignment

Showcases alignment properties of the Diagram.

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.

Custom Text Editor

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

Context Menu

Demonstrates the implementation of a custom HTML context menu.

Canvases

Shows how HTML Canvas Elements, such as those created from other libraries, can be used inside of GoJS as Pictures.

Magnifier

An Overview used as a magnifying glass.

Comments

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

Grid Layout

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

Tree Layout

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

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.

Layered Digraph

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

Circular Layout

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

Interactive Force

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

Fishbone Layout

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

Parallel Layout

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

Serpentine Layout

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

Spiral Layout

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

Tree Map Layout

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

Table Layout

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

DragCreating

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

DragZooming

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

Freehand Drawing

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

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.

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.

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.

Node Label Dragging

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

Port Shifting

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

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.

ScrollingTable

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

Inspector

A standard customizable way to let the user see and edit properties of data or of Parts.

BPMN Editor

The start of a Business Process Model and Notation editor.

Floor Plan Editor

An editor for users to position, resize, and rotate furniture in a room.