GoJS is a comprehensive JavaScript and TypeScript library for creating interactive diagrams, charts, and graphs in web browsers and Node.js environments. It provides a rich set of tools for building various types of visualizations including flowcharts, organizational charts, UML diagrams, BPMN processes, network diagrams, family trees, mind maps, and hundreds of other diagram types.
npm install gojs// UMD (script tag)
<script src="https://cdn.jsdelivr.net/npm/gojs/release/go.js"></script>
// All GoJS classes available under 'go' namespace
const myDiagram = new go.Diagram('myDiagramDiv');// ES modules
import * as go from 'gojs';
const myDiagram = new go.Diagram('myDiagramDiv');// CommonJS
const go = require('gojs');
const myDiagram = new go.Diagram('myDiagramDiv');import * as go from 'gojs';
// Create a diagram
const myDiagram = new go.Diagram('myDiagramDiv', {
'undoManager.isEnabled': true, // enable undo & redo
layout: new go.TreeLayout() // automatic tree layout
});
// Define a node template
myDiagram.nodeTemplate =
new go.Node('Auto')
.add(
new go.Shape('RoundedRectangle', { fill: 'white', strokeWidth: 0 })
.bind('fill', 'color'),
new go.TextBlock({ margin: 8, font: 'bold 14px sans-serif' })
.bind('text', 'key')
);
// Create model data
myDiagram.model = new go.GraphLinksModel([
{ key: 'Alpha', color: 'lightblue' },
{ key: 'Beta', color: 'orange' },
{ key: 'Gamma', color: 'lightgreen' }
], [
{ from: 'Alpha', to: 'Beta' },
{ from: 'Beta', to: 'Gamma' }
]);GoJS is built around several key architectural components:
This architecture enables GoJS to serve as both a high-level diagramming solution and a flexible foundation for custom diagram applications.
The main Diagram class and related components for creating and managing interactive diagrams.
class Diagram extends Group {
constructor(div: HTMLDivElement | string, init?: Partial<Diagram>);
nodeTemplate: Part;
linkTemplate: Part;
groupTemplate: Part;
model: Model;
layout: Layout;
toolManager: ToolManager;
undoManager: UndoManager;
commandHandler: CommandHandler;
}
class Palette extends Diagram {
constructor(div: HTMLDivElement | string, init?: Partial<Palette>);
}
class Overview extends Diagram {
constructor(div: HTMLDivElement | string, init?: Partial<Overview>);
observed: Diagram;
}The foundation classes that form the visual element hierarchy for all diagram components.
abstract class GraphObject {
visible: boolean;
opacity: number;
background: Brush | string;
margin: Margin;
stretch: Stretch;
alignment: Spot;
}
class Panel extends GraphObject {
type: PanelType;
itemArray: List<GraphObject>;
defaultAlignment: Spot;
defaultStretch: Stretch;
}
class Part extends Panel {
data: ObjectData;
category: string;
key: any;
location: Point;
position: Point;
actualBounds: Rect;
isSelected: boolean;
}
class Node extends Part {
linksConnected: List<Link>;
findLinksInto(): Iterator<Link>;
findLinksOutOf(): Iterator<Link>;
findLinksConnected(): Iterator<Link>;
}
class Link extends Part {
fromNode: Node;
toNode: Node;
fromPort: GraphObject;
toPort: GraphObject;
points: List<Point>;
routing: Routing;
}Shape, TextBlock, Picture, and other visual components for creating diagram content.
class Shape extends GraphObject {
figure: string;
geometry: Geometry;
fill: Brush | string;
stroke: Brush | string;
strokeWidth: number;
strokeDashArray: number[];
}
class TextBlock extends GraphObject {
text: string;
font: string;
stroke: Brush | string;
textAlign: string;
verticalAlignment: Spot;
isMultiline: boolean;
editable: boolean;
}
class Picture extends GraphObject {
source: string;
imageStretch: ImageStretch;
imageAlignment: Spot;
}Model classes for managing diagram data with automatic data binding and change tracking.
abstract class Model {
nodeDataArray: ObjectData[];
dataFormat: string;
addNodeData(obj: ObjectData): void;
removeNodeData(obj: ObjectData): void;
setDataProperty(obj: ObjectData, propname: string, val: any): void;
}
class GraphLinksModel extends Model {
linkDataArray: ObjectData[];
linkKeyProperty: string;
linkFromKeyProperty: string;
linkToKeyProperty: string;
addLinkData(obj: ObjectData): void;
removeLinkData(obj: ObjectData): void;
}
class TreeModel extends Model {
nodeParentKeyProperty: string;
nodeChildrenProperty: string;
}Automatic layout algorithms for positioning nodes and routing links in diagrams.
abstract class Layout {
diagram: Diagram;
group: Group;
network: LayoutNetwork;
doLayout(coll?: Iterable<Part>): void;
invalidateLayout(): void;
}
class TreeLayout extends Layout {
angle: number;
arrangement: TreeArrangement;
sorting: TreeSorting;
alignment: TreeAlignment;
layerSpacing: number;
nodeSpacing: number;
}
class LayeredDigraphLayout extends Layout {
direction: number;
layerSpacing: number;
columnSpacing: number;
cycleRemoveOption: LayeredDigraphCycleRemove;
}
class CircularLayout extends Layout {
radius: number;
aspectRatio: number;
spacing: number;
arrangement: CircularArrangement;
direction: CircularDirection;
}
class ForceDirectedLayout extends Layout {
maxIterations: number;
electricalCharge: number;
springLength: number;
springStiffness: number;
}Tool system for handling user interactions like selection, dragging, linking, and editing.
abstract class Tool {
diagram: Diagram;
isActive: boolean;
isEnabled: boolean;
canStart(): boolean;
doStart(): void;
doMouseMove(): void;
doMouseUp(): void;
}
class ToolManager extends Tool {
clickSelectingTool: ClickSelectingTool;
dragSelectingTool: DragSelectingTool;
draggingTool: DraggingTool;
linkingTool: LinkingTool;
resizingTool: ResizingTool;
rotatingTool: RotatingTool;
textEditingTool: TextEditingTool;
}
class DraggingTool extends Tool {
copiesEffectively: boolean;
dragsTree: boolean;
}
class LinkingTool extends Tool {
temporaryLink: Link;
direction: LinkingDirection;
}Mathematical classes for coordinates, sizing, and collection management.
class Point {
constructor(x?: number, y?: number);
x: number;
y: number;
add(p: Point): Point;
subtract(p: Point): Point;
multiply(n: number): Point;
normalize(): Point;
static readonly Origin: Point;
}
class Size {
constructor(w?: number, h?: number);
width: number;
height: number;
}
class Rect {
constructor(x?: number, y?: number, w?: number, h?: number);
x: number;
y: number;
width: number;
height: number;
contains(p: Point): boolean;
intersects(r: Rect): boolean;
}
class List<T> implements Iterable<T> {
count: number;
add(val: T): boolean;
insert(i: number, val: T): void;
remove(val: T): boolean;
contains(val: T): boolean;
iterator: Iterator<T>;
}Data binding system for connecting model data to visual properties, plus animation support.
class Binding {
constructor(targetProperty: string, sourceProperty?: string);
name: string;
property: string;
converter?: (val: any, obj: GraphObject) => any;
mode: BindingMode;
transform(converter: (val: any, obj: GraphObject) => any): Binding;
}
class AnimationManager {
isEnabled: boolean;
isAnimating: boolean;
start(): void;
stop(): void;
}
class Animation {
duration: number;
easing: AnimationEasing;
trigger: AnimationTrigger;
}Comprehensive theme system for dynamic switching between light, dark, and custom themes with centralized visual property control.
class ThemeManager {
constructor(init?: Partial<ThemeManager>);
themeMap: Map<string, Theme>;
currentTheme: string;
defaultTheme: string;
preferredColorScheme: 'light' | 'dark';
changesDivBackground: boolean;
addDiagram(diagram: Diagram): this;
removeDiagram(diagram: Diagram): this;
set(themeName: string, props: Partial<Theme>): this;
findValue(prop: string | string[] | number, source?: string | string[], tprop?: string): any;
}
class Themes {
static readonly Light: Theme;
static readonly Dark: Theme;
}
interface Theme {
colors?: ThemeColors;
fonts?: ThemeValues<string>;
numbers?: ThemeValues<number>;
points?: ThemeValues<Point>;
sizes?: ThemeValues<Size>;
margins?: ThemeValues<Margin>;
arrowheads?: ThemeValues<string>;
}interface ObjectData {
[index: string]: any;
}
interface Iterable<T> {
iterator: Iterator<T>;
count: number;
first(): T | null;
}
interface Iterator<T> extends Iterable<T> {
next(): boolean;
hasNext(): boolean;
value: T;
}
// Core enums
enum PanelType {
Position = 'Position',
Vertical = 'Vertical',
Horizontal = 'Horizontal',
Auto = 'Auto',
Spot = 'Spot',
Table = 'Table',
TableRow = 'TableRow',
TableColumn = 'TableColumn',
Viewbox = 'Viewbox',
Grid = 'Grid',
Graduated = 'Graduated',
Link = 'Link'
}
enum Stretch {
None = 'None',
Default = 'Default',
Horizontal = 'Horizontal',
Vertical = 'Vertical',
Fill = 'Fill'
}
enum BindingMode {
OneWay = 'OneWay',
TwoWay = 'TwoWay'
}
enum AutoScale {
None = 'None',
Uniform = 'Uniform',
UniformToFill = 'UniformToFill'
}
enum BrushType {
Solid = 'Solid',
Linear = 'Linear',
Radial = 'Radial',
Pattern = 'Pattern'
}
enum GeometryType {
Line = 'Line',
Rectangle = 'Rectangle',
Ellipse = 'Ellipse',
Path = 'Path'
}
enum ImageStretch {
None = 0, // No scaling, may clip
Fill = 2, // Scale to fit exactly, may stretch aspect ratio
Uniform = 6, // Scale equally to fit larger side
UniformToFill = 7 // Scale equally to fill bounds, may clip
}
enum Flip {
None = 0, // Draw normally
Vertical = 1, // Draw upside-down
Horizontal = 2, // Draw mirror-image
Both = 3 // Draw with both coordinates reversed
}
enum Routing {
Normal = 'Normal',
Orthogonal = 'Orthogonal',
AvoidsNodes = 'AvoidsNodes'
}
// Layout-related enums
enum TreeArrangement {
Horizontal = 'Horizontal',
Vertical = 'Vertical',
FixedRoots = 'FixedRoots'
}
enum TreeSorting {
Forward = 'Forward',
Reverse = 'Reverse',
Ascending = 'Ascending',
Descending = 'Descending'
}
enum TreeAlignment {
Start = 'Start',
End = 'End',
Center = 'Center',
CenterChildren = 'CenterChildren',
CenterSubtrees = 'CenterSubtrees'
}
enum CircularArrangement {
ConstantSpacing = 'ConstantSpacing',
ConstantAngle = 'ConstantAngle',
ConstantDistance = 'ConstantDistance',
Packed = 'Packed'
}
enum CircularDirection {
Clockwise = 'Clockwise',
Counterclockwise = 'Counterclockwise',
BidirectionalLeft = 'BidirectionalLeft',
BidirectionalRight = 'BidirectionalRight'
}