tessl/npm-gojs
Interactive diagrams, charts, and graphs library for creating flowcharts, org charts, UML, BPMN, and hundreds of other diagram types with rich layouts and tools.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-gojs@3.0.0index.mddocs/
GoJS
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.
Package Information
- Package Name: gojs
- Package Type: npm
- Language: JavaScript/TypeScript
- Installation:
npm install gojs
Core Imports
// 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');Basic Usage
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' }
]);Architecture
GoJS is built around several key architectural components:
- GraphObject Hierarchy: Base classes (GraphObject → Panel → Part) that form the foundation for all visual elements
- Diagram System: Main container (Diagram) with specialized variants (Palette, Overview) for different use cases
- Model-Driven Architecture: Data models (GraphLinksModel, TreeModel) that drive diagram content through data binding
- Template System: Reusable templates for nodes and links that define visual appearance and behavior
- Layout Engine: Multiple built-in algorithms (Tree, LayeredDigraph, Circular, ForceDirected) for automatic positioning
- Tool Framework: Interactive tools for editing, selection, linking, and manipulation
- Event System: Comprehensive event handling for user interactions and model changes
This architecture enables GoJS to serve as both a high-level diagramming solution and a flexible foundation for custom diagram applications.
Capabilities
Core Diagram System
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;
}GraphObject Hierarchy
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;
}Visual Elements
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;
}Data Models
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;
}Layout System
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;
}Interactive Tools
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;
}Geometry and Collections
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 and Animation
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;
}Theme Management
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>;
}Types
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'
}