### Node Initialization with Specific Ports Example

Source: https://x6.antv.antgroup.com/api/model/node

Example of initializing a Node with ports, assigning specific ports to predefined groups and providing unique IDs.

```javascript
const node = new Node({
  ports: {
    group: { ... },
    items: [
      { id: 'port1', group: 'group1', ... },
      { id: 'port2', group: 'group1', ... },
      { id: 'port3', group: 'group2', ... },
    ],
  }
})
```

--------------------------------

### Node Initialization with Port Groups and Items Example

Source: https://x6.antv.antgroup.com/api/model/node

Example of initializing a Node with a detailed ports configuration, including specific definitions for port groups and their properties.

```javascript
const node = new Node({
  ports: {
    group: {
      group1: {
        markup: { tagName: 'circle' },
        attrs: { },
        zIndex: 1,
        position: {
          name: 'top',
          args: {},
        },
      },
      group2: { ... },
      group3: { ... },
    },
    items: [ ... ],
  }
})
```

--------------------------------

### Metro Router with Directional Constraints

Source: https://x6.antv.antgroup.com/api/registry/router

Example of using the 'metro' router, similar to 'manhattan' but allowing diagonal segments, with specified start and end directions.

```javascript
graph.addEdge({
  source,
  target,
  router: {
    name: 'metro',
    args: {
      startDirections: ['top'],
      endDirections: ['bottom'],
    },
  },
})
```

--------------------------------

### Custom Port Label Layout Function Example

Source: https://x6.antv.antgroup.com/api/registry/port-label-layout

An example of a custom port label layout function that positions the label to the bottom-right of the port, with configurable dx and dy offsets.

```javascript
function bottomRight(portPosition, elemBBox, args) {
  const dx = args.dx || 10
  const dy = args.dy || 10


  return {
    position: {
     portPosition.x + dx,
     portPosition.y + dy,
    }
  }
}
```

--------------------------------

### Default Label Configuration

Source: https://x6.antv.antgroup.com/api/model/labels

Explains how to set default labels for edges and provides an example of a default label structure.

```APIDOC
## Default Labels

When creating an Edge, you can set a `defaultLabel` option. The default value is:

```json
{
  "markup": [
    {
      "tagName": "rect",
      "selector": "body"
    },
    {
      "tagName": "text",
      "selector": "label"
    }
  ],
  "attrs": {
    "text": {
      "fill": "#000",
      "fontSize": 14,
      "textAnchor": "middle",
      "textVerticalAnchor": "middle",
      "pointerEvents": "none"
    },
    "rect": {
      "ref": "label",
      "fill": "#fff",
      "rx": 3,
      "ry": 3,
      "refWidth": 1,
      "refHeight": 1,
      "refX": 0,
      "refY": 0
    }
  },
  "position": {
    "distance": 0.5
  }
}
```

This default label includes a text element and a background rectangle, centered with a white background. Custom labels merge with this default. For example, to add a label with specific text:

```javascript
edge.appendLabel({
  attrs: {
    text: {
      text: 'Hello Label',
    },
  },
});
```
```

--------------------------------

### Create Cell with Data

Source: https://x6.antv.antgroup.com/api/model/cell

Example of creating a cell with associated business data. The `data` property can hold custom key-value pairs.

```javascript
const rect = new Shape.Rect({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  data: {
    bizID: 125,
    date: '20200630',
    price: 89.0,
  },
})

```

--------------------------------

### Configuring Built-in Markers

Source: https://x6.antv.antgroup.com/api/model/marker

Example of configuring built-in arrow markers like 'block' and 'ellipse' for edge source and target.

```javascript
edge.attr({
  line: {
    sourceMarker: 'block',
    targetMarker: {
      name: 'ellipse',
      rx: 10,
      ry: 6,
    },
  },
})
```

--------------------------------

### OneSide Router Configuration

Source: https://x6.antv.antgroup.com/api/registry/router

Example of using the 'oneSide' router with the 'side' argument to define the routing direction.

```javascript
graph.addEdge({
  source,
  target,
  router: {
    name: 'oneSide',
    args: { side: 'right' },
  },
})
```

--------------------------------

### Get Root Nodes

Source: https://x6.antv.antgroup.com/api/mvc/model

Retrieves all nodes that have no incoming edges, effectively the starting points of the graph.

```typescript
getRootNodes(): Node[]
```

--------------------------------

### Get successors of a cell

Source: https://x6.antv.antgroup.com/api/mvc/model

Retrieve all successor cells starting from a given cell. Options are consistent with `getPredecessors`.

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

--------------------------------

### Get Edge Polyline

Source: https://x6.antv.antgroup.com/api/model/edge

Obtain the polyline representation of an edge, which includes its start point, end point, and all intermediate vertices.

```javascript
getPolyline(): Polyline
```

--------------------------------

### Graph Initialization with Options

Source: https://x6.antv.antgroup.com/api/graph/graph

Instantiate a new X6 graph with a configuration object. The options control various aspects of the graph's behavior and appearance.

