diff --git a/packages/g6/src/elements/combos/base-combo.ts b/packages/g6/src/elements/combos/base-combo.ts
index 827337eb05a..2443d9ebe6e 100644
--- a/packages/g6/src/elements/combos/base-combo.ts
+++ b/packages/g6/src/elements/combos/base-combo.ts
@@ -23,14 +23,15 @@ import type { BaseNodeStyleProps } from '../nodes';
 import { BaseNode } from '../nodes';
 import { Icon, IconStyleProps } from '../shapes';
 import { connectImage, dispatchPositionChange } from '../shapes/image';
+import { UnknownStruct } from '../../types/utility';
 
 /**
  * <zh/> 组合通用样式配置项
  *
  * <en/> Common style props for combo
  */
-export interface BaseComboStyleProps
-  extends BaseNodeStyleProps,
+export interface BaseComboStyleProps<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct>
+  extends Omit<BaseNodeStyleProps<NodeType>, 'childrenData'>,
     Prefix<'collapsed', BaseStyleProps>,
     Prefix<'collapsedMarker', CollapsedMarkerStyleProps> {
   /**
@@ -60,7 +61,7 @@ export interface BaseComboStyleProps
    *
    * <en/> If the combo is collapsed, children may be empty, and the complete child element data can be obtained through childrenData
    */
-  childrenData?: NodeLikeData[];
+  childrenData?: NodeLikeData<NodeType, ComboType>[];
   /**
    * <zh/> 组合的内边距，只在展开状态下生效
    *
diff --git a/packages/g6/src/elements/combos/circle.ts b/packages/g6/src/elements/combos/circle.ts
index a1340cb6505..02d4f652596 100644
--- a/packages/g6/src/elements/combos/circle.ts
+++ b/packages/g6/src/elements/combos/circle.ts
@@ -7,29 +7,30 @@ import { subStyleProps } from '../../utils/prefix';
 import { parseSize } from '../../utils/size';
 import type { BaseComboStyleProps } from './base-combo';
 import { BaseCombo } from './base-combo';
+import { UnknownStruct } from '../../types/utility';
 
 /**
  * <zh/> 圆形组合样式配置项
  *
  * <en/> Circle combo style props
  */
-export interface CircleComboStyleProps extends BaseComboStyleProps {}
+export interface CircleComboStyleProps<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> extends BaseComboStyleProps<NodeType, ComboType> {}
 
 /**
  * <zh/> 圆形组合
  *
  * <en/> Circle combo
  */
-export class CircleCombo extends BaseCombo<CircleComboStyleProps> {
-  constructor(options: DisplayObjectConfig<CircleComboStyleProps>) {
+export class CircleCombo<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> extends BaseCombo<CircleComboStyleProps<NodeType, ComboType>> {
+  constructor(options: DisplayObjectConfig<CircleComboStyleProps<NodeType, ComboType>>) {
     super(options);
   }
 
-  protected drawKeyShape(attributes: Required<CircleComboStyleProps>, container: Group): GCircle | undefined {
+  protected drawKeyShape(attributes: Required<CircleComboStyleProps<NodeType, ComboType>>, container: Group): GCircle | undefined {
     return this.upsert('key', GCircle, this.getKeyStyle(attributes), container);
   }
 
-  protected getKeyStyle(attributes: Required<CircleComboStyleProps>): GCircleStyleProps {
+  protected getKeyStyle(attributes: Required<CircleComboStyleProps<NodeType, ComboType>>): GCircleStyleProps {
     const { collapsed } = attributes;
     const keyStyle = super.getKeyStyle(attributes);
 
@@ -41,13 +42,13 @@ export class CircleCombo extends BaseCombo<CircleComboStyleProps> {
     };
   }
 
-  protected getCollapsedKeySize(attributes: Required<CircleComboStyleProps>): STDSize {
+  protected getCollapsedKeySize(attributes: Required<CircleComboStyleProps<NodeType, ComboType>>): STDSize {
     const [collapsedWidth, collapsedHeight] = parseSize(attributes.collapsedSize);
     const collapsedR = Math.max(collapsedWidth, collapsedHeight) / 2;
     return [collapsedR * 2, collapsedR * 2, 0];
   }
 
-  protected getExpandedKeySize(attributes: Required<CircleComboStyleProps>): STDSize {
+  protected getExpandedKeySize(attributes: Required<CircleComboStyleProps<NodeType, ComboType>>): STDSize {
     const contentBBox = this.getContentBBox(attributes);
     const [width, height] = getBBoxSize(contentBBox);
     const expandedR = Math.sqrt(width ** 2 + height ** 2) / 2;
diff --git a/packages/g6/src/elements/combos/rect.ts b/packages/g6/src/elements/combos/rect.ts
index 9e6abc37beb..642028a4472 100644
--- a/packages/g6/src/elements/combos/rect.ts
+++ b/packages/g6/src/elements/combos/rect.ts
@@ -3,29 +3,30 @@ import { Rect as GRect, Group } from '@antv/g';
 import { subStyleProps } from '../../utils/prefix';
 import type { BaseComboStyleProps } from './base-combo';
 import { BaseCombo } from './base-combo';
+import { UnknownStruct } from '../../types/utility';
 
 /**
  * <zh/> 矩形组合样式配置项
  *
  * <en/> Rect combo style props
  */
-export interface RectComboStyleProps extends BaseComboStyleProps {}
+export interface RectComboStyleProps<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> extends BaseComboStyleProps<NodeType, ComboType> {}
 
 /**
  * <zh/> 矩形组合
  *
  * <en/> Rect combo
  */
-export class RectCombo extends BaseCombo<RectComboStyleProps> {
-  constructor(options: DisplayObjectConfig<RectComboStyleProps>) {
+export class RectCombo<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> extends BaseCombo<RectComboStyleProps<NodeType, ComboType>> {
+  constructor(options: DisplayObjectConfig<RectComboStyleProps<NodeType, ComboType>>) {
     super(options);
   }
 
-  protected drawKeyShape(attributes: Required<RectComboStyleProps>, container: Group): GRect | undefined {
+  protected drawKeyShape(attributes: Required<RectComboStyleProps<NodeType, ComboType>>, container: Group): GRect | undefined {
     return this.upsert('key', GRect, this.getKeyStyle(attributes), container);
   }
 
-  protected getKeyStyle(attributes: Required<RectComboStyleProps>): GRectStyleProps {
+  protected getKeyStyle(attributes: Required<RectComboStyleProps<NodeType, ComboType>>): GRectStyleProps {
     const keyStyle = super.getKeyStyle(attributes);
 
     const [width, height] = this.getKeySize(attributes);
diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts
index 4ffc0bc155d..6a193dc0fe6 100644
--- a/packages/g6/src/elements/nodes/base-node.ts
+++ b/packages/g6/src/elements/nodes/base-node.ts
@@ -29,13 +29,15 @@ import { BaseElement } from '../base-element';
 import type { BadgeStyleProps, BaseShapeStyleProps, IconStyleProps, LabelStyleProps } from '../shapes';
 import { Badge, Icon, Label } from '../shapes';
 import { connectImage, dispatchPositionChange } from '../shapes/image';
+import { UnknownStruct } from '../../types/utility';
 
 /**
  * <zh/> 节点通用样式配置项
  *
  * <en/> Base node style props
  */
-export interface BaseNodeStyleProps
+export interface BaseNodeStyleProps<
+  NodeType extends UnknownStruct = UnknownStruct>
   extends BaseShapeStyleProps,
     Prefix<'label', NodeLabelStyleProps>,
     Prefix<'halo', BaseStyleProps>,
@@ -97,7 +99,7 @@ export interface BaseNodeStyleProps
    * <en/> Only valid in the tree graph. If the current node is collapsed, children may be empty, and the complete child element data can be obtained through childrenData
    * @ignore
    */
-  childrenData?: NodeData[];
+  childrenData?: NodeData<NodeType>[];
   /**
    * <zh/> 是否显示节点标签
    *
diff --git a/packages/g6/src/runtime/data.ts b/packages/g6/src/runtime/data.ts
index ffb399206a7..98abc3abe44 100644
--- a/packages/g6/src/runtime/data.ts
+++ b/packages/g6/src/runtime/data.ts
@@ -29,9 +29,10 @@ import { positionOf } from '../utils/position';
 import { format, print } from '../utils/print';
 import { dfs } from '../utils/traverse';
 import { add } from '../utils/vector';
+import { InferGraphDataTypes } from '../spec/graph';
 
-export class DataController {
-  public model: GraphLib<NodeLikeData, EdgeData>;
+export class DataController<D extends GraphData = GraphData> {
+  public model: GraphLib<NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>, EdgeData<InferGraphDataTypes<D>['edge']>>;
 
   /**
    * <zh/> 最近一次删除的 combo 的 id
@@ -132,13 +133,13 @@ export class DataController {
   }
 
   public getNodeData(ids?: ID[]) {
-    return this.model.getAllNodes().reduce((acc, node) => {
-      const data = toG6Data(node);
+    return this.model.getAllNodes().reduce<NodeData<InferGraphDataTypes<D>['node']>[]>((acc, node) => {
+      const data = toG6Data(node) as NodeData<InferGraphDataTypes<D>['node']>;
       if (this.isCombo(idOf(data))) return acc;
       if (ids === undefined) acc.push(data);
       else ids.includes(idOf(data)) && acc.push(data);
       return acc;
-    }, [] as NodeData[]);
+    }, []);
   }
 
   public getEdgeDatum(id: ID) {
@@ -146,23 +147,23 @@ export class DataController {
   }
 
   public getEdgeData(ids?: ID[]) {
-    return this.model.getAllEdges().reduce((acc, edge) => {
+    return this.model.getAllEdges().reduce<EdgeData<InferGraphDataTypes<D>['edge']>[]>((acc, edge) => {
       const data = toG6Data(edge);
       if (ids === undefined) acc.push(data);
       else ids.includes(idOf(data)) && acc.push(data);
       return acc;
-    }, [] as EdgeData[]);
+    }, []);
   }
 
   public getComboData(ids?: ID[]) {
-    return this.model.getAllNodes().reduce((acc, combo) => {
+    return this.model.getAllNodes().reduce<ComboData<InferGraphDataTypes<D>['combo']>[]>((acc, combo) => {
       const data = toG6Data(combo);
       if (!this.isCombo(idOf(data))) return acc;
 
-      if (ids === undefined) acc.push(data as ComboData);
-      else ids.includes(idOf(data)) && acc.push(data as ComboData);
+      if (ids === undefined) acc.push(data);
+      else ids.includes(idOf(data)) && acc.push(data);
       return acc;
-    }, [] as ComboData[]);
+    }, []);
   }
 
   public getRootsData(hierarchyKey: HierarchyKey = TREE_KEY) {
@@ -200,11 +201,11 @@ export class DataController {
     return parent ? toG6Data(parent) : undefined;
   }
 
-  public getChildrenData(id: ID): NodeLikeData[] {
+  public getChildrenData(id: ID): NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>[] {
     const structureKey = this.getElementType(id) === 'node' ? TREE_KEY : COMBO_KEY;
     const { model } = this;
     if (!model.hasNode(id) || !model.hasTreeStructure(structureKey)) return [];
-    return model.getChildren(id, structureKey).map(toG6Data);
+    return model.getChildren(id, structureKey).map(toG6Data) as NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>[];
   }
 
   /**
@@ -336,7 +337,7 @@ export class DataController {
     this.computeZIndex(data, 'add');
   }
 
-  public addNodeData(nodes: NodeData[] = []) {
+  public addNodeData(nodes: NodeData<InferGraphDataTypes<D>['node']>[] = []) {
     if (!nodes.length) return;
     this.model.addNodes(
       nodes.map((node) => {
@@ -349,7 +350,7 @@ export class DataController {
     this.computeZIndex({ nodes }, 'add');
   }
 
-  public addEdgeData(edges: EdgeData[] = []) {
+  public addEdgeData(edges: EdgeData<InferGraphDataTypes<D>['edge']>[] = []) {
     if (!edges.length) return;
     this.model.addEdges(
       edges.map((edge) => {
@@ -361,7 +362,7 @@ export class DataController {
     this.computeZIndex({ edges }, 'add');
   }
 
-  public addComboData(combos: ComboData[] = []) {
+  public addComboData(combos: ComboData<InferGraphDataTypes<D>['combo']>[] = []) {
     if (!combos.length) return;
     const { model } = this;
 
@@ -382,8 +383,8 @@ export class DataController {
     this.computeZIndex({ combos }, 'add');
   }
 
-  public addChildrenData(parentId: ID, childrenData: NodeData[]) {
-    const parentData = this.getNodeLikeDatum(parentId) as NodeData;
+  public addChildrenData(parentId: ID, childrenData: NodeData<InferGraphDataTypes<D>['node']>[]) {
+    const parentData = this.getNodeLikeDatum(parentId) as NodeData<InferGraphDataTypes<D>['node']>;
     const childrenId = childrenData.map(idOf);
     this.addNodeData(childrenData);
     this.updateNodeData([{ id: parentId, children: [...(parentData.children || []), ...childrenId] }]);
@@ -562,17 +563,17 @@ export class DataController {
     this.computeZIndex(data, 'update');
   }
 
-  public updateNodeData(nodes: PartialNodeLikeData<NodeData>[] = []) {
+  public updateNodeData(nodes: PartialNodeLikeData<NodeData<InferGraphDataTypes<D>['node']>>[] = []) {
     if (!nodes.length) return;
     const { model } = this;
     this.batch(() => {
-      const modifiedNodes: NodeData[] = [];
+      const modifiedNodes: NodeData<InferGraphDataTypes<D>['node']>[] = [];
       nodes.forEach((modifiedNode) => {
         const id = idOf(modifiedNode);
-        const originalNode = toG6Data(model.getNode(id));
+        const originalNode = toG6Data(model.getNode(id)) as NodeData<InferGraphDataTypes<D>['node']>;
         if (isElementDataEqual(originalNode, modifiedNode)) return;
 
-        const value = mergeElementsData(originalNode, modifiedNode);
+        const value = mergeElementsData<D, NodeData<InferGraphDataTypes<D>['node']>>(originalNode, modifiedNode);
         this.pushChange({ value, original: originalNode, type: ChangeType.NodeUpdated });
         model.mergeNodeData(id, value);
         modifiedNodes.push(value);
@@ -787,12 +788,12 @@ export class DataController {
     const dy = ty - comboY;
     const dz = tz - comboZ;
 
-    dfs<NodeLikeData>(
+    dfs<NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>>(
       combo,
       (succeed) => {
         const succeedId = idOf(succeed);
         const [x, y, z] = positionOf(succeed);
-        const value = mergeElementsData(succeed, {
+        const value = mergeElementsData<D, NodeData<InferGraphDataTypes<D>['node']>>(succeed, {
           style: { x: x + dx, y: y + dy, z: z + dz },
         });
         this.pushChange({
@@ -875,7 +876,7 @@ export class DataController {
         const childData = toG6Data(child);
         const childId = idOf(childData);
         this.setParent(idOf(childData), grandParent, COMBO_KEY, false);
-        const value = mergeElementsData(childData, {
+        const value = mergeElementsData<D, NodeData<InferGraphDataTypes<D>['node']>>(childData, {
           id: idOf(childData),
           combo: grandParent,
         });
diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts
index 83d868d741c..4d6bf29b6d4 100644
--- a/packages/g6/src/runtime/graph.ts
+++ b/packages/g6/src/runtime/graph.ts
@@ -62,9 +62,10 @@ import { PluginController } from './plugin';
 import { TransformController } from './transform';
 import { RuntimeContext } from './types';
 import { ViewportController } from './viewport';
+import { InferGraphDataTypes } from '../spec/graph';
 
-export class Graph extends EventEmitter {
-  private options: GraphOptions = {};
+export class Graph<D extends GraphData = GraphData> extends EventEmitter {
+  private options: GraphOptions<D> = {};
 
   /**
    * @internal
@@ -96,7 +97,7 @@ export class Graph extends EventEmitter {
     model: new DataController(),
   };
 
-  constructor(options: GraphOptions) {
+  constructor(options: GraphOptions<D>) {
     super();
     this._setOptions(Object.assign({}, Graph.defaultOptions, options), true);
     this.context.graph = this;
@@ -112,7 +113,7 @@ export class Graph extends EventEmitter {
    * @returns <zh/> 配置项 | <en/> options
    * @apiCategory option
    */
-  public getOptions(): GraphOptions {
+  public getOptions(): GraphOptions<D> {
     return this.options;
   }
 
@@ -127,11 +128,11 @@ export class Graph extends EventEmitter {
    * <en/> To update devicePixelRatio and container properties, please destroy and recreate the instance
    * @apiCategory option
    */
-  public setOptions(options: GraphOptions): void {
+  public setOptions(options: GraphOptions<D>): void {
     this._setOptions(options, false);
   }
 
-  private _setOptions(options: GraphOptions, isInit: boolean) {
+  private _setOptions(options: GraphOptions<D>, isInit: boolean) {
     this.updateCanvas(options);
     Object.assign(this.options, inferOptions(options));
 
@@ -186,7 +187,7 @@ export class Graph extends EventEmitter {
    * @param zoomRange - <zh/> 缩放区间 | <en/> zoom range
    * @apiCategory viewport
    */
-  public setZoomRange(zoomRange: GraphOptions['zoomRange']): void {
+  public setZoomRange(zoomRange: GraphOptions<D>['zoomRange']): void {
     this.options.zoomRange = zoomRange;
   }
 
@@ -197,7 +198,7 @@ export class Graph extends EventEmitter {
    * @returns <zh/> 缩放区间 | <en/> zoom range
    * @apiCategory viewport
    */
-  public getZoomRange(): GraphOptions['zoomRange'] {
+  public getZoomRange(): GraphOptions<D>['zoomRange'] {
     return this.options.zoomRange;
   }
 
@@ -244,7 +245,7 @@ export class Graph extends EventEmitter {
    * <en/> The value of `options.combo`
    * @apiCategory element
    */
-  public setCombo(combo: ComboOptions): void {
+  public setCombo(combo: ComboOptions<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>): void {
     this.options.combo = combo;
     this.context.model.refreshData();
   }
diff --git a/packages/g6/src/runtime/options.ts b/packages/g6/src/runtime/options.ts
index 0f328e7952d..69c82834ccb 100644
--- a/packages/g6/src/runtime/options.ts
+++ b/packages/g6/src/runtime/options.ts
@@ -1,4 +1,4 @@
-import type { GraphOptions } from '../spec';
+import type { GraphData, GraphOptions } from '../spec';
 
 /**
  * <zh/> 基于用户传入的配置，推断出最终的配置
@@ -7,7 +7,7 @@ import type { GraphOptions } from '../spec';
  * @param options - <zh/> 用户传入的配置 | <en/> Configuration passed by the user
  * @returns <zh/> 最终的配置 | <en/> Final configuration
  */
-export function inferOptions(options: GraphOptions): GraphOptions {
+export function inferOptions<D extends GraphData = GraphData>(options: GraphOptions<D>): GraphOptions<D> {
   const flow = [inferLayoutOptions];
   return flow.reduce((acc, infer) => infer(acc), options);
 }
@@ -19,7 +19,7 @@ export function inferOptions(options: GraphOptions): GraphOptions {
  * @param options - <zh/> 用户传入的配置 | <en/> Configuration passed by the user
  * @returns <zh/> 最终的配置 | <en/> Final configuration
  */
-function inferLayoutOptions(options: GraphOptions): GraphOptions {
+function inferLayoutOptions<D extends GraphData = GraphData>(options: GraphOptions<D>): GraphOptions<D> {
   if (!options.layout) return options;
   if (Array.isArray(options.layout)) return options;
   if ('preLayout' in options.layout) return options;
diff --git a/packages/g6/src/spec/data.ts b/packages/g6/src/spec/data.ts
index 057c69c68a4..53e2844bfc1 100644
--- a/packages/g6/src/spec/data.ts
+++ b/packages/g6/src/spec/data.ts
@@ -2,6 +2,8 @@ import type { ID, State } from '../types';
 import type { ComboStyle } from './element/combo';
 import type { EdgeStyle } from './element/edge';
 import type { NodeStyle } from './element/node';
+import type { UnknownStruct } from '../types/utility';
+
 /**
  * <zh/> 图数据
  *
@@ -26,25 +28,29 @@ import type { NodeStyle } from './element/node';
  * }
  * ```
  */
-export interface GraphData {
+export interface GraphData<
+  N extends UnknownStruct = UnknownStruct,
+  E extends UnknownStruct = UnknownStruct,
+  C extends UnknownStruct = UnknownStruct,
+> {
   /**
    * <zh/> 节点数据
    *
    * <en/> node data
    */
-  nodes?: NodeData[];
+  nodes?: NodeData<N>[];
   /**
    * <zh/> 边数据
    *
    * <en/> edge data
    */
-  edges?: EdgeData[];
+  edges?: EdgeData<E>[];
   /**
    * <zh/> Combo 数据
    *
    * <en/> combo data
    */
-  combos?: ComboData[];
+  combos?: ComboData<C>[];
 }
 
 /**
@@ -52,7 +58,7 @@ export interface GraphData {
  *
  * <en/> Node data
  */
-export interface NodeData {
+export interface NodeData<T extends UnknownStruct = UnknownStruct> {
   /**
    * <zh/> 节点 ID
    *
@@ -74,7 +80,7 @@ export interface NodeData {
    *
    * <en/> Used to store custom data of the node, which can be obtained through callback functions in the style mapping
    */
-  data?: Record<string, unknown>;
+  data?: T;
   /**
    * <zh/> 节点样式
    *
@@ -121,7 +127,7 @@ export interface NodeData {
  *
  * <en/> Combo data
  */
-export interface ComboData {
+export interface ComboData<T extends UnknownStruct = UnknownStruct> {
   /**
    * <zh/> Combo ID
    *
@@ -143,7 +149,7 @@ export interface ComboData {
    *
    * <en/> Used to store custom data of the Combo, which can be obtained through callback functions in the style mapping
    */
-  data?: Record<string, unknown>;
+  data?: T;
   /**
    * <zh/> Combo 样式
    *
@@ -170,7 +176,7 @@ export interface ComboData {
  *
  * <en/> Edge data
  */
-export interface EdgeData {
+export interface EdgeData<T extends UnknownStruct = UnknownStruct> {
   /**
    * <zh/> 边 ID
    *
@@ -204,7 +210,7 @@ export interface EdgeData {
    *
    * <en/> Used to store custom data of the edge, which can be obtained through callback functions in the style mapping
    */
-  data?: Record<string, unknown>;
+  data?: T;
   /**
    * <zh/> 边样式
    *
diff --git a/packages/g6/src/spec/element/combo.ts b/packages/g6/src/spec/element/combo.ts
index 5f9d48bc67c..3e43b5da2e4 100644
--- a/packages/g6/src/spec/element/combo.ts
+++ b/packages/g6/src/spec/element/combo.ts
@@ -1,59 +1,101 @@
 import type { AnimationOptions } from '../../animations/types';
-import type { BaseComboStyleProps } from '../../elements/combos';
+import type { BaseComboStyleProps, CircleComboStyleProps, RectComboStyleProps } from '../../elements/combos';
 import type { Graph } from '../../runtime/graph';
+import { UnknownStruct } from '../../types/utility';
 import type { ComboData } from '../data';
 import type { AnimationStage } from './animation';
 import type { PaletteOptions } from './palette';
 
+type ComboDataFn<R, ComboType extends UnknownStruct = UnknownStruct> = (this: Graph, datum: ComboData<ComboType>) => R;
+
+type StyleFieldComboDataFn<S, ComboType extends UnknownStruct = UnknownStruct> = {
+  [K in keyof S]?: S[K] | ComboDataFn<S[K], ComboType>;
+};
+
+type ComboOptionsBuilder<
+  NodeType extends UnknownStruct = UnknownStruct,
+  ComboType extends UnknownStruct = UnknownStruct,
+  Type extends string = string, 
+  Style extends Partial<BaseComboStyleProps<NodeType, ComboType>> = Partial<BaseComboStyleProps<NodeType, ComboType>>
+> = {
+   /**
+    * <zh/> 组合类型
+    *
+    * <en/> Combo type
+    */
+   type?: Type | ComboDataFn<Type, ComboType>;
+   /**
+    * <zh/> 组合样式
+    *
+    * <en/> Combo style
+    */
+   style?:
+     | Style
+     | ComboDataFn<Style, ComboType>
+     | StyleFieldComboDataFn<Style, ComboType>;
+   /**
+    * <zh/> 组合状态样式
+    *
+    * <en/> Combo state style
+    */
+   state?: Record<
+     string,
+     | Style
+     | ComboDataFn<Style, ComboType>
+     | StyleFieldComboDataFn<Style, ComboType>
+   >;
+   /**
+    * <zh/> 组合动画
+    *
+    * <en/> Combo animation
+    */
+   animation?: false | Record<AnimationStage, false | string | AnimationOptions[]>;
+   /**
+    * <zh/> 色板
+    *
+    * <en/> Palette
+    */
+   palette?: PaletteOptions;
+}
+
+export interface ComboStyle<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> extends Partial<BaseComboStyleProps<NodeType, ComboType>> {
+  [key: string]: unknown;
+}
+
+type CircleComboOptions<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> = ComboOptionsBuilder<
+  NodeType,
+  ComboType,
+  'circle',
+  CircleComboStyleProps<NodeType, ComboType>
+>;
+
+type RectComboOptions<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> = ComboOptionsBuilder<
+  NodeType,
+  ComboType,
+  'rect',
+  RectComboStyleProps<NodeType, ComboType>
+>;
+
+type CustomComboOptions<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> = ComboOptionsBuilder<
+  NodeType,
+  ComboType,
+  string,
+  ComboStyle<NodeType, ComboType>
+>;
+
+
 /**
  * <zh/> Combo 配置项
  *
  * <en/> Combo spec
  */
-export interface ComboOptions {
-  /**
-   * <zh/> 组合类型
-   *
-   * <en/> Combo type
-   */
-  type?: string | ((this: Graph, datum: ComboData) => string);
-  /**
-   * <zh/> 组合样式
-   *
-   * <en/> Combo style
-   */
-  style?:
-    | ComboStyle
-    | ((this: Graph, data: ComboData) => ComboStyle)
-    | {
-        [K in keyof ComboStyle]: ComboStyle[K] | ((this: Graph, data: ComboData) => ComboStyle[K]);
-      };
-  /**
-   * <zh/> 组合状态样式
-   *
-   * <en/> Combo state style
-   */
-  state?: Record<
-    string,
-    | ComboStyle
-    | ((this: Graph, data: ComboData) => ComboStyle)
-    | {
-        [K in keyof ComboStyle]: ComboStyle[K] | ((this: Graph, data: ComboData) => ComboStyle[K]);
-      }
-  >;
-  /**
-   * <zh/> 组合动画
-   *
-   * <en/> Combo animation
-   */
-  animation?: false | Record<AnimationStage, false | string | AnimationOptions[]>;
-  /**
-   * <zh/> 色板
-   *
-   * <en/> Palette
-   */
-  palette?: PaletteOptions;
-}
+export type ComboOptions<
+  NodeType extends UnknownStruct = UnknownStruct,
+  ComboType extends UnknownStruct = UnknownStruct,
+> = 
+  | CircleComboOptions<NodeType, ComboType>
+  | RectComboOptions<NodeType, ComboType>
+  | CustomComboOptions<NodeType, ComboType>;
 
 export interface StaticComboOptions {
   style?: ComboStyle;
@@ -61,7 +103,3 @@ export interface StaticComboOptions {
   animation?: false | Record<AnimationStage, false | string | AnimationOptions[]>;
   palette?: PaletteOptions;
 }
-
-export interface ComboStyle extends Partial<BaseComboStyleProps> {
-  [key: string]: any;
-}
diff --git a/packages/g6/src/spec/element/state.ts b/packages/g6/src/spec/element/state.ts
new file mode 100644
index 00000000000..dfae1157fd8
--- /dev/null
+++ b/packages/g6/src/spec/element/state.ts
@@ -0,0 +1,7 @@
+/**
+ * <zh/> 内置状态
+ *
+ * <en/> Built-in states
+ * @see https://g6.antv.antgroup.com/en/manual/element/state
+ */
+export type BuiltInState = 'selected' | 'active' | 'highlight' | 'inactive' | 'disable';
diff --git a/packages/g6/src/spec/graph.ts b/packages/g6/src/spec/graph.ts
index b4b60544b82..34c3812ef40 100644
--- a/packages/g6/src/spec/graph.ts
+++ b/packages/g6/src/spec/graph.ts
@@ -1,7 +1,7 @@
 import type { AnimationEffectTiming } from '../animations/types';
 import type { BehaviorOptions } from './behavior';
 import type { CanvasOptions } from './canvas';
-import type { GraphData } from './data';
+import type { ComboData, EdgeData, GraphData, NodeData } from './data';
 import type { ComboOptions } from './element/combo';
 import type { EdgeOptions } from './element/edge';
 import type { NodeOptions } from './element/node';
@@ -11,6 +11,12 @@ import type { ThemeOptions } from './theme';
 import type { TransformOptions } from './transform';
 import type { ViewportOptions } from './viewport';
 
+export type InferGraphDataTypes<D extends GraphData = GraphData> = {
+  node: D['nodes'] extends NodeData<infer N>[] ? N : never;
+  edge: D['edges'] extends EdgeData<infer E>[] ? E : never;
+  combo: D['combos'] extends ComboData<infer C>[] ? C : never;
+};
+
 /**
  * <zh/> Graph 配置项
  *
@@ -25,7 +31,7 @@ import type { ViewportOptions } from './viewport';
  * ```
  */
 
-export interface GraphOptions extends CanvasOptions, ViewportOptions {
+export interface GraphOptions<D extends GraphData = GraphData> extends CanvasOptions, ViewportOptions {
   /**
    * <zh/> 启用或关闭全局动画
    *
@@ -45,7 +51,7 @@ export interface GraphOptions extends CanvasOptions, ViewportOptions {
    *
    * <en/> See [Data](/en/api/data/graph-data)
    */
-  data?: GraphData;
+  data?: D;
   /**
    * <zh/> 布局配置项
    *
@@ -85,7 +91,7 @@ export interface GraphOptions extends CanvasOptions, ViewportOptions {
    *
    * <en/> See [Combo](/en/api/elements/combos/base-combo)
    */
-  combo?: ComboOptions;
+  combo?: ComboOptions<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>;
   /**
    * <zh/> 主题
    *
diff --git a/packages/g6/src/types/data.ts b/packages/g6/src/types/data.ts
index 2133c62c9b3..cec29fbf4f1 100644
--- a/packages/g6/src/types/data.ts
+++ b/packages/g6/src/types/data.ts
@@ -1,5 +1,6 @@
 import type { ComboData, EdgeData, NodeData } from '../spec/data';
 import type { ID } from '../types';
+import { UnknownStruct } from './utility';
 
 export type DataID = {
   nodes?: ID[];
@@ -7,7 +8,7 @@ export type DataID = {
   combos?: ID[];
 };
 
-export type NodeLikeData = NodeData | ComboData;
+export type NodeLikeData<NodeType extends UnknownStruct = UnknownStruct, ComboType extends UnknownStruct = UnknownStruct> = NodeData<NodeType> | ComboData<ComboType>;
 
 export type ElementDatum = NodeData | EdgeData | ComboData;
 
@@ -46,10 +47,14 @@ export type PartialEdgeData<T extends EdgeData> =
  *
  * <en/> G6 data update optional data
  */
-export type PartialGraphData = {
-  nodes?: PartialNodeLikeData<NodeData>[];
-  edges?: PartialEdgeData<EdgeData>[];
-  combos?: PartialNodeLikeData<ComboData>[];
+export type PartialGraphData<
+  N extends UnknownStruct = UnknownStruct,
+  E extends UnknownStruct = UnknownStruct,
+  C extends UnknownStruct = UnknownStruct,
+> = {
+  nodes?: PartialNodeLikeData<NodeData<N>>[];
+  edges?: PartialEdgeData<EdgeData<E>>[];
+  combos?: PartialNodeLikeData<ComboData<C>>[];
 };
 
 /**
diff --git a/packages/g6/src/utils/graphlib.ts b/packages/g6/src/utils/graphlib.ts
index 8d5033f6cd6..b1cce0f4ff3 100644
--- a/packages/g6/src/utils/graphlib.ts
+++ b/packages/g6/src/utils/graphlib.ts
@@ -1,12 +1,13 @@
 import type { Edge, Graph as Graphlib, Node } from '@antv/graphlib';
 import { TREE_KEY } from '../constants';
-import type { ComboData, EdgeData, NodeData } from '../spec';
+import type { ComboData, EdgeData, GraphData, NodeData } from '../spec';
 import { NodeLikeData } from '../types/data';
 import { idOf } from './id';
 import { isEdgeData } from './is';
+import { InferGraphDataTypes } from '../spec/graph';
 
-export function toGraphlibData(datums: EdgeData): Edge<EdgeData>;
-export function toGraphlibData(datums: NodeLikeData): Node<NodeLikeData>;
+export function toGraphlibData<D extends GraphData = GraphData>(datums: EdgeData<InferGraphDataTypes<D>['edge']>): Edge<EdgeData<InferGraphDataTypes<D>['edge']>>;
+export function toGraphlibData<D extends GraphData = GraphData>(datums: NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>): Node<NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>>;
 /**
  * <zh/> 将 NodeData、EdgeData、ComboData 转换为 graphlib 的数据结构
  *
@@ -14,12 +15,12 @@ export function toGraphlibData(datums: NodeLikeData): Node<NodeLikeData>;
  * @param data - <zh/> 节点、边、combo 数据 | <en/> node, combo data
  * @returns <zh/> graphlib 数据 | <en/> graphlib data
  */
-export function toGraphlibData(data: NodeData | EdgeData | ComboData): Node<NodeLikeData> | Edge<EdgeData> {
+export function toGraphlibData<D extends GraphData = GraphData>(data: NodeData<InferGraphDataTypes<D>['node']> | EdgeData<InferGraphDataTypes<D>['edge']> | ComboData<InferGraphDataTypes<D>['combo']>): Node<NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>> | Edge<EdgeData<InferGraphDataTypes<D>['edge']>> {
   const { id = idOf(data), style, data: customData, ...rest } = data;
   const _data = { ...data, style: { ...style }, data: { ...customData } };
 
-  if (isEdgeData(data)) return { id, data: _data, ...rest } as Edge<EdgeData>;
-  return { id, data: _data } as Node<NodeLikeData>;
+  if (isEdgeData(data)) return { id, data: _data, ...rest } as Edge<EdgeData<InferGraphDataTypes<D>['edge']>>;
+  return { id, data: _data } as Node<NodeLikeData<InferGraphDataTypes<D>['node'], InferGraphDataTypes<D>['combo']>>;
 }
 
 export function toG6Data<T extends EdgeData>(data: Edge<T>): T;