Define Nodes with Vue

In G6, custom nodes typically require manipulating DOM or Canvas elements, but with the help of the g6-extension-vue ecosystem library, you can directly use Vue components as node content, enhancing development efficiency and maintainability.

Choosing a Custom Node Solution

G6 Node

✅ Recommended Scenarios:

Nodes are simple geometric shapes
Scenarios requiring efficient rendering of more than 2,000 nodes
Need to directly manipulate graphic instances for fine control

For detailed information on how to customize nodes using Canvas graphics, please refer to the Custom Node documentation

Vue Node

✅ Recommended Scenarios:

Business systems that need to integrate UI libraries like Element Plus / Ant Design Vue
Nodes contain interactive logic such as form input, state switching
Scenarios where an existing Vue design system needs to be reused

Quick Start

Environment Preparation

Before starting, please ensure you have:

Installed a Vue project: Ensure a Vue project is installed and created.
Vue version requirement: Ensure the Vue version used is >=2.6.0. (Vue 3 is recommended)

Install Dependencies

To use g6-extension-vue, run the following command:

npm

yarn

pnpm

npm install g6-extension-vue

Component Integration

1. Register Vue Node Type

import { ExtensionCategory, register } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

The register method requires three parameters:

Extension category: ExtensionCategory.NODE indicates this is a node type
Type name: vue-node is the name we give to this custom node, which will be used in the configuration later
Class definition: VueNode is the implementation class exported by g6-extension-vue

2. Define Business Component

Define a simple Vue component as the content of the node:

import { defineComponent, h } from 'vue';

const MyVueNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    return () => {
      return h('div', 'vue node');
    };
  },
});

3. Use the Component

Use the custom Vue node in the graph configuration. Specify the node type and style in the graph configuration to use the custom Vue component.

type: Specify the node type as vue-node (use the name given during registration)
style.component: Define the Vue component content of the node

const graph = new Graph({
  node: {
    type: 'vue-node',
    style: {
      component: () => <MyVueNode />,
    },
  },
});

graph.render();

Advanced Features

State Management

In complex graph visualization scenarios, nodes need to dynamically respond to interaction states. We provide two complementary state management solutions:

Respond to Built-in Interaction States

G6 provides built-in interaction state management states, such as hover-activate and click-select. You can get the current node state through the data.states field in the node data and adjust the node style based on the state.

Example: Change the background color when the node is hovered.

import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { computed, defineComponent } from 'vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

const StatefulNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    const isActive = computed(() => props.data.states?.includes('active'));
    const label = computed(() => props.data.data?.label);

    return (
      <div
        style={{
          width: 100,
          padding: 5,
          border: '1px solid #eee',
          boxShadow: isActive.value ? '0 0 8px rgba(24,144,255,0.8)' : 'none',
          transform: `scale(${isActive.value ? 1.05 : 1})`,
        }}
      >
        {label.value}
      </div>
    );
  },
});

const graph = new Graph({
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 200 }, data: { label: 'node1' } },
      { id: 'node2', style: { x: 300, y: 200 }, data: { label: 'node2' } },
    ],
  },
  node: {
    type: 'vue-node',
    style: {
      component: (data) => <StatefulNode data={Object.assign({}, data)} />, // data is non-reactive, need to change reference to trigger Vue's props side effects
    },
  },
  behaviors: ['hover-activate'],
});

graph.render();

Custom Business State

When you need to manage business-related states (such as approval status, risk level), you can extend node data to achieve this:

Example: Add a selected variable through data to achieve style changes for node selection and deselection.

import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { defineComponent, computed } from 'vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

const MyVueNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    const isSelected = computed(() => props.data.data.selected);

    const handleClick = () => {
      graph.updateNodeData([{ id: props.data.id, data: { selected: !isSelected.value } }]);
      graph.draw();
    };

    return (
      <div
        style={{
          width: 200,
          padding: 10,
          border: '1px solid red',
          borderColor: isSelected.value ? 'orange' : '#ddd', // Set border color based on selection state
          cursor: 'pointer', // Add mouse pointer style
        }}
        onClick={handleClick}
      >
        Node
      </div>
    );
  },
});

const graph = new Graph({
  data: {
    nodes: [
      {
        id: 'node1',
        style: { x: 100, y: 100 },
        data: { selected: true },
      },
    ],
  },
  node: {
    type: 'vue-node',
    style: {
      component: (data) => <MyVueNode data={Object.assign({}, data)} graph={graph} />, // data is non-reactive, need to change reference to trigger Vue's props side effects
    },
  },
});

graph.render();

Event Interaction

Achieve two-way communication between nodes and graph instances, allowing nodes and graph instances to update each other.

Example: Operate graph data through custom nodes and re-render the graph.

import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { defineComponent, computed } from 'vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

const IDCardNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    const isSelected = computed(() => props.data.data.selected);

    const handleSelect = () => {
      graph.updateNodeData([{ id: props.data.id, data: { selected: true } }]);
      graph.draw();
    };

    return <Select onChange={handleSelect} style={{ background: isSelected.value ? 'orange' : '#eee' }} />;
  },
});

const graph = new Graph({
  node: {
    type: 'vue-node',
    style: {
      component: ({ id, data }) => <IDCardNode id={id} selected={isSelected.value} graph={graph} />,
    },
  },
});