```APIDOC
## new Graph(options: Options)

### Description
Initializes a new X6 graph instance with the provided options.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **container** (`HTMLElement`) - Required - The DOM element that will serve as the canvas container.
- **width** (`number`) - Optional - The width of the canvas. Defaults to the container's width.
- **height** (`number`) - Optional - The height of the canvas. Defaults to the container's height.
- **scaling** (`{ min?: number, max?: number }`) - Optional - Defines the minimum and maximum zoom levels for the canvas. Defaults to `{ min: 0.01, max: 16 }`.
- **autoResize** (`boolean | Element | Document`) - Optional - Enables or disables automatic resizing of the canvas when the container size changes. Defaults to `false`.
- **panning** (`boolean | PanningManager.Options`) - Optional - Enables or disables panning of the canvas. Defaults to `true`.
- **mousewheel** (`boolean | MouseWheel.Options`) - Optional - Enables or disables zooming via mouse wheel. Defaults to `false`.
- **grid** (`boolean | number | GridManager.Options`) - Optional - Configures the grid display. Defaults to `false` (no grid background, but a 10px grid is available).
- **background** (`false | BackgroundManager.Options`) - Optional - Configures the background display. Defaults to `false` (no background).
- **translating** (`Translating.Options`) - Optional - Options for node movement and automatic offset on overlap. Defaults to `{ restrict: false, autoOffset: true }`.
- **embedding** (`boolean | Embedding.Options`) - Optional - Enables or disables node embedding. Defaults to `false`.
- **connecting** (`Connecting.Options`) - Optional - Options for edge connections. Defaults to `{ snap: false, ... }`.
- **highlighting** (`Highlighting.Options`) - Optional - Options for highlighting elements. Defaults to `{...}`.
- **interacting** (`Interacting.Options`) - Optional - Options for customizing node and edge interaction behavior. Defaults to `{ edgeLabelMovable: false }`.
- **magnetThreshold** (`number | onleave`) - Optional - The number of mouse movements before a connection is triggered, or `onleave` to trigger on mouse leave. Defaults to `0`.
- **moveThreshold** (`number`) - Optional - The number of mouse movements allowed before triggering a `mousemove` event. Defaults to `0`.
- **clickThreshold** (`number`) - Optional - The maximum mouse movement distance (in pixels) before a click event is considered invalid. Defaults to `0`.
- **preventDefaultContextMenu** (`boolean`) - Optional - Whether to prevent the default browser context menu. Defaults to `true`.
- **preventDefaultBlankAction** (`boolean`) - Optional - Whether to prevent default mouse event behavior on blank canvas areas. Defaults to `true`.
- **async** (`boolean`) - Optional - Whether to render the graph asynchronously. Defaults to `true`.
- **virtual** (`boolean | VirtualOptions`) - Optional - Enables virtual rendering for performance optimization, with options for margin and enabled state. Defaults to `false`.
- **onPortRendered** (`(args: OnPortRenderedArgs) => void`) - Optional - Callback function triggered when a port is rendered.
- **onEdgeLabelRendered** (`(args: OnEdgeLabelRenderedArgs) => void | ((args: OnEdgeLabelRenderedArgs) => void)`) - Optional - Callback function triggered when an edge label is rendered, can return a cleanup function.
- **createCellView** (`(cell: Cell) => CellView | null | undefined`) - Optional - A factory function to create custom cell views.

### Request Example
```javascript
const options = {
  container: document.getElementById('graph-container'),
  width: 800,
  height: 600,
  panning: true,
  grid: {
    size: 10,
    visible: true
  }
};

const graph = new Graph(options);
```

### Response
#### Success Response (200)
- **Graph Instance** - A new instance of the X6 Graph.

#### Response Example
(No specific response example provided for initialization, as it returns a Graph instance.)
```

--------------------------------

### Get Edge Source Point

Source: https://x6.antv.antgroup.com/api/model/edge

Retrieve the exact point on the canvas where the edge starts. Returns `null` if the edge is connected to a cell or port.

```javascript
getSourcePoint(): Point.PointLike | null
```

--------------------------------

### Configuring Highlighting in Graph Initialization

Source: https://x6.antv.antgroup.com/api/registry/highlighter

Demonstrates how to configure highlighting options, such as magnet availability, when creating a new Graph instance.

```APIDOC
## Configuring Highlighting

### Description
Configure highlighting options during graph initialization to define styles for interactions like connecting ports.

### Method
`new Graph(options)`

### Parameters
#### `options.highlighting`
- **`highlighting`** (object) - Optional - Configuration for various highlighting states.
  - **`magnetAvailable`** (object) - Configuration for when a magnet is available for connection.
    - **`name`** (string) - Required - The name of the highlighter to use (e.g., 'stroke').
    - **`args`** (object) - Optional - Arguments to pass to the highlighter.
      - **`padding`** (number) - Optional - Padding around the highlighted element.
      - **`attrs`** (object) - Optional - Attributes for the border element (e.g., stroke width, color).

### Request Example
```javascript
new Graph({
  highlighting: {
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          'stroke-width': 2,
          stroke: 'red',
        },
      },
    },
  },
})
```
```

--------------------------------

### Orthogonal Router with Padding

Source: https://x6.antv.antgroup.com/api/registry/router

Example of using the 'orth' router with specific padding arguments to control anchor point distances.

```javascript
graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  router: {
    name: 'orth',
    args: {
      padding: {
        left: 50,
      },
    },
  },
})
```

--------------------------------

### Configure Boundary Tool with Custom Args

Source: https://x6.antv.antgroup.com/api/registry/edge-tool

Example of adding the 'boundary' tool to an edge with custom 'padding' and 'attrs' for the bounding rectangle.

```javascript
graph.addEdge({
  ...
  tools: [
    {
      name: 'boundary',
      args: {
        padding: 5,
        attrs: {
          fill: '#7c68fc',
          stroke: '#333',
          'stroke-width': 0.5,
          'fill-opacity': 0.2,
        },
      },
    },
  ]
})
```

