Select a node to see more information.

This process flow editor lets the user design diagrams to be shown by Production Process.

At the top is a Palette, from which the designer can drag-and-drop nodes down into the main Diagram. When the end-user selects a Node, more information is shown in the gray area below the diagram. For the designer, the Inspector also shows details about a selected Node or Link below the diagram, where the designer may modify some of the properties.

Each Node consists of an SVG Shape at the top and a rectangular port at the bottom. The designer can draw new pipes (Links) by dragging from a port to a different node's port.

Below is the JSON data for the model:

GoJS Features in this sample

Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples

Exporting SVGs

GoJS has one function for creating SVG: Diagram.makeSVG, which returns a new SVGElement with a representation of a GoJS Diagram. The method has a single argument, a JavaScript Object that contains several definable properties, enumerated in the documentation. More information can be found in the GoJS Intro.

Related samples


A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

Data Inspector

Using a premade GoJS extension, you can create an HTML-based inspector that displays and allows editing of data for the selected Part (if any), or for a particular JavaScript object, or for the shared Model.modelData object, which exists even if there are no nodes or links.

The inspector code lies in DataInspector.js and DataInspector.css. This code is meant to be a starting point for making your own model data inspector.

A generic demonstration of this extension can be found in the GoJS Intro.

Related samples

HTML Interaction

GoJS Diagrams can be used alongside other HTML elements in a webapp. For custom Text Editors, Context Menus, and ToolTips, which are invoked and hidden via GoJS tool operations, it is best to use the HTMLInfo class.

More information can be found in the GoJS Intro.

Related samples