Core graph creation and management functionality for building interactive diagram applications. The Graph class serves as the primary entry point and orchestrates all aspects of the diagram including rendering, interaction, transformation, and plugin management.
Creates a new graph instance with specified configuration options.
/**
* Creates a new graph instance
* @param options - Graph configuration options
*/
constructor(options: Partial<GraphOptions.Manual>): Graph;
interface GraphOptions.Manual {
// Required container element
container: HTMLElement;
// Graph dimensions
width: number;
height: number;
// Grid configuration
grid?: boolean | {
type?: 'mesh' | 'fixedDot' | 'dot';
size?: number;
visible?: boolean;
args?: any;
};
// Panning and zooming
panning?: boolean | {
enabled?: boolean;
modifiers?: string | string[];
eventTypes?: string[];
};
mousewheel?: {
enabled?: boolean;
factor?: number;
modifiers?: string | string[];
guard?: (this: Graph, e: WheelEvent) => boolean;
};
// Background configuration
background?: {
color?: string;
image?: string;
position?: string;
size?: string;
repeat?: string;
opacity?: number;
};
// Connection settings
connecting?: {
snap?: boolean | { radius?: number };
allowBlank?: boolean;
allowLoop?: boolean;
allowNode?: boolean;
allowEdge?: boolean;
allowMulti?: boolean | string;
highlight?: boolean;
connector?: string | ConnectorDefinition;
router?: string | RouterDefinition;
anchor?: string | AnchorDefinition;
connectionPoint?: string | ConnectionPointDefinition;
createEdge?: (this: Graph, args: any) => Edge;
validateEdge?: (this: Graph, args: any) => boolean;
validateMagnet?: (this: Graph, args: any) => boolean;
validateConnection?: (this: Graph, args: any) => boolean;
};
// Interaction settings
interacting?: boolean | InteractingOptions | ((this: Graph, cellView: CellView) => InteractingOptions);
// Plugin configurations
keyboard?: boolean;
history?: boolean;
selecting?: boolean | {
enabled?: boolean;
multiple?: boolean;
rubberband?: boolean;
movable?: boolean;
showNodeSelectionBox?: boolean;
showEdgeSelectionBox?: boolean;
};
snapline?: boolean | {
enabled?: boolean;
clean?: boolean;
tolerance?: number;
};
clipboard?: boolean | {
enabled?: boolean;
useLocalStorage?: boolean;
};
// Optional model instance
model?: Model;
}Usage Examples:
import { Graph } from "@antv/x6";
// Basic graph setup
const graph = new Graph({
container: document.getElementById('graph'),
width: 800,
height: 600,
grid: true,
panning: true,
mousewheel: {
enabled: true,
modifiers: ['ctrl', 'meta']
}
});
// Advanced configuration
const advancedGraph = new Graph({
container: document.getElementById('advanced-graph'),
width: 1200,
height: 800,
grid: {
type: 'mesh',
size: 20,
visible: true
},
background: {
color: '#f8f9fa'
},
connecting: {
snap: { radius: 20 },
allowBlank: false,
allowLoop: false,
highlight: true,
connector: 'rounded',
router: 'manhattan'
},
selecting: {
enabled: true,
multiple: true,
rubberband: true
}
});Core operations for adding, removing, and managing graph cells (nodes and edges).
/**
* Add one or more cells to the graph
* @param cell - Cell instance(s) or metadata to add
* @param options - Addition options
* @returns Graph instance for chaining
*/
addCell(cell: Cell | Cell[], options?: Model.AddOptions): this;
/**
* Remove a cell from the graph
* @param cell - Cell instance or ID to remove
* @param options - Removal options
* @returns Removed cell or null if not found
*/
removeCell(cell: Cell | string, options?: Collection.RemoveOptions): Cell | null;
/**
* Remove multiple cells from the graph
* @param cells - Array of cell instances or IDs to remove
* @param options - Removal options
* @returns Array of removed cells
*/
removeCells(cells: (Cell | string)[], options?: Cell.RemoveOptions): Cell[];
/**
* Get all cells in the graph
* @returns Array of all cells
*/
getCells(): Cell[];
/**
* Find a cell by its ID
* @param id - Cell ID to search for
* @returns Cell instance or null if not found
*/
getCellById(id: string): Cell | null;
/**
* Check if the graph contains a specific cell
* @param cell - Cell instance or ID to check
* @returns True if cell exists in graph
*/
hasCell(cell: Cell | string): boolean;
/**
* Get the total number of cells in the graph
* @returns Number of cells
*/
getCellCount(): number;
/**
* Clear all cells from the graph
* @param options - Clear options
* @returns Graph instance for chaining
*/
clearCells(options?: Cell.SetOptions): this;
/**
* Replace all cells in the graph
* @param cells - New cells to set
* @param options - Reset options
* @returns Graph instance for chaining
*/
resetCells(cells: Cell[], options?: Collection.SetOptions): this;
interface Model.AddOptions {
silent?: boolean;
sort?: boolean;
dryrun?: boolean;
[key: string]: any;
}
interface Collection.RemoveOptions {
silent?: boolean;
[key: string]: any;
}Specialized operations for creating and managing nodes.
/**
* Add a node to the graph from metadata
* @param metadata - Node creation metadata
* @param options - Addition options
* @returns Created node instance
*/
addNode(metadata: Node.Metadata, options?: Model.AddOptions): Node;
/**
* Add an existing node to the graph
* @param node - Node instance to add
* @param options - Addition options
* @returns Added node instance
*/
addNode(node: Node, options?: Model.AddOptions): Node;
/**
* Add multiple nodes to the graph
* @param nodes - Array of node instances or metadata
* @param options - Addition options
* @returns Array of created/added nodes
*/
addNodes(nodes: (Node | Node.Metadata)[], options?: Model.AddOptions): Node[];
/**
* Create a node without adding it to the graph
* @param metadata - Node creation metadata
* @returns Created node instance
*/
createNode(metadata: Node.Metadata): Node;
/**
* Remove a node from the graph
* @param node - Node instance or ID to remove
* @param options - Removal options
* @returns Removed node or null if not found
*/
removeNode(node: Node | string, options?: Collection.RemoveOptions): Node | null;
/**
* Get all nodes in the graph
* @returns Array of all nodes
*/
getNodes(): Node[];Specialized operations for creating and managing edges.
/**
* Add an edge to the graph from metadata
* @param metadata - Edge creation metadata
* @param options - Addition options
* @returns Created edge instance
*/
addEdge(metadata: Edge.Metadata, options?: Model.AddOptions): Edge;
/**
* Add an existing edge to the graph
* @param edge - Edge instance to add
* @param options - Addition options
* @returns Added edge instance
*/
addEdge(edge: Edge, options?: Model.AddOptions): Edge;
/**
* Add multiple edges to the graph
* @param edges - Array of edge instances or metadata
* @param options - Addition options
* @returns Array of created/added edges
*/
addEdges(edges: (Edge | Edge.Metadata)[], options?: Model.AddOptions): Edge[];
/**
* Create an edge without adding it to the graph
* @param metadata - Edge creation metadata
* @returns Created edge instance
*/
createEdge(metadata: Edge.Metadata): Edge;
/**
* Remove an edge from the graph
* @param edge - Edge instance or ID to remove
* @param options - Removal options
* @returns Removed edge or null if not found
*/
removeEdge(edge: Edge | string, options?: Collection.RemoveOptions): Edge | null;
/**
* Get all edges in the graph
* @returns Array of all edges
*/
getEdges(): Edge[];Graph transformation utilities for zooming, panning, centering, and coordinate conversion.
/**
* Get current zoom level or set zoom level
* @param factor - Optional zoom factor to set
* @param options - Zoom options
* @returns Current zoom level or graph instance for chaining
*/
zoom(): number;
zoom(factor: number, options?: Transform.ZoomOptions): this;
/**
* Set zoom level to specific value
* @param factor - Target zoom factor
* @param options - Zoom options
* @returns Graph instance for chaining
*/
zoomTo(factor: number, options?: Transform.ZoomOptions): this;
/**
* Zoom to fit content within viewport
* @param options - Fit options
* @returns Graph instance for chaining
*/
zoomToFit(options?: Transform.GetContentAreaOptions & Transform.ScaleContentToFitOptions): this;
/**
* Translate (pan) the graph
* @param tx - Translation in X direction
* @param ty - Translation in Y direction
* @returns Graph instance for chaining
*/
translate(tx: number, ty: number): this;
/**
* Center the viewport
* @param options - Center options
* @returns Graph instance for chaining
*/
center(options?: Transform.CenterOptions): this;
/**
* Center content within viewport
* @param options - Position options
* @returns Graph instance for chaining
*/
centerContent(options?: Transform.PositionContentOptions): this;
/**
* Center a specific cell in viewport
* @param cell - Cell to center
* @param options - Position options
* @returns Graph instance for chaining
*/
centerCell(cell: Cell, options?: Transform.PositionContentOptions): this;
/**
* Fit graph content to viewport with padding
* @param options - Fit options
* @returns Content bounding rectangle
*/
fitToContent(options?: Transform.FitToContentFullOptions): Rectangle;
interface Transform.ZoomOptions {
absolute?: boolean;
minScale?: number;
maxScale?: number;
scaleGrid?: number;
center?: Point.PointLike;
}
interface Transform.CenterOptions {
padding?: NumberExt.SideOptions;
}
interface Transform.PositionContentOptions {
padding?: NumberExt.SideOptions;
preserveAspectRatio?: boolean;
useCellGeometry?: boolean;
}Utilities for converting between different coordinate systems.
/**
* Convert page coordinates to local graph coordinates
* @param point - Page coordinates
* @returns Local coordinates
*/
pageToLocal(point: Point.PointLike): Point;
/**
* Convert local graph coordinates to page coordinates
* @param point - Local coordinates
* @returns Page coordinates
*/
localToPage(point: Point.PointLike): Point;
/**
* Convert client coordinates to local graph coordinates
* @param point - Client coordinates
* @returns Local coordinates
*/
clientToLocal(point: Point.PointLike): Point;
/**
* Convert local graph coordinates to client coordinates
* @param point - Local coordinates
* @returns Client coordinates
*/
localToClient(point: Point.PointLike): Point;
/**
* Convert local coordinates to graph coordinates
* @param point - Local coordinates
* @returns Graph coordinates
*/
localToGraph(point: Point.PointLike): Point;
/**
* Convert graph coordinates to local coordinates
* @param point - Graph coordinates
* @returns Local coordinates
*/
graphToLocal(point: Point.PointLike): Point;
/**
* Snap point to grid
* @param point - Point to snap
* @returns Snapped point
*/
snapToGrid(point: Point.PointLike): Point;System for loading and managing graph plugins to extend functionality.
/**
* Load and activate a plugin
* @param plugin - Plugin instance to load
* @param options - Plugin-specific options
* @returns Graph instance for chaining
*/
use(plugin: Graph.Plugin, ...options: any[]): this;
/**
* Get an installed plugin by name
* @param pluginName - Name of plugin to retrieve
* @returns Plugin instance or undefined
*/
getPlugin<T extends Graph.Plugin>(pluginName: string): T | undefined;
/**
* Enable one or more plugins
* @param plugins - Plugin name(s) to enable
* @returns Graph instance for chaining
*/
enablePlugins(plugins: string[] | string): this;
/**
* Disable one or more plugins
* @param plugins - Plugin name(s) to disable
* @returns Graph instance for chaining
*/
disablePlugins(plugins: string[] | string): this;
/**
* Check if a plugin is enabled
* @param pluginName - Name of plugin to check
* @returns True if plugin is enabled
*/
isPluginEnabled(pluginName: string): boolean;
interface Graph.Plugin {
name: string;
install(graph: Graph, options?: any): void;
uninstall?(graph: Graph): void;
}Methods for analyzing graph structure and relationships between cells.
/**
* Get edges connected to a cell
* @param cell - Cell to analyze
* @param options - Filter options
* @returns Array of connected edges
*/
getConnectedEdges(cell: Cell | string, options?: Model.GetConnectedEdgesOptions): Edge[];
/**
* Get incoming edges for a cell
* @param cell - Cell to analyze
* @returns Array of incoming edges
*/
getIncomingEdges(cell: Cell | string): Edge[];
/**
* Get outgoing edges for a cell
* @param cell - Cell to analyze
* @returns Array of outgoing edges
*/
getOutgoingEdges(cell: Cell | string): Edge[];
/**
* Get neighbor cells
* @param cell - Cell to analyze
* @param options - Neighbor options
* @returns Array of neighbor cells
*/
getNeighbors(cell: Cell, options?: Model.GetNeighborsOptions): Cell[];
/**
* Get successor cells in the graph
* @param cell - Starting cell
* @param options - Traversal options
* @returns Array of successor cells
*/
getSuccessors(cell: Cell, options?: Model.GetPredecessorsOptions): Cell[];
/**
* Get predecessor cells in the graph
* @param cell - Starting cell
* @param options - Traversal options
* @returns Array of predecessor cells
*/
getPredecessors(cell: Cell, options?: Model.GetPredecessorsOptions): Cell[];
/**
* Get all root nodes (nodes with no incoming edges)
* @returns Array of root nodes
*/
getRootNodes(): Node[];
/**
* Get all leaf nodes (nodes with no outgoing edges)
* @returns Array of leaf nodes
*/
getLeafNodes(): Node[];
/**
* Find shortest path between two cells
* @param source - Source cell or ID
* @param target - Target cell or ID
* @param options - Path finding options
* @returns Array of cell IDs representing path
*/
getShortestPath(source: Cell | string, target: Cell | string, options?: Model.GetShortestPathOptions): string[];
interface Model.GetConnectedEdgesOptions {
incoming?: boolean;
outgoing?: boolean;
deep?: boolean;
indirect?: boolean;
}
interface Model.GetNeighborsOptions {
incoming?: boolean;
outgoing?: boolean;
deep?: boolean;
indirect?: boolean;
}Methods for finding and managing cell views in the DOM.
/**
* Find view by cell or DOM element
* @param ref - Cell instance or DOM element
* @returns Cell view or null
*/
findView(ref: Cell | Element): CellView | null;
/**
* Find view by cell
* @param cell - Cell instance or ID
* @returns Cell view or null
*/
findViewByCell(cell: Cell | string): CellView | null;
/**
* Find view by DOM element
* @param elem - DOM element
* @returns Cell view or null
*/
findViewByElem(elem: Element): CellView | null;
/**
* Find views at specific coordinates
* @param x - X coordinate
* @param y - Y coordinate
* @returns Array of views at point
*/
findViewsFromPoint(x: number, y: number): CellView[];
/**
* Find views within rectangular area
* @param rect - Rectangle area to search
* @returns Array of views in area
*/
findViewsInArea(rect: Rectangle.RectangleLike): CellView[];Methods for serializing and deserializing graph data.
/**
* Serialize graph to JSON
* @param options - Serialization options
* @returns JSON representation of graph
*/
toJSON(options?: Model.ToJSONOptions): Model.JSONData;
/**
* Parse JSON data for loading into graph
* @param data - JSON data to parse
* @returns Parsed graph data
*/
parseJSON(data: Model.FromJSONData): any;
/**
* Load graph from JSON data
* @param data - JSON data to load
* @param options - Loading options
* @returns Graph instance for chaining
*/
fromJSON(data: Model.FromJSONData, options?: Model.FromJSONOptions): this;
interface Model.ToJSONOptions {
diff?: any;
[key: string]: any;
}
interface Model.FromJSONOptions {
silent?: boolean;
[key: string]: any;
}
interface Model.JSONData {
cells: Cell.Properties[];
}
type Model.FromJSONData = Model.JSONData | Cell.Properties[];// Graph options interfaces
interface InteractingOptions {
edgeLabelMovable?: boolean;
arrowheadMovable?: boolean;
vertexMovable?: boolean;
vertexAddable?: boolean;
vertexDeletable?: boolean;
nodeMovable?: boolean;
magnetConnectable?: boolean;
edgeMovable?: boolean;
stopDelegation?: boolean;
preventDefault?: boolean;
}
// Transform namespace types
namespace Transform {
interface ZoomOptions {
absolute?: boolean;
minScale?: number;
maxScale?: number;
scaleGrid?: number;
center?: Point.PointLike;
}
interface CenterOptions {
padding?: NumberExt.SideOptions;
}
interface PositionContentOptions {
padding?: NumberExt.SideOptions;
preserveAspectRatio?: boolean;
useCellGeometry?: boolean;
}
}
// Number extension types
namespace NumberExt {
interface SideOptions {
top?: number;
right?: number;
bottom?: number;
left?: number;
}
}
// Rectangle types
namespace Rectangle {
interface RectangleLike {
x: number;
y: number;
width: number;
height: number;
}
}