--------------------------------

### Configuring Port Layouts in X6

Source: https://x6.antv.antgroup.com/api/registry/port-layout

Demonstrates how to configure port layout algorithms using the 'groups' option for layout definitions and 'items' for specific port configurations. Arguments can be passed to override group defaults.

```javascript
graph.addNode(
  ...,
  ports: {
    // 连接桩分组
    groups: {
      group1: {
        position: {
          name: 'xxx', // 布局算法名称
          args: { },   // 布局算法的默认参数
        },
      },
    },


    // 连接桩定义
    items: [
      {
        groups: 'group1',
        args: { }, // 覆盖 group1 中指定的默认参数
      },
    ],
  },
)
```

--------------------------------

### Define Specific Node Translation Bounds

Source: https://x6.antv.antgroup.com/api/model/interaction

Specify a precise rectangular area within which nodes can be moved. This example restricts movement to a 100x100 pixel area starting at coordinates (0,0).

```javascript
const graph = new Graph({
  translating: {
    restrict: {
      x: 0,
      y: 0,
      width: 100,
      height: 100,
    },
  },
})
```

--------------------------------

### attr

Source: https://x6.antv.antgroup.com/api/model/cell

A versatile method to get or set cell attributes. It supports getting all attributes, getting a specific attribute by path, setting a specific attribute by path, and merging attributes.

```APIDOC
## attr(path?, value?, options?)

### Description
This is a versatile method that acts as a unified interface for getting and setting cell attributes. It can retrieve all attributes, retrieve a specific attribute by path, set a specific attribute by path, or perform a deep merge of attributes.

### Method Signatures
1. `attr(): Cell.CellAttrs` - Gets all attributes.
2. `attr<T>(path: string | string[]): T` - Gets the attribute value at the specified path.
3. `attr(path: string | string[], value: Attr.ComplexAttrValue | null, options?: Cell.SetOptions): this` - Sets the attribute value at the specified path.
4. `attr(attrs: Attr.CellAttrs, options?: Cell.SetOptions): this` - Sets attribute values by performing a deep merge with existing attributes.

### Parameters
#### For getting all attributes:
- None

#### For getting a specific attribute:
- **path** (string | string[]) - Required - The attribute path.

#### For setting a specific attribute:
- **path** (string | string[]) - Required - The attribute path.
- **value** (Attr.ComplexAttrValue | null) - Required - The new attribute value.
- **options** (Cell.SetOptions) - Optional - Options for setting the attribute.

#### For merging attributes:
- **attrs** (Attr.CellAttrs) - Required - An object containing attributes to merge.
- **options** (Cell.SetOptions) - Optional - Options for setting the attributes.

### Request Example
```javascript
// Get all attributes
console.log(cell.attr());

// Get a specific attribute
console.log(cell.attr('body/fill'));

// Set a specific attribute
cell.attr('body/fill', '#f5f5f5');

// Merge attributes
cell.attr({
  body: { stroke: '#000000' },
  label: { fill: 'blue' },
});
```

### Response
#### Success Response
- When getting all attributes: `Cell.CellAttrs` object.
- When getting a specific attribute: The attribute value (`T`).
- When setting attributes: The cell instance (`this`) for chaining.
```

--------------------------------

### Node Initialization with Ports (Items Only)

Source: https://x6.antv.antgroup.com/api/model/node

Initialize a Node with a simplified ports configuration, providing only an array of port items.

```javascript
const node = new Node({
  ports: [ ... ], // 连接桩
})
```

--------------------------------

### Label Position by Absolute Distance from Start

Source: https://x6.antv.antgroup.com/api/model/labels

Appends a label at an absolute distance of 150 units from the edge's starting point.

```javascript
edge.appendLabel({
  attrs: {
    text: {
      text: '150',
    },
  },
  position: {
    distance: 150,
  },
})
```

--------------------------------

### Creating an Edge with Connection Points

Source: https://x6.antv.antgroup.com/api/registry/connection-point

Demonstrates how to specify connection points for the source and target of an edge during creation. It shows both detailed configuration with arguments and a simplified syntax when no arguments are needed.

```APIDOC
## Creating an Edge with Connection Points

When creating an edge, you can specify the connection point for both the source and the target.

### Example with detailed configuration:
```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    connectionPoint: {
      name: 'boundary',
      args: {
        sticky: true,
      },
    },
  },
  target: {
    cell: 'target-id',
    connectionPoint: 'boundary', // Simplified syntax when no arguments are needed
  },
});
```
```

--------------------------------

### Connecting to Cells or Ports

Source: https://x6.antv.antgroup.com/api/model/edge

Examples of creating edges by connecting to existing cells (nodes/edges) or specific ports on cells.

