g6/packages/site/docs/manual/customize/overview.en.md

title	order
Overview	0

G6 provides a free extension mechanism. In addition to Graph itself, all other capabilities are G6's "extensions".

The extension categories in G6 5.0 are as follows:

• Node
• Edge
• Combo
• Data Transformer
• Behavior
• Layout
• Plugin
• Theme

To reduce the package size, G6 5.0 uses on-demand loading. Only when a certain extension is used will the corresponding code be imported. Taking the node extension as an example:

import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';

/**
 * To extend the Graph and register the required built-in functionalities, you can use the extend method. The second parameter of this method is the registry.
 */
const Graph = extend(BaseGraph, {
  nodes: {
    'custom-node': Extensions.RectNode,
  },
});

// Instantiate using the extended class
const graph = new Graph({
  node: {
    type: 'custom-edge',
  },
});

:::warning In addition to the default registered extensions, other extensions need to be registered to Graph through the extend method before they can be used. :::

Built-in Extensions

1. nodes

type	Import from	Registered by Default	Demo	Note
'circle-node'	Extensions.CircleNode	✅ Yes	DEMO
'rect-node'	Extensions.RectNode	✅ Yes	Rect DEMO，Round Rect DEMO
'image-node'	Extensions.ImageNode	✅ Yes	DEMO
'donut-node'	Extensions.DonutNode	No	DEMO
'diamond-node'	Extensions.DiamondNode	No	DEMO
'hexagon-node'	Extensions.HexagonNode	No	DEMO
'star-node'	Extensions.StarNode	No	DEMO
'triangle-node'	Extensions.TriangleNode	No	DEMO
'ellipse-node'	Extensions.EllipseNode	No	DEMO
'modelRect-node'	Extensions.ModelRectNode	No	DEMO
'sphere-node'	Extensions.SphereNode	No	DEMO	availabel only when renderer: 'webgl-3d'
'cube-node'	Extensions.CubeNode	No	DEMO	availabel only when renderer: 'webgl-3d'

2. edges

type	Import from	Registered by Default	Demo	Note
'line-edge'	Extensions.LineEdge	✅ Yes	DEMO
'loop-edge'	Extensions.LineEdge	✅ Yes	DEMO
'quadratic-edge'	Extensions.QuadraticEdge	No	DEMO
'cubic-edge'	Extensions.CubicEdge	No	DEMO
'polyline-edge'	Extensions.PolylineEdge	No	DEMO
'cubic-horizontal-edge'	Extensions.CubicHorizontalEdge	No	DEMO
'cubic-vertical-edge'	Extensions.CubicVerticalEdge	No	DEMO

3. combos

type	Import from	Registered by Default	Demo	Note
'circle-combo'	Extensions.CircleCombo	✅ Yes	DEMO
'rect-combo'	Extensions.RectCombo	✅ Yes	DEMO

4. transforms

It is called after the raw data is input into the graph and is used for data processing. If there are multiple data processors, they are executed in the order specified by the configuration array.

type	Import from	Registered by Default	Demo	Note
'transform-v4-data'	Extensions.TransformV4Data	✅ Yes
'map-node-size'	Extensions.MapNodeSize	✅ Yes

5. behaviors

All built-in and custom interactions should inherit from Extensions.BaseBehavior or other existing interactions.

type	Import from	Registered by Default	Demo	Note
'drag-canvas'	Extensions.DragCanvas	✅ Yes	DEMO
'zoom-canvas'	Extensions.ZoomCanvas	✅ Yes	DEMO
'drag-node'	Extensions.DragNode	✅ Yes	DEMO
'drag-combo'	Extensions.DragCombo	✅ Yes	DEMO
'click-select'	Extensions.ClickSelect	✅ Yes	DEMO
'collapse-expand-combo'	Extensions.CollapseExpandCombo	✅ Yes	DEMO
'collapse-expand-tree'	Extensions.CollapseExpandTree	✅ Yes	DEMO
'activate-relations'	Extensions.ActivateRelations	No	DEMO
'brush-select'	Extensions.BrushSelect	No	DEMO
'lasso-select'	Extensions.LassoSelect	No	DEMO
'create-edge'	Extensions.CreateEdge	No	DEMO
'shortcuts-call'	Extensions.ShortcutsCall	No	DEMO
'scroll-canvas'	Extensions.ScrollCanvas	No	DEMO
'orbit-canvas-3d'	Extensions.OrbitCanvas3D	No	DEMO	availabel only when renderer: 'webgl-3d'
'zoom-canvas-3d'	Extensions.ZoomCanvas3D	No	DEMO	availabel only when renderer: 'webgl-3d'

5. layouts

type	Import from	Registered by Default	Demo	Note
'force'	Extensions.ForceLayout	✅ Yes	DEMO
'grid'	Extensions.GridLayout	✅ Yes	DEMO
'circular'	Extensions.CircularLayout	✅ Yes	DEMO
'concentric'	Extensions.ConcentricLayout	✅ Yes	DEMO
'random'	Extensions.RandomLayout	No
'mds'	Extensions.MDSLayout	No	DEMO
'radial'	Extensions.RadialLayout	No	DEMO
'fruchterman'	Extensions.FruchtermanLayout	No	DEMO
'd3-force'	Extensions.D3ForceLayout	No
'force-atlas-2'	Extensions.ForceAtlas2Layout	No	DEMO
'dagre'	Extensions.DagreLayout	No	DEMO
'comboCombined'	Extensions.ComboCombinedLayout	No	DEMO
'compactBox'	Extensions.compactBox	No	DEMO
'dendrogram'	Extensions.compactBox	No	DEMO
'indented'	Extensions.compactBox	No	DEMO
'mindmap'	Extensions.mindmap	No	DEMO

6. plugins

All built-in and custom plugins should inherit from Extensions.BasePlugin or other existing plugins.

type	Import from	Registered by Default	Demo	Note
'history'	Extensions.History	✅ Yes	DEMO
'toolbar'	Extensions.Toolbar	No	DEMO
'tooltip'	Extensions.Tooltip	No	DEMO
'minimap'	Extensions.Minimap	No	DEMO
'grid'	Extensions.Grid	No	DEMO
'menu'	Extensions.Menu	No	DEMO
'fisheye'	Extensions.Fisheye	No	DEMO
'legend'	Extensions.Legend	No	DEMO
'timebar'	Extensions.Timebar	No	DEMO
'hull'	Extensions.Hull	No	DEMO
'snapline'	Extensions.Snapline	No	DEMO
'watermarker'	Extensions.WaterMarker	No	DEMO	Supports images or multiple texts