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	API	Note
'circle-node'	Extensions.CircleNode	✅ Yes	DEMO	API
'rect-node'	Extensions.RectNode	✅ Yes	Rect DEMO，Round Rect DEMO	API
'image-node'	Extensions.ImageNode	✅ Yes	DEMO	API
'donut-node'	Extensions.DonutNode	No	DEMO	API
'diamond-node'	Extensions.DiamondNode	No	DEMO	API
'hexagon-node'	Extensions.HexagonNode	No	DEMO	API
'star-node'	Extensions.StarNode	No	DEMO	API
'triangle-node'	Extensions.TriangleNode	No	DEMO	API
'ellipse-node'	Extensions.EllipseNode	No	DEMO	API
'modelRect-node'	Extensions.ModelRectNode	No	DEMO	API
'sphere-node'	Extensions.SphereNode	No	DEMO	API	available only when renderer
'cube-node'	Extensions.CubeNode	No	DEMO	API	available only when renderer

2. edges

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

3. combos

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

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	API	Note
'drag-canvas'	Extensions.DragCanvas	✅ Yes	DEMO	API
'zoom-canvas'	Extensions.ZoomCanvas	✅ Yes	DEMO	API
'drag-node'	Extensions.DragNode	✅ Yes	DEMO	API
'drag-combo'	Extensions.DragCombo	✅ Yes	DEMO	API
'click-select'	Extensions.ClickSelect	✅ Yes	DEMO	API
'collapse-expand-combo'	Extensions.CollapseExpandCombo	✅ Yes	DEMO	API
'collapse-expand-tree'	Extensions.CollapseExpandTree	✅ Yes	DEMO	API
'activate-relations'	Extensions.ActivateRelations	No	DEMO	API
'hover-activate'	Extensions.HoverActivate	No	DEMO	API
'brush-select'	Extensions.BrushSelect	No	DEMO	API
'lasso-select'	Extensions.LassoSelect	No	DEMO	API
'create-edge'	Extensions.CreateEdge	No	DEMO	API
'shortcuts-call'	Extensions.ShortcutsCall	No	DEMO	API
'scroll-canvas'	Extensions.ScrollCanvas	No	DEMO	API
'orbit-canvas-3d'	Extensions.OrbitCanvas3D	No	DEMO	API	available only when renderer
'track-canvas-3d'	Extensions.TrackCanvas3D	No	DEMO	API	available only when renderer
'zoom-canvas-3d'	Extensions.ZoomCanvas3D	No	DEMO	API	available only when renderer

5. layouts

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

6. plugins

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

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