```APIDOC
## addEdge with Cell Connections

### Description
Adds an edge connecting to specified cells or ports.

### Method
`graph.addEdge(options)`

### Parameters
#### Source/Target Configuration
- **cell** (string) - The ID of the cell to connect to.
- **port** (string) - Optional - The ID of the port on the cell to connect to.
- **selector** (string) - Optional - A selector for a specific element within the cell to connect to.
- **anchor** (AnchorData | string) - Optional - Configuration for the anchor point on the cell.
- **connectionPoint** (ConnectionPointData | string) - Optional - Configuration for the connection point on the cell.

### Request Examples

**Connecting to cells:**
```javascript
const edge = graph.addEdge({
  source: { cell: 'source-cell-id' },
  target: { cell: 'target-cell-id' },
});
```

**Connecting to ports on cells:**
```javascript
const edge = graph.addEdge({
  source: { cell: 'source-cell-id', port: 'port-id' },
  target: { cell: 'target-cell-id', port: 'port-id' },
});
```

**Connecting to elements within cells:**
```javascript
const edge = graph.addEdge({
  source: { cell: 'source-cell-id', selector: 'some-selector' },
  target: { cell: 'target-cell-id', selector: 'some-selector' },
});
```

**Specifying anchors:**
```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    anchor: {
      name: 'midSide',
      args: { dx: 10 },
    },
  },
  target: {
    cell: 'target-id',
    anchor: 'orth', // Simplified syntax when no args
  },
});
```

**Specifying connection points:**
```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    connectionPoint: {
      name: 'boundary',
      args: { sticky: true },
    },
  },
  target: {
    cell: 'target-id',
    connectionPoint: 'boundary', // Simplified syntax when no args
  },
});
```
```

--------------------------------

### Example SVG Rendering of a Cell

Source: https://x6.antv.antgroup.com/api/model/cell

An example of how a cell's markup is rendered into an SVG element in the DOM, including attributes and transformations.

```html
<g
  data-cell-id="c2e1dd06-15c6-43a4-987a-712a664b8f85"
  class="x6-cell x6-node"
  transform="translate(40,40)"
>
  <rect
    fill="#fff"
    stroke="#000"
    stroke-width="2"
    fill-opacity="0.5"
    width="100"
    height="40"
  ></rect>
  <text
    font-size="14"
    xml:space="preserve"
    fill="#333"
    text-anchor="middle"
    font-family="Arial, helvetica, sans-serif"
    transform="matrix(1,0,0,1,50,20)"
  >
    <tspan dy="0.3em" class="v-line">rect</tspan>
  </text>
</g>
```

--------------------------------

### Node Initialization with Ports (Group and Items)

Source: https://x6.antv.antgroup.com/api/model/node

Initialize a Node with a complex ports configuration, defining both port groups and individual port items.

```javascript
const node = new Node({
  ports: {
    group: { ... }, // 连接桩组定义
    items: [ ... ], // 连接桩
  }
})
```

--------------------------------

### Manhattan Router with Directional Constraints

Source: https://x6.antv.antgroup.com/api/registry/router

Configure the 'manhattan' router to specify allowed start and end directions for pathfinding.

```javascript
graph.addEdge({
  source,
  target,
  router: {
    name: 'manhattan',
    args: {
      startDirections: ['top'],
      endDirections: ['bottom'],
    },
  },
})
```

--------------------------------

### Get Cell zIndex Property

Source: https://x6.antv.antgroup.com/api/model/cell

Access the `zIndex` property directly to get the current layer level of the cell. This is a simple getter for the z-index value.

```typescript
const z = cell.zIndex
```

--------------------------------

### Configure Magnet Available Highlighting

Source: https://x6.antv.antgroup.com/api/model/interaction

Set up custom highlighting for when a magnet (connection point) is available for linking. This example uses a red stroke to indicate availability.

```javascript
new Graph({
  highlighting: {
    // 当连接桩可以被链接时，在连接桩外围渲染一个 2px 宽的红色矩形框
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          'stroke-width': 2,
          stroke: 'red',
        },
      },
    },
  },
})
```

--------------------------------

### Get Canvas Content Area

Source: https://x6.antv.antgroup.com/api/graph/transform

Get the bounding box of the canvas content in local coordinates. Options determine if cell geometry should be used for calculation.

```javascript
getContentArea(options?: Transform.GetContentAreaOptions): Rectangle
```

--------------------------------

### Using Routers with Edges

Source: https://x6.antv.antgroup.com/api/registry/router

Demonstrates how to apply a router to an edge during its creation, with and without arguments.

```APIDOC
## Using Routers with Edges

This section shows how to configure routers for edges, either with specific arguments or as a simple string name.

### Example 1: Router with arguments
```javascript
const edge = graph.addEdge({
  source,
  target,
  router: {
    name: 'oneSide',
    args: {
      side: 'right',
    },
  },
});
```

### Example 2: Router without arguments
```javascript
const edge = graph.addEdge({
  source,
  target,
  router: 'oneSide',
});
```
```

--------------------------------

### Using Built-in Connectors

Source: https://x6.antv.antgroup.com/api/registry/connector

Demonstrates how to apply built-in connectors like 'rounded' with custom arguments when adding an edge.

```APIDOC
## Add Edge with Rounded Connector

### Description
Adds an edge to the graph using the 'rounded' connector with a specified radius.

### Method
`graph.addEdge`

### Parameters
- **source** (mxCell) - The source node.
- **target** (mxCell) - The target node.
- **connector** (object | string) - Configuration for the connector. Can be a string name or an object with `name` and `args`.
  - **name** (string) - The name of the connector, e.g., 'rounded'.
  - **args** (object) - Arguments for the connector.
    - **radius** (number) - Optional. The radius for rounded corners. Defaults to 10.

### Request Example
```javascript
const edge = graph.addEdge({
  source,
  target,
  connector: {
    name: 'rounded',
    args: {
      radius: 20,
    },
  },
});
```

## Add Edge with Simple Connector Name

### Description
Adds an edge to the graph using a built-in connector specified only by its name.

### Method
`graph.addEdge`

### Parameters
- **source** (mxCell) - The source node.
- **target** (mxCell) - The target node.
- **connector** (string) - The name of the connector, e.g., 'rounded'.

### Request Example
```javascript
const edge = graph.addEdge({
  source,
  target,
  connector: 'rounded',
});
```

## Set Connector on Existing Edge

### Description
Applies or updates the connector for an existing edge.

### Method
`edge.setConnector`

### Parameters
- **name** (string) - The name of the connector to set.
- **args** (object) - Optional. Arguments for the connector.
  - **radius** (number) - Optional. The radius for rounded corners.

### Request Example
```javascript
edge.setConnector('rounded', { radius: 20 });
```
```

