The core diagram system provides the main classes for creating and managing interactive diagrams, including the primary Diagram class and specialized variants like Palette and Overview.
The main diagram container that manages all visual elements, tools, layouts, and user interactions.
class Diagram extends Group {
/**
* Creates a new Diagram.
* @param div - HTML element ID or HTMLDivElement to contain the diagram
* @param init - Optional initialization properties
*/
constructor(div: HTMLDivElement | string, init?: Partial<Diagram>);
// Templates
nodeTemplate: Part;
linkTemplate: Part;
groupTemplate: Part;
nodeTemplateMap: Map<string, Part>;
linkTemplateMap: Map<string, Part>;
groupTemplateMap: Map<string, Part>;
// Data and Layout
model: Model;
layout: Layout;
// Management Systems
toolManager: ToolManager;
undoManager: UndoManager;
commandHandler: CommandHandler;
animationManager: AnimationManager;
// Visual Properties
background: Brush | string;
grid: Panel;
hasHorizontalScrollbar: boolean;
hasVerticalScrollbar: boolean;
autoScale: AutoScale;
// Selection and Focus
selection: Set<Part>;
isReadOnly: boolean;
allowSelect: boolean;
allowMove: boolean;
allowCopy: boolean;
allowDelete: boolean;
allowInsert: boolean;
allowLink: boolean;
allowRelink: boolean;
allowGroup: boolean;
allowUngroup: boolean;
allowHorizontalScroll: boolean;
allowVerticalScroll: boolean;
allowZoom: boolean;
// Methods
add(part: Part): void;
remove(part: Part): void;
clear(): void;
findNodeForKey(key: any): Node | null;
findLinkForData(data: ObjectData): Link | null;
findPartForKey(key: any): Part | null;
findPartForData(data: ObjectData): Part | null;
select(part: Part): void;
clearSelection(): void;
selectCollection(coll: Iterable<Part>): void;
// Coordinate Conversion
transformViewToDoc(p: Point): Point;
transformDocToView(p: Point): Point;
// Scrolling and Zooming
scroll(unit: string, dir: string, dist?: number): boolean;
scrollToRect(r: Rect): void;
zoomToFit(): void;
zoomToRect(r: Rect): void;
// Lifecycle Events
addDiagramListener(name: string, listener: (e: DiagramEvent) => void): void;
removeDiagramListener(name: string, listener: (e: DiagramEvent) => void): void;
// State Management
isModified: boolean;
startTransaction(tname?: string): boolean;
commitTransaction(tname?: string): boolean;
rollbackTransaction(): boolean;
// Rendering and Export
makeImage(options?: ImageOptions): HTMLCanvasElement;
makeSvg(options?: SvgOptions): SVGElement;
}Usage Examples:
import * as go from 'gojs';
// Basic diagram setup
const diagram = new go.Diagram('myDiagramDiv', {
'undoManager.isEnabled': true,
'allowHorizontalScroll': true,
'allowVerticalScroll': true,
'allowZoom': true,
'allowSelect': true,
'autoScale': go.AutoScale.Uniform,
layout: new go.TreeLayout({ angle: 90, layerSpacing: 35 })
});
// Listen to diagram events
diagram.addDiagramListener('SelectionMoved', (e) => {
console.log('Selection moved:', e.subject);
});
// Export diagram as image
const canvas = diagram.makeImage({
background: 'white',
returnType: 'canvas',
size: new go.Size(300, 200)
});Specialized diagram for displaying a palette of draggable template elements.
class Palette extends Diagram {
/**
* Creates a new Palette.
* @param div - HTML element ID or HTMLDivElement to contain the palette
* @param init - Optional initialization properties
*/
constructor(div: HTMLDivElement | string, init?: Partial<Palette>);
// Palette automatically sets these properties:
// allowMove: false
// allowCopy: false
// allowResize: false
// allowDelete: false
// hasHorizontalScrollbar: false
// maxSelectionCount: 1
}Usage Examples:
// Create a palette with node templates
const palette = new go.Palette('myPaletteDiv');
palette.nodeTemplateMap.add('',
new go.Node('Auto')
.add(
new go.Shape('RoundedRectangle', { fill: 'white' })
.bind('fill', 'color'),
new go.TextBlock({ margin: 8 })
.bind('text', 'text')
)
);
palette.model = new go.GraphLinksModel([
{ text: 'Start', color: 'lightgreen' },
{ text: 'Process', color: 'lightblue' },
{ text: 'End', color: 'pink' }
]);Specialized diagram that shows a thumbnail overview of another diagram with a viewport indicator.
class Overview extends Diagram {
/**
* Creates a new Overview.
* @param div - HTML element ID or HTMLDivElement to contain the overview
* @param init - Optional initialization properties
*/
constructor(div: HTMLDivElement | string, init?: Partial<Overview>);
observed: Diagram;
box: Part;
// Overview automatically sets these properties:
// hasHorizontalScrollbar: false
// hasVerticalScrollbar: false
// allowMove: false
// allowSelect: false
// contentAlignment: go.Spot.Center
}Usage Examples:
// Create overview linked to main diagram
const overview = new go.Overview('myOverviewDiv');
overview.observed = mainDiagram;
// Customize the viewport box appearance
overview.box = new go.Part()
.add(new go.Shape({ fill: null, stroke: 'red', strokeWidth: 3 }));Diagrams support multiple rendering layers for organizing visual elements.
class Layer extends Part {
constructor(name?: string, part?: Part);
layerName: string;
opacity: number;
visible: boolean;
temporary: boolean;
// Methods
add(part: Part): void;
remove(part: Part): void;
}Usage Examples:
// Access default layers
const backgroundLayer = diagram.findLayer('Background');
const foregroundLayer = diagram.findLayer('Foreground');
// Create custom layer
const customLayer = new go.Layer('CustomLayer');
diagram.addLayer(customLayer);
// Add parts to specific layers
diagram.add(myNode); // goes to default layer
customLayer.add(mySpecialNode); // goes to custom layerconst diagram = new go.Diagram('diagramDiv', {
// Enable undo/redo
'undoManager.isEnabled': true,
// Set layout
layout: new go.TreeLayout(),
// Configure interaction
'toolManager.hoverDelay': 100,
'toolManager.toolTipDuration': 10000,
// Set visual properties
background: 'lightgray',
grid: go.Diagram.makeDefaultGrid(),
// Configure scrolling and scaling
'commandHandler.copiesTree': true,
'commandHandler.deletesTree': true,
'draggingTool.dragsTree': true,
// Handle events
'SelectionMoved': (e) => console.log('moved'),
'TextEdited': (e) => console.log('edited')
});// Single template for all nodes
diagram.nodeTemplate = myNodeTemplate;
// Multiple templates by category
diagram.nodeTemplateMap.add('process', processTemplate);
diagram.nodeTemplateMap.add('decision', decisionTemplate);
diagram.nodeTemplateMap.add('start', startTemplate);// Manual transaction control
diagram.startTransaction('update colors');
diagram.selection.each(part => {
diagram.model.setDataProperty(part.data, 'color', 'red');
});
diagram.commitTransaction('update colors');
// Automatic transaction (recommended)
diagram.commit(diag => {
diag.selection.each(part => {
diag.model.setDataProperty(part.data, 'color', 'red');
});
}, 'update colors');The CommandHandler provides keyboard command support and common diagram operations like copy, paste, delete, undo, and group management.
class CommandHandler {
/**
* Creates a new CommandHandler with default key bindings.
*/
constructor(init?: Partial<CommandHandler>);
// Read-only Properties
diagram: Diagram;
// Clipboard Configuration
copiesConnectedLinks: boolean;
deletesConnectedLinks: boolean;
copiesTree: boolean;
deletesTree: boolean;
copiesParentKey: boolean;
copiesGroupKey: boolean;
// Group Operations
archetypeGroupData: ObjectData | null;
memberValidation: ((group: Group | null, part: Part) => boolean) | null;
// Zoom Settings
defaultScale: number;
zoomFactor: number;
isZoomToFitRestoreEnabled: boolean;
// Selection Commands
selectAll(): void;
canSelectAll(): boolean;
// Clipboard Commands
copySelection(): void;
canCopySelection(): boolean;
cutSelection(): void;
canCutSelection(): boolean;
deleteSelection(): void;
canDeleteSelection(): boolean;
pasteSelection(pos?: Point): void;
canPasteSelection(pos?: Point): boolean;
// Undo/Redo Commands
undo(): void;
canUndo(): boolean;
redo(): void;
canRedo(): boolean;
// Zoom Commands
decreaseZoom(factor?: number): void;
canDecreaseZoom(factor?: number): boolean;
increaseZoom(factor?: number): void;
canIncreaseZoom(factor?: number): boolean;
resetZoom(newscale?: number): void;
canResetZoom(newscale?: number): boolean;
zoomToFit(): void;
canZoomToFit(): boolean;
// Group Operations
groupSelection(): void;
canGroupSelection(): boolean;
ungroupSelection(group?: Group): void;
canUngroupSelection(group?: Group): boolean;
// Tree Operations
collapseTree(node?: Node): void;
canCollapseTree(node?: Node): boolean;
expandTree(node?: Node): void;
canExpandTree(node?: Node): boolean;
// SubGraph Operations
collapseSubGraph(group?: Group): void;
canCollapseSubGraph(group?: Group): boolean;
expandSubGraph(group?: Group): void;
canExpandSubGraph(group?: Group): boolean;
// Text Editing
editTextBlock(textblock?: TextBlock): void;
canEditTextBlock(textblock?: TextBlock): boolean;
// Context Menu
showContextMenu(obj?: GraphObject | Diagram): void;
canShowContextMenu(obj?: GraphObject | Diagram): boolean;
// Navigation
scrollToPart(part?: Part): void;
canScrollToPart(part?: Part): boolean;
}Default Keyboard Shortcuts:
Usage Examples:
// Configure CommandHandler behavior
diagram.commandHandler.copiesTree = true;
diagram.commandHandler.deletesTree = true;
diagram.commandHandler.zoomFactor = 1.25;
// Custom group validation
diagram.commandHandler.memberValidation = (group, part) => {
return part.category !== 'special';
};
// Programmatic command execution
if (diagram.commandHandler.canCopySelection()) {
diagram.commandHandler.copySelection();
}
// Custom keyboard shortcuts (override key handling)
diagram.addDiagramListener('Paste', (e) => {
if (customPasteLogic()) {
e.handled = true;
}
});