Choosing a Custom Node Solution

G6 Node

✅ Recommended Scenarios:

Nodes are simple geometric shapes
Scenarios requiring efficient rendering of more than 2,000 nodes
Need to directly manipulate graphic instances for fine control

For detailed information on how to customize nodes using Canvas graphics, please refer to the Custom Node documentation

Vue Node

✅ Recommended Scenarios:

Business systems that need to integrate UI libraries like Element Plus / Ant Design Vue
Nodes contain interactive logic such as form input, state switching
Scenarios where an existing Vue design system needs to be reused

Quick Start

Environment Preparation

Before starting, please ensure you have:

Installed a Vue project: Ensure a Vue project is installed and created.
Vue version requirement: Ensure the Vue version used is >=2.6.0. (Vue 3 is recommended)

Install Dependencies

To use g6-extension-vue, run the following command:

npm

yarn

pnpm

npm install g6-extension-vue

Component Integration

1. Register Vue Node Type

import { ExtensionCategory, register } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

The register method requires three parameters:

Extension category: ExtensionCategory.NODE indicates this is a node type
Type name: vue-node is the name we give to this custom node, which will be used in the configuration later
Class definition: VueNode is the implementation class exported by g6-extension-vue

2. Define Business Component

Define a simple Vue component as the content of the node:

import { defineComponent, h } from 'vue';

const MyVueNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    return () => {
      return h('div', 'vue node');
    };
  },
});

3. Use the Component

Use the custom Vue node in the graph configuration. Specify the node type and style in the graph configuration to use the custom Vue component.

type: Specify the node type as vue-node (use the name given during registration)
style.component: Define the Vue component content of the node

const graph = new Graph({
  node: {
    type: 'vue-node',
    style: {
      component: () => <MyVueNode />,
    },
  },
});

graph.render();

Advanced Features

State Management

In complex graph visualization scenarios, nodes need to dynamically respond to interaction states. We provide two complementary state management solutions:

Respond to Built-in Interaction States

Example: Change the background color when the node is hovered.

import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { computed, defineComponent } from 'vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

const StatefulNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    const isActive = computed(() => props.data.states?.includes('active'));
    const label = computed(() => props.data.data?.label);

    return (
      <div
        style={{
          width: 100,
          padding: 5,
          border: '1px solid #eee',
          boxShadow: isActive.value ? '0 0 8px rgba(24,144,255,0.8)' : 'none',
          transform: `scale(${isActive.value ? 1.05 : 1})`,
        }}
      >
        {label.value}
      </div>
    );
  },
});

const graph = new Graph({
  data: {
    nodes: [
      { id: 'node1', style: { x: 100, y: 200 }, data: { label: 'node1' } },
      { id: 'node2', style: { x: 300, y: 200 }, data: { label: 'node2' } },
    ],
  },
  node: {
    type: 'vue-node',
    style: {
      component: (data) => <StatefulNode data={Object.assign({}, data)} />, // data is non-reactive, need to change reference to trigger Vue's props side effects
    },
  },
  behaviors: ['hover-activate'],
});

graph.render();

Custom Business State

When you need to manage business-related states (such as approval status, risk level), you can extend node data to achieve this:

Example: Add a selected variable through data to achieve style changes for node selection and deselection.

import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { defineComponent, computed } from 'vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

const MyVueNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    const isSelected = computed(() => props.data.data.selected);

    const handleClick = () => {
      graph.updateNodeData([{ id: props.data.id, data: { selected: !isSelected.value } }]);
      graph.draw();
    };

    return (
      <div
        style={{
          width: 200,
          padding: 10,
          border: '1px solid red',
          borderColor: isSelected.value ? 'orange' : '#ddd', // Set border color based on selection state
          cursor: 'pointer', // Add mouse pointer style
        }}
        onClick={handleClick}
      >
        Node
      </div>
    );
  },
});

const graph = new Graph({
  data: {
    nodes: [
      {
        id: 'node1',
        style: { x: 100, y: 100 },
        data: { selected: true },
      },
    ],
  },
  node: {
    type: 'vue-node',
    style: {
      component: (data) => <MyVueNode data={Object.assign({}, data)} graph={graph} />, // data is non-reactive, need to change reference to trigger Vue's props side effects
    },
  },
});

graph.render();

Event Interaction

Achieve two-way communication between nodes and graph instances, allowing nodes and graph instances to update each other.

Example: Operate graph data through custom nodes and re-render the graph.

import { ExtensionCategory, register, Graph } from '@antv/g6';
import { VueNode } from 'g6-extension-vue';
import { defineComponent, computed } from 'vue';

register(ExtensionCategory.NODE, 'vue-node', VueNode);

const IDCardNode = defineComponent({
  setup(props, { attrs, slots, expose }) {
    const isSelected = computed(() => props.data.data.selected);

    const handleSelect = () => {
      graph.updateNodeData([{ id: props.data.id, data: { selected: true } }]);
      graph.draw();
    };

    return <Select onChange={handleSelect} style={{ background: isSelected.value ? 'orange' : '#eee' }} />;
  },
});

const graph = new Graph({
  node: {
    type: 'vue-node',
    style: {
      component: ({ id, data }) => <IDCardNode id={id} selected={isSelected.value} graph={graph} />,
    },
  },
});