Configuration

model

The model corresponding to the canvas, by default creates a new model.

Methods

isNode(...)

isNode(cell: Cell): cell is Node

Returns whether the specified Cell is a node.

isEdge(...)

isEdge(cell: Cell): cell is Edge

Returns whether the specified Cell is an edge.

createNode(...)

createNode(metadata: Node.Metadata): Node

Creates a node.

addNode(...)

addNode(metadata: Node.Metadata, options?: AddOptions): Node
addNode(node: Node, options?: AddOptions): Node

Adds a node to the canvas, returns the added node.

addNodes(...)

addNodes(nodes: (Node.Metadata | Node)[], options?: AddOptions): Graph

Adds multiple nodes to the canvas, returns the graph. When adding nodes in batch, it's recommended to use this method for better performance compared to multiple addNode calls.

removeNode(...)

removeNode(nodeId: string, options?: RemoveOptions): Node | null
removeNode(node: Node, options?: RemoveOptions): Node | null

Removes a node, returns the removed node.

createEdge(...)

createEdge(metadata: Edge.Metadata): Edge

Creates an edge.

addEdge(...)

addEdge(metadata: Edge.Metadata, options?: AddOptions): Edge
addEdge(edge:Edge, options?: AddOptions): Edge

Adds an edge to the canvas, returns the added edge.

addEdges(...)

addEdges(edges: (Edge.Metadata | Edge)[], options?: AddOptions): Graph

Adds multiple edges to the canvas, returns the graph.

removeEdge(...)

removeEdge(edgeId: string, options?: RemoveOptions): Edge | null
removeEdge(edge: Edge, options?: RemoveOptions): Edge | null

Removes an edge, returns the removed edge.

addCell(...)

addCell(cell: Cell | Cell[], options?: AddOptions): this

Adds a node or edge to the canvas.

removeCell(...)

removeCell(cellId: string, options?: RemoveOptions): Cell | null
removeCell(cell: Cell, options?: RemoveOptions): Cell | null

Removes a node or edge, returns the removed node or edge.

removeCells(...)

removeCells(cells: (Cell | string)[], options?: RemoveOptions): Cell[]

Removes multiple nodes/edges, returns an array of removed nodes or edges.

removeConnectedEdges(...)

removeConnectedEdges(cell: Cell | string, options?: RemoveOptions): Edge[]

Removes edges connected to the node/edge, returns an array of removed edges.

disconnectConnectedEdges(...)

disconnectConnectedEdges(cell: Cell | string, options?: Edge.SetOptions): this

Sets the source and target of edges connected to the node/edge to the origin {x: 0, y: 0}, effectively disconnecting them.

clearCells(...)

clearCells(options?: SetOptions): this

Clears the canvas.

resetCells(...)

resetCells(cells: Cell[], options?: SetOptions): this

Clears the canvas and adds the specified nodes/edges.

hasCell(...)

hasCell(cellId: string): boolean
hasCell(cell: Cell): boolean

Returns whether the canvas contains the specified node/edge.

getCellById(...)

getCellById(id: string)

Gets a node/edge by its ID.

updateCellId(...)

updateCellId(cell: Cell, newId: string)

Updates the ID of a node or edge, returns the newly created node/edge.

getCells()

getCells(): Cell[]

Returns all nodes and edges in the canvas.

getCellCount()

getCellCount(): number

Returns the count of all nodes and edges in the canvas.

getNodes()

getNodes(): Node[]

Returns all nodes in the canvas.

getEdges()

getEdges(): Edge[]

Returns all edges in the canvas.

getOutgoingEdges(...)

getOutgoingEdges(cell: Cell | string): Edge[] | null

Gets the outgoing edges connected to the node/edge, i.e., edges whose source is the specified node/edge.

getIncomingEdges(...)

getIncomingEdges(cell: Cell | string): Edge[] | null

Gets the incoming edges connected to the node/edge, i.e., edges whose target is the specified node/edge.

getConnectedEdges(...)

getConnectedEdges(cell: Cell | string, options?: GetConnectedEdgesOptions): Edge[]

Get the edges connected to a node/edge.

const edges = graph.getConnectedEdges(node) // Returns incoming and outgoing edges
const edges = graph.getConnectedEdges(node, { incoming: true, outgoing: true }) // Returns incoming and outgoing edges

const edges = graph.getConnectedEdges(node, { incoming: true }) // Returns incoming edges
const edges = graph.getConnectedEdges(node, {
  incoming: true,
  outgoing: false,
}) // Returns incoming edges

const edges = graph.getConnectedEdges(node, { outgoing: true }) // Returns outgoing edges
const edges = graph.getConnectedEdges(node, {
  incoming: false,
  outgoing: true,
}) // Returns outgoing edges

const edges = graph.getConnectedEdges(node, { deep: true }) // Returns incoming and outgoing edges, including those connected to all descendant nodes/edges
const edges = graph.getConnectedEdges(node, { deep: true, incoming: true }) // Returns incoming edges, including those connected to all descendant nodes/edges
const edges = graph.getConnectedEdges(node, { deep: true, enclosed: true }) // Returns incoming and outgoing edges, including edges connecting descendant nodes/edges

const edges = graph.getConnectedEdges(node, { indirect: true }) // Returns incoming and outgoing edges, including indirectly connected edges

getRootNodes()

getRootNodes(): Node[]

Get all root nodes, i.e., nodes without incoming edges.

isRootNode(...)

isRootNode(cell: Cell | string): boolean

Returns whether the specified node is a root node.

getLeafNodes()

getLeafNodes(): Node[]

Returns all leaf nodes, i.e., nodes without outgoing edges.

isLeafNode(...)

isLeafNode(cell: Cell | string): boolean