--------------------------------

### Adding Node Tools

Source: https://x6.antv.antgroup.com/api/registry/node-tool

Demonstrates how to add tools when creating a node or after a node has been created.

```APIDOC
## Adding Node Tools

### Creating a node with tools
```javascript
graph.addNode({
  ...,
  tools: [
    {
      name: 'button-remove',
      args: { x: 10, y: 10 },
    },
  ],
})
```

### Adding tools to an existing node
```javascript
node.addTools([
  {
    name: 'button-remove',
    args: { x: 10, y: 10 },
  },
])
```
```

--------------------------------

### Get Canvas Content Bounding Box

Source: https://x6.antv.antgroup.com/api/graph/transform

Get the bounding box of the canvas content in canvas coordinates. Options determine if cell geometry should be used for calculation.

```javascript
getContentBBox(options?: Transform.GetContentAreaOptions): Rectangle
```

--------------------------------

### Initialize X6 Graph with Options

Source: https://x6.antv.antgroup.com/api/graph/graph

Instantiate a new X6 graph by passing a configuration object to the Graph constructor. This object allows customization of various canvas behaviors and features.

```typescript
new Graph(options: Options)
```

--------------------------------

### Get Node Position

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves the position of a node. The `relative` option can be set to `true` to get the position relative to the parent node instead of the absolute canvas position.

```typescript
/**
 * 获取节点位置。
 */
position(options?: Node.GetPositionOptions): Point.PointLike
```

```typescript
const pos = rect.position()
console.log(pos.x, pos.y)
```

```typescript
const relativePos = child.position({ relative: true })
console.log(relativePos.x, relativePos.y)
```

--------------------------------

### Grid Configuration Options

Source: https://x6.antv.antgroup.com/api/graph/grid

Configure grid size and visibility when creating a new graph instance.

```APIDOC
## Grid Configuration

### size
Configure the grid size during graph creation.

```javascript
const graph = new Graph({
  grid: 10,
});

// Equivalent to:
const graph = new Graph({
  grid: {
    size: 10,
  },
});
```

### type
Enable grid drawing and specify the grid type. The default type is 'dot'.

```javascript
const graph = new Graph({
  grid: true, // Enables grid with default size 10px and draws it
});

// Equivalent to:
const graph = new Graph({
  grid: {
    size: 10, // Grid size 10px
    visible: true, // Draw grid, defaults to 'dot' type
  },
});
```
```

--------------------------------

### Get Specific Cell Attribute by Path

Source: https://x6.antv.antgroup.com/api/model/cell

Use `attr(path)` with a string or array path to get the value of a specific attribute. This is a convenient way to access nested properties.

```typescript
console.log(cell.attr('body/fill'))
// '#ffffff'
```

--------------------------------

### View Configuration Options

Source: https://x6.antv.antgroup.com/api/mvc/view

Options to configure the rendering behavior and event handling of the X6 view.

```APIDOC
## Configuration Options

### async

- **Description**: Whether to use asynchronous rendering for the canvas. Improves performance for large numbers of nodes and edges but may cause issues with synchronous operations.
- **Type**: `boolean`
- **Default**: `false`

### virtual

- **Description**: Enables virtual rendering, only rendering elements within the viewport and a buffer margin. Can be a boolean or a `VirtualOptions` object.
- **Type**: `boolean | VirtualOptions`
- **Default**: `false`

### virtual.enabled

- **Description**: Explicitly enables or disables the virtual rendering switch.
- **Type**: `boolean`

### virtual.margin

- **Description**: Specifies the buffer margin in pixels around the viewport for pre-rendering elements.
- **Type**: `number`
- **Default**: `120`

### magnetThreshold

- **Description**: The number of mouse movements required to trigger a connection, or 'onleave' to trigger when the mouse leaves the element.
- **Type**: `number | 'onleave'`
- **Default**: `0`

### moveThreshold

- **Description**: The number of mouse movements allowed before the 'mousemove' event is triggered.
- **Type**: `number`
- **Default**: `0`

### clickThreshold

- **Description**: The maximum number of mouse movements allowed before a click event is considered invalid.
- **Type**: `number`
- **Default**: `0`

### preventDefaultContextMenu

- **Description**: Whether to disable the default right-click context menu on the canvas.
- **Type**: `boolean`
- **Default**: `true`

### preventDefaultBlankAction

- **Description**: Whether to disable default mouse behaviors when interacting with the blank canvas.
- **Type**: `boolean`
- **Default**: `true`

### onPortRendered

- **Description**: Callback function triggered when a port is rendered. Receives rendering arguments and can be used for custom port rendering, e.g., with React.
- **Type**: `(args: PortRenderedArgs) => void`

### onEdgeLabelRendered

- **Description**: Callback function triggered when an edge label is rendered. Can return a cleanup function to be executed when the label is destroyed. Useful for custom HTML/React rendering within labels.
- **Type**: `(args: OnEdgeLabelRenderedArgs) => void | ((args: OnEdgeLabelRenderedArgs) => void)`

### createCellView

- **Description**: Allows for custom cell view creation. Returning a `CellView` replaces the default, `null` prevents rendering, and `undefined` uses the default rendering.
- **Type**: `(this: Graph, cell: Cell) => CellView | null | undefined`
```

--------------------------------

### Configure Segments Tool with Custom Args

Source: https://x6.antv.antgroup.com/api/registry/edge-tool

Illustrates adding the 'segments' tool to an edge with custom arguments for 'snapRadius' and 'attrs'.

```javascript
graph.addEdge({
  ...
  tools: [{ 
    name: 'segments',
    args: {
      snapRadius: 20,
      attrs: {
        fill: '#444',
      },
    },
  }]
})
```

--------------------------------

### Registering a Custom Highlighter

Source: https://x6.antv.antgroup.com/api/registry/highlighter

Shows how to define and register a custom highlighter with X6.

```APIDOC
## Custom Highlighter Definition

### Description
A custom highlighter is an object with `highlight` and `unhighlight` methods.

### Interface
```typescript
export interface Definition<T> {
  highlight: (cellView: CellView, magnet: Element, options: T) => void
  unhighlight: (cellView: CellView, magnet: Element, options: T) => void
}
```

### Parameters for `highlight` and `unhighlight` methods
- **`cellView`** (CellView) - The view of the cell.
- **`magnet`** (Element) - The element to be highlighted.
- **`options`** (T) - Options for the highlighter.

### Example: Opacity Highlighter
```javascript
export interface OpacityHighlighterOptions {}

const className = 'highlight-opacity'

export const opacity: Highlighter.Definition<OpacityHighlighterOptions> = {
  highlight(cellView, magnet) {
    Dom.addClass(magnet, className)
  },
  unhighlight(cellView, magnetEl) {
    Dom.removeClass(magnetEl, className)
  },
}

// Register the custom highlighter
Graph.registerHighlighter('opacity', opacity, true)

// Use the custom highlighter
new Graph({
  highlighting: {
    magnetAvailable: {
      name: 'opacity',
    },
  },
})
```
```

--------------------------------

### getAttrs()

Source: https://x6.antv.antgroup.com/api/model/cell

Gets the attributes of the cell.

```APIDOC
## getAttrs()

### Description
Gets the attributes of the cell.

### Method Signature
```javascript
getAttrs(): Attr.CellAttrs
```

### Usage Example
```javascript
const atts = cell.getAttrs()
```
```

--------------------------------

### get attrs

Source: https://x6.antv.antgroup.com/api/model/cell

Retrieves the attributes of the cell.

```APIDOC
## get attrs

### Description
Retrieves the attributes of the cell.

### Property
`cell.attrs`

### Usage Example
```javascript
const atts = cell.attrs
```
```

--------------------------------

### Using Built-in Markers

Source: https://x6.antv.antgroup.com/api/model/marker

Demonstrates how to apply built-in markers like 'block' and 'ellipse' to edges, with options for custom fill and stroke colors.

```APIDOC
## Using Built-in Markers

This example shows how to set the `sourceMarker` and `targetMarker` attributes for an edge using built-in marker types.

### Example

```javascript
edge.attr({
  line: {
    sourceMarker: 'block',
    targetMarker: {
      name: 'ellipse',
      rx: 10, // Radius on the x-axis for the ellipse
      ry: 6,  // Radius on the y-axis for the ellipse
    },
  },
})
```

### Built-in Marker Parameters

Each built-in marker has specific parameters:

**block**
- `size` (Number): Arrow size. Default is 10.
- `width` (Number): Arrow width. Defaults to `size`.
- `height` (Number): Arrow height. Defaults to `size`.
- `offset` (Number): Absolute offset along the edge. Default is 0.
- `open` (Boolean): Whether the arrow is open. Default is false.
- `...attrs` (Object): Other attributes applied to the `<path>` element, like `fill` and `stroke`.

**classic**
- `size` (Number): Arrow size. Default is 10.
- `width` (Number): Arrow width. Defaults to `size`.
- `height` (Number): Arrow height. Defaults to `size`.
- `offset` (Number): Absolute offset along the edge. Default is 0.
- `...attrs` (Object): Other attributes applied to the `<path>` element, like `fill` and `stroke`.

**diamond**
- `size` (Number): Arrow size. Default is 10.
- `width` (Number): Arrow width. Defaults to `size`.
- `height` (Number): Arrow height. Defaults to `size`.
- `offset` (Number): Absolute offset along the edge. Default is 0.
- `...attrs` (Object): Other attributes applied to the `<path>` element, like `fill` and `stroke`.

**cross**
- `size` (Number): Arrow size. Default is 10.
- `width` (Number): Arrow width. Defaults to `size`.
- `height` (Number): Arrow height. Defaults to `size`.
- `offset` (Number): Absolute offset along the edge. Default is 0.
- `...attrs` (Object): Other attributes applied to the `<path>` element, like `fill` and `stroke`.

**async**
- `width` (Number): Arrow width. Default is 10.
- `height` (Number): Arrow height. Default is 6.
- `offset` (Number): Absolute offset along the edge. Default is 0.
- `open` (Boolean): Whether the arrow is open. Default is false.
- `flip` (Boolean): Whether to flip the arrow. Default is false.
- `...attrs` (Object): Other attributes applied to the `<path>` element, like `fill` and `stroke`.

**circle**
- `r` (Number): Radius of the circle. Default is 5.
- `...attrs` (Object): Other attributes applied to the `<circle>` element, like `fill` and `stroke`.

**circlePlus**
- `r` (Number): Radius of the circle. Default is 5.
- `...attrs` (Object): Other attributes applied to the `<path>` element (for the plus sign), like `fill` and `stroke`.

**ellipse**
- `rx` (Number): Radius on the x-axis. Default is 5.
- `ry` (Number): Radius on the y-axis. Default is 5.
- `...attrs` (Object): Other attributes applied to the `<ellipse>` element, like `fill` and `stroke`.

```

--------------------------------

### getMarkup()

Source: https://x6.antv.antgroup.com/api/model/cell

Gets the markup definition for the cell.

```APIDOC
## getMarkup()

### Description
Gets the markup definition for the cell.

### Method Signature
```javascript
getMarkup(): Markup
```

### Usage Example
```javascript
const markup = cell.getMarkup()
```
```

--------------------------------

### Configure Vertices Tool Attributes

Source: https://x6.antv.antgroup.com/api/registry/edge-tool

Example of configuring the 'vertices' tool when creating an edge, specifically customizing the 'attrs' for the path points.

```javascript
// Create edge with tools
const edge1 = graph.addEdge({
  ...
  tools: [
    {
      name: 'vertices',
      args: {
        attrs: { fill: '#666' },
      },
    },
  ]
})
```

--------------------------------

### get markup

Source: https://x6.antv.antgroup.com/api/model/cell

Retrieves the markup definition for the cell.

```APIDOC
## get markup

### Description
Retrieves the markup definition for the cell.

### Property
`cell.markup`

### Usage Example
```javascript
const markup = cell.markup
```
```

--------------------------------

### Create Rect with Properties

Source: https://x6.antv.antgroup.com/api/model/cell

Example of creating a Rect shape with standard attributes like position and size, and custom properties like 'sale' and 'product'.

```javascript
const rect = new Shape.Rect({
  x: 30,
  y: 30,
  width: 100,
  height: 40,
  attrs: {...},
  data: {...},
  zIndex: 10,
  sale: {...},
  product: {
    id: '1234',
    name: 'apple',
    price: 3.99,
  },
})
```

--------------------------------

### Add Tools to Edge on Creation or After

Source: https://x6.antv.antgroup.com/api/registry/edge-tool

Demonstrates how to add predefined tools like 'vertices' and 'button-remove' when creating an edge or to an existing edge.

```javascript
// Create edge with tools
graph.addEdge({
  source,
  target,
  tools: [
    { name: 'vertices' },
    {
      name: 'button-remove',
      args: { distance: 20 },
    },
  ],
})


// Add tools to an existing edge
edge.addTools([
  { name: 'vertices' },
  {
    name: 'button-remove',
    args: { distance: 20 },
  },
])
```

--------------------------------

### Get Cell Data

Source: https://x6.antv.antgroup.com/api/model/cell

Retrieves the associated business data of a cell.

```javascript
getData(): any

```

--------------------------------

### Get Ports by Group

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves all ports that belong to a specified group.

```javascript
getPortsByGroup(groupName: string): PortMetadata[]
```

--------------------------------

### Configure Button Tool with onClick Handler

Source: https://x6.antv.antgroup.com/api/registry/edge-tool

Demonstrates adding a 'button' tool to an edge with a custom 'distance' and an 'onClick' handler for interaction.

```javascript
graph.addEdge({
  ...
  tools: [
    {
      name: 'button',
      args: {
        distance: -40,
        onClick({ view }: any) {
          //
        },
      },
    },
  ],
})
```

--------------------------------

### Using Node Anchors When Creating Edges

Source: https://x6.antv.antgroup.com/api/registry/node-anchor

Demonstrates how to specify source and target node anchors, including arguments, when creating a new edge. It shows both named anchors with arguments and simplified anchor definitions.

```APIDOC
## Using Node Anchors When Creating Edges

This example shows how to specify anchors for the source and target of an edge during its creation. Anchors can be defined with a name and optional arguments, or as a simple string name if no arguments are needed.

### Method

```javascript
const edge = graph.addEdge({
  source: {
    cell: 'source-id',
    anchor: {
      name: 'midSide',
      args: {
        dx: 10,
      },
    },
  },
  target: {
    cell: 'target-id',
    anchor: 'orth', // Simplified syntax when no arguments are needed
  },
});
```
```

--------------------------------

### Get All Ports

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves an array containing all ports associated with the node.

```javascript
getPorts(): PortMetadata[]
```

--------------------------------

### Get Node Angle

Source: https://x6.antv.antgroup.com/api/model/node

Retrieves the current rotation angle of the node.

```typescript
getAngle(): number
```

```typescript
if (node.getAngle() !== 0) {
  // do something
}
```

--------------------------------

### Configuring Global Default Connector

Source: https://x6.antv.antgroup.com/api/registry/connector

Shows how to set a default connector for all edges when initializing the graph.

