logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.48
  • Introduction
  • Data
  • Getting Started
    • Quick Start
    • Installation
    • Integration
      • react
      • vue
      • angular
    • Step-by-step guide
  • Graph
    • Extensions En
    • Graph
    • Options
    • extension
  • Element
    • Element Overview
    • Element State
    • Node
      • Node Overview
      • Build-in Node
        • Common Node Configurations
        • Diamond
        • Donut
        • Ellipse
        • Hexagon
        • Html
        • Image
        • Rect
        • Star
        • Triangle
        • Circle
      • Custom Node
      • Define Nodes with React
    • Edge
      • Edge Overview
      • Build-in Edge
        • Common Edge Configurations
        • Cubic Bezier Curve
        • CubicHorizontal Bezier Curve
        • CubicVertical Bezier Curve
        • Line
        • Polyline
        • Quadratic Bezier Curve
      • Custom Edge
    • Combo
      • Combo Overview
      • Build-in Combo
        • Circle
        • Combo Configuration Options
        • Rect
      • Custom Combo
    • Shape
      • Shape and KeyShape
      • Atomic Shapes and Their Properties
      • Design and Implementation of Composite Shape
  • Layout
    • Layout Overview
    • Build-in Layout
      • 3D Force-Directed Layout
      • AntvDagre Layout
      • Circular Layout
      • ComboCombined Layout
      • Common Layout Configuration Options
      • CompactBox
      • Concentric Layout
      • D3 Force-Directed Layout
      • Dagre Layout
      • Dendrogram Layout
      • Fishbone Layout
      • Force Force-directed Layout
      • ForceAtlas2 Force-directed Layout
      • Fruchterman Force-directed Layout
      • Grid Layout
      • Indented Tree
      • MDS High-dimensional Data Dimensionality Reduction Layout
      • Mindmap Tree
      • Radial Layout
      • Random Layout
      • Snake Layout
    • Custom Layout
  • Behavior
    • Behavior Overview
    • Build-in Behavior
      • AutoAdaptLabel
      • BrushSelect
      • ClickSelect
      • CollapseExpand
      • CreateEdge
      • DragCanvas
      • DragElement
      • DragElementForce
      • FixElementSize
      • FocusElement
      • HoverActivate
      • LassoSelect
      • OptimizeViewportTransform
      • ScrollCanvas
      • ZoomCanvas
    • Custom Behavior
  • Plugin
    • Plugin Overview
    • Build-in Plugin
      • Background
      • BubbleSets
      • Contextmenu
      • EdgeBundling
      • EdgeFilterLens
      • Fisheye
      • Fullscreen
      • GridLine
      • History
      • Hull
      • Legend
      • Minimap
      • Snapline
      • Timebar
      • Toolbar
      • Tooltip
      • Watermark
    • Custom Plugin
  • Transform
    • Data Transformation Overview
    • Build-in Transform
      • MapNodeSize
      • PlaceRadialLabels
      • ProcessParallelEdges
    • Custom Transform
  • Theme
    • Theme Overview
    • Custom Theme
    • Palette
    • Custom Palette
  • Animation
    • Animation Overview
    • Custom Animation
  • Further Reading
    • Event
    • renderer
    • coordinate
    • download-image
    • Using Iconfont
    • Use 3D
    • Bundle Project
  • What's new
    • Feature
    • Upgrade To 5.0
  • FAQ
  • contribute

Mindmap Tree

Previous
MDS High-dimensional Data Dimensionality Reduction Layout
Next
Radial Layout

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Overview

The mindmap tree layout is suitable for hierarchical layouts of tree structures, supporting expansion on both left and right sides. Nodes at the same depth will be placed on the same layer. Note: the layout does take node size into account. See more mindmap layout examples or source code.

img

Configuration

const graph = new Graph({
layout: {
type: 'mindmap',
direction: 'H',
preLayout: false,
getHeight: () => 32,
getWidth: () => 32,
getVGap: () => 16,
getHGap: () => 72,
},
});

Options

Mindmap tree options diagram
PropertyDescriptionTypeDefaultRequired
typeLayout typemindmap-✓
directionLayout direction, optionsH | LR | RL | TB | BTLR
getHeightFunction to calculate the height of each node(d?: Node) => number✓
getWidthFunction to calculate the width of each node(d?: Node) => number✓
getVGapVertical gap for each node. Note: the actual vertical gap between two nodes is twice the vgap(d?: Node) => number
getHGapHorizontal gap for each node. Note: the actual horizontal gap between two nodes is twice the hgap(d?: Node) => number
getSideSet whether the node is placed on the left or right of the root. Only effective when direction is H(d?: Node) => string

direction

H | LR | RL | TB | BT Default: 'LR'

Tree layout direction

  • 'H': horizontal — The children of the root node are divided into two parts and placed on the left and right sides of the root node. You can pass the getSide method to specify the left/right distribution logic for each node. If not provided, the first half will be placed on the right, and the second half on the left by default.
Horizontal layout
  • 'LR' | 'TB': Children are placed on the right side of the root node.
Vertical layout
  • 'RL': Children are placed on the left side of the root node.
Vertical layout
  • BT: Children are placed on the right side of the root node, then the entire graph is rotated 180° along the X axis.
Vertical layout

getWidth

(d?: Node) => number

Width of each node

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getHeight

(d?: Node) => number

Height of each node

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getHGap

(d?: Node) => number

Horizontal gap for each node

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getVGap

(d?: Node) => number

Vertical gap for each node

Example:

(d) => {
// d is a node
if (d.id === 'testId') return 50;
return 100;
};

getSide

(d?: Node) => string

Set whether the node is placed on the left or right of the root. Note: only effective when direction is H. If not set, the first half of the children will be placed on the right, and the second half on the left by default. See getSide auto calculation logic.

Example:

(d) => {
// d is a node
if (d.id === 'test-child-id') return 'right';
return 'left';
};

Suitable Scenarios

  • Data lineage graph: direction='H' is suitable for rendering upstream and downstream lineage of a specified node, with upstream on the left and downstream on the right of the central node.
  • Mind map: Build custom mind map components.