Returns whether the specified node is a leaf node.

getNeighbors(...)

getNeighbors(cell: Cell, options?: GetNeighborsOptions): Cell[]

Get neighboring nodes.

isNeighbor(...)

isNeighbor(cell1: Cell, cell2: Cell, options?: GetNeighborsOptions): boolean

Returns whether cell2 is a neighbor of cell1. The options are the same as those in the getNeighbors(...) method.

getPredecessors(...)

getPredecessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]

Returns the predecessor nodes of a node, i.e., nodes connected from the root node to the specified node.

isPredecessor(...)

isPredecessor(cell1: Cell, cell2: Cell, options?: GetPredecessorsOptions): boolean

Returns whether cell2 is a predecessor of cell1. The options are the same as those in the getPredecessors(...) method.

getSuccessors(...)

getSuccessors(cell: Cell, options?: GetPredecessorsOptions): Cell[]

Get all successor nodes, i.e., nodes connected from the specified node to leaf nodes. The options are the same as those in the getPredecessors(...) method.

isSuccessor(...)

isSuccessor(cell1: Cell, cell2: Cell, options?: GetPredecessorsOptions): boolean

Returns whether cell2 is a successor of cell1. The options are the same as those in the getPredecessors(...) method.

getCommonAncestor(...)

getCommonAncestor(...cells: {Cell | Cell[])[]): Cell | null

Get the common ancestor node of the specified nodes.

getSubGraph(...)

getSubGraph(cells: Cell[], options？: GetSubgraphOptions): Cell[]

Returns a subgraph consisting of the specified nodes and edges. It traverses the given cells array, including the source and target nodes when encountering an edge; when encountering a node, it includes the edge if both nodes connected by the edge are in the cells array.

cloneCells(...)

cloneCells(cells: Cell[]): { [oldCellId: string]: Cell }

Clone cells, returning a key-value pair of old node/edge IDs and cloned nodes/edges.

cloneSubGraph(...)

cloneSubGraph(cells: Cell[], options?: GetSubgraphOptions): { [oldCellId: string]: Cell }

Get and clone a subgraph. The options are the same as those in the getSubGraph(...) method.

getNodesFromPoint(...)

getNodesFromPoint(x: number, y: number): Node[]
getNodesFromPoint(p: Point.PointLike): Node[]

Returns nodes at the specified position, i.e., nodes whose rectangular area contains the specified point.

getNodesInArea(...)

getNodesInArea(
  x: number,
  y: number,
  w: number,
  h: number,
  options?: Model.GetCellsInAreaOptions,
): Node[]
getNodesInArea(
  rect: Rectangle.RectangleLike,
  options?: Model.GetCellsInAreaOptions,
): Node[]

Returns nodes in the specified rectangular area. When options.strict is true, it requires the node's rectangular area to be completely contained within the specified rectangle; otherwise, intersection is sufficient.

getNodesUnderNode(...)

getNodesUnderNode(
  node: Node,
  options？: {
    by?: 'bbox' | Rectangle.KeyPoint
  },
): Node[]

Returns nodes at the position of the specified node. The options.by option specifies the method of retrieval, including:

• null or bbox: Returns nodes that intersect with the specified node's rectangular area
• Rectangle.KeyPoint: Returns nodes that contain a specific key point of the rectangle, where Rectangle.KeyPoint can be one of:
  • "center"
  • "origin"
  • "corner"
  • "topLeft"
  • "topCenter"
  • "topRight"
  • "bottomLeft"
  • "bottomCenter"
  • "bottomRight"
  • "leftMiddle"
  • "rightMiddle"

searchCell(...)

searchCell(cell: Cell, iterator: SearchIterator, options?: SearchOptions): this

Traverse starting from the specified node/edge.

getShortestPath(...)

getShortestPath(
  source: Cell | string,
  target: Cell | string,
  options?: GetShortestPathOptions,
): string[]

Get the shortest path between nodes, returning the node IDs on the shortest path.

getAllCellsBBox(...)

getAllCellsBBox(): Rectangle | null

Returns the rectangular area of all nodes and edges on the canvas.

getCellsBBox(...)

getCellsBBox(cells: Cell[], options?: Cell.GetCellsBBoxOptions): Rectangle | null

Returns the rectangular area formed by the specified nodes and edges.

toJSON(...)

toJSON(options?: ToJSONOptions): object

Export nodes and edges in the graph, returning an object with a { cells: [] } structure, where the cells array stores nodes and edges in rendering order.

parseJSON(...)

Convert specified data to nodes and edges.

Supports an array of node/edge metadata, returning created nodes and edges in array order.

parseJSON(cells: (Node.Metadata | Edge.Metadata)[]): (Node | Edge)[]

Or provide an object containing cells, nodes, edges, creating and returning nodes and edges in the order of [...cells, ...nodes, ...edges].

parseJSON({
  cells?: (Node.Metadata | Edge.Metadata)[],
  nodes?: Node.Metadata[],
  edges?: Edge.Metadata[],
}): (Node | Edge)[]

fromJSON(...)

Render nodes and edges according to the specified JSON data.

Supports an array of node/edge metadata, rendering nodes and edges in array order.

fromJSON(data: (Node.Metadata | Edge.Metadata)[], options?: FromJSONOptions): this

Or provide an object containing cells, nodes, edges, rendering in the order of [...cells, ...nodes, ...edges].

fromJSON(
  data: {
    cells?: (Node.Metadata | Edge.Metadata)[],
    nodes?: Node.Metadata[],
    edges?: Edge.Metadata[],
  },
  options?: FromJSONOptions,
): this

When options.silent is true, it does not trigger cell:added, node:added, and edge:added events or canvas redrawing.