```APIDOC
## Initialize Graph with Default Connector

### Description
Configures the graph to use a specific connector as the default for all edges.

### Method
`new Graph(options)`

### Parameters
- **options** (object) - Graph initialization options.
  - **connecting** (object) - Options related to edge connections.
    - **connector** (object | string) - The default connector configuration.
      - **name** (string) - The name of the default connector, e.g., 'rounded'.
      - **args** (object) - Arguments for the default connector.
        - **radius** (number) - Optional. The radius for rounded corners. Defaults to 10.

### Request Example
```javascript
new Graph({
  connecting: {
    connector: {
      name: 'rounded',
      args: {
        radius: 20,
      },
    },
  },
});
```

## Initialize Graph with Simple Default Connector Name

### Description
Configures the graph to use a default connector specified only by its name.

### Method
`new Graph(options)`

### Parameters
- **options** (object) - Graph initialization options.
  - **connecting** (object) - Options related to edge connections.
    - **connector** (string) - The name of the default connector, e.g., 'rounded'.

### Request Example
```javascript
new Graph({
  connecting: {
    connector: 'rounded',
  },
});
```
```

--------------------------------

### Get Incoming Edges

Source: https://x6.antv.antgroup.com/api/mvc/model

Retrieves all edges that terminate at the specified cell.

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

--------------------------------

### Advanced Edge Positioning with Gradient Options

Source: https://x6.antv.antgroup.com/api/model/attrs

Demonstrates various 'atConnection' attributes for precise element placement along an edge, including options to maintain or ignore the edge's gradient. This allows for complex label and marker positioning relative to the edge's path.

```javascript
graph.addEdge({
  shape: 'custom-edge',
  source: { x: 100, y: 60 },
  target: { x: 500, y: 60 },
  vertices: [{ x: 300, y: 160 }],
  attrs: {
    relativeLabel: {
      text: '0.25',
      atConnectionRatio: 0.25,
    },
    relativeLabelBody: {
      atConnectionRatio: 0.25,
    },


    absoluteLabel: {
      text: '150',
      atConnectionLength: 150,
    },
    absoluteLabelBody: {
      atConnectionLength: 150,
    },


    absoluteReverseLabel: {
      text: '-100',
      atConnectionLength: -100,
    },
    absoluteReverseLabelBody: {
      atConnectionLength: -100,
    },


    offsetLabelPositive: {
      y: 40,
      text: 'keepGradient: 0,40',
      atConnectionRatio: 0.66,
    },
    offsetLabelPositiveBody: {
      x: -60, // 0 + -60
      y: 30, // 40 + -10
      atConnectionRatio: 0.66,
    },


    offsetLabelNegative: {
      y: -40,
      text: 'keepGradient: 0,-40',
      atConnectionRatio: 0.66,
    },
    offsetLabelNegativeBody: {
      x: -60, // 0 + -60
      y: -50, // -40 + -10
      atConnectionRatio: 0.66,
    },


    offsetLabelAbsolute: {
      x: -40,
      y: 80,
      text: 'ignoreGradient: -40,80',
      atConnectionRatioIgnoreGradient: 0.66,
    },
    offsetLabelAbsoluteBody: {
      x: -110, // -40 + -70
      y: 70, // 80 + -10
      atConnectionRatioIgnoreGradient: 0.66,
    },
  },
})
```

--------------------------------

### Add Tools to Node

Source: https://x6.antv.antgroup.com/api/registry/node-tool

Demonstrates how to add tools when creating a node or to an existing node. Tools can include interactive elements like remove buttons.

```javascript
// 创建节点时添加小工具
graph.addNode({
  ...,
  tools: [
    {
      name: 'button-remove',
      args: { x: 10, y: 10 },
    },
  ],
})


// 创建节点后添加小工具
node.addTools([
  {
    name: 'button-remove',
    args: { x: 10, y: 10 },
  },
])
```

--------------------------------

### Get Outgoing Edges

Source: https://x6.antv.antgroup.com/api/mvc/model

Retrieves all edges that originate from the specified cell.

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

--------------------------------

### Custom Node Tools - Method 2

Source: https://x6.antv.antgroup.com/api/registry/node-tool

Explains the second method for creating custom node tools by extending existing registered tools.

```APIDOC
## Custom Node Tools - Method 2

### Description
Inherit from an already registered tool and modify its configuration. The `ToolItem` base class provides a static method `define` for quick inheritance and configuration modification.

### Example using `define`
```javascript
const MyButton = Button.define<Button.Options>({
  name: 'my-btn',
  markup: '...',
  onClick({ view }) { ... },
})

Graph.registerNodeTool('my-btn', MyButton, true)
```

### Example using `Graph.registerNodeTool` with inheritance
This method allows for quick inheritance and specifying default options.

```javascript
Graph.registerNodeTool('my-btn', {
  inherit:'button', // Name of the base class (already registered tool name).
  markup: '...',
  onClick: ..., 
})
```
```

--------------------------------

### Get All Edges

Source: https://x6.antv.antgroup.com/api/mvc/model

Retrieves an array containing all edges present on the canvas.

```typescript
getEdges(): Edge[]
```

--------------------------------

### Add Node with Multiple Tools

Source: https://x6.antv.antgroup.com/api/model/cell

Configure a node with multiple tools by providing an array of tool names or configuration objects to the `tools` option.

```javascript
graph.addNode({
  x: 40,
  y: 40,
  width: 100,
  height: 40,
  tools: [
    'button-remove',
    {
      name: 'boundary',
      args: {
        padding: 5,
      },
    },
  ],
})
```

--------------------------------

### Get All Nodes

Source: https://x6.antv.antgroup.com/api/mvc/model

Retrieves an array containing all nodes present on the canvas.

```typescript
getNodes(): Node[]
```