diff --git a/.prettierignore b/.prettierignore
index 8af90c5d6..58db32539 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,6 +1,5 @@
 **/*.svg
 **/*.html
-*.md
 package.json
 .umi
 .umi-production
@@ -11,4 +10,4 @@ dist
 node_modules
 *.ejs
 gatsby-browser.js
-*.min.js
\ No newline at end of file
+*.min.js
diff --git a/packages/graphs/src/components/flow-direction-graph/index.tsx b/packages/graphs/src/components/flow-direction-graph/index.tsx
index 01b6fb125..ee52af6ce 100644
--- a/packages/graphs/src/components/flow-direction-graph/index.tsx
+++ b/packages/graphs/src/components/flow-direction-graph/index.tsx
@@ -10,13 +10,17 @@ import React, {
 import { BaseGraph } from '../../core/base-graph';
 import { COMMON_OPTIONS } from '../../core/constants';
 import { mergeOptions } from '../../core/utils/options';
-import { DEFAULT_OPTIONS } from './options';
+import { DEFAULT_OPTIONS, getFlowDirectionGraphOptions } from './options';
 import type { FlowDirectionGraphOptions } from './types';
 
 export const FlowDirectionGraph: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<FlowDirectionGraphOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<FlowDirectionGraphOptions>>(({ children, ...props }, ref) => {
-  const options = useMemo(() => mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, props), [props]);
+  const { labelField, ...restProps } = props;
+  const options = useMemo(
+    () => mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowDirectionGraphOptions({ labelField }), restProps),
+    [props],
+  );
 
   return (
     <BaseGraph {...options} ref={ref}>
diff --git a/packages/graphs/src/components/flow-graph/options.tsx b/packages/graphs/src/components/flow-graph/options.tsx
index 6ee647221..0f78a0dc0 100644
--- a/packages/graphs/src/components/flow-graph/options.tsx
+++ b/packages/graphs/src/components/flow-graph/options.tsx
@@ -23,7 +23,9 @@ export const DEFAULT_OPTIONS: FlowGraphOptions = {
       lineWidth: 2,
       endArrow: true,
       radius: 8,
-      router: { type: 'orth' },
+      router: {
+        type: 'orth',
+      },
     },
   },
   layout: {
diff --git a/packages/graphs/src/components/organization-chart/index.tsx b/packages/graphs/src/components/organization-chart/index.tsx
index d606e2fcb..24e957470 100644
--- a/packages/graphs/src/components/organization-chart/index.tsx
+++ b/packages/graphs/src/components/organization-chart/index.tsx
@@ -17,11 +17,11 @@ export const OrganizationChart: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<OrganizationChartOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<OrganizationChartOptions>>(({ children, ...props }, ref) => {
   const options = useMemo(() => {
-    const { direction = 'vertical', ...restProps } = props;
+    const { direction = 'vertical', labelField, ...restProps } = props;
     const options = mergeOptions(
       COMMON_OPTIONS,
       DEFAULT_OPTIONS,
-      getOrganizationChartOptions({ direction }),
+      getOrganizationChartOptions({ direction, labelField }),
       restProps,
     );
     return options;
diff --git a/packages/graphs/src/components/organization-chart/options.tsx b/packages/graphs/src/components/organization-chart/options.tsx
index 588404698..5e0dbf824 100644
--- a/packages/graphs/src/components/organization-chart/options.tsx
+++ b/packages/graphs/src/components/organization-chart/options.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
 import { RCNode } from '../../core/base';
+import { formatLabel } from '../../core/utils/label';
+import type { GraphOptions } from '../../types';
 import { OrganizationChartOptions } from './types';
 
 const { TextNode } = RCNode;
 
-export const DEFAULT_OPTIONS: OrganizationChartOptions = {
+export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'react',
-    style: {
-      component: (data) => <TextNode type="filled" text={data.id} />,
-      size: [100, 40],
-      ports: [{ placement: 'top' }, { placement: 'bottom' }],
-    },
     state: {
       active: {
         halo: false,
@@ -20,69 +17,56 @@ export const DEFAULT_OPTIONS: OrganizationChartOptions = {
         halo: false,
       },
     },
-    animation: false,
   },
   edge: {
     type: 'polyline',
     style: {
       lineWidth: 2,
-      router: { type: 'orth' },
+      router: {
+        type: 'orth',
+      },
     },
-    animation: false,
   },
   layout: {
     type: 'dagre',
+    animation: false,
   },
   transforms: ['translate-react-node-origin'],
 };
 
 export function getOrganizationChartOptions({
   direction,
-}: Pick<OrganizationChartOptions, 'direction'>): OrganizationChartOptions {
-  let options = {};
-
-  if (direction === 'vertical') {
-    options = {
-      node: {
-        style: {
-          ports: [{ placement: 'top' }, { placement: 'bottom' }],
+  labelField,
+}: Pick<OrganizationChartOptions, 'direction' | 'labelField'>): GraphOptions {
+  const options: GraphOptions = {
+    node: {
+      style: {
+        component: (data) => {
+          const label = formatLabel(data, labelField);
+          return <TextNode type="filled" text={label} />;
         },
+        size: [100, 40],
+        ports:
+          direction === 'vertical'
+            ? [{ placement: 'top' }, { placement: 'bottom' }]
+            : [{ placement: 'left' }, { placement: 'right' }],
       },
-      transforms: (prev) => [
-        ...prev,
-        {
-          type: 'collapse-expand-react-node',
-          key: 'collapse-expand-react-node',
-          enable: false,
-          refreshLayout: true,
-        },
-      ],
-      layout: {
-        rankdir: 'TB',
-      },
-    };
-  } else {
-    options = {
-      node: {
-        style: {
-          ports: [{ placement: 'left' }, { placement: 'right' }],
-        },
-      },
-      transforms: (prev) => [
-        ...prev,
-        {
-          type: 'collapse-expand-react-node',
-          key: 'collapse-expand-react-node',
-          iconPlacement: 'right',
-          enable: false,
-          refreshLayout: true,
-        },
-      ],
-      layout: {
-        rankdir: 'LR',
+    },
+    transforms: (prev) => [
+      ...prev,
+      {
+        type: 'collapse-expand-react-node',
+        key: 'collapse-expand-react-node',
+        iconPlacement: direction === 'vertical' ? 'bottom' : 'right',
+        enable: false,
+        refreshLayout: true,
       },
-    };
-  }
+    ],
+    layout: {
+      type: 'dagre',
+      rankdir: direction === 'vertical' ? 'TB' : 'LR',
+    },
+  };
 
   return options;
 }
diff --git a/packages/graphs/src/components/organization-chart/types.ts b/packages/graphs/src/components/organization-chart/types.ts
index b597fcfe3..1ca4104ed 100644
--- a/packages/graphs/src/components/organization-chart/types.ts
+++ b/packages/graphs/src/components/organization-chart/types.ts
@@ -1,3 +1,4 @@
+import type { NodeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
 export interface OrganizationChartOptions extends GraphOptions {
@@ -6,4 +7,11 @@ export interface OrganizationChartOptions extends GraphOptions {
    * @default 'vertical'
    */
   direction?: 'vertical' | 'horizontal';
+  /**
+   * Selects a field from the data to use as the label for the node.
+   * If a string is provided, it will select the field as `data[labelField]`.
+   * If a function is provided, it will call the function with the data and use the returned value.
+   * @default (data) => data.id
+   */
+  labelField?: string | ((data: NodeData) => string);
 }
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index e355888a4..3391f06c2 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -56,7 +56,7 @@ export default defineConfig({
         slug: 'docs/options',
         title: {
           zh: '选项',
-          en: 'Option',
+          en: 'Options',
         },
       },
       {
@@ -151,10 +151,10 @@ export default defineConfig({
       {
         slug: 'options/graphs',
         title: {
-          zh: '关系图',
-          en: 'Relation Graph',
+          zh: '关系图组件',
+          en: 'Relation Graph Components',
         },
-        order: 1,
+        order: 2,
       },
     ],
     examples: [
diff --git a/site/docs/options/demos/components-list.tsx b/site/docs/options/demos/components-list.tsx
index 4ebe89bf2..6357369f7 100644
--- a/site/docs/options/demos/components-list.tsx
+++ b/site/docs/options/demos/components-list.tsx
@@ -1,29 +1,12 @@
 /**
  * inline: true
  */
-import { Button, Card, Col, Divider, Flex, Row, Tag } from 'antd';
+import { Card, Col, Divider, Flex, Row, Tag } from 'antd';
+import { useFullSidebarData, useLocale, useNavigate } from 'dumi';
+import { isEmpty } from 'lodash';
 import React, { Suspense, useMemo } from 'react';
-import { useLocale, useFullSidebarData, useNavigate } from 'dumi';
 import { styled } from 'styled-components';
-import { isEmpty } from 'lodash';
-
-enum ChartType {
-  PLOT = 'Plot',
-  GRAPH = 'Graph',
-}
-
-const locales = {
-  en: {
-    [ChartType.PLOT]: 'Statistics',
-    [ChartType.GRAPH]: 'Relations'
-  },
-  zh: {
-    [ChartType.PLOT]: '统计图',
-    [ChartType.GRAPH]: '关系图'
-  },
-};
-
-const URLS = ['/options/plots/special', '/options/graphs'];
+import { GRAPH_USAGES, URLS } from './constants';
 
 const StyledWrapper = styled.div`
   .filter-panel {
@@ -44,75 +27,35 @@ const StyledWrapper = styled.div`
       border: 1px solid #f0f0f0;
     }
   }
-.`
-
-const usagesData = [{
-  id: 'all',
-  nameZh: '全部',
-  nameEn: 'All',
-},
-{
-  id: 'comparison',
-  nameZh: '比较类',
-  nameEn: 'Comparison',
-}, {
-  id: 'distribution',
-  nameZh: '分布类',
-  nameEn: 'Distribution',
-}, {
-  id: 'flow',
-  nameZh: '流程类',
-  nameEn: 'Flow',
-}, {
-  id: 'proportion',
-  nameZh: '占比类',
-  nameEn: 'Proportion',
-}, {
-  id: 'interval',
-  nameZh: '区间类',
-  nameEn: 'Interval',
-}, {
-  id: 'relation',
-  nameZh: '关系类',
-  nameEn: 'Relation',
-}, {
-  id: 'trend',
-  nameZh: '趋势类',
-  nameEn: 'Trend',
-}, {
-  id: 'time',
-  nameZh: '时间类',
-  nameEn: 'Time',
-}, {
-  id: 'map',
-  nameZh: '地图类',
-  nameEn: 'Map',
-}, {
-  id: 'other',
-  nameZh: '其他',
-  nameEn: 'Other',
-}];
+.`;
 
 export default () => {
   const lang = useLocale().id;
-  const locale = locales[lang];
   const data = useFullSidebarData();
   const navigate = useNavigate();
   const [selectedUsages, setSelectedUsages] = React.useState<string[]>(['all']);
 
-  const metas = useMemo(() => URLS.flatMap(url => data[lang === 'zh' ? url : `/en${url}`][0].children)
-    .filter(meta => meta.frontmatter.category === 'Components')
-    .map(meta => {
-      const usageIds = (meta.frontmatter.usage || '').split(',').filter(usage => !isEmpty(usage));
-      const usages = usagesData.filter(tag => usageIds.includes(tag.id));
-      return {
-        ...meta,
-        ...meta.frontmatter,
-        usages,
-      }
-    })
-    .filter(meta => selectedUsages.includes('all') || selectedUsages.every(usage => meta.usages.some(item => item.id === usage)))
-    .sort((a, b) => a.title.localeCompare(b.title)), [data, lang, selectedUsages]);
+  const metas = useMemo(
+    () =>
+      URLS.flatMap((url) => data[lang === 'zh' ? url : `/en${url}`][0].children)
+        .filter((meta) => meta.frontmatter.category === 'Components')
+        .map((meta) => {
+          const usageIds = (meta.frontmatter.usage || '').split(',').filter((usage) => !isEmpty(usage));
+          const usages = GRAPH_USAGES.filter((tag) => usageIds.includes(tag.id));
+          return {
+            ...meta,
+            ...meta.frontmatter,
+            usages,
+          };
+        })
+        .filter(
+          (meta) =>
+            selectedUsages.includes('all') ||
+            selectedUsages.every((usage) => meta.usages.some((item) => item.id === usage)),
+        )
+        .sort((a, b) => a.title.localeCompare(b.title)),
+    [data, lang, selectedUsages],
+  );
 
   const handleChange = (tag: string, checked: boolean) => {
     let nextSelectedUsages;
@@ -132,47 +75,53 @@ export default () => {
     setSelectedUsages(nextSelectedUsages);
   };
 
-  return <Suspense fallback={null}>
-    <StyledWrapper>
-      <div className='filter-panel'>
-        <Divider />
-        <Flex gap={6} wrap align="center">
-          {usagesData.map<React.ReactNode>(({ id, nameZh, nameEn }) => (
-            <Tag.CheckableTag
-              className='filter-tag'
-              key={id}
-              checked={selectedUsages.includes(id)}
-              onChange={(checked) => handleChange(id, checked)}
-            >
-              {lang === 'zh' ? nameZh : nameEn}
-            </Tag.CheckableTag>
-          ))}
-        </Flex>
-        <Divider />
-      </div>
-
-      <Row gutter={[24, 24]}>
-        {metas.map((meta, index) => {
-          return <Col span={6} key={index}>
-            <Card
-              size="small"
-              onClick={() => navigate(meta.link)}
-              hoverable
-              title={meta.title}
-              style={{ borderRadius: 6 }}
-
-            >
-              <Flex justify="center" align="center">
-                <img alt={meta.title} src={meta.cover} height={158} />
-              </Flex>
-              <Flex wrap gap={2} className='usage-items'>
-                {meta.usages?.map((usage, index) => <div className='usage-item' key={index}>{
-                  lang === 'zh' ? usage.nameZh : usage.nameEn
-                }</div>)}
-              </Flex>
-            </Card></Col>
-        })}
-      </Row>
-    </StyledWrapper>
-  </Suspense >
+  return (
+    <Suspense fallback={null}>
+      <StyledWrapper>
+        <div className="filter-panel">
+          <Divider />
+          <Flex gap={6} wrap align="center">
+            {GRAPH_USAGES.map<React.ReactNode>(({ id, nameZh, nameEn }) => (
+              <Tag.CheckableTag
+                className="filter-tag"
+                key={id}
+                checked={selectedUsages.includes(id)}
+                onChange={(checked) => handleChange(id, checked)}
+              >
+                {lang === 'zh' ? nameZh : nameEn}
+              </Tag.CheckableTag>
+            ))}
+          </Flex>
+          <Divider />
+        </div>
+
+        <Row gutter={[24, 24]}>
+          {metas.map((meta, index) => {
+            return (
+              <Col span={6} key={index}>
+                <Card
+                  size="small"
+                  onClick={() => navigate(meta.link)}
+                  hoverable
+                  title={meta.title}
+                  style={{ borderRadius: 8 }}
+                >
+                  <Flex justify="center" align="center">
+                    <img alt={meta.title} src={meta.cover} height={158} />
+                  </Flex>
+                  <Flex wrap gap={2} className="usage-items">
+                    {meta.usages?.map((usage, index) => (
+                      <div className="usage-item" key={index}>
+                        {lang === 'zh' ? usage.nameZh : usage.nameEn}
+                      </div>
+                    ))}
+                  </Flex>
+                </Card>
+              </Col>
+            );
+          })}
+        </Row>
+      </StyledWrapper>
+    </Suspense>
+  );
 };
diff --git a/site/docs/options/demos/constants.ts b/site/docs/options/demos/constants.ts
new file mode 100644
index 000000000..7feb6dd04
--- /dev/null
+++ b/site/docs/options/demos/constants.ts
@@ -0,0 +1,59 @@
+export const URLS = ['/options/plots/special', '/options/graphs'];
+
+export const GRAPH_USAGES = [
+  {
+    id: 'all',
+    nameZh: '全部',
+    nameEn: 'All',
+  },
+  {
+    id: 'comparison',
+    nameZh: '比较类',
+    nameEn: 'Comparison',
+  },
+  {
+    id: 'distribution',
+    nameZh: '分布类',
+    nameEn: 'Distribution',
+  },
+  {
+    id: 'flow',
+    nameZh: '流程类',
+    nameEn: 'Flow',
+  },
+  {
+    id: 'proportion',
+    nameZh: '占比类',
+    nameEn: 'Proportion',
+  },
+  {
+    id: 'interval',
+    nameZh: '区间类',
+    nameEn: 'Interval',
+  },
+  {
+    id: 'relation',
+    nameZh: '关系类',
+    nameEn: 'Relation',
+  },
+  {
+    id: 'trend',
+    nameZh: '趋势类',
+    nameEn: 'Trend',
+  },
+  {
+    id: 'time',
+    nameZh: '时间类',
+    nameEn: 'Time',
+  },
+  {
+    id: 'map',
+    nameZh: '地图类',
+    nameEn: 'Map',
+  },
+  {
+    id: 'other',
+    nameZh: '其他',
+    nameEn: 'Other',
+  },
+];
diff --git a/site/docs/options/graphs-common/d3-force-layout.en.md b/site/docs/options/graphs-common/d3-force-layout.en.md
new file mode 100644
index 000000000..446d114a0
--- /dev/null
+++ b/site/docs/options/graphs-common/d3-force-layout.en.md
@@ -0,0 +1,26 @@
+### Layout
+
+D3 Force layout. Common parameters are as follows:
+
+**collide:** Force to prevent node overlap.
+
+| Property         | Description                 | Type   | Default Value |
+| ---------------- | --------------------------- | ------ | ------------- |
+| collide.radius   | Collision radius of nodes   | number | -             |
+| collide.strength | strength of collision force | number | -             |
+
+**link:** Used to simulate the connection relationship between nodes, ensuring that the connected nodes remain within a certain distance range.
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| link.distance | The ideal distance between two nodes | number | - |
+| link.strength | The strength of the link, controlling the tightness of the connection between nodes | number | - |
+
+**manyBody:** The gravitational or repulsive force between nodes.
+
+| Property          | Description                                                          | Type   | Default Value |
+| ----------------- | -------------------------------------------------------------------- | ------ | ------------- |
+| manyBody.strength | The strength of the gravitational or repulsive force between nodes   | number | -             |
+| manyBody.theta    | Barnes-Hut approximation parameter for calculating multi-body forces | number | -             |
+
+For complete parameters, refer to [d3-force](https://d3js.org/d3-force)
diff --git a/site/docs/options/graphs-common/d3-force-layout.zh.md b/site/docs/options/graphs-common/d3-force-layout.zh.md
new file mode 100644
index 000000000..d7f3c60a0
--- /dev/null
+++ b/site/docs/options/graphs-common/d3-force-layout.zh.md
@@ -0,0 +1,26 @@
+### Layout
+
+D3 Force 布局。常用参数如下：
+
+**collide 碰撞力：** 防止节点重叠的力。
+
+| 属性             | 说明           | 类型   | 默认值 |
+| ---------------- | -------------- | ------ | ------ |
+| collide.radius   | 节点的碰撞半径 | number | -      |
+| collide.strength | 碰撞力的强度   | number | -      |
+
+**link 链接力：** 用于模拟节点之间的连接关系，确保连接的节点保持在一定的距离范围内。
+
+| 属性          | 说明                                     | 类型   | 默认值 |
+| ------------- | ---------------------------------------- | ------ | ------ |
+| link.distance | 两个节点之间的理想距离                   | number | -      |
+| link.strength | 链接力的强度，控制节点之间的连接紧密程度 | number | -      |
+
+**manyBody 多体力：** 节点之间的引力或斥力。
+
+| 属性              | 说明                                 | 类型   | 默认值 |
+| ----------------- | ------------------------------------ | ------ | ------ |
+| manyBody.strength | 节点之间的引力或斥力的强度           | number | -      |
+| manyBody.theta    | 用于计算多体力的 Barnes-Hut 近似参数 | number | -      |
+
+完整参数见 [d3-force](https://d3js.org/d3-force)。
diff --git a/site/docs/options/graphs-common/dagre-layout.en.md b/site/docs/options/graphs-common/dagre-layout.en.md
new file mode 100644
index 000000000..87bd64d63
--- /dev/null
+++ b/site/docs/options/graphs-common/dagre-layout.en.md
@@ -0,0 +1,17 @@
+### Layout
+
+**Dagre Hierarchical Layout**. The configuration options are as follows:
+
+For more details, refer to the [Dagre Wiki](https://github.com/dagrejs/dagre/wiki).
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| `rankdir` | The direction of node arrangement. Options include `TB`, `BT`, `LR`, or `RL`, where T = Top, B = Bottom, L = Left, and R = Right. | string | `TB` |
+| `align` | Node alignment mode. Options include `UL`, `UR`, `DL`, or `DR`, where U = Up, D = Down, L = Left, and R = Right. | string | `undefined` |
+| `nodesep` | The horizontal spacing between nodes in the layout, in pixels. | number | `50` |
+| `edgesep` | The horizontal spacing between edges in the layout, in pixels. | number | `10` |
+| `ranksep` | The spacing between levels in the layout, in pixels. | number | `50` |
+| `marginx` | The margin on the left and right sides of the graph, in pixels. | number | `0` |
+| `marginy` | The margin on the top and bottom sides of the graph, in pixels. | number | `0` |
+| `acyclicer` | If set to `greedy`, uses a greedy heuristic algorithm to find the feedback arc set of the graph. The feedback arc set consists of edges that can be removed to make the graph acyclic. | string | `undefined` |
+| `ranker` | The algorithm used to assign ranks to nodes in the input graph. Possible values are `network-simplex`, `tight-tree`, or `longest-path`. | string | `network-simplex` |
diff --git a/site/docs/options/graphs-common/dagre-layout.zh.md b/site/docs/options/graphs-common/dagre-layout.zh.md
new file mode 100644
index 000000000..502d4b487
--- /dev/null
+++ b/site/docs/options/graphs-common/dagre-layout.zh.md
@@ -0,0 +1,17 @@
+### Layout
+
+Dagre 层次布局。配置如下：
+
+也可以参考 [Dagre Wiki](https://github.com/dagrejs/dagre/wiki)
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rankdir | 节点排列方向。可以是 `TB`、`BT`、`LR` 或 `RL`，其中 T = 上，B = 下，L = 左，R = 右 | string | `TB` |
+| align | 节点排列对齐方式。可以是 `UL`、`UR`、`DL` 或 `DR`，其中 U = 上，D = 下，L = 左，R = 右 | string | `undefined` |
+| nodesep | 布局中节点水平间隔的像素数 | number | `50` |
+| edgesep | 布局中边水平间隔的像素数 | number | `10` |
+| ranksep | 布局中每个等级之间的像素数 | number | `50` |
+| marginx | 图表左右两侧的边距像素数 | number | `0` |
+| marginy | 图表上下两侧的边距像素数 | number | `0` |
+| acyclicer | 如果设置为 greedy，则使用贪婪启发式算法来找到图的反馈弧集。反馈弧集是可以移除以使图无环的边集 | string | `undefined` |
+| ranker | 为输入图中的每个节点分配等级的算法类型。可能的值：`network-simplex`、`tight-tree` 或 `longest-path` | string | `network-simplex` |
diff --git a/site/docs/options/graphs-common/graph-data.en.md b/site/docs/options/graphs-common/graph-data.en.md
new file mode 100644
index 000000000..8e6a34920
--- /dev/null
+++ b/site/docs/options/graphs-common/graph-data.en.md
@@ -0,0 +1,19 @@
+### Data
+
+Graph data. If the `expand-collapse` behavior is enabled, make sure the `children` field is included in the data.
+
+```js
+const graphData = {
+  nodes: [
+    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
+    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
+    { id: '3', data: { label: 'Node 3' } },
+    { id: '4', data: { label: 'Node 4' } },
+  ],
+  edges: [
+    { source: '1', target: '2' },
+    { source: '1', target: '3' },
+    { source: '2', target: '4' },
+  ],
+};
+```
diff --git a/site/docs/options/graphs-common/graph-data.zh.md b/site/docs/options/graphs-common/graph-data.zh.md
new file mode 100644
index 000000000..5a9665b46
--- /dev/null
+++ b/site/docs/options/graphs-common/graph-data.zh.md
@@ -0,0 +1,19 @@
+### Data
+
+图数据。若开启“展开-收起”交互，需确保数据中包含 `children` 字段。
+
+```js
+const graphData = {
+  nodes: [
+    { id: '1', label: 'Node 1', children: ['2', '3'] },
+    { id: '2', label: 'Node 2', children: ['4'] },
+    { id: '3', label: 'Node 3' },
+    { id: '4', label: 'Node 4' },
+  ],
+  edges: [
+    { source: '1', target: '2' },
+    { source: '1', target: '3' },
+    { source: '2', target: '4' },
+  ],
+};
+```
diff --git a/site/docs/options/graphs-common/tree-data.en.md b/site/docs/options/graphs-common/tree-data.en.md
new file mode 100644
index 000000000..b71b5e189
--- /dev/null
+++ b/site/docs/options/graphs-common/tree-data.en.md
@@ -0,0 +1,59 @@
+### Data
+
+Two data formats are supported:
+
+1. **(👍 Recommended)** Tree data
+
+Type Definition:
+
+```ts
+type TreeData = {
+  id: string;
+  children?: TreeData[];
+  [key: string]: unknown;
+};
+```
+
+Example:
+
+```ts
+const data = {
+  id: 'root',
+  children: [
+    {
+      id: 'Child 1',
+      value: 10,
+      children: [
+        { id: 'Sub 1-1', value: 5 },
+        { id: 'Sub 1-2', value: 5 },
+      ],
+    },
+    {
+      id: 'Child 2',
+      value: 20,
+      children: [
+        { id: 'Sub 2-1', value: 10 },
+        { id: 'Sub 2-2', value: 10 },
+      ],
+    },
+  ],
+};
+```
+
+2. Graph data. If the `expand-collapse` behavior is enabled, make sure the `children` field is included in the data.
+
+```js
+const graphData = {
+  nodes: [
+    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
+    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
+    { id: '3', data: { label: 'Node 3' } },
+    { id: '4', data: { label: 'Node 4' } },
+  ],
+  edges: [
+    { source: '1', target: '2' },
+    { source: '1', target: '3' },
+    { source: '2', target: '4' },
+  ],
+};
+```
diff --git a/site/docs/options/graphs-common/tree-data.zh.md b/site/docs/options/graphs-common/tree-data.zh.md
new file mode 100644
index 000000000..b15322c00
--- /dev/null
+++ b/site/docs/options/graphs-common/tree-data.zh.md
@@ -0,0 +1,59 @@
+### Data
+
+支持两种数据格式：
+
+1. **（👍 推荐）** 树图数据
+
+类型定义：
+
+```ts
+type TreeData = {
+  id: string;
+  children?: TreeData[];
+  [key: string]: unknown;
+};
+```
+
+例如：
+
+```ts
+const data = {
+  id: 'root',
+  children: [
+    {
+      id: 'Child 1',
+      value: 10,
+      children: [
+        { id: 'Sub 1-1', value: 5 },
+        { id: 'Sub 1-2', value: 5 },
+      ],
+    },
+    {
+      id: 'Child 2',
+      value: 20,
+      children: [
+        { id: 'Sub 2-1', value: 10 },
+        { id: 'Sub 2-2', value: 10 },
+      ],
+    },
+  ],
+};
+```
+
+2. 图数据。若开启“展开-收起”交互，需确保数据中包含 `children` 字段。
+
+```js
+const graphData = {
+  nodes: [
+    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
+    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
+    { id: '3', data: { label: 'Node 3' } },
+    { id: '4', data: { label: 'Node 4' } },
+  ],
+  edges: [
+    { source: '1', target: '2' },
+    { source: '1', target: '3' },
+    { source: '2', target: '4' },
+  ],
+};
+```
diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.md b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md
new file mode 100644
index 000000000..21d26434d
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md
@@ -0,0 +1,7 @@
+## zh
+
+通过配置 G6 内置 CollapseExpand 交互 (`collapse-expand`)，双击触发展开/收起。具体可参考 [CollapseExpandOptions](https://g6.antv.antgroup.com/api/behaviors/collapse-expand) 获取详细配置说明。
+
+## en
+
+Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For detailed configuration instructions, refer to [CollapseExpandOptions](https://g6.antv.antgroup.com/en/api/behaviors/collapse-expand).
diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx b/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx
new file mode 100644
index 000000000..eece91e1c
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx
@@ -0,0 +1,20 @@
+import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: DendrogramOptions = {
+    autoFit: 'view',
+    data,
+    behaviors: (behaviors) => [...behaviors, 'collapse-expand'],
+  };
+
+  return <Dendrogram {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/dendrogram/compact.md b/site/docs/options/graphs-demos/dendrogram/compact.md
new file mode 100644
index 000000000..38bccd887
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/compact.md
@@ -0,0 +1,7 @@
+## zh
+
+通过 `compact` 配置紧凑模式。
+
+## en
+
+Use the `compact` configuration for compact mode.
diff --git a/site/docs/options/graphs-demos/dendrogram/compact.tsx b/site/docs/options/graphs-demos/dendrogram/compact.tsx
new file mode 100644
index 000000000..54178fade
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/compact.tsx
@@ -0,0 +1,26 @@
+import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: DendrogramOptions = {
+    autoFit: 'view',
+    data,
+    compact: true,
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <Dendrogram {...options} direction="vertical" />
+      <Dendrogram {...options} direction="horizontal" />
+      <Dendrogram {...options} direction="radial" />
+    </div>
+  );
+};
diff --git a/site/docs/options/graphs-demos/dendrogram/default.md b/site/docs/options/graphs-demos/dendrogram/default.md
new file mode 100644
index 000000000..7241b63ff
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/default.md
@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.
diff --git a/site/docs/options/graphs-demos/dendrogram/default.tsx b/site/docs/options/graphs-demos/dendrogram/default.tsx
new file mode 100644
index 000000000..fea2739d0
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/default.tsx
@@ -0,0 +1,19 @@
+import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: DendrogramOptions = {
+    autoFit: 'view',
+    data,
+  };
+
+  return <Dendrogram {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/dendrogram/direction.md b/site/docs/options/graphs-demos/dendrogram/direction.md
new file mode 100644
index 000000000..40365d194
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/direction.md
@@ -0,0 +1,9 @@
+## zh
+
+通过设置语法糖 `direction` 为 `vertical` `radial` 分别让子节点垂直、径向分布。若不设置 `direction`，则默认 `horizontal` 水平分布。
+注意，节点标签也会自动根据 `direction` 排布，当设置 `node.style.labelPlacement` 时会以后者为准。
+
+## en
+
+Use the syntax sugar `direction` to set the arrangement of child nodes as `vertical` or `radial`. If `direction` is not set, the default is `horizontal`.
+Note that the label placement will adjust based on the `direction`, but if `node.style.labelPlacement` is set, it takes precedence.
diff --git a/site/docs/options/graphs-demos/dendrogram/direction.tsx b/site/docs/options/graphs-demos/dendrogram/direction.tsx
new file mode 100644
index 000000000..71dfb862b
--- /dev/null
+++ b/site/docs/options/graphs-demos/dendrogram/direction.tsx
@@ -0,0 +1,25 @@
+import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: DendrogramOptions = {
+    autoFit: 'view',
+    data,
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <Dendrogram {...options} direction="vertical" />
+      <Dendrogram {...options} direction="horizontal" />
+      <Dendrogram {...options} direction="radial" />
+    </div>
+  );
+};
diff --git a/site/docs/options/graphs-demos/fishbone/decision.md b/site/docs/options/graphs-demos/fishbone/decision.md
new file mode 100644
index 000000000..318c3fc84
--- /dev/null
+++ b/site/docs/options/graphs-demos/fishbone/decision.md
@@ -0,0 +1,7 @@
+## zh
+
+决策型鱼骨图（鱼头在左），用于解决问题。
+
+## en
+
+Decision-type fishbone diagram (with the head on the left), used for solving problems.
diff --git a/site/docs/options/graphs/demos/fishbone/decision.tsx b/site/docs/options/graphs-demos/fishbone/decision.tsx
similarity index 85%
rename from site/docs/options/graphs/demos/fishbone/decision.tsx
rename to site/docs/options/graphs-demos/fishbone/decision.tsx
index d4b34c053..a8807370c 100644
--- a/site/docs/options/graphs/demos/fishbone/decision.tsx
+++ b/site/docs/options/graphs-demos/fishbone/decision.tsx
@@ -1,7 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
+import React from 'react';
 
 const data = {
   id: 'Overcome procrastination',
@@ -45,13 +43,11 @@ const data = {
   ],
 };
 
-
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     type: 'decision',
-    data: treeToGraphData(data),
+    data,
   };
 
   return <Fishbone {...options} />;
diff --git a/site/docs/options/graphs-demos/fishbone/default.md b/site/docs/options/graphs-demos/fishbone/default.md
new file mode 100644
index 000000000..e8a8e39af
--- /dev/null
+++ b/site/docs/options/graphs-demos/fishbone/default.md
@@ -0,0 +1,7 @@
+## zh
+
+原因型鱼骨图（鱼头在右），用于分析问题。
+
+## en
+
+Cause-type fishbone diagram (with the head on the right), used for analyzing problems.
diff --git a/site/docs/options/graphs/demos/fishbone/default.tsx b/site/docs/options/graphs-demos/fishbone/default.tsx
similarity index 88%
rename from site/docs/options/graphs/demos/fishbone/default.tsx
rename to site/docs/options/graphs-demos/fishbone/default.tsx
index 53683a58f..65a10e2c6 100644
--- a/site/docs/options/graphs/demos/fishbone/default.tsx
+++ b/site/docs/options/graphs-demos/fishbone/default.tsx
@@ -1,7 +1,5 @@
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
 import React from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -55,9 +53,8 @@ const data = {
 
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    data: treeToGraphData(data),
+    data,
   };
 
   return <Fishbone {...options} />;
diff --git a/site/docs/options/graphs-demos/fishbone/layout.md b/site/docs/options/graphs-demos/fishbone/layout.md
new file mode 100644
index 000000000..11b30927e
--- /dev/null
+++ b/site/docs/options/graphs-demos/fishbone/layout.md
@@ -0,0 +1,7 @@
+## zh
+
+调整鱼骨分支位置。
+
+## en
+
+Adjust the position of the fishbone branches.
diff --git a/site/docs/options/graphs/demos/fishbone/layout.tsx b/site/docs/options/graphs-demos/fishbone/layout.tsx
similarity index 86%
rename from site/docs/options/graphs/demos/fishbone/layout.tsx
rename to site/docs/options/graphs-demos/fishbone/layout.tsx
index f9702e20b..29405d9c3 100644
--- a/site/docs/options/graphs/demos/fishbone/layout.tsx
+++ b/site/docs/options/graphs-demos/fishbone/layout.tsx
@@ -1,7 +1,5 @@
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
 import React from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -53,17 +51,15 @@ const data = {
   ],
 };
 
-
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    data: treeToGraphData(data),
+    data,
     layout: {
       hGap: 40,
       vGap: 60,
-      getRibSep: (node) => node.depth === 0 ? 0 : -40
-    }
+      getRibSep: (node) => (node.depth === 0 ? 0 : -40),
+    },
   };
 
   return <Fishbone {...options} />;
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/custom.md b/site/docs/options/graphs-demos/flow-direction-graph/custom.md
new file mode 100644
index 000000000..88cb5ab53
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-direction-graph/custom.md
@@ -0,0 +1,3 @@
+## zh
+
+## en
diff --git a/site/docs/options/graphs/demos/flow-direction-graph/custom.tsx b/site/docs/options/graphs-demos/flow-direction-graph/custom.tsx
similarity index 98%
rename from site/docs/options/graphs/demos/flow-direction-graph/custom.tsx
rename to site/docs/options/graphs-demos/flow-direction-graph/custom.tsx
index 388dae23e..f5e605048 100644
--- a/site/docs/options/graphs/demos/flow-direction-graph/custom.tsx
+++ b/site/docs/options/graphs-demos/flow-direction-graph/custom.tsx
@@ -1,6 +1,7 @@
 import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs';
 import insertCss from 'insert-css';
 import React from 'react';
+
 const data = {
   nodes: [
     {
@@ -503,8 +504,8 @@ const transformData = (data) => {
 
 export default () => {
   const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '400px' },
     autoFit: 'view',
+    padding: 8,
     data: transformData(data),
     node: {
       style: {
@@ -537,11 +538,10 @@ export default () => {
       },
     ],
     layout: {
-      type: 'antv-dagre',
-      nodesep: -10,
-      ranksep: 100,
+      type: 'dagre',
+      nodesep: 40,
+      ranksep: 200,
     },
-    animation: false,
   };
 
   return <FlowDirectionGraph {...options} />;
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/default.md b/site/docs/options/graphs-demos/flow-direction-graph/default.md
new file mode 100644
index 000000000..73c269ed2
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-direction-graph/default.md
@@ -0,0 +1,11 @@
+## zh
+
+简单的展示。
+
+通过配置 `map-edge-line-width` 交互来动态调整边的描边宽度 `edge.style.lineWidth` 。具体可参考 [MapEdgeLineWidthOptions](/options/graphs/overview#mapedgelineWidth) 获取详细配置说明。
+
+## en
+
+A simple demonstration.
+
+Adjust `edge.style.lineWidth` via the behavior `map-edge-line-width`. For detailed configuration instructions, refer to [MapEdgeLineWidthOptions](/en/options/graphs/overview#mapedgelineWidth).
diff --git a/site/docs/options/graphs/demos/flow-direction-graph/default.tsx b/site/docs/options/graphs-demos/flow-direction-graph/default.tsx
similarity index 84%
rename from site/docs/options/graphs/demos/flow-direction-graph/default.tsx
rename to site/docs/options/graphs-demos/flow-direction-graph/default.tsx
index c740387da..db9d312b9 100644
--- a/site/docs/options/graphs/demos/flow-direction-graph/default.tsx
+++ b/site/docs/options/graphs-demos/flow-direction-graph/default.tsx
@@ -11,9 +11,9 @@ export default () => {
   }, []);
 
   const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '400px' },
     autoFit: 'view',
     data,
+    labelField: (d) => d.value.title,
     transforms: (transforms) => [
       ...transforms,
       {
@@ -26,12 +26,6 @@ export default () => {
         maxLineWidth: 24,
       },
     ],
-    layout: {
-      type: 'antv-dagre',
-      nodesep: 10,
-      ranksep: 60,
-    },
-    animation: false
   };
 
   return <FlowDirectionGraph {...options} />;
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md
new file mode 100644
index 000000000..45ad8d466
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md
@@ -0,0 +1,7 @@
+## zh
+
+通过添加悬浮高亮交互（注册类型：`hover-activate-chain`）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 `hover-activate` 实现。具体可参考 [HoverActivateChainOptions](/options/graphs/overview#hoveractivatechain) 获取详细配置说明。
+
+## en
+
+By adding the hover highlight behavior (registration type: `hover-activate-chain`), you can highlight the current element and its entire chain. This behavior is based on the G6 built-in behavior `hover-activate`. For detailed configuration instructions, refer to [HoverActivateChainOptions](/en/options/graphs/overview#hoveractivatechain).
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.tsx b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.tsx
new file mode 100644
index 000000000..ed23aec79
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.tsx
@@ -0,0 +1,98 @@
+import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs';
+import React from 'react';
+
+const blue = 'rgba(99, 149, 250, 1)';
+const green = 'rgba(100, 218, 171, 1)';
+const gray = 'rgba(89, 89, 89, 1)';
+
+const data = {
+  nodes: [
+    { id: '-3', data: { type: 'source', title: '来源页面A' } },
+    { id: '-2', data: { type: 'source', title: '来源页面B' } },
+    { id: '-1', data: { type: 'source', title: '来源页面C' } },
+    { id: '0', data: { type: 'activity', title: '活动页面' } },
+    { id: '1', data: { type: 'destination', title: '去向页面A' } },
+    { id: '2', data: { type: 'destination', title: '去向页面B' } },
+    { id: '3', data: { type: 'destination', title: '去向页面C' } },
+    { id: '4', data: { type: 'destination', title: '去向页面D' } },
+  ],
+  edges: [
+    { source: '-3', target: '0', data: { type: 'in', value: 40 } },
+    { source: '-2', target: '0', data: { type: 'in', value: 35 } },
+    { source: '-1', target: '0', data: { type: 'in', value: 25 } },
+    { source: '0', target: '1', data: { type: 'out', value: 22 } },
+    { source: '0', target: '2', data: { type: 'out', value: 18 } },
+    { source: '0', target: '3', data: { type: 'out', value: 32 } },
+    { source: '0', target: '4', data: { type: 'out', value: 38 } },
+  ],
+};
+
+const CustomNode = ({ text, isActive, color }: { text: string; isActive: boolean; color: string }) => {
+  const style = {
+    height: 'inherit',
+    width: 'inherit',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '4px',
+    backgroundColor: !isActive ? color.replace('1)', '0.2)') : color,
+    color: isActive ? '#fff' : '#000',
+  };
+
+  return <div style={style}>{text}</div>;
+};
+
+export default () => {
+  const options: FlowDirectionGraphOptions = {
+    autoFit: 'view',
+    data,
+    node: {
+      style: {
+        component: (d) => {
+          const isActive = d.states?.includes('active');
+          const color = d.data.type === 'source' ? blue : d.data.type === 'destination' ? green : gray;
+          return <CustomNode text={d.data.title} isActive={isActive} color={color} />;
+        },
+        size: [130, 58],
+      },
+    },
+    edge: {
+      style: {
+        stroke: (d) => (d.data.type === 'in' ? blue : green),
+        strokeOpacity: 0.2,
+      },
+      state: {
+        active: {
+          halo: false,
+          strokeOpacity: 1,
+        },
+      },
+    },
+    transforms: (transforms) => [
+      ...transforms,
+      {
+        type: 'map-edge-line-width',
+        key: 'map-edge-line-width',
+        value: (d) => d.data.value,
+        minValue: 0,
+        maxValue: 100,
+        minLineWidth: 1,
+        maxLineWidth: 32,
+      },
+    ],
+    behaviors: (behaviors) => [
+      ...behaviors,
+      {
+        type: 'hover-activate-chain',
+        onHover: (e) => {
+          e.view.setCursor('pointer');
+        },
+        onHoverEnd: (e) => {
+          e.view.setCursor('default');
+        },
+      },
+    ],
+  };
+
+  return <FlowDirectionGraph {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.md b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.md
new file mode 100644
index 000000000..120fafbd0
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.md
@@ -0,0 +1,7 @@
+## zh
+
+通过添加悬浮高亮交互（注册类型：`hover-activate-neighbors`）可以高亮当前元素及其相邻元素。此交互基于 G6 内置交互 `hover-activate` 实现。具体可参考 [HoverActivateNeighborsOptions](/options/graphs/overview#hoveractivateneighbors) 获取详细配置说明。
+
+## en
+
+By adding the hover highlight behavior (registration type: `hover-activate-neighbors`), you can highlight the current element and its neighboring elements. This behavior is based on the G6 built-in behavior `hover-activate`. For detailed configuration instructions, refer to [HoverActivateNeighborsOptions](/en/options/graphs/overview#hoveractivateneighbors).
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx
new file mode 100644
index 000000000..bcc09c7e0
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx
@@ -0,0 +1,98 @@
+import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs';
+import React from 'react';
+
+const blue = 'rgba(99, 149, 250, 1)';
+const green = 'rgba(100, 218, 171, 1)';
+const gray = 'rgba(89, 89, 89, 1)';
+
+const data = {
+  nodes: [
+    { id: '-3', data: { type: 'source', title: '来源页面A' } },
+    { id: '-2', data: { type: 'source', title: '来源页面B' } },
+    { id: '-1', data: { type: 'source', title: '来源页面C' } },
+    { id: '0', data: { type: 'activity', title: '活动页面' } },
+    { id: '1', data: { type: 'destination', title: '去向页面A' } },
+    { id: '2', data: { type: 'destination', title: '去向页面B' } },
+    { id: '3', data: { type: 'destination', title: '去向页面C' } },
+    { id: '4', data: { type: 'destination', title: '去向页面D' } },
+  ],
+  edges: [
+    { source: '-3', target: '0', data: { type: 'in', value: 40 } },
+    { source: '-2', target: '0', data: { type: 'in', value: 35 } },
+    { source: '-1', target: '0', data: { type: 'in', value: 25 } },
+    { source: '0', target: '1', data: { type: 'out', value: 22 } },
+    { source: '0', target: '2', data: { type: 'out', value: 18 } },
+    { source: '0', target: '3', data: { type: 'out', value: 32 } },
+    { source: '0', target: '4', data: { type: 'out', value: 38 } },
+  ],
+};
+
+const CustomNode = ({ text, isActive, color }: { text: string; isActive: boolean; color: string }) => {
+  const style = {
+    height: 'inherit',
+    width: 'inherit',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '4px',
+    backgroundColor: !isActive ? color.replace('1)', '0.2)') : color,
+    color: isActive ? '#fff' : '#000',
+  };
+
+  return <div style={style}>{text}</div>;
+};
+
+export default () => {
+  const options: FlowDirectionGraphOptions = {
+    autoFit: 'view',
+    data,
+    node: {
+      style: {
+        component: (d) => {
+          const isActive = d.states?.includes('active');
+          const color = d.data.type === 'source' ? blue : d.data.type === 'destination' ? green : gray;
+          return <CustomNode text={d.data.title} isActive={isActive} color={color} />;
+        },
+        size: [130, 58],
+      },
+    },
+    edge: {
+      style: {
+        stroke: (d) => (d.data.type === 'in' ? blue : green),
+        strokeOpacity: 0.2,
+      },
+      state: {
+        active: {
+          halo: false,
+          strokeOpacity: 1,
+        },
+      },
+    },
+    transforms: (transforms) => [
+      ...transforms,
+      {
+        type: 'map-edge-line-width',
+        key: 'map-edge-line-width',
+        value: (d) => d.data.value,
+        minValue: 0,
+        maxValue: 100,
+        minLineWidth: 1,
+        maxLineWidth: 32,
+      },
+    ],
+    behaviors: (behaviors) => [
+      ...behaviors,
+      {
+        type: 'hover-activate-neighbors',
+        onHover: (e) => {
+          e.view.setCursor('pointer');
+        },
+        onHoverEnd: (e) => {
+          e.view.setCursor('default');
+        },
+      },
+    ],
+  };
+
+  return <FlowDirectionGraph {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/flow-graph/custom-node.md b/site/docs/options/graphs-demos/flow-graph/custom-node.md
new file mode 100644
index 000000000..5f0d79c0f
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-graph/custom-node.md
@@ -0,0 +1,7 @@
+## zh
+
+通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。
+
+## en
+
+Customize nodes using `node.component`, which needs to be paired with `node.size` to work properly.
diff --git a/site/docs/options/graphs/demos/flow-graph/custom-node.tsx b/site/docs/options/graphs-demos/flow-graph/custom-node.tsx
similarity index 58%
rename from site/docs/options/graphs/demos/flow-graph/custom-node.tsx
rename to site/docs/options/graphs-demos/flow-graph/custom-node.tsx
index f6b973fb0..ec8e2f3cf 100644
--- a/site/docs/options/graphs/demos/flow-graph/custom-node.tsx
+++ b/site/docs/options/graphs-demos/flow-graph/custom-node.tsx
@@ -2,18 +2,26 @@ import { type FlowDirectionGraphOptions, FlowGraph } from '@ant-design/graphs';
 import React, { useEffect, useState } from 'react';
 
 const CustomNode = ({ text }: { text: string }) => {
-  return <div style={{
-    height: 'inherit',
-    width: 'inherit',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '8px',
-    backgroundColor: '#f7f0fe',
-    color: '#873bf4',
-    boxShadow: '0 0 0 2px #873bf4'
-  }}>{text}</div>
-}
+  return (
+    <div
+      style={{
+        height: 'inherit',
+        width: 'inherit',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        borderRadius: '16px',
+        backgroundColor: '#FFF6E3',
+        color: '#8B5DFF',
+        border: '2px solid #8B5DFF',
+        fontFamily: 'Futura',
+      }}
+    >
+      📈 {text}
+    </div>
+  );
+};
 
 export default () => {
   const [data, setData] = useState(undefined);
@@ -25,9 +33,7 @@ export default () => {
   }, []);
 
   const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '360px' },
     autoFit: 'view',
-    padding: [20, 0, 0, 60],
     data,
     node: {
       style: {
@@ -36,14 +42,15 @@ export default () => {
       },
     },
     edge: {
-      style: { stroke: '#873bf4' },
+      style: {
+        stroke: '#8B5DFF',
+      },
     },
     layout: {
       type: 'dagre',
-      rankSep: 100,
-      nodeSep: 20
+      rankSep: 130,
+      nodeSep: 60,
     },
-    animation: false
   };
 
   return <FlowGraph {...options} />;
diff --git a/site/docs/options/graphs-demos/flow-graph/default.md b/site/docs/options/graphs-demos/flow-graph/default.md
new file mode 100644
index 000000000..7241b63ff
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-graph/default.md
@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.
diff --git a/site/docs/options/graphs/demos/flow-graph/default.tsx b/site/docs/options/graphs-demos/flow-graph/default.tsx
similarity index 83%
rename from site/docs/options/graphs/demos/flow-graph/default.tsx
rename to site/docs/options/graphs-demos/flow-graph/default.tsx
index dc3ef1873..653883b28 100644
--- a/site/docs/options/graphs/demos/flow-graph/default.tsx
+++ b/site/docs/options/graphs-demos/flow-graph/default.tsx
@@ -11,11 +11,9 @@ export default () => {
   }, []);
 
   const options: FlowGraphOptions = {
-    containerStyle: { height: '400px' },
     autoFit: 'view',
-    padding: [20, 0, 0, 40],
     data,
-    animation: false
+    labelField: (d) => d.value.title,
   };
 
   return <FlowGraph {...options} />;
diff --git a/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md
new file mode 100644
index 000000000..f84eb9bda
--- /dev/null
+++ b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md
@@ -0,0 +1,7 @@
+## zh
+
+通过添加悬浮高亮交互（注册类型：`hover-activate-chain`），可以高亮显示元素及其所在的链路。
+
+## en
+
+By adding hover-highlight interaction (registered as `hover-activate-chain`), elements and their associated chains are highlighted on hover.
diff --git a/site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.tsx
similarity index 59%
rename from site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx
rename to site/docs/options/graphs-demos/flow-graph/hover-activate-chain.tsx
index 3ceacd78b..458400a16 100644
--- a/site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx
+++ b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.tsx
@@ -13,41 +13,42 @@ export default () => {
   }, []);
 
   const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '400px' },
     autoFit: 'view',
-    padding: [20, 0, 0, 40],
     data,
     node: {
       style: {
         component: (d) => {
           const isActive = d.states?.includes('active');
-          return <TextNode color={isActive ? '#D580FF' : '#1783FF'} text={d.id} type="filled" />;
+          return <TextNode color={isActive ? '#5AD8A6' : '#1783FF'} text={d.value.title} type="filled" />;
         },
+        size: [120, 38],
       },
     },
     edge: {
       state: {
         active: {
-          stroke: '#D580FF',
-          halo: false
-        }
-      }
+          stroke: '#5AD8A6',
+          halo: false,
+        },
+      },
     },
-    behaviors: (prev) => [...prev, {
-      type: 'hover-activate-chain',
-      onHover: (e) => {
-        e.view.setCursor('pointer');
+    behaviors: (prev) => [
+      ...prev,
+      {
+        type: 'hover-activate-chain',
+        onHover: (e) => {
+          e.view.setCursor('pointer');
+        },
+        onHoverEnd: (e) => {
+          e.view.setCursor('default');
+        },
       },
-      onHoverEnd: (e) => {
-        e.view.setCursor('default');
-      }
-    }],
+    ],
     layout: {
       type: 'dagre',
-      rankSep: 100,
-      nodeSep: 20
+      rankSep: 130,
+      nodeSep: 60,
     },
-    animation: false
   };
 
   return <FlowGraph {...options} />;
diff --git a/site/docs/options/graphs-demos/indented-tree/collapse-expand.md b/site/docs/options/graphs-demos/indented-tree/collapse-expand.md
new file mode 100644
index 000000000..c834ddbb4
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/collapse-expand.md
@@ -0,0 +1,7 @@
+## zh
+
+通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。此外，还可以配置 `defaultExpandLevel` 来控制默认展开层级。
+
+## en
+
+Enable the expand/collapse behavior for child nodes by configuring the `collapse-expand-react-node` behavior. For detailed configuration instructions, refer to [CollapseExpandReactNodeOptions](/en/options/graphs/overview#collapseexpandreactnode). Additionally, configure `defaultExpandLevel` to control the default expansion level.
diff --git a/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx b/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx
new file mode 100644
index 000000000..158ed08d0
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx
@@ -0,0 +1,47 @@
+import { CollapseExpandIcon, IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+const { PlusMinusIcon } = CollapseExpandIcon;
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: IndentedTreeOptions = {
+    type: 'linear',
+    autoFit: 'view',
+    data,
+    defaultExpandLevel: 2,
+    animation: false,
+  };
+
+  const updateCollapseExpandBehavior = (options) => {
+    return (transforms) => [
+      ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
+      {
+        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || ({} as any)),
+        ...options,
+      },
+    ];
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true })} />
+      <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true, trigger: 'node' })} />
+      <IndentedTree
+        {...options}
+        transforms={updateCollapseExpandBehavior({
+          enable: true,
+          iconRender: (isCollapsed) => <PlusMinusIcon isCollapsed={isCollapsed} />,
+          iconOffsetY: 8,
+        })}
+      />
+    </div>
+  );
+};
diff --git a/site/docs/options/graphs-demos/indented-tree/color.md b/site/docs/options/graphs-demos/indented-tree/color.md
new file mode 100644
index 000000000..3da8f9ffc
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/color.md
@@ -0,0 +1,7 @@
+## zh
+
+`assign-color-by-branch` 作为内部数据处理的环节之一，通过调整 `colors` 配置，可以为不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 [AssignColorByBranchOptions](/options/graphs/overview#assigncolorbybranch) 获取详细配置说明。
+
+## en
+
+`assign-color-by-branch` As a part of internal data processing, by adjusting the `colors` configuration, you can assign unique colors to different branches in order to distinguish the branch structure more clearly. Please refer to [AssignColorByBranchOptions](/en/options/graphs/overview#assigncolorbybranch) for detailed configuration instructions.
diff --git a/site/docs/options/graphs-demos/indented-tree/color.tsx b/site/docs/options/graphs-demos/indented-tree/color.tsx
new file mode 100644
index 000000000..e39ca9588
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/color.tsx
@@ -0,0 +1,28 @@
+import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: IndentedTreeOptions = {
+    type: 'linear',
+    autoFit: 'view',
+    data,
+    transforms: (transforms) => [
+      ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'),
+      {
+        ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || ({} as any)),
+        colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)'],
+      },
+    ],
+    animation: false,
+  };
+
+  return <IndentedTree {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/indented-tree/custom-node.md b/site/docs/options/graphs-demos/indented-tree/custom-node.md
new file mode 100644
index 000000000..3d90d1ef4
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/custom-node.md
@@ -0,0 +1,7 @@
+## zh
+
+通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。
+
+## en
+
+Customize nodes using `node.component`, which must be paired with `node.size` to take effect.
diff --git a/site/docs/options/graphs-demos/indented-tree/custom-node.tsx b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
new file mode 100644
index 000000000..103c09bf5
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
@@ -0,0 +1,55 @@
+import { IndentedTree, type IndentedTreeOptions, measureTextSize } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+const CustomNode = ({ text }: { text: string }) => {
+  const prefix = text === 'Modeling Methods' ? '🔍 ' : '';
+  return (
+    <div
+      style={{
+        height: 'inherit',
+        width: 'inherit',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '16px',
+        backgroundColor: '#FFF6E3',
+        color: '#8B5DFF',
+        boxShadow: '0 0 0 2px #8B5DFF',
+        fontFamily: 'Futura',
+      }}
+    >
+      {prefix}
+      {text}
+    </div>
+  );
+};
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: IndentedTreeOptions = {
+    autoFit: 'view',
+    padding: 8,
+    background: '#F3F3F6',
+    data,
+    node: {
+      style: {
+        component: (d) => <CustomNode text={d.id} />,
+        size: (data) => measureTextSize(data.id, [24, 16]),
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#8B5DFF',
+      },
+    },
+    animation: false,
+  };
+  return <IndentedTree {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/indented-tree/default.md b/site/docs/options/graphs-demos/indented-tree/default.md
new file mode 100644
index 000000000..7241b63ff
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/default.md
@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.
diff --git a/site/docs/options/graphs-demos/indented-tree/default.tsx b/site/docs/options/graphs-demos/indented-tree/default.tsx
new file mode 100644
index 000000000..664c4c523
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/default.tsx
@@ -0,0 +1,19 @@
+import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: IndentedTreeOptions = {
+    autoFit: 'view',
+    data,
+  };
+
+  return <IndentedTree {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/indented-tree/direction.md b/site/docs/options/graphs-demos/indented-tree/direction.md
new file mode 100644
index 000000000..dc4cbb4c3
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/direction.md
@@ -0,0 +1,7 @@
+## zh
+
+通过设置 `direction` 为 `alternate` `left` 分别让子节点自由、左侧分布。若不设置 `direction`，则默认 `right` 右侧分布。
+
+## en
+
+Set `direction` to `alternate` or `left` to distribute child nodes freely or to the left. If not set, the default is `right` (right distribution).
diff --git a/site/docs/options/graphs-demos/indented-tree/direction.tsx b/site/docs/options/graphs-demos/indented-tree/direction.tsx
new file mode 100644
index 000000000..699eff38e
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/direction.tsx
@@ -0,0 +1,34 @@
+import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import { Divider, Radio } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [direction, setDirection] = useState<IndentedTreeOptions['direction']>('right');
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: IndentedTreeOptions = {
+    direction,
+    autoFit: 'view',
+    data,
+  };
+
+  return (
+    <>
+      <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
+        <Radio.Button value="right">Right</Radio.Button>
+        <Radio.Button value="left">Left</Radio.Button>
+        <Radio.Button value="alternate">Alternate</Radio.Button>
+      </Radio.Group>
+      <Divider orientation="left" plain>
+        Preview
+      </Divider>
+      <IndentedTree {...options} />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs-demos/indented-tree/type.md b/site/docs/options/graphs-demos/indented-tree/type.md
new file mode 100644
index 000000000..304952c5f
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/type.md
@@ -0,0 +1,7 @@
+## zh
+
+通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。
+
+## en
+
+Use the `type` syntax sugar to apply preset styles: line style or boxed style.
diff --git a/site/docs/options/graphs-demos/indented-tree/type.tsx b/site/docs/options/graphs-demos/indented-tree/type.tsx
new file mode 100644
index 000000000..3def254e8
--- /dev/null
+++ b/site/docs/options/graphs-demos/indented-tree/type.tsx
@@ -0,0 +1,25 @@
+import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: IndentedTreeOptions = {
+    autoFit: 'view',
+    data,
+    animation: false,
+  };
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
+      <IndentedTree {...options} type="linear" />
+      <IndentedTree {...options} type="boxed" />
+    </div>
+  );
+};
diff --git a/site/docs/options/graphs-demos/mind-map/collapse-expand.md b/site/docs/options/graphs-demos/mind-map/collapse-expand.md
new file mode 100644
index 000000000..c834ddbb4
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.md
@@ -0,0 +1,7 @@
+## zh
+
+通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。此外，还可以配置 `defaultExpandLevel` 来控制默认展开层级。
+
+## en
+
+Enable the expand/collapse behavior for child nodes by configuring the `collapse-expand-react-node` behavior. For detailed configuration instructions, refer to [CollapseExpandReactNodeOptions](/en/options/graphs/overview#collapseexpandreactnode). Additionally, configure `defaultExpandLevel` to control the default expansion level.
diff --git a/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
new file mode 100644
index 000000000..49682d539
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
@@ -0,0 +1,56 @@
+import { CollapseExpandIcon, MindMap, type MindMapOptions } from '@ant-design/graphs';
+import { Divider } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+const { PlusMinusIcon } = CollapseExpandIcon;
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: MindMapOptions = {
+    type: 'linear',
+    autoFit: 'view',
+    data,
+    defaultExpandLevel: 2
+  };
+
+  const updateCollapseExpandBehavior = (options) => {
+    return (transforms) => [
+      ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
+      {
+        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || ({} as any)),
+        ...options,
+      },
+    ];
+  };
+
+  return (
+    <>
+      <Divider orientation="left" plain>
+        Click Icon to Expand/Collapse
+      </Divider>
+      <MindMap {...options} transforms={updateCollapseExpandBehavior({ enable: true })} />
+      <Divider orientation="left" plain>
+        Click Node to Expand/Collapse
+      </Divider>
+      <MindMap {...options} transforms={updateCollapseExpandBehavior({ enable: true, trigger: 'node' })} />
+      <Divider orientation="left" plain>
+        Custom Icon
+      </Divider>
+      <MindMap
+        {...options}
+        transforms={updateCollapseExpandBehavior({
+          enable: true,
+          iconRender: (isCollapsed) => <PlusMinusIcon isCollapsed={isCollapsed} />,
+          iconOffsetX: 8,
+        })}
+      />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs-demos/mind-map/color.md b/site/docs/options/graphs-demos/mind-map/color.md
new file mode 100644
index 000000000..3da8f9ffc
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/color.md
@@ -0,0 +1,7 @@
+## zh
+
+`assign-color-by-branch` 作为内部数据处理的环节之一，通过调整 `colors` 配置，可以为不同分支分配独特的颜色，以便更清晰地区分分支结构。具体可参考 [AssignColorByBranchOptions](/options/graphs/overview#assigncolorbybranch) 获取详细配置说明。
+
+## en
+
+`assign-color-by-branch` As a part of internal data processing, by adjusting the `colors` configuration, you can assign unique colors to different branches in order to distinguish the branch structure more clearly. Please refer to [AssignColorByBranchOptions](/en/options/graphs/overview#assigncolorbybranch) for detailed configuration instructions.
diff --git a/site/docs/options/graphs-demos/mind-map/color.tsx b/site/docs/options/graphs-demos/mind-map/color.tsx
new file mode 100644
index 000000000..3e1f934a8
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/color.tsx
@@ -0,0 +1,30 @@
+import { MindMap, type MindMapOptions } from '@ant-design/graphs';
+import React from 'react';
+
+const data = {
+  id: 'Modeling Methods',
+  children: [
+    { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] },
+    { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] },
+    { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] },
+  ],
+};
+
+export default () => {
+  const options: MindMapOptions = {
+    type: 'linear',
+    autoFit: 'view',
+    padding: 8,
+    data,
+    transforms: (transforms) => [
+      ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'),
+      {
+        ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || ({} as any)),
+        colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)'],
+      },
+    ],
+    animation: false,
+  };
+
+  return <MindMap {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/mind-map/custom-node.md b/site/docs/options/graphs-demos/mind-map/custom-node.md
new file mode 100644
index 000000000..a692d0a4a
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/custom-node.md
@@ -0,0 +1,7 @@
+## zh
+
+通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。
+
+## en
+
+Customize nodes using `node.component`, in conjunction with `node.size`.
diff --git a/site/docs/options/graphs-demos/mind-map/custom-node.tsx b/site/docs/options/graphs-demos/mind-map/custom-node.tsx
new file mode 100644
index 000000000..a0a9dd142
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/custom-node.tsx
@@ -0,0 +1,58 @@
+import { MindMap, type MindMapOptions, measureTextSize } from '@ant-design/graphs';
+import React from 'react';
+
+const data = {
+  id: 'Modeling Methods',
+  children: [
+    { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] },
+    { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] },
+    { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] },
+  ],
+};
+
+const CustomNode = ({ text }: { text: string }) => {
+  const prefix = text === 'Modeling Methods' ? '🔍 ' : '';
+  return (
+    <div
+      style={{
+        height: 'inherit',
+        width: 'inherit',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '16px',
+        backgroundColor: '#FFF6E3',
+        color: '#8B5DFF',
+        boxShadow: '0 0 0 2px #8B5DFF',
+        fontFamily: 'Futura',
+      }}
+    >
+      {prefix}
+      {text}
+    </div>
+  );
+};
+
+export default () => {
+  const options: MindMapOptions = {
+    autoFit: 'view',
+    padding: 8,
+    background: '#F3F3F6',
+    data,
+    node: {
+      style: {
+        component: (d) => <CustomNode text={d.id} />,
+        size: (d) => measureTextSize(d.id, [24, 16]),
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#8B5DFF',
+        endArrow: true,
+      },
+    },
+    animation: false,
+  };
+
+  return <MindMap {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/mind-map/default.md b/site/docs/options/graphs-demos/mind-map/default.md
new file mode 100644
index 000000000..04a9c6dc9
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/default.md
@@ -0,0 +1,7 @@
+## zh
+
+基本用法。
+
+## en
+
+A simple demonstration.
diff --git a/site/docs/options/graphs-demos/mind-map/default.tsx b/site/docs/options/graphs-demos/mind-map/default.tsx
new file mode 100644
index 000000000..f085e70e2
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/default.tsx
@@ -0,0 +1,25 @@
+import { MindMap, type MindMapOptions } from '@ant-design/graphs';
+import React from 'react';
+
+const data = {
+  id: 'Modeling Methods',
+  children: [
+    { id: 'Classification', children: [{ id: 'Logistic regression' }, { id: 'Linear discriminant analysis' }] },
+    { id: 'Consensus', children: [{ id: 'Models diversity' }, { id: 'Methods' }, { id: 'Common' }] },
+    { id: 'Regression', children: [{ id: 'Multiple linear regression' }, { id: 'Partial least squares' }] },
+  ],
+};
+
+export default () => {
+  const options: MindMapOptions = {
+    autoFit: 'view',
+    data,
+    edge: {
+      style: {
+        endArrow: true,
+      },
+    },
+    animation: false,
+  };
+  return <MindMap {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/mind-map/direction.md b/site/docs/options/graphs-demos/mind-map/direction.md
new file mode 100644
index 000000000..a8b832d49
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/direction.md
@@ -0,0 +1,7 @@
+## zh
+
+通过设置 `direction` 为 `right` `left` 分别让子节点右侧、左侧分布。若不设置 `direction`，则默认自由分布。
+
+## en
+
+Set `direction` to `right` or `left` to distribute child nodes on the right or left. If `direction` is not set, the default is free distribution.
diff --git a/site/docs/options/graphs-demos/mind-map/direction.tsx b/site/docs/options/graphs-demos/mind-map/direction.tsx
new file mode 100644
index 000000000..21723ba8b
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/direction.tsx
@@ -0,0 +1,37 @@
+import { MindMap, type MindMapOptions } from '@ant-design/graphs';
+import { Divider, Radio } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [direction, setDirection] = useState<MindMapOptions['direction']>('right');
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: MindMapOptions = {
+    data,
+    autoFit: 'view',
+    padding: 8,
+    type: 'linear',
+    direction,
+    animation: false,
+  };
+
+  return (
+    <>
+      <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
+        <Radio.Button value="right">Right</Radio.Button>
+        <Radio.Button value="left">Left</Radio.Button>
+        <Radio.Button value="alternate">Alternate</Radio.Button>
+      </Radio.Group>
+      <Divider orientation="left" plain>
+        Preview
+      </Divider>
+      <MindMap {...options} />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs-demos/mind-map/type.md b/site/docs/options/graphs-demos/mind-map/type.md
new file mode 100644
index 000000000..3bdc5f731
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/type.md
@@ -0,0 +1,7 @@
+## zh
+
+通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。
+
+## en
+
+Use the `type` syntax to apply preset styles: linear style and boxed style.
diff --git a/site/docs/options/graphs-demos/mind-map/type.tsx b/site/docs/options/graphs-demos/mind-map/type.tsx
new file mode 100644
index 000000000..7c6d34a67
--- /dev/null
+++ b/site/docs/options/graphs-demos/mind-map/type.tsx
@@ -0,0 +1,74 @@
+import { MindMap, type MindMapOptions } from '@ant-design/graphs';
+import { Divider } from 'antd';
+import React from 'react';
+
+const data = {
+  id: 'Modeling Methods',
+  children: [
+    {
+      id: 'Classification',
+      children: [
+        { id: 'Logistic Regression' },
+        { id: 'Linear Discriminant Analysis', children: [{ id: "Fisher's Linear Discriminant" }] },
+        {
+          id: 'Decision Trees',
+          children: [{ id: 'CART (Classification and Regression Trees)' }, { id: 'C4.5 Algorithm' }],
+        },
+      ],
+    },
+    {
+      id: 'Regression',
+      children: [{ id: 'Linear Regression' }, { id: 'Polynomial Regression' }],
+    },
+    {
+      id: 'Clustering',
+      children: [
+        { id: 'K-Means Clustering' },
+        {
+          id: 'Hierarchical Clustering',
+          children: [{ id: 'Agglomerative Clustering' }, { id: 'Divisive Clustering' }],
+        },
+      ],
+    },
+    {
+      id: 'Dimensionality Reduction',
+      children: [
+        { id: 'Principal Component Analysis (PCA)' },
+        {
+          id: 'Feature Selection Techniques',
+          children: [{ id: 'Recursive Feature Elimination' }, { id: 'L1 Regularization' }],
+        },
+      ],
+    },
+    {
+      id: 'Ensemble Methods',
+      children: [
+        { id: 'Bagging', children: [{ id: 'Bootstrap Aggregating' }] },
+        { id: 'Stacking' },
+        { id: 'Random Forest' },
+        { id: 'Voting Classifier' },
+      ],
+    },
+  ],
+};
+
+export default () => {
+  const options: MindMapOptions = {
+    autoFit: 'view',
+    data,
+    animation: false,
+  };
+
+  return (
+    <>
+      <Divider orientation="left" plain>
+        Linear Style
+      </Divider>
+      <MindMap {...options} type="linear" />
+      <Divider orientation="left" plain>
+        Boxed Style
+      </Divider>
+      <MindMap {...options} type="boxed" />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs-demos/network-graph/default.md b/site/docs/options/graphs-demos/network-graph/default.md
new file mode 100644
index 000000000..7241b63ff
--- /dev/null
+++ b/site/docs/options/graphs-demos/network-graph/default.md
@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.
diff --git a/site/docs/options/graphs/demos/network-graph/default.tsx b/site/docs/options/graphs-demos/network-graph/default.tsx
similarity index 100%
rename from site/docs/options/graphs/demos/network-graph/default.tsx
rename to site/docs/options/graphs-demos/network-graph/default.tsx
diff --git a/site/docs/options/graphs-demos/network-graph/label.md b/site/docs/options/graphs-demos/network-graph/label.md
new file mode 100644
index 000000000..a7c8a0c73
--- /dev/null
+++ b/site/docs/options/graphs-demos/network-graph/label.md
@@ -0,0 +1,7 @@
+## zh
+
+展示节点标签，默认显示三行文字，鼠标悬浮时显示全部内容。
+
+## en
+
+Display node labels. By default, three lines of text are shown, with the full content displayed on hover.
diff --git a/site/docs/options/graphs/demos/network-graph/label.tsx b/site/docs/options/graphs-demos/network-graph/label.tsx
similarity index 100%
rename from site/docs/options/graphs/demos/network-graph/label.tsx
rename to site/docs/options/graphs-demos/network-graph/label.tsx
diff --git a/site/docs/options/graphs-demos/network-graph/node-importance.md b/site/docs/options/graphs-demos/network-graph/node-importance.md
new file mode 100644
index 000000000..271728216
--- /dev/null
+++ b/site/docs/options/graphs-demos/network-graph/node-importance.md
@@ -0,0 +1,7 @@
+## zh
+
+根据节点重要性映射到节点大小，点击[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size)查看更多配置项
+
+## en
+
+Map node importance to node size. Click [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) for more configuration options.
diff --git a/site/docs/options/graphs/demos/network-graph/node-importance.tsx b/site/docs/options/graphs-demos/network-graph/node-importance.tsx
similarity index 100%
rename from site/docs/options/graphs/demos/network-graph/node-importance.tsx
rename to site/docs/options/graphs-demos/network-graph/node-importance.tsx
diff --git a/site/docs/options/graphs-demos/organization-chart/collapse-expand.md b/site/docs/options/graphs-demos/organization-chart/collapse-expand.md
new file mode 100644
index 000000000..935739909
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/collapse-expand.md
@@ -0,0 +1,7 @@
+## zh
+
+通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。
+
+## en
+
+Enable the expand/collapse behavior for child nodes by configuring the `collapse-expand-react-node` behavior. For detailed configuration instructions, refer to [CollapseExpandReactNodeOptions](/en/options/graphs/overview#collapseexpandreactnode).
diff --git a/site/docs/options/graphs-demos/organization-chart/collapse-expand.tsx b/site/docs/options/graphs-demos/organization-chart/collapse-expand.tsx
new file mode 100644
index 000000000..b66f7cb56
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/collapse-expand.tsx
@@ -0,0 +1,58 @@
+import type { OrganizationChartOptions } from '@ant-design/graphs';
+import { CollapseExpandIcon, OrganizationChart } from '@ant-design/graphs';
+import { Divider } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+const { ArrowCountIcon } = CollapseExpandIcon;
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://assets.antv.antgroup.com/g6/organization-chart.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: OrganizationChartOptions = {
+    autoFit: 'view',
+    data,
+    labelField: 'name',
+  };
+
+  const updateCollapseExpandBehavior = (options) => {
+    return (transforms) => [
+      ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
+      {
+        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || ({} as any)),
+        ...options,
+      },
+    ];
+  };
+
+  return (
+    <>
+      <Divider orientation="left" plain>
+        Click Preset Icon to Expand/Collapse
+      </Divider>
+      <OrganizationChart
+        {...options}
+        direction="horizontal"
+        transforms={updateCollapseExpandBehavior({ enable: true, iconOffsetX: 12 })}
+      />
+      <Divider orientation="left" plain>
+        Click Custom Icon to Expand/Collapse
+      </Divider>
+      <OrganizationChart
+        {...options}
+        direction="vertical"
+        transforms={updateCollapseExpandBehavior({
+          enable: true,
+          iconRender: function (isCollapsed, data) {
+            return <ArrowCountIcon style={{ display: 'flex' }} graph={this} data={data} isCollapsed={isCollapsed} />;
+          },
+        })}
+      />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs-demos/organization-chart/custom-node.md b/site/docs/options/graphs-demos/organization-chart/custom-node.md
new file mode 100644
index 000000000..428b4a17b
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/custom-node.md
@@ -0,0 +1,7 @@
+## zh
+
+使用自定义的 React 节点进行图的渲染。此示例中使用了内置的 RC 组件 `OrganizationChartNode` 进行简单实现，你也可以自行开发 RC 组件以满足特定需求。
+
+## en
+
+Render the chart using custom React nodes. The example uses the built-in `OrganizationChartNode`, but you can develop your own RC component for specific needs.
diff --git a/site/docs/options/graphs-demos/organization-chart/custom-node.tsx b/site/docs/options/graphs-demos/organization-chart/custom-node.tsx
new file mode 100644
index 000000000..411103fc2
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/custom-node.tsx
@@ -0,0 +1,82 @@
+import { OrganizationChart, RCNode, type OrganizationChartOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+const { OrganizationChartNode } = RCNode;
+
+const CustomNode = ({ text }: { text: string }) => {
+  return (
+    <div
+      style={{
+        height: 'inherit',
+        width: 'inherit',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '16px',
+        backgroundColor: '#FFF6E3',
+        color: '#8B5DFF',
+        boxShadow: '0 0 0 2px #8B5DFF',
+        fontFamily: 'Futura',
+      }}
+    >
+      💡 {text}
+    </div>
+  );
+};
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://assets.antv.antgroup.com/g6/organization-chart.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: OrganizationChartOptions = {
+    autoFit: 'view',
+    data,
+    node: {
+      style: {
+        component: (d) => {
+          const { name, position, status } = d.data || {};
+          return <OrganizationChartNode name={name} position={position} status={status} />;
+        },
+        size: [240, 80],
+      },
+    },
+    edge: {
+      style: {
+        radius: 16,
+        lineWidth: 2,
+        endArrow: true,
+      },
+    },
+  };
+
+  const options2: OrganizationChartOptions = {
+    autoFit: 'view',
+    data,
+    node: {
+      style: {
+        component: (d) => <CustomNode text={d.data.name} />,
+        size: [120, 40],
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#8B5DFF',
+        radius: 8,
+        lineWidth: 2,
+        endArrow: true,
+      },
+    },
+  };
+
+  return (
+    <>
+      <OrganizationChart {...options} />
+      <OrganizationChart {...options2} />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs-demos/organization-chart/default.md b/site/docs/options/graphs-demos/organization-chart/default.md
new file mode 100644
index 000000000..7241b63ff
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/default.md
@@ -0,0 +1,7 @@
+## zh
+
+简单的展示。
+
+## en
+
+A simple demonstration.
diff --git a/site/docs/options/graphs-demos/organization-chart/default.tsx b/site/docs/options/graphs-demos/organization-chart/default.tsx
new file mode 100644
index 000000000..897eb45ba
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/default.tsx
@@ -0,0 +1,20 @@
+import { OrganizationChart, type OrganizationChartOptions } from '@ant-design/graphs';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://assets.antv.antgroup.com/g6/organization-chart.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: OrganizationChartOptions = {
+    autoFit: 'view',
+    data,
+    labelField: 'name',
+  };
+
+  return <OrganizationChart {...options} />;
+};
diff --git a/site/docs/options/graphs-demos/organization-chart/direction.md b/site/docs/options/graphs-demos/organization-chart/direction.md
new file mode 100644
index 000000000..65c672304
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/direction.md
@@ -0,0 +1,7 @@
+## zh
+
+通过设置 `direction` 为 `vertical` `horizontal` 分别让垂直（自上而下）、水平（自左而右）分布。若不设置 `direction`，则默认垂直分布。
+
+## en
+
+Set `direction` to `vertical` for top-down or `horizontal` for left-right layout. The default is vertical.
diff --git a/site/docs/options/graphs-demos/organization-chart/direction.tsx b/site/docs/options/graphs-demos/organization-chart/direction.tsx
new file mode 100644
index 000000000..3184ea963
--- /dev/null
+++ b/site/docs/options/graphs-demos/organization-chart/direction.tsx
@@ -0,0 +1,34 @@
+import { OrganizationChart, type OrganizationChartOptions } from '@ant-design/graphs';
+import { Divider, Radio } from 'antd';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [direction, setDirection] = useState<OrganizationChartOptions['direction']>('vertical');
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://assets.antv.antgroup.com/g6/organization-chart.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
+  const options: OrganizationChartOptions = {
+    autoFit: 'view',
+    data,
+    direction,
+    labelField: 'name',
+  };
+
+  return (
+    <>
+      <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
+        <Radio.Button value="vertical">Vertical</Radio.Button>
+        <Radio.Button value="horizontal">Horizontal</Radio.Button>
+      </Radio.Group>
+      <Divider orientation="left" plain>
+        Preview
+      </Divider>
+      <OrganizationChart {...options} />
+    </>
+  );
+};
diff --git a/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx b/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx
deleted file mode 100644
index c95dd75ff..000000000
--- a/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
-export default () => {
-  const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data,
-    behaviors: (behaviors) => [...behaviors, 'collapse-expand'],
-  };
-
-  return <Dendrogram {...options} />
-};
diff --git a/site/docs/options/graphs/demos/dendrogram/compact.tsx b/site/docs/options/graphs/demos/dendrogram/compact.tsx
deleted file mode 100644
index 9a70ea7e5..000000000
--- a/site/docs/options/graphs/demos/dendrogram/compact.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
-
-export default () => {
-  const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
-    compact: true,
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <Dendrogram {...options} direction='vertical' />
-    <Dendrogram {...options} direction='horizontal' />
-    <Dendrogram {...options} direction='radial' />
-  </div>;
-};
diff --git a/site/docs/options/graphs/demos/dendrogram/default.tsx b/site/docs/options/graphs/demos/dendrogram/default.tsx
deleted file mode 100644
index 109518764..000000000
--- a/site/docs/options/graphs/demos/dendrogram/default.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
-export default () => {
-  const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  return <Dendrogram {...options} />
-};
diff --git a/site/docs/options/graphs/demos/dendrogram/direction.tsx b/site/docs/options/graphs/demos/dendrogram/direction.tsx
deleted file mode 100644
index 59fdebd89..000000000
--- a/site/docs/options/graphs/demos/dendrogram/direction.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
-
-export default () => {
-  const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <Dendrogram {...options} direction='vertical' />
-    <Dendrogram {...options} direction='horizontal' />
-    <Dendrogram {...options} direction='radial' />
-  </div>;
-};
diff --git a/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-chain.tsx b/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-chain.tsx
deleted file mode 100644
index 626519973..000000000
--- a/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-chain.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const blue = 'rgba(99, 149, 250, 1)';
-const green = 'rgba(100, 218, 171, 1)';
-const gray = 'rgba(89, 89, 89, 1)';
-
-const data = {
-  "nodes": [
-    { "id": "-3", "data": { type: 'source', "title": "来源页面A" } },
-    { "id": "-2", "data": { type: 'source', "title": "来源页面B" } },
-    { "id": "-1", "data": { type: 'source', "title": "来源页面C" } },
-    { "id": "0", "data": { type: 'activity', "title": "活动页面" } },
-    { "id": "1", "data": { type: 'destination', "title": "去向页面A", } },
-    { "id": "2", "data": { type: 'destination', "title": "去向页面B", } },
-    { "id": "3", "data": { type: 'destination', "title": "去向页面C", } },
-    { "id": "4", "data": { type: 'destination', "title": "去向页面D", } },
-  ],
-  "edges": [
-    { "source": "-3", "target": "0", data: { type: 'in', value: 40 } },
-    { "source": "-2", "target": "0", data: { type: 'in', value: 35 } },
-    { "source": "-1", "target": "0", data: { type: 'in', value: 25 } },
-    { "source": "0", "target": "1", data: { type: 'out', value: 22 } },
-    { "source": "0", "target": "2", data: { type: 'out', value: 18 } },
-    { "source": "0", "target": "3", data: { type: 'out', value: 32 } },
-    { "source": "0", "target": "4", data: { type: 'out', value: 38 } },
-  ]
-}
-
-const CustomNode = ({ text, isActive, color }: { text: string, isActive: boolean, color: string }) => {
-  const style = {
-    height: 'inherit',
-    width: 'inherit',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '4px',
-    backgroundColor: !isActive ? color.replace('1)', '0.2)') : color,
-    color: isActive ? '#fff' : '#000',
-  };
-
-  return <div style={style}>{text}</div>
-}
-
-export default () => {
-  const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '380px' },
-    autoFit: 'view',
-    data,
-    node: {
-      style: {
-        component: (d) => {
-          const isActive = d.states?.includes('active');
-          const color = d.data.type === 'source' ? blue : (d.data.type === 'destination' ? green : gray);
-          return <CustomNode text={d.data.title} isActive={isActive} color={color} />
-        },
-        size: [130, 58],
-      },
-    },
-    edge: {
-      style: {
-        stroke: (d) =>
-          d.data.type === 'in' ? blue : green,
-        strokeOpacity: 0.2,
-      },
-      state: {
-        active: {
-          halo: false,
-          strokeOpacity: 1,
-        }
-      }
-    },
-    transforms: (transforms) => [
-      ...transforms,
-      {
-        type: 'map-edge-line-width',
-        key: 'map-edge-line-width',
-        value: (d) => d.data.value,
-        minValue: 0,
-        maxValue: 100,
-        minLineWidth: 1,
-        maxLineWidth: 32,
-      },
-    ],
-    behaviors: (behaviors) => [...behaviors, {
-      type: 'hover-activate-chain',
-      onHover: (e) => {
-        e.view.setCursor('pointer');
-      },
-      onHoverEnd: (e) => {
-        e.view.setCursor('default');
-      }
-    }],
-    layout: {
-      type: 'antv-dagre',
-      nodesep: -3,
-      ranksep: 60,
-    },
-    animation: false
-  };
-
-  return <FlowDirectionGraph {...options} />;
-};
diff --git a/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-neighbor.tsx b/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-neighbor.tsx
deleted file mode 100644
index 8cf5528d7..000000000
--- a/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-neighbor.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const blue = 'rgba(99, 149, 250, 1)';
-const green = 'rgba(100, 218, 171, 1)';
-const gray = 'rgba(89, 89, 89, 1)';
-
-const data = {
-  "nodes": [
-    { "id": "-3", "data": { type: 'source', "title": "来源页面A" } },
-    { "id": "-2", "data": { type: 'source', "title": "来源页面B" } },
-    { "id": "-1", "data": { type: 'source', "title": "来源页面C" } },
-    { "id": "0", "data": { type: 'activity', "title": "活动页面" } },
-    { "id": "1", "data": { type: 'destination', "title": "去向页面A", } },
-    { "id": "2", "data": { type: 'destination', "title": "去向页面B", } },
-    { "id": "3", "data": { type: 'destination', "title": "去向页面C", } },
-    { "id": "4", "data": { type: 'destination', "title": "去向页面D", } },
-  ],
-  "edges": [
-    { "source": "-3", "target": "0", data: { type: 'in', value: 40 } },
-    { "source": "-2", "target": "0", data: { type: 'in', value: 35 } },
-    { "source": "-1", "target": "0", data: { type: 'in', value: 25 } },
-    { "source": "0", "target": "1", data: { type: 'out', value: 22 } },
-    { "source": "0", "target": "2", data: { type: 'out', value: 18 } },
-    { "source": "0", "target": "3", data: { type: 'out', value: 32 } },
-    { "source": "0", "target": "4", data: { type: 'out', value: 38 } },
-  ]
-}
-
-const CustomNode = ({ text, isActive, color }: { text: string, isActive: boolean, color: string }) => {
-  const style = {
-    height: 'inherit',
-    width: 'inherit',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '4px',
-    backgroundColor: !isActive ? color.replace('1)', '0.2)') : color,
-    color: isActive ? '#fff' : '#000',
-  };
-
-  return <div style={style}>{text}</div>
-}
-
-export default () => {
-  const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '380px' },
-    autoFit: 'view',
-    data,
-    node: {
-      style: {
-        component: (d) => {
-          const isActive = d.states?.includes('active');
-          const color = d.data.type === 'source' ? blue : (d.data.type === 'destination' ? green : gray);
-          return <CustomNode text={d.data.title} isActive={isActive} color={color} />
-        },
-        size: [130, 58],
-      },
-    },
-    edge: {
-      style: {
-        stroke: (d) =>
-          d.data.type === 'in' ? blue : green,
-        strokeOpacity: 0.2,
-      },
-      state: {
-        active: {
-          halo: false,
-          strokeOpacity: 1,
-        }
-      }
-    },
-    transforms: (transforms) => [
-      ...transforms,
-      {
-        type: 'map-edge-line-width',
-        key: 'map-edge-line-width',
-        value: (d) => d.data.value,
-        minValue: 0,
-        maxValue: 100,
-        minLineWidth: 1,
-        maxLineWidth: 32,
-      },
-    ],
-    behaviors: (behaviors) => [...behaviors, {
-      type: 'hover-activate-neighbors',
-      onHover: (e) => {
-        e.view.setCursor('pointer');
-      },
-      onHoverEnd: (e) => {
-        e.view.setCursor('default');
-      }
-    }],
-    layout: {
-      type: 'antv-dagre',
-      nodesep: -3,
-      ranksep: 60,
-    },
-    animation: false
-  };
-
-  return <FlowDirectionGraph {...options} />;
-};
diff --git a/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx b/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx
deleted file mode 100644
index 3607e597f..000000000
--- a/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { IndentedTree, CollapseExpandIcon, type IndentedTreeOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const { PlusMinusIcon } = CollapseExpandIcon;
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'], style: { collapsed: true } },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: IndentedTreeOptions = {
-    type: 'boxed',
-    containerStyle: { height: '240px' },
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  const updateCollapseExpandBehavior = (options) => {
-    return (transforms) => [
-      ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
-      {
-        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any),
-        ...options,
-      },
-    ]
-  }
-
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true })} />
-    <IndentedTree {...options} transforms={updateCollapseExpandBehavior({ enable: true, trigger: 'node' })} />
-    <IndentedTree {...options} transforms={updateCollapseExpandBehavior({
-      enable: true,
-      iconRender: (isCollapsed) => <PlusMinusIcon isCollapsed={isCollapsed} />,
-      iconOffsetY: 8,
-    })} />
-  </div>;
-};
diff --git a/site/docs/options/graphs/demos/indented-tree/color.tsx b/site/docs/options/graphs/demos/indented-tree/color.tsx
deleted file mode 100644
index 6bc3ab16e..000000000
--- a/site/docs/options/graphs/demos/indented-tree/color.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { IndentedTree, type IndentedTreeOptions, type G6 } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
-    type: 'boxed',
-    autoFit: 'view',
-    data,
-    transforms: (transforms) => [
-      ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'),
-      {
-        ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || {} as any),
-        colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)']
-      },
-    ],
-    animation: false,
-  };
-
-  return <>
-    <IndentedTree {...options} />
-  </>;
-};
diff --git a/site/docs/options/graphs/demos/indented-tree/custom-node.tsx b/site/docs/options/graphs/demos/indented-tree/custom-node.tsx
deleted file mode 100644
index 5140e9406..000000000
--- a/site/docs/options/graphs/demos/indented-tree/custom-node.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { IndentedTree, type IndentedTreeOptions, measureTextSize } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-const CustomNode = ({ text }: { text: string }) => {
-  return <div style={{
-    height: 'inherit',
-    width: 'inherit',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '8px',
-    backgroundColor: '#f7f0fe',
-    color: '#873bf4',
-    boxShadow: '0 0 0 2px #873bf4'
-  }}>{text}</div>
-}
-
-export default () => {
-  const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    padding: 20,
-    data,
-    node: {
-      style: {
-        component: (d) => <CustomNode text={d.id} />,
-        size: (data) => measureTextSize(data.id, [24, 16]),
-      },
-    },
-    edge: {
-      style: { stroke: '#873bf4' },
-    },
-    animation: false,
-  };
-  return <IndentedTree {...options} />;
-};
diff --git a/site/docs/options/graphs/demos/indented-tree/default.tsx b/site/docs/options/graphs/demos/indented-tree/default.tsx
deleted file mode 100644
index 248409904..000000000
--- a/site/docs/options/graphs/demos/indented-tree/default.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-  return <IndentedTree {...options} />;
-};
diff --git a/site/docs/options/graphs/demos/indented-tree/direction.tsx b/site/docs/options/graphs/demos/indented-tree/direction.tsx
deleted file mode 100644
index a2e156d1a..000000000
--- a/site/docs/options/graphs/demos/indented-tree/direction.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
-import React, { useState } from 'react';
-import { Radio, Divider } from 'antd';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const [direction, setDirection] = useState<IndentedTreeOptions['direction']>('right');
-
-  const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
-    direction,
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  return <>
-    <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
-      <Radio.Button value="right">Right</Radio.Button>
-      <Radio.Button value="left">Left</Radio.Button>
-      <Radio.Button value="alternate">Alternate</Radio.Button>
-    </Radio.Group>
-    <Divider orientation="left" plain>
-      Preview
-    </Divider>
-    <IndentedTree {...options} />
-  </>;
-};
diff --git a/site/docs/options/graphs/demos/indented-tree/type.tsx b/site/docs/options/graphs/demos/indented-tree/type.tsx
deleted file mode 100644
index d9926235d..000000000
--- a/site/docs/options/graphs/demos/indented-tree/type.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
-import React from 'react';
-import { Flex } from 'antd';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
-    <IndentedTree {...options} type='linear' />
-    <IndentedTree {...options} type='boxed' />
-  </div>
-};
diff --git a/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx b/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx
deleted file mode 100644
index 2fc749f3e..000000000
--- a/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { MindMap, CollapseExpandIcon, type MindMapOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const { PlusMinusIcon } = CollapseExpandIcon;
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'], style: { collapsed: true } },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: MindMapOptions = {
-    type: 'boxed',
-    containerStyle: { height: '200px' },
-    padding: [50, 100],
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  const updateCollapseExpandBehavior = (options) => {
-    return (transforms) => [
-      ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
-      {
-        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any),
-        ...options,
-      },
-    ]
-  }
-
-  return <>
-    <MindMap {...options} transforms={updateCollapseExpandBehavior({ enable: true })} />
-    <MindMap {...options} transforms={updateCollapseExpandBehavior({ enable: true, trigger: 'node' })} />
-    <MindMap {...options} transforms={updateCollapseExpandBehavior({
-      enable: true,
-      iconRender: (isCollapsed) => <PlusMinusIcon isCollapsed={isCollapsed} />,
-      iconOffsetX: 8,
-    })} />
-  </>;
-};
diff --git a/site/docs/options/graphs/demos/mind-map/color.tsx b/site/docs/options/graphs/demos/mind-map/color.tsx
deleted file mode 100644
index 008204436..000000000
--- a/site/docs/options/graphs/demos/mind-map/color.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { MindMap, type MindMapOptions, type G6 } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: MindMapOptions = {
-    containerStyle: { height: '200px' },
-    type: 'boxed',
-    autoFit: 'view',
-    data,
-    transforms: (transforms) => [
-      ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'),
-      {
-        ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || {} as any),
-        colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)']
-      },
-    ],
-    animation: false,
-  };
-
-  return <>
-    <MindMap {...options} />
-  </>;
-};
diff --git a/site/docs/options/graphs/demos/mind-map/custom-node.tsx b/site/docs/options/graphs/demos/mind-map/custom-node.tsx
deleted file mode 100644
index 7b0d21045..000000000
--- a/site/docs/options/graphs/demos/mind-map/custom-node.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { MindMap, type MindMapOptions, measureTextSize } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-const CustomNode = ({ text }: { text: string }) => {
-  return <div style={{
-    height: 'inherit',
-    width: 'inherit',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '8px',
-    backgroundColor: '#f7f0fe',
-    color: '#873bf4',
-    boxShadow: '0 0 0 2px #873bf4'
-  }}>{text}</div>
-}
-
-export default () => {
-  const options: MindMapOptions = {
-    containerStyle: { height: '200px' },
-    autoFit: 'view',
-    padding: 20,
-    data,
-    node: {
-      style: {
-        component: (d) => <CustomNode text={d.id} />,
-        size: (data) => measureTextSize(data.id, [24, 16]),
-      },
-    },
-    edge: {
-      style: { stroke: '#873bf4', endArrow: true },
-    },
-    animation: false,
-  };
-  return <MindMap {...options} />;
-};
diff --git a/site/docs/options/graphs/demos/mind-map/default.tsx b/site/docs/options/graphs/demos/mind-map/default.tsx
deleted file mode 100644
index fabd2135a..000000000
--- a/site/docs/options/graphs/demos/mind-map/default.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * title: 基本用法
- * description:
- *  zh: 简单的展示1。
- *  en: 简单的展示。
- */
-import { MindMap, type MindMapOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: MindMapOptions = {
-    containerStyle: { height: '200px' },
-    autoFit: 'view',
-    data,
-    edge: { style: { endArrow: true } },
-    animation: false,
-  };
-  return <MindMap {...options} />;
-};
diff --git a/site/docs/options/graphs/demos/mind-map/direction.tsx b/site/docs/options/graphs/demos/mind-map/direction.tsx
deleted file mode 100644
index 4e8b8bef9..000000000
--- a/site/docs/options/graphs/demos/mind-map/direction.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { MindMap, type MindMapOptions } from '@ant-design/graphs';
-import React, { useState } from 'react';
-import { Radio, Divider } from 'antd';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const [direction, setDirection] = useState<MindMapOptions['direction']>('right');
-
-  const options: MindMapOptions = {
-    containerStyle: { height: '200px' },
-    direction,
-    autoFit: 'view',
-    edge: { style: { endArrow: true } },
-    data,
-    animation: false,
-  };
-  return <>
-    <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
-      <Radio.Button value="right">Right</Radio.Button>
-      <Radio.Button value="left">Left</Radio.Button>
-      <Radio.Button value="alternate">Alternate</Radio.Button>
-    </Radio.Group>
-    <Divider orientation="left" plain>
-      Preview
-    </Divider>
-    <MindMap {...options} />
-  </>;
-};
diff --git a/site/docs/options/graphs/demos/mind-map/type.tsx b/site/docs/options/graphs/demos/mind-map/type.tsx
deleted file mode 100644
index df9adbd34..000000000
--- a/site/docs/options/graphs/demos/mind-map/type.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { MindMap, type MindMapOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    { id: 'Regression', depth: 1 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-  ],
-};
-
-export default () => {
-  const options: MindMapOptions = {
-    containerStyle: { height: '200px' },
-    autoFit: 'view',
-    data,
-    animation: false,
-  };
-
-  return <>
-    <MindMap {...options} type='linear' padding={20} />
-    <MindMap {...options} type='boxed' />
-  </>;
-};
diff --git a/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx b/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx
deleted file mode 100644
index 39616d9fc..000000000
--- a/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { OrganizationChart, CollapseExpandIcon } from "@ant-design/graphs";
-import type { OrganizationChartOptions } from "@ant-design/graphs";
-import React from "react";
-
-const { ArrowCountIcon } = CollapseExpandIcon;
-
-const data = {
-  "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } }
-  ],
-  "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" }
-  ]
-}
-
-export default () => {
-  const options: OrganizationChartOptions = {
-    autoFit: 'view',
-    data,
-  };
-
-  const updateCollapseExpandBehavior = (options) => {
-    return (transforms) => [
-      ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'),
-      {
-        ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any),
-        ...options,
-      },
-    ]
-  }
-
-  return <div>
-    <OrganizationChart {...options} containerStyle={{ height: '320px', marginBottom: '16px' }} direction="horizontal" transforms={updateCollapseExpandBehavior({ enable: true, iconOffsetX: 12, })} />
-    <OrganizationChart {...options} containerStyle={{ height: '360px' }} direction="vertical" transforms={updateCollapseExpandBehavior({
-      enable: true,
-      iconRender: function (isCollapsed, data) {
-        return <ArrowCountIcon style={{ display: 'flex' }} graph={this} data={data} isCollapsed={isCollapsed} />;
-      },
-    })} />
-  </div>;
-}
diff --git a/site/docs/options/graphs/demos/organization-chart/custom-node.tsx b/site/docs/options/graphs/demos/organization-chart/custom-node.tsx
deleted file mode 100644
index e2ef020c4..000000000
--- a/site/docs/options/graphs/demos/organization-chart/custom-node.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { OrganizationChart, RCNode, type OrganizationChartOptions } from "@ant-design/graphs"
-import React from "react";
-
-const { OrganizationChartNode } = RCNode;
-
-const data = {
-  "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } }
-  ],
-  "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" }
-  ]
-}
-
-const CustomNode = ({ text }: { text: string }) => {
-  return <div style={{
-    height: 'inherit',
-    width: 'inherit',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: '8px',
-    backgroundColor: '#f7f0fe',
-    color: '#873bf4',
-    boxShadow: '0 0 0 2px #873bf4'
-  }}>{text}</div>
-}
-
-export default () => {
-  const options: OrganizationChartOptions = {
-    containerStyle: { height: '360px' },
-    direction: 'horizontal',
-    padding: [20, 0, 0, 80],
-    autoFit: 'view',
-    data,
-    node: {
-      style: {
-        component: (d) => {
-          const { name, position, status } = d.data || {};
-          return <OrganizationChartNode name={name} position={position} status={status} />;
-        },
-        size: [240, 80],
-      },
-    },
-    edge: {
-      style: {
-        radius: 16,
-        lineWidth: 2,
-        endArrow: true,
-      },
-    },
-    layout: {
-      type: 'antv-dagre',
-      nodesep: -10,
-      ranksep: 80,
-    },
-  };
-
-  const options2: OrganizationChartOptions = {
-    containerStyle: { height: '300px' },
-    direction: 'horizontal',
-    padding: [20, 0, 0, 60],
-    autoFit: 'view',
-    data,
-    node: {
-      style: {
-        component: (d) => <CustomNode text={d.data.name} />,
-        size: [120, 40],
-      },
-    },
-    edge: {
-      style: {
-        stroke: '#873bf4',
-        radius: 4,
-        lineWidth: 2,
-        endArrow: true,
-      },
-    },
-    layout: {
-      type: 'antv-dagre',
-      nodesep: -10,
-      ranksep: 80,
-    },
-  }
-
-  return <div>
-    <OrganizationChart {...options} />
-    <OrganizationChart {...options2} />
-  </div>;
-}
diff --git a/site/docs/options/graphs/demos/organization-chart/default.tsx b/site/docs/options/graphs/demos/organization-chart/default.tsx
deleted file mode 100644
index 942c8ba43..000000000
--- a/site/docs/options/graphs/demos/organization-chart/default.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { OrganizationChart, type OrganizationChartOptions } from "@ant-design/graphs"
-import React from "react";
-
-const data = {
-  "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } }
-  ],
-  "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" }
-  ]
-}
-
-export default () => {
-  const options: OrganizationChartOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data
-  };
-
-  return <OrganizationChart {...options} />;
-}
diff --git a/site/docs/options/graphs/demos/organization-chart/direction.tsx b/site/docs/options/graphs/demos/organization-chart/direction.tsx
deleted file mode 100644
index 4a4a4ced2..000000000
--- a/site/docs/options/graphs/demos/organization-chart/direction.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { OrganizationChart, type OrganizationChartOptions } from "@ant-design/graphs"
-import { Divider, Radio } from "antd";
-import React, { useState } from "react";
-
-const data = {
-  "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } }
-  ],
-  "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" }
-  ]
-}
-
-export default () => {
-  const [direction, setDirection] = useState<OrganizationChartOptions['direction']>('vertical');
-
-  const options: OrganizationChartOptions = {
-    containerStyle: { height: '320px' },
-    autoFit: 'view',
-    data,
-    direction
-  };
-
-  return <>
-    <Radio.Group value={direction} onChange={(e) => setDirection(e.target.value)}>
-      <Radio.Button value="vertical">Vertical</Radio.Button>
-      <Radio.Button value="horizontal">Horizontal</Radio.Button>
-    </Radio.Group>
-    <Divider orientation="left" plain>
-      Preview
-    </Divider>
-    <OrganizationChart {...options} />
-  </>;
-}
diff --git a/site/docs/options/graphs/dendrogram.en.md b/site/docs/options/graphs/dendrogram.en.md
index 8435e059b..602cb995c 100644
--- a/site/docs/options/graphs/dendrogram.en.md
+++ b/site/docs/options/graphs/dendrogram.en.md
@@ -19,25 +19,37 @@ It is suitable for displaying hierarchical data relationships, clarifying key po
 
 ## Examples
 
-<code id="demo-dendrogram-default" src="./demos/dendrogram/default.tsx" description="A simple demonstration.">Basic Usage</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/dendrogram/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/dendrogram/direction.tsx">Arrangement Direction</code>
+<code src="../graphs-demos/dendrogram/compact.tsx">Compact Mode</code>
+<code src="../graphs-demos/dendrogram/collapse-expand.tsx">Expand/Collapse Nodes</code>
 
-<code id="demo-dendrogram-direction" src="./demos/dendrogram/direction.tsx" description="Use the syntax sugar `direction` to set the arrangement of child nodes as `vertical` or `radial`. If `direction` is not set, the default is `horizontal`. Note that the label placement will adjust based on the `direction`, but if `node.style.labelPlacement` is set, it takes precedence.">Arrangement Direction</code>
+## API
 
-<code id="demo-dendrogram-compact" src="./demos/dendrogram/compact.tsx" description="Use the `compact` configuration for compact mode.">Compact Mode</code>
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
 
-<code id="demo-dendrogram-collapse-expand" src="./demos/dendrogram/collapse-expand.tsx" description="Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For more built-in interactions, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior).">Expand/Collapse Nodes</code>
+### Dendrogram
 
-## API
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| data | The dataset | [Data](#data) | - |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| direction | Syntactic sugar for setting the arrangement direction of tree nodes. When `layout.direction` is set, it will take precedence | `vertical` \| `horizontal` \| `radial` | `horizontal` |
+| compact | Whether to enable compact mode | boolean | false |
+| defaultExpandLevel | The default expansion level; if not specified, all levels will be expanded | number | - |
+| layout | Configuration for the dendrogram layout | [Layout](#layout) | - |
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+<embed src="../graphs-common/tree-data.en.md"></embed>
 
-### Dendrogram
+### Layout
+
+Dendrogram layout properties are as follows:
 
 | Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| direction | Syntax sugar to set the arrangement direction of tree nodes. When `layout.direction` is set, it takes precedence. | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` |
-| compact | Whether to enable compact mode | `boolean` | `false` |
-| layout | Tree layout configuration | [`DendrogramLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| type | Layout type | string | `dendrogram` |
+| direction | Layout direction | `LR` \| `RL` \| `TB` \| `BT` \| `H` \| `V` | `RL` |
+| nodeSep | Node separation | number | 40 |
+| rankSep | Separation between layers | number | 200 |
+| radial | Whether to arrange nodes in a radial layout. If `radial` is true, it is recommended to set `direction` to `LR` or `RL` |  |  |
diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md
index 3c02acb31..89072d6df 100644
--- a/site/docs/options/graphs/dendrogram.zh.md
+++ b/site/docs/options/graphs/dendrogram.zh.md
@@ -19,13 +19,11 @@ import { Dendrogram } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-dendrogram-default" src="./demos/dendrogram/default.tsx" description="简单的展示。">基本用法</code>
-
-<code id="demo-dendrogram-direction" src="./demos/dendrogram/direction.tsx" description="通过设置语法糖 `direction` 为 `vertical` `radial` 分别让子节点垂直、径向分布。若不设置 `direction`，则默认 `horizontal` 水平分布。注意，节点标签也会自动根据 `direction` 排布，当设置 `node.style.labelPlacement` 时会以后者为准">排布方向</code>
-
-<code id="demo-dendrogram-compact" src="./demos/dendrogram/compact.tsx" description="通过 `compact` 配置紧凑模式">紧凑模式</code>
-
-<code id="demo-dendrogram-collapse-expand" src="./demos/dendrogram/collapse-expand.tsx" description="添加 G6 内置 CollapseExpand 交互，双击触发展开/收起。更多 G6 内置交互请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior)。">展开/收起节点</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/dendrogram/default.tsx">基本用法</code>
+<code src="../graphs-demos/dendrogram/direction.tsx">排布方向</code>
+<code src="../graphs-demos/dendrogram/compact.tsx">紧凑模式</code>
+<code src="../graphs-demos/dendrogram/collapse-expand.tsx">展开/收起节点</code>
 
 ## API
 
@@ -35,9 +33,23 @@ import { Dendrogram } from '@ant-design/graphs';
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| direction | 语法糖，设置树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` |
-| compact | 是否为紧凑模式 | `boolean` | `false` |
-| layout | 树图布局配置 | [`DendrogramLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | 数据 | [Data](#data) | - |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
+| direction | 语法糖，设置树图节点的排布方向。当设置 layout.direction 时会以后者为准 | `vertical` \| `horizontal` \| `radial` | `horizontal` |
+| compact | 是否为紧凑模式 | boolean | false |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - |
+| layout | 生态树布局配置 | [Layout](#layout) | - |
+
+<embed src="../graphs-common/tree-data.zh.md"></embed>
+
+### Layout
+
+生态树布局，可配置的参数如下：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 布局类型 | string | `dendrogram` |
+| direction | 布局方向 | `LR` \| `RL` \| `TB` \| `BT` \| `H` \| `V` | `RL` |
+| nodeSep | 节点间距 | number | 40 |
+| rankSep | 层与层之间的间距 | number | 200 |
+| radial | 是否按照辐射状布局。若 radial 为 true，建议 direction 设置为 `LR` 或 `RL` |  |  |
diff --git a/site/docs/options/graphs/faq.en.md b/site/docs/options/graphs/faq.en.md
new file mode 100644
index 000000000..80dead262
--- /dev/null
+++ b/site/docs/options/graphs/faq.en.md
@@ -0,0 +1,49 @@
+---
+title: FAQ
+order: 9
+---
+
+### 1. How to Access the Graph Instance Outside of the Component?
+
+```jsx
+import { MindMap } from '@ant-design/graphs';
+
+export default () => {
+  const graphRef = useRef();
+
+  return <MindMap onReady={(ref) => (graphRef = ref.current)} />;
+};
+```
+
+For details on the Graph API, refer to the [G6 - API Documentation](https://g6.antv.antgroup.com/en/api/graph/method).
+
+---
+
+### 2. Does Graphs Support Customization?
+
+All custom extensions supported by G6 are also supported by Graphs, with the same implementation approach. For tutorials, refer to [G6 - Custom Extensions](https://g6.antv.antgroup.com/en/manual/custom-extension/element).
+
+```jsx
+import { MindMap, G6 } from '@ant-design/graphs';
+import { CustomNode } from 'package-name/or/path-to-your-custom-node';
+
+const { register, ExtensionCategory } = G6;
+
+register(ExtensionCategory.NODE, 'custom-node', CustomNode);
+
+export default () => {
+  return <MindMap node={{ type: 'custom-node' }} {...options} />;
+};
+```
+
+---
+
+### 3. How to Disable All Behaviors?
+
+```jsx
+import { MindMap } from '@ant-design/graphs';
+
+export default () => {
+  return <MindMap behaviors={[]} {...options} />;
+};
+```
diff --git a/site/docs/options/graphs/faq.zh.md b/site/docs/options/graphs/faq.zh.md
new file mode 100644
index 000000000..52907ed84
--- /dev/null
+++ b/site/docs/options/graphs/faq.zh.md
@@ -0,0 +1,45 @@
+---
+title: FAQ
+order: 9
+---
+
+### 1.如何在组件外获取图实例？
+
+```jsx
+import { MindMap } from '@ant-design/graphs';
+
+export default () => {
+  const graphRef = useRef();
+
+  return <MindMap onReady={(ref) => (graphRef = ref.current)} />;
+};
+```
+
+Graph API 可参考 [G6 - API 列表](https://g6.antv.antgroup.com/api/graph/method)。
+
+### 2. Graphs 支持自定义吗？
+
+所有 G6 支持的自定义扩展，Graphs 同样支持，并且写法与 G6 一致，教程可参考 [G6 - 自定义扩展](https://g6.antv.antgroup.com/manual/custom-extension/element)。
+
+```jsx
+import { MindMap, G6 } from '@ant-design/graphs';
+import { CustomNode } from 'package-name/or/path-to-your-custom-node';
+
+const { register, ExtensionCategory }= G6;
+
+register(ExtensionCategory.NODE, 'custom-node', CustomNode);
+
+export default () => {
+  return <MindMap node={ type: 'custom-node' } {...options} />;
+};
+```
+
+### 3. 如何禁用所有交互
+
+```jsx
+import { MindMap } from '@ant-design/graphs';
+
+export default () => {
+  return <MindMap behaviors={[]} {...options} />;
+};
+```
diff --git a/site/docs/options/graphs/fishbone.en.md b/site/docs/options/graphs/fishbone.en.md
index de7e89d46..ca1e4f06a 100644
--- a/site/docs/options/graphs/fishbone.en.md
+++ b/site/docs/options/graphs/fishbone.en.md
@@ -4,6 +4,7 @@ type: Graph
 usage: relation
 title: Fishbone
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*olIATZ-4qMEAAAAAAAAAAAAADmJ7AQ/original
+order: 2
 ---
 
 The Fishbone diagram, also known as the Ishikawa diagram, is a systematic graphical tool for analyzing the root causes of problems. By breaking a problem down into various factors, it assists in identifying and resolving issues.
@@ -20,20 +21,35 @@ The basic principle of the Fishbone method is to identify the main causes of a p
 
 ## Examples
 
-<code id="default" src="./demos/fishbone/default.tsx" description="Cause-type fishbone diagram (with the head on the right), used for analyzing problems.">Cause-type Fishbone Diagram</code>
-
-<code id="decision" src="./demos/fishbone/decision.tsx" description="Decision-type fishbone diagram (with the head on the left), used for solving problems.">Decision-type Fishbone Diagram</code>
-
-<code id="layout" src="./demos/fishbone/layout.tsx" description="Adjust the position of the fishbone branches.">Adjust Layout Parameters</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/fishbone/default.tsx">Cause-type Fishbone Diagram</code>
+<code src="../graphs-demos/fishbone/decision.tsx">Decision-type Fishbone Diagram</code>
+<code src="../graphs-demos/fishbone/layout.tsx">Adjust Layout Parameters</code>
 
 ## API
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
+
+### Fishbone
 
 | Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| type | The type of the fishbone diagram | `'cause'` \| `'decision'` | `'cause'` |
-| layout | Configuration for the layout of the fishbone diagram | [`FishboneLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/fishbone) | `{ type: 'fishbone' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | The dataset | [Data](#data) | - |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| type | Type of fishbone diagram | `cause` \| `decision` | `cause` |
+| defaultExpandLevel | The default expansion level; if not specified, all levels will be expanded | number | - |
+| layout | Fishbone layout configuration | [Layout](#layout) | - |
+
+<embed src="../graphs-common/tree-data.en.md"></embed>
+
+### Layout
+
+Layout for fishbone diagrams. Parameters are as follows:
+
+| Property  | Description                                       | Type                       | Default Value          |
+| --------- | ------------------------------------------------- | -------------------------- | ---------------------- |
+| type      | Layout type                                       | string                     | `fishbone`             |
+| direction | Arrangement direction                             | `RL` \| `LR`               | `RL`                   |
+| vGap      | Vertical gap                                      | number                     | Default is node height |
+| hGap      | Horizontal gap                                    | number                     | Default is node width  |
+| getRibSep | Function to set the spacing between fishbone ribs | (node: NodeData) => number | () => 60               |
diff --git a/site/docs/options/graphs/fishbone.zh.md b/site/docs/options/graphs/fishbone.zh.md
index ca66db575..dbd19d663 100644
--- a/site/docs/options/graphs/fishbone.zh.md
+++ b/site/docs/options/graphs/fishbone.zh.md
@@ -4,6 +4,7 @@ type: Graph
 usage: relation
 title: Fishbone 鱼骨图
 cover: https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*olIATZ-4qMEAAAAAAAAAAAAADmJ7AQ/original
+order: 2
 ---
 
 鱼骨图，又名石川图，用于系统地分析问题根本原因的图表工具，通过将问题分解为多个因素，帮助识别和解决问题。
@@ -20,20 +21,35 @@ import { Fishbone } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="default" src="./demos/fishbone/default.tsx" description="原因型鱼骨图（鱼头在右），用于分析问题。">原因型鱼骨图</code>
-
-<code id="decision" src="./demos/fishbone/decision.tsx" description="决策型鱼骨图（鱼头在左），用于解决问题。">决策型鱼骨图</code>
-
-<code id="layout" src="./demos/fishbone/layout.tsx" description="调整鱼骨分支位置。">调整布局参数</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/fishbone/default.tsx">原因型鱼骨图</code>
+<code src="../graphs-demos/fishbone/decision.tsx">决策型鱼骨图</code>
+<code src="../graphs-demos/fishbone/layout.tsx">调整布局参数</code>
 
 ## API
 
 通用配置参考：[图通用属性](./overview#图通用属性)
 
+### Fishbone
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 鱼骨图类型 | `'cause'` \| `'decision'` | `'cause'` |
-| layout | 鱼骨布局配置 | [`FishboneLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/fishbone) | `{ type: 'fishbone' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | 数据 | [Data](#data) | - |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
+| type | 鱼骨图类型 | `cause` \| `decision` | `cause` |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - |
+| layout | 布局配置 | [Layout](#layout) | - |
+
+<embed src="../graphs-common/tree-data.zh.md"></embed>
+
+### Layout
+
+鱼骨图布局。参数如下：
+
+| 属性      | 说明         | 类型                       | 默认值           |
+| --------- | ------------ | -------------------------- | ---------------- |
+| type      | 布局类型     | string                     | `fishbone`       |
+| direction | 排布方向     | `RL` \| `LR`               | `RL`             |
+| vGap      | 设置垂直间距 | number                     | 默认使用节点高度 |
+| hGap      | 设置水平间距 | number                     | 默认使用节点宽度 |
+| getRibSep | 设置鱼骨间距 | (node: NodeData) => number | () => 60         |
diff --git a/site/docs/options/graphs/flow-direction-graph.en.md b/site/docs/options/graphs/flow-direction-graph.en.md
index e4c4dbdef..72515f390 100644
--- a/site/docs/options/graphs/flow-direction-graph.en.md
+++ b/site/docs/options/graphs/flow-direction-graph.en.md
@@ -19,21 +19,24 @@ Ideal for complex information that requires clear logical relationships or decis
 
 ## Examples
 
-<code id="demo-flow-direction-graph-default" src="./demos/flow-direction-graph/default.tsx" description="A simple demonstration.<br> Adjust `edge.style.lineWidth` via the behavior `map-edge-line-width`. It includes the following properties:<br> - `value` (number or function to compute the value of the edge)<br> - `minValue` and `maxValue` (optional, minimum and maximum values, can be numbers or functions)<br> - `minLineWidth` and `maxLineWidth` (optional, minimum and maximum line widths, can be numbers or functions)<br> - `scale` (optional, interpolation function to map values to line widths, supports `'linear'`, `'log'`, `'pow'`, `'sqrt'`, and custom interpolation functions)">Basic Usage</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/flow-direction-graph/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx">Highlight Neighboring Elements</code>
+<code src="../graphs-demos/flow-direction-graph/hover-activate-chain.tsx">Highlight Element and Its Chain</code>
+<code src="../graphs-demos/flow-direction-graph/custom.tsx">Custom</code>
 
-<code id="demo-flow-direction-graph-hover-activate-neighbor" src="./demos/flow-direction-graph/hover-activate-neighbor.tsx" description="By adding the hover highlight behavior (registration type: `hover-activate-neighbors`), you can highlight the current element and its neighboring elements. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate).">Highlight Neighboring Elements</code>
+## API
 
-<code id="demo-flow-direction-graph-hover-activate-chain" src="./demos/flow-direction-graph/hover-activate-chain.tsx" description="By adding the hover highlight behavior (registration type: `hover-activate-chain`), you can highlight the current element and its entire chain. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate).">Highlight Element and Its Chain</code>
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
 
-<code id="demo-flow-direction-graph-custom" src="./demos/flow-direction-graph/custom.tsx">Custom</code>
+### FlowDirectionGraph
 
-## API
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| data | The dataset | [Data](#data) | - |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| layout | Dagre layout configuration | [Layout](#layout) | - |
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+<embed src="../graphs-common/graph-data.en.md"></embed>
 
-| Property  | Description | Type | Default Value |
-| ---       | ---         | ---  | ---           |
-| layout    | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
-| behaviors | Set user behavior events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+<embed src="../graphs-common/dagre-layout.en.md"></embed>
diff --git a/site/docs/options/graphs/flow-direction-graph.zh.md b/site/docs/options/graphs/flow-direction-graph.zh.md
index 79904b7b9..673a1b99a 100644
--- a/site/docs/options/graphs/flow-direction-graph.zh.md
+++ b/site/docs/options/graphs/flow-direction-graph.zh.md
@@ -19,21 +19,24 @@ import { FlowDirectionGraph } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-flow-direction-graph-default" src="./demos/flow-direction-graph/default.tsx" description="简单的展示。<br> 通过交互 `map-edge-line-width` 来调整 `edge.style.lineWidth`。包含以下属性：<br> - `value`（数值或函数，用于计算边的数值）<br> - `minValue` 和 `maxValue`（可选，最小值和最大值，可以是数值或函数）<br> - `minLineWidth` 和 `maxLineWidth`（可选，最小线宽和最大线宽，可以是数值或函数）<br> -  `scale`（可选，插值函数，用于将数值映射到线宽，支持 `'linear`'、'`log'`、`'pow'`、`'sqrt'` 和自定义插值函数）">基本用法</code>
-
-<code id="demo-flow-direction-graph-hover-activate-neighbor" src="./demos/flow-direction-graph/hover-activate-neighbor.tsx" description="通过添加悬浮高亮交互（注册类型：`hover-activate-neighbors`）可以高亮当前元素及其相邻元素。该交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。">高亮相邻元素</code>
-
-<code id="demo-flow-direction-graph-hover-activate-chain" src="./demos/flow-direction-graph/hover-activate-chain.tsx" description="通过添加悬浮高亮交互（注册类型：`hover-activate-chain`）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。">高亮元素及其所在链路</code>
-
-<code id="demo-flow-direction-graph-custom" src="./demos/flow-direction-graph/custom.tsx">自定义</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/flow-direction-graph/default.tsx">基本用法</code>
+<code src="../graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx">高亮相邻元素</code>
+<code src="../graphs-demos/flow-direction-graph/hover-activate-chain.tsx">高亮元素及其所在链路</code>
+<code src="../graphs-demos/flow-direction-graph/custom.tsx">自定义</code>
 
 ## API
 
 通用配置参考：[图通用属性](./overview#图通用属性)
 
+### FlowDirectionGraph
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| layout | AntV Dagre 布局配置 | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | 数据 | [Data](#data) | - |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
+| layout | Dagre 布局配置 | [Layout](#layout) | - |
+
+<embed src="../graphs-common/graph-data.zh.md"></embed>
+
+<embed src="../graphs-common/dagre-layout.zh.md"></embed>
diff --git a/site/docs/options/graphs/flow-graph.en.md b/site/docs/options/graphs/flow-graph.en.md
index ab36d955b..7b2c11367 100644
--- a/site/docs/options/graphs/flow-graph.en.md
+++ b/site/docs/options/graphs/flow-graph.en.md
@@ -23,19 +23,23 @@ A flowchart shows the entire process from start to finish. Each node represents
 
 ## Examples
 
-<code id="demo-flow-graph-default" src="./demos/flow-graph/default.tsx" description="A simple demonstration.">Basic Usage</code>
-
-<code id="demo-flow-graph-hover" src="./demos/flow-graph/hover-activate-chain.tsx" description="By adding hover-highlight interaction (registered as `hover-activate-chain`), elements and their associated chains are highlighted on hover.">Highlight Elements and Their Chains</code>
-
-<code id="demo-flow-graph-custom-node" src="./demos/flow-graph/custom-node.tsx" description="Customize nodes using `node.component`, which needs to be paired with `node.size` to work properly.">Custom Nodes</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/flow-graph/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/flow-graph/hover-activate-chain.tsx">Highlight Elements and Their Chains</code>
+<code src="../graphs-demos/flow-graph/custom-node.tsx">Custom Nodes</code>
 
 ## API
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
+
+### FlowGraph
 
 | Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| layout | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | The dataset | [Data](#data) | - |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| layout | Dagre layout configuration | [Layout](#layout) | - |
+
+<embed src="../graphs-common/graph-data.en.md"></embed>
+
+<embed src="../graphs-common/dagre-layout.en.md"></embed>
diff --git a/site/docs/options/graphs/flow-graph.zh.md b/site/docs/options/graphs/flow-graph.zh.md
index 11dbd4eb6..12332b1ec 100644
--- a/site/docs/options/graphs/flow-graph.zh.md
+++ b/site/docs/options/graphs/flow-graph.zh.md
@@ -23,19 +23,23 @@ import { FlowGraph } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-flow-graph-default" src="./demos/flow-graph/default.tsx" description="简单的展示。">基本用法</code>
-
-<code id="demo-flow-graph-hover" src="./demos/flow-graph/hover-activate-chain.tsx" description="通过添加悬浮高亮交互（注册类型：`hover-activate-chain`），可以高亮显示元素及其所在的链路。">高亮元素及其所在链路</code>
-
-<code id="demo-flow-graph-custom-node" src="./demos/flow-graph/custom-node.tsx" description="通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。">自定义节点</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/flow-graph/default.tsx">基本用法</code>
+<code src="../graphs-demos/flow-graph/hover-activate-chain.tsx">高亮元素及其所在链路</code>
+<code src="../graphs-demos/flow-graph/custom-node.tsx">自定义节点</code>
 
 ## API
 
 通用配置参考：[图通用属性](./overview#图通用属性)
 
+### FlowGraph
+
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| layout | AntV Dagre 布局配置 | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | 数据 | [Data](#data) | - |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
+| layout | Dagre 布局配置 | [Layout](#layout) | - |
+
+<embed src="../graphs-common/graph-data.zh.md"></embed>
+
+<embed src="../graphs-common/dagre-layout.zh.md"></embed>
diff --git a/site/docs/options/graphs/indented-tree.en.md b/site/docs/options/graphs/indented-tree.en.md
index 175412c53..352f49644 100644
--- a/site/docs/options/graphs/indented-tree.en.md
+++ b/site/docs/options/graphs/indented-tree.en.md
@@ -22,33 +22,43 @@ import { IndentedTree } from '@ant-design/graphs';
 
 ## Examples
 
-<code id="demo-indented-tree-default" src="./demos/indented-tree/default.tsx" description="A simple demonstration.">Basic Usage</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/indented-tree/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/indented-tree/type.tsx">Styles</code>
+<code src="../graphs-demos/indented-tree/direction.tsx">Child Node Distribution</code>
+<code src="../graphs-demos/indented-tree/custom-node.tsx">Custom Nodes</code>
+<code src="../graphs-demos/indented-tree/collapse-expand.tsx">Expand/Collapse Child Nodes</code>
+<code src="../graphs-demos/indented-tree/color.tsx">Set Branch Colors</code>
 
-<code id="demo-indented-tree-type" src="./demos/indented-tree/type.tsx" description="Use the `type` syntax sugar to apply preset styles: line style or boxed style.">Styles</code>
+## API
 
-<code id="demo-indented-tree-direction" src="./demos/indented-tree/direction.tsx" description="Set `direction` to `alternate` or `left` to distribute child nodes freely or to the left. If not set, the default is `right` (right distribution).">Child Node Distribution</code>
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
 
-<code id="demo-indented-tree-custom-node" src="./demos/indented-tree/custom-node.tsx" description="Customize nodes using `node.component`, which must be paired with `node.size` to take effect.">Custom Nodes</code>
+### IndentedTree
 
-<code id="demo-indented-tree-collapse-expand" src="./demos/indented-tree/collapse-expand.tsx" description="
-Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.<br> - `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` <br> - `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` <br> - `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` <br> - `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` <br> - `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon <br> - `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` <br> - `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` <br> - `iconClassName/iconStyle`: CSS class name and inline styles for the icon <br> - `refreshLayout`: Whether to refresh the layout after each collapse/expand operation
-">Expand/Collapse Child Nodes</code>
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| data | The dataset | [Data](#data) | - |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| type | Syntactic sugar for setting the display style. When `node.component` is set, it takes precedence | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction | Syntactic sugar for setting the arrangement direction of nodes. When `layout.direction` is set, it takes precedence | `'left'` \| `'right'` \| `'alternate'` | `'right'` |
+| nodeMinWidth | Minimum width of a node; if the text content is not enough, it will be centered | `number` | `0` |
+| nodeMaxWidth | Maximum width of a node; excess content will automatically wrap to the next line | `number` | `300` |
+| defaultExpandLevel | The default expansion level; if not specified, all levels will be expanded | number | - |
+| layout | Configuration for the indented tree layout | [Layout](#layout) | - |
 
-<code id="demo-indented-tree-color" src="./demos/indented-tree/color.tsx" description="`assign-color-by-branch` is a built-in data transformation step that allows you to assign different colors to branches by modifying `colors`.">Set Branch Colors</code>
+<embed src="../graphs-common/tree-data.en.md"></embed>
 
-## API
+### Layout
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
-
-### IndentedTree
+Indented tree layout, where the hierarchy of tree nodes is represented by horizontal indentation. Each element occupies a single line/column. Parameters are as follows:
 
-| Property      | Description | Type | Default Value |
-| ---           | ---         | ---  | ---           |
-| type          | Syntax sugar for setting the display style of the indented tree. When `node.component` is set, it takes precedence. | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
-| direction     | Syntax sugar for setting the node arrangement direction. When `layout.direction` is set, it takes precedence. | `'left'` \| `'right'` \| `'alternate'` | `'right'` |
-| nodeMinWidth  | Minimum node width in the indented tree | `number` | `0` |
-| nodeMaxWidth  | Maximum node width in the indented tree | `number` | `300` |
-| layout        | Indented tree layout configuration | [`IndentedLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/indented-layout) | `{ type: 'indented' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| type | Layout type | string | `indented` |
+| direction | Direction of the tree layout | `LR` \| `RL` \| `H` | `LR` |
+| indent | Spacing between columns. When the type is Number, the spacing is fixed; when the type is Function, the spacing between the node and the root node is the return value of the function | number \| (node: NodeData) => string | 20 |
+| getWidth | Width of each node, effective when `direction` is `H` | (node: NodeData) => number | Default is node width |
+| getHeight | Height of each node | (node: NodeData) => number | Default is node height |
+| getSide | Specifies whether nodes are arranged on the left/right side of the root node. If set, all nodes will be on the same side of the root node, making `direction = 'H'` ineffective. If this parameter is a callback function, it can specify whether each node is on the left/right side of the root node | (node: NodeData) => string | - |
+| dropCap | Whether the first child node of each node is positioned on the next line | boolean | true |
diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md
index dd6bbe7a7..112b19ef0 100644
--- a/site/docs/options/graphs/indented-tree.zh.md
+++ b/site/docs/options/graphs/indented-tree.zh.md
@@ -22,33 +22,43 @@ import { IndentedTree } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-indented-tree-default" src="./demos/indented-tree/default.tsx" description="简单的展示。">基本用法</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/indented-tree/default.tsx">基本用法</code>
+<code src="../graphs-demos/indented-tree/type.tsx">风格</code>
+<code src="../graphs-demos/indented-tree/direction.tsx">子节点分布</code>
+<code src="../graphs-demos/indented-tree/custom-node.tsx">自定义节点</code>
+<code src="../graphs-demos/indented-tree/collapse-expand.tsx">展开/收起子节点</code>
+<code src="../graphs-demos/indented-tree/color.tsx">设置分支颜色</code>
 
-<code id="demo-indented-tree-type" src="./demos/indented-tree/type.tsx" description="通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。">风格</code>
-
-<code id="demo-indented-tree-direction" src="./demos/indented-tree/direction.tsx" description="通过设置 `direction` 为 `alternate` `left` 分别让子节点自由、左侧分布。若不设置 `direction`，则默认 `right` 右侧分布。">子节点分布</code>
+## API
 
-<code id="demo-indented-tree-custom-node" src="./demos/indented-tree/custom-node.tsx" description="通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。">自定义节点</code>
+通用配置参考：[图通用属性](./overview#图通用属性)
 
-<code id="demo-indented-tree-collapse-expand" src="./demos/indented-tree/collapse-expand.tsx" description="
-通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。<br> - `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` <br> - `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` <br> - `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` <br> - `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` <br> - `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 <br> - `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` <br> - `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` <br> - `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 <br> - `refreshLayout`: 每次收起/展开节点后，是否刷新布局
-">展开/收起子节点</code>
+### IndentedTree
 
-<code id="demo-indented-tree-color" src="./demos/indented-tree/color.tsx" description="`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。">设置分支颜色</code>
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 数据 | [Data](#data) | - |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
+| type | 语法糖，设置展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction | 语法糖，设置节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'right'` |
+| nodeMinWidth | 节点的最小宽度，当文字内容不够时将居中显示 | `number` | `0` |
+| nodeMaxWidth | 节点的最大宽度，超出部分将自动换行 | `number` | `300` |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - |
+| layout | 缩进树布局配置 | [Layout](#layout) | - |
 
-## API
+<embed src="../graphs-common/tree-data.zh.md"></embed>
 
-通用配置参考：[图通用属性](./overview#图通用属性)
+### Layout
 
-### IndentedTree
+缩进树布局，树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。参数如下：
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 语法糖，设置缩进树图的展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
-| direction | 语法糖，设置缩进树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'right'` |
-| nodeMinWidth | 缩进树图节点的最小宽度，当文字内容不够时将居中显示 | `number` | `0` |
-| nodeMaxWidth | 缩进树图节点的最大宽度，超出部分将自动换行 | `number` | `300` |
-| layout | 缩进树布局配置 | [`IndentedLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/indented-layout) | `{ type: 'indented' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| type | 布局类型 | string | `indented` |
+| direction | 树布局的方向 | `LR` \| `RL` \| `H` | `LR` |
+| indent | 列间间距。类型为 Number 时，列间间距是固定值；类型为 Function 时，节点与根结点的间距是函数返回值 | number \| (node: NodeData) => string | 20 |
+| getWidth | 每个节点的宽度，direction 为 `H` 时有效 | (node: NodeData) => number | 默认使用节点宽度 |
+| getHeight | 每个节点的高度 | (node: NodeData) => number | 默认使用节点高度 |
+| getSide | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧 | (node: NodeData) => string | - |
+| dropCap | 每个节点的第一个自节点是否位于下一行 | boolean | true |
diff --git a/site/docs/options/graphs/mind-map.en.md b/site/docs/options/graphs/mind-map.en.md
index 79b47896b..44c4a7520 100644
--- a/site/docs/options/graphs/mind-map.en.md
+++ b/site/docs/options/graphs/mind-map.en.md
@@ -19,33 +19,43 @@ When information is complex or requires clear logical relationships, organize it
 
 ## Examples
 
-<code id="demo-mind-map-default" src="./demos/mind-map/default.tsx" description="A simple demonstration.">Basic Usage</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/mind-map/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/mind-map/type.tsx">Styles</code>
+<code src="../graphs-demos/mind-map/direction.tsx">Child Node Distribution</code>
+<code src="../graphs-demos/mind-map/custom-node.tsx">Custom Nodes</code>
+<code src="../graphs-demos/mind-map/collapse-expand.tsx">Collapse/Expand Child Nodes</code>
+<code src="../graphs-demos/mind-map/color.tsx">Set Branch Colors</code>
 
-<code id="demo-mind-map-type" src="./demos/mind-map/type.tsx" description="Use the `type` syntax to apply preset styles: linear style and boxed style.">Styles</code>
-
-<code id="demo-mind-map-direction" src="./demos/mind-map/direction.tsx" description="Set `direction` to `right` or `left` to distribute child nodes on the right or left. If `direction` is not set, the default is free distribution.">Child Node Distribution</code>
+## API
 
-<code id="demo-mind-map-custom-node" src="./demos/mind-map/custom-node.tsx" description="Customize nodes using `node.component`, in conjunction with `node.size`.">Custom Nodes</code>
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
 
-<code id="demo-mind-map-collapse-expand" src="./demos/mind-map/collapse-expand.tsx" description="
-Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.<br> - `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` <br> - `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` <br> - `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` <br> - `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` <br> - `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon <br> - `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` <br> - `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` <br> - `iconClassName/iconStyle`: CSS class name and inline styles for the icon <br> - `refreshLayout`: Whether to refresh the layout after each collapse/expand operation
-">Collapse/Expand Child Nodes</code>
+### MindMap
 
-<code id="demo-mind-map-color" src="./demos/mind-map/color.tsx" description="The `assign-color-by-branch` feature allows branch differentiation by modifying `colors` to assign different colors to the mind map branches.">Set Branch Colors</code>
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| data | The dataset | [Data](#data) | - |
+| layout | Configuration for setting the layout | [Layout](#layout) | - |
+| type | Syntactic sugar for setting the display style. When `node.component` is set, it takes precedence | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction | Syntactic sugar for setting the arrangement direction of nodes. When `layout.direction` is set, it takes precedence | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` |
+| nodeMinWidth | Minimum width of a node; if the text content is insufficient, it will be centered | `number` | `0` (`default` type) <br> `120` (`boxed` type) |
+| nodeMaxWidth | Maximum width of a node; excess content will automatically wrap to the next line | `number` | `300` |
+| defaultExpandLevel | The default expansion level; if not specified, all levels will be expanded | number | - |
 
-## API
+<embed src="../graphs-common/tree-data.en.md"></embed>
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+### Layout
 
-### MindMap
+Mind map layout, where nodes at the same depth are placed on the same level. Parameters are as follows:
 
-| Property | Description | Type | Default |
+| Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| type | Syntax sugar, sets the mind map's display style. If `node.component` is set, it takes precedence | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
-| direction | Syntax sugar, sets the layout direction of the mind map nodes. If `layout.direction` is set, it takes precedence | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` |
-| nodeMinWidth | Minimum width of the mind map nodes | `number` | `0` (`default` type) <br> `120` (`boxed` type) |
-| nodeMaxWidth | Maximum width of the mind map nodes | `number` | `300` |
-| layout | Mind map layout configuration | [`MindmapLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| type | Layout type | string | `mindmap` |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| direction | Direction of the tree layout | `H` \| `V` | `H` |
+| getWidth | Width of each node | (node: NodeData) => number | Default is node height |
+| getHeight | Height of each node | (node: NodeData) => number | Default is node width |
+| getHGap | Horizontal gap between each node | (node: NodeData) => number | - |
+| getVGap | Vertical gap between each node | (node: NodeData) => number | - |
+| getSide | Specifies whether nodes are arranged on the left/right side of the root node. If set, all nodes will be on the same side of the root node, making `direction = 'H'` ineffective. If this parameter is a callback function, it can specify whether each node is on the left/right side of the root node. | (node: NodeData) => string | - |
diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md
index da004b879..b418ff2dc 100644
--- a/site/docs/options/graphs/mind-map.zh.md
+++ b/site/docs/options/graphs/mind-map.zh.md
@@ -19,33 +19,43 @@ import { MindMap } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-mind-map-default" src="./demos/mind-map/default.tsx">基本用法</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/mind-map/default.tsx">基本用法</code>
+<code src="../graphs-demos/mind-map/type.tsx">风格</code>
+<code src="../graphs-demos/mind-map/direction.tsx">节点分布</code>
+<code src="../graphs-demos/mind-map/collapse-expand.tsx">展开/收起子节点</code>
+<code src="../graphs-demos/mind-map/color.tsx">设置分支颜色</code>
+<code src="../graphs-demos/mind-map/custom-node.tsx">自定义节点</code>
 
-<code id="demo-mind-map-type" src="./demos/mind-map/type.tsx" description="通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。">风格</code>
-
-<code id="demo-mind-map-direction" src="./demos/mind-map/direction.tsx" description="通过设置 `direction` 为 `right` `left` 分别让子节点右侧、左侧分布。若不设置 `direction`，则默认自由分布。">子节点分布</code>
+## API
 
-<code id="demo-mind-map-custom-node" src="./demos/mind-map/custom-node.tsx" description="通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。">自定义节点</code>
+通用配置参考：[图通用属性](./overview#图通用属性)
 
-<code id="demo-mind-map-collapse-expand" src="./demos/mind-map/collapse-expand.tsx" description="
-通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。<br> - `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` <br> - `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` <br> - `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` <br> - `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` <br> - `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 <br> - `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` <br> - `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` <br> - `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 <br> - `refreshLayout`: 每次收起/展开节点后，是否刷新布局
-">展开/收起子节点</code>
+### MindMap
 
-<code id="demo-mind-map-color" src="./demos/mind-map/color.tsx" description="`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。">设置分支颜色</code>
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| data | 数据 | [Data](#data) | - |
+| layout | 设置布局配置 | [Layout](#layout) | - |
+| type | 语法糖，设置展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
+| direction | 语法糖，设置节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` |
+| nodeMinWidth | 节点的最小宽度，当文字内容不足时将居中显示 | `number` | `0` (`default` 类型) <br> `120` (`boxed` 类型) |
+| nodeMaxWidth | 节点的最大宽度，超出部分将自动换行 | `number` | `300` |
+| defaultExpandLevel | 默认展开层级，若不指定，将展开全部 | number | - |
 
-## API
+<embed src="../graphs-common/tree-data.zh.md"></embed>
 
-通用配置参考：[图通用属性](./overview#图通用属性)
+### Layout
 
-### MindMap
+脑图布局，深度相同的节点将会被放置在同一层。参数如下：
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 语法糖，设置思维导图的展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` |
-| direction | 语法糖，设置思维导图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` |
-| nodeMinWidth | 思维导图节点的最小宽度，当文字内容不足时将居中显示 | `number` | `0` (`default` 类型) <br> `120` (`boxed` 类型) |
-| nodeMaxWidth | 思维导图节点的最大宽度，超出部分将自动换行 | `number` | `300` |
-| layout | 思维导图布局配置 | [`MindmapLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| type | 布局类型 | string | `mindmap` |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
+| direction | 树布局的方向 | `H` \| `V` | `H` |
+| getWidth | 每个节点的宽度 | (node: NodeData) => number | 默认使用节点高度 |
+| getHeight | 每个节点的高度 | (node: NodeData) => number | 默认使用节点宽度 |
+| getHGap | 每个节点的水平间隙 | (node: NodeData) => number | - |
+| getVGap | 每个节点的垂直间隙 | (node: NodeData) => number | - |
+| getSide | 节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 | (node: NodeData) => string | - |
diff --git a/site/docs/options/graphs/network-graph.en.md b/site/docs/options/graphs/network-graph.en.md
index 17aeda8df..280fdee01 100644
--- a/site/docs/options/graphs/network-graph.en.md
+++ b/site/docs/options/graphs/network-graph.en.md
@@ -19,19 +19,22 @@ Use when you need to visualize nodes and their relationships in a complex networ
 
 ## Examples
 
-<code id="demo-network-graph-default" src="./demos/network-graph/default.tsx" description="A simple demonstration.">Basic Usage</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/network-graph/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/network-graph/label.tsx">Node Labels</code>
+<code src="../graphs-demos/network-graph/node-importance.tsx">Node Importance</code>
 
-<code id="demo-network-graph-label" src="./demos/network-graph/label.tsx" description="Display node labels. By default, three lines of text are shown, with the full content displayed on hover.">Node Labels</code>
+## API
 
-<code id="demo-network-graph-node-importance" src="./demos/network-graph/node-importance.tsx" description="Map node importance to node size. Click [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) for more configuration options.">Node Importance</code>
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
 
-## API
+### NetworkGraph
+
+| 属性   | 说明                          | 类型              | 默认值 |
+| ------ | ----------------------------- | ----------------- | ------ |
+| data   | The dataset                   | [Data](#data)     | -      |
+| layout | D3 Force layout configuration | [Layout](#layout) | -      |
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+<embed src="../graphs-common/graph-data.en.md"></embed>
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| layout | D3 Force layout configuration | [`D3ForceLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+<embed src="../graphs-common/d3-force-layout.en.md"></embed>
diff --git a/site/docs/options/graphs/network-graph.zh.md b/site/docs/options/graphs/network-graph.zh.md
index f8d48bea8..0bf0fbc32 100644
--- a/site/docs/options/graphs/network-graph.zh.md
+++ b/site/docs/options/graphs/network-graph.zh.md
@@ -19,19 +19,22 @@ import { NetworkGraph } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-network-graph-default" src="./demos/network-graph/default.tsx" description="简单的展示。">基本用法</code>
-
-<code id="demo-network-graph-label" src="./demos/network-graph/label.tsx" description="展示节点标签，默认显示三行文字，鼠标悬浮时显示全部内容。">节点标签</code>
-
-<code id="demo-network-graph-node-importance" src="./demos/network-graph/node-importance.tsx" description="根据节点重要性映射到节点大小，点击[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size)查看更多配置项">节点重要性</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/network-graph/default.tsx">基本用法</code>
+<code src="../graphs-demos/network-graph/label.tsx">节点标签</code>
+<code src="../graphs-demos/network-graph/node-importance.tsx">节点重要性</code>
 
 ## API
 
 通用配置参考：[图通用属性](./overview#图通用属性)
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| layout | D3 Force 布局配置 | [`D3ForceLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+### NetworkGraph
+
+| 属性   | 说明              | 类型              | 默认值 |
+| ------ | ----------------- | ----------------- | ------ |
+| data   | 数据              | [Data](#data)     | -      |
+| layout | D3 Force 布局配置 | [Layout](#layout) | -      |
+
+<embed src="../graphs-common/graph-data.zh.md"></embed>
+
+<embed src="../graphs-common/d3-force-layout.zh.md"></embed>
diff --git a/site/docs/options/graphs/organization-chart.en.md b/site/docs/options/graphs/organization-chart.en.md
index 178bfa3b2..ce4b52dbf 100644
--- a/site/docs/options/graphs/organization-chart.en.md
+++ b/site/docs/options/graphs/organization-chart.en.md
@@ -22,26 +22,25 @@ import { OrganizationChart } from '@ant-design/graphs';
 
 ## Examples
 
-<code id="demo-org-chart-default" src="./demos/organization-chart/default.tsx" description="A simple demonstration.">Basic Usage</code>
-
-<code id="demo-org-chart-direction" src="./demos/organization-chart/direction.tsx" description="Set `direction` to `vertical` for top-down or `horizontal` for left-right layout. The default is vertical.">Node Layout</code>
-
-<code id="demo-org-chart-custom-node" src="./demos/organization-chart/custom-node.tsx" description="Render the chart using custom React nodes. The example uses the built-in `OrganizationChartNode`, but you can develop your own RC component for specific needs.">Custom Nodes</code>
-
-<code id="demo-org-chart-collapse-expand" src="./demos/organization-chart/collapse-expand.tsx" description="
-Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.<br> - `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` <br> - `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` <br> - `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` <br> - `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` <br> - `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon <br> - `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` <br> - `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` <br> - `iconClassName/iconStyle`: CSS class name and inline styles for the icon <br> - `refreshLayout`: Whether to refresh the layout after each collapse/expand operation
-">Collapse/Expand Child Nodes</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/organization-chart/default.tsx">Basic Usage</code>
+<code src="../graphs-demos/organization-chart/direction.tsx">Node Layout</code>
+<code src="../graphs-demos/organization-chart/custom-node.tsx">Custom Nodes</code>
+<code src="../graphs-demos/organization-chart/collapse-expand.tsx">Collapse/Expand Child Nodes</code>
 
 ## API
 
-Common props ref: [Common Graph Properties](./overview#common-graph-properties)
+For general graph properties, refer to: [General Graph Properties](./overview#general-graph-properties)
 
 ### OrganizationChart
 
-| Property | Description | Type | Default |
+| Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| direction | Syntax sugar for node layout direction. Takes precedence over `layout.rankdir` if set | `'vertical'` \| `'horizontal'` | `'vertical'` |
-| layout | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
-| behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins   | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| data | The dataset | [Data](#data) | - |
+| labelField | Specifies the node label content <br> - Select a field from the data, and the corresponding field value will be used as the node label <br> - Dynamically generated: this function will be called with node data as a parameter, and its return value will be used as the node label | string \| ((node: NodeData) => string) | Node ID |
+| direction | Syntactic sugar for setting the arrangement direction of tree nodes. When `layout.rankdir` is set, it will take precedence | `vertical` \| `horizontal` | `vertical` |
+| layout | Dagre layout configuration | [Layout](#layout) | - |
+
+<embed src="../graphs-common/graph-data.en.md"></embed>
+
+<embed src="../graphs-common/dagre-layout.en.md"></embed>
diff --git a/site/docs/options/graphs/organization-chart.zh.md b/site/docs/options/graphs/organization-chart.zh.md
index 2291175da..91f49078d 100644
--- a/site/docs/options/graphs/organization-chart.zh.md
+++ b/site/docs/options/graphs/organization-chart.zh.md
@@ -22,15 +22,11 @@ import { OrganizationChart } from '@ant-design/graphs';
 
 ## 代码演示
 
-<code id="demo-org-chart-default" src="./demos/organization-chart/default.tsx" description="简单的展示。">基本用法</code>
-
-<code id="demo-org-chart-direction" src="./demos/organization-chart/direction.tsx" description="通过设置 `direction` 为 `vertical` `horizontal` 分别让垂直（自上而下）、水平（自左而右）分布。若不设置 `direction`，则默认垂直分布。">节点排布</code>
-
-<code id="demo-org-chart-custom-node" src="./demos/organization-chart/custom-node.tsx" description="使用自定义的 React 节点进行图的渲染。此示例中使用了内置的 RC 组件 `OrganizationChartNode` 进行简单实现，你也可以自行开发 RC 组件以满足特定需求。">自定义节点</code>
-
-<code id="demo-org-chart-collapse-expand" src="./demos/organization-chart/collapse-expand.tsx" description="
-通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。<br> - `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` <br> - `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` <br> - `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` <br> - `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` <br> - `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 <br> - `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` <br> - `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` <br> - `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 <br> - `refreshLayout`: 每次收起/展开节点后，是否刷新布局
-">展开/收起子节点</code>
+<!-- prettier-ignore -->
+<code src="../graphs-demos/organization-chart/default.tsx">基本用法</code>
+<code src="../graphs-demos/organization-chart/direction.tsx">节点排布</code>
+<code src="../graphs-demos/organization-chart/custom-node.tsx">自定义节点</code>
+<code src="../graphs-demos/organization-chart/collapse-expand.tsx">展开/收起子节点</code>
 
 ## API
 
@@ -40,8 +36,11 @@ import { OrganizationChart } from '@ant-design/graphs';
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| data | 数据 | [Data](#data) | - |
+| labelField | 指定节点标签内容 <br> - 从数据中选择一个字段，对应字段的值作为节点的标签 <br> - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签 | string \| ((node: NodeData) => string) | 节点 ID |
 | direction | 语法糖，设置节点的排布方向。当设置 `layout.rankdir` 时会以后者为准 | `'vertical'` \| `'horizontal'` | `'vertical'` |
-| layout | AntV Dagre 布局配置 | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - |
+| layout | Dagre 布局配置 | [Layout](#layout) | - |
+
+<embed src="../graphs-common/graph-data.zh.md"></embed>
+
+<embed src="../graphs-common/dagre-layout.zh.md"></embed>
diff --git a/site/docs/options/graphs/overview.en.md b/site/docs/options/graphs/overview.en.md
index 6a2a3333e..66c2f963b 100644
--- a/site/docs/options/graphs/overview.en.md
+++ b/site/docs/options/graphs/overview.en.md
@@ -3,102 +3,269 @@ title: Overview
 order: 0
 ---
 
-`@ant-design/graphs` is a React component library meticulously built on top of [G6](https://g6.antv.antgroup.com/en/manual/introduction), designed to provide developers with an out-of-the-box solution for business applications with a "one graph, one action" approach, while maintaining feature parity with G6. This makes the integration of relational graphs simpler and more efficient.
+@ant-design/graphs is a React component library meticulously built on [G6](https://g6.antv.antgroup.com/en/manual/introduction). Its purpose is to provide developers with a collection of ready-to-use encapsulated "One Graph, One Action" components, while maintaining compatibility with G6 capabilities. This approach simplifies and streamlines the integration of relational graphs, making the process more efficient.
 
-> The graph components provided by this library come with a set of default configurations that cater to most common use cases. Users can easily modify these configurations through custom parameters to optimize rendering and meet specific business needs. However, for highly customized and complex scenarios, it is recommended to use G6 directly to fully leverage its powerful underlying functionality and flexibility.
+**Understanding "One Graph, One Action"**
 
-## Overview of Graph Components
+- **"One Graph"** refers to graph components tailored for specific business scenarios (e.g., mind maps, organizational charts, flowcharts).
+- **"One Action"** emphasizes the plug-and-play nature of these components. Users can directly select the appropriate graph component for their business needs and customize it with simple configurations.
 
-| Application Scenario | Graph Component | Demo | Example |
+For highly complex scenarios requiring deep customization, direct development using G6 is recommended to fully utilize its robust and flexible core functionalities.
+
+## Terminology
+
+Before delving into the usage of relational graphs, the following terms need to be understood:
+
+- **Graph**: The central entry point for visualizations, consisting of nodes (representing entities) and edges (representing relationships between entities) that form a complex network structure.
+- **Data**: The core of a graph. Its visualization and interactions are data-driven.
+- **Element**: The basic building blocks of a graph, including nodes (Node), edges (Edge), and combinations (Combo).
+- **Layout**: The arrangement of elements within a graph based on specified rules.
+- **Behavior**: A set of interactions between users and the canvas or elements, such as dragging, zooming, panning, and selecting.
+- **Plugin**: Extensions that enhance functionality, such as attaching additional graphical components or implementing undo-redo mechanisms.
+- **Transform**: Data transformations that process input data for rendering purposes, ensuring input data remains unaltered.
+
+## General Graph Properties
+
+> **Tips**: The following properties are common across `Graphs` components. Unsupported components will be explicitly noted.
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| data | The data to be visualized. For details, refer to [G6 - Core Concepts - Data](https://g6.antv.antgroup.com/en/manual/core-concept/data). | [GraphData](https://g6.antv.antgroup.com/en/api/reference/g6/graphdata) | - |
+| node | Nodes, supporting G6 built-in node types. For details, refer to [G6 - Core Concepts - Elements - Node](https://g6.antv.antgroup.com/en/manual/core-concept/element#node). | [NodeOptions](https://g6.antv.antgroup.com/en/api/reference/g6/nodeoptions) | - |
+| edge | Edges, supporting G6 built-in edge types. For details, refer to [G6 - Core Concepts - Elements - Edge](https://g6.antv.antgroup.com/en/manual/core-concept/element#edge). | [EdgeOptions](https://g6.antv.antgroup.com/en/api/reference/g6/edgeoptions) | - |
+| combo | Combos, supporting G6 built-in combo types. For details, refer to [G6 - Core Concepts - Elements - Combo](https://g6.antv.antgroup.com/en/manual/core-concept/element#combo). | [ComboOptions](https://g6.antv.antgroup.com/en/api/reference/g6/combooptions) | - |
+| layout | Layouts, supporting G6 built-in layouts. For details, refer to [G6 - Core Concepts - Layout](https://g6.antv.antgroup.com/en/manual/core-concept/layout). | Refer to the component documentation. | - |
+| behaviors | Behavior configurations. | [Behaviors](#behaviors) | - |
+| plugins | Plugin configurations. | [Plugins](#plugins) | - |
+| transforms | Data transformation settings. | [Data Transforms](#data-transforms) | - |
+| theme | Theme options. | `light` \| `dark` \| string | - |
+
+### Container Properties
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| containerStyle | Configures the style of the chart container, accepts an object containing CSS properties and values. | React.CSSProperties | - |
+| containerAttributes | Adds custom HTML attributes to the chart container. | Record<string, any> | - |
+| className | Adds a class name to the outermost wrapper of the component. | string | - |
+| loading | Indicates whether the chart is in a loading state. | boolean | false |
+| loadingTemplate | Custom loading template displayed when the chart is loading. | React.ReactElement | - |
+| errorTemplate | Custom error template. A function that returns error information when the chart encounters an error. | (e: Error) => React.ReactNode | - |
+
+### Canvas Properties
+
+| Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| Mind Map | `MindMap` | ![mind-map](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-mind-map) |
-| Dendrogram | `Dendrogram` | ![dendrogram](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-dendrogram) |
-| Indented Tree | `IndentedTree` | ![indented-tree](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-indented-tree) |
-| Organizational Chart | `OrganizationChart` | ![org-chart](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jgGCT7cMxg8AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-organization-chart) |
-| Flowchart | `FlowGraph` | ![flow-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-flow-graph) |
-| Flow Direction Graph | `FlowDirectionGraph` | ![flow-direction-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-flow-direction-graph) |
-| Network Graph | `NetworkGraph` | ![network-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original) | [Example](https://ant-design-charts.antgroup.com/en/examples#relations-network-graph) |
+| animation | Enables or disables global animations. When configured with animation settings, it uses those as the base configuration for global animations. For details, refer to [G6 - Core Concepts - Animation](https://g6.antv.antgroup.com/en/manual/core-concept/animation). | boolean \| [AnimationEffectTiming](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming) | - |
+| autoFit | Whether to automatically fit the view. | `view` \| `center` | - |
+| autoResize | Whether to automatically adjust the canvas size. | boolean | false |
+| background | The background color of the canvas. | string | - |
+| cursor | The pointer style. | [Cursor](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor) | - |
+| devicePixelRatio | The device pixel ratio. | number | - |
+| width | The width of the canvas. | number | - |
+| height | The height of the canvas. | number | - |
+| zoom | The zoom scale. | number | 1 |
+| zoomRange | The zoom range. | [number, number] | [0.01, 10] |
+| padding | The inner padding of the canvas, usually adjusts the canvas based on this padding when auto-fitting. | number \| number[] | - |
+| renderer | Gets the renderer. | (layer: `background` \| `main` \| `label` \| `transient`) => [IRenderer](https://g.antv.antgroup.com/api/canvas/options#renderer) | - |
+| rotation | The rotation angle of the canvas. | number | 0 |
 
-## Common Graph Properties
+---
+
+### Lifecycle Properties
 
-For general configuration reference: [Chart Container Properties](.overview#chart-container-properties)
+Defines callbacks that execute at specific stages of the graph's lifecycle.
 
 | Property | Description | Type | Default Value |
 | --- | --- | --- | --- |
-| autoFit | Whether to auto-fit the graph | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming)`}` <br> \| `{ type: 'center'; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming)`}` <br> \| `'view'` \| `'center'` | - |
-| animation | Enable or disable global animations. If animation config is provided, it enables animations and uses the config as the base. For more details on animations, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/animation) | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/en/api/reference/g6/viewportanimationeffecttiming) | - |
-| autoResize | Whether to automatically adjust the canvas size | `boolean` | `false` |
-| background | Background color of the canvas | `string` | - |
-| combo | Combo support, using G6 built-in Combos. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/element#combo) | [`ComboOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/combooptions) | - |
-| container | Canvas container | `string` \| [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) \| [`Canvas`](https://g.antv.antgroup.com/en/api/renderer/canvas) | - |
-| cursor | Cursor style | [`Cursor`](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) | - |
-| data | Graph data. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/data) | [`GraphData`](https://g6.antv.antgroup.com/en/api/reference/g6/graphdata) | - |
-| devicePixelRatio | Device pixel ratio | `number` | - |
-| edge | Edge configuration, using G6 built-in edges. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/element#edge) | [`EdgeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/edgeoptions) | - |
-| height | Canvas height | `number` | - |
-| layout | Graph layout configuration, using G6 built-in layouts. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/layout) | [`LayoutOptions`](https://g6.antv.antgroup.com/en/examples#layout-force-directed) \| `LayoutOptions[]` | - |
-| node | Node configuration, using G6 built-in nodes. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/element#node) | [`NodeOptions`](https://g6.antv.antgroup.com/en/api/reference/g6/nodeoptions) | - |
-| padding | Canvas padding, usually applied during auto-fitting based on padding | `number` \| `number[]` | - |
-| renderer | Access renderer | `(layer: 'background' \| 'main' \| 'label' \| 'transient') =>`[`IRenderer`](https://g.antv.antgroup.com/en/api/canvas/options#renderer) | - |
-| rotation | Rotation angle | `number` | `0` |
-| theme | Theme | `'light'` \| `'dark'` \| `string` | - |
-| width | Canvas width | `number` | - |
-| x | Viewport x-coordinate | `number` | - |
-| y | Viewport y-coordinate | `number` | - |
-| zoom | Zoom scale | `number` | `1` |
-| zoomRange | Zoom range | `[number, number]` | `[0.01, 10]` |
-| behaviors | Set user interaction events, also supports G6 built-in interactions. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | See component |
-| plugins | Set canvas plugins to handle rendering logic and additional components. Also supports G6 built-in plugins. For more details, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in transformers. For more details, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | See component |
-| onDestroy | Callback executed after the graph is destroyed (`graph.destroy()`) | `() => void` | - |
-| onInit | Callback executed after the graph is initialized (`new Graph()`) | `(graph:`[`Graph`](https://g6.antv.antgroup.com/en/api/reference/g6/graph)`) => void` | - |
-| onReady | Callback executed after the graph is rendered (`graph.render()`) | `(graph:`[`Graph`](https://g6.antv.antgroup.com/en/api/reference/g6/graph)`) => void` | - |
-
-## Customization
-
-To meet diverse needs, users can extend the standard graph components to implement custom relationship graphs.
-
-#### Update Basic Configurations
-
-Except for interactions, plugins, and data transformations, all other graph configuration options can be directly customized.
-
-```js
+| onDestroy | Callback executed after the graph is destroyed (i.e., after `graph.destroy()` is called). | () => void | - |
+| onInit | Callback executed after the graph is initialized (i.e., after `new Graph()` is called). | (graph: [Graph](https://g6.antv.antgroup.com/en/api/reference/g6/graph)) => void | - |
+| onReady | Callback executed after the graph is rendered (i.e., after `graph.render()` is called). | (graph: [Graph](https://g6.antv.antgroup.com/en/api/reference/g6/graph)) => void | - |
+
+## Behaviors
+
+Behaviors refer to a series of actions users can take on the canvas and elements, such as dragging, zooming, panning, and selecting. These interactions enhance the intuitiveness of extracting information from the graph.
+
+**Type Definition**: `BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])`
+
+By default, the `zoom-canvas` (zoom canvas) and `drag-canvas` (drag canvas) interactions are enabled. For additional interactions, extra configuration is required.
+
+Behaviors can be defined as either a static array or a dynamic function:
+
+- **Static Array**: Declare all required interactions directly.
+- **(👍 Recommended)** Dynamic Function: Dynamically add or adjust interactions based on existing behaviors.
+
+```jsx
+import { MindMap } from '@ant-design/graphs';
+
+export default () => {
+  // Static array example
+  const behaviors = ['zoom-canvas', { type: 'drag-canvas', direction: 'x' }];
+
+  // Dynamic function example
+  const dynamicBehaviors = (existingBehaviors) => {
+    // console.log(existingBehaviors); 👉 [{ key: 'zoom-canvas', type: 'zoom-canvas' }, { key: 'drag-canvas', type: 'drag-canvas' }]
+    return [...existingBehaviors, { type: 'click-select' /* properties */ }];
+  };
+
+  return <MindMap behaviors={behaviors /** or dynamicBehaviors **/} />;
+};
+```
+
+Supports all interactions provided by G6. Below is a brief overview of some built-in interactions, with more details available in [G6 - Core Concepts - Interactions](https://g6.antv.antgroup.com/en/manual/core-concept/behavior):
+
+- [Brush Select](https://g6.antv.antgroup.com/en/api/behaviors/brush-select): Box selection
+- [Click Element](https://g6.antv.antgroup.com/en/api/behaviors/click-select): Click to select
+- [Collapse Expand](https://g6.antv.antgroup.com/en/api/behaviors/collapse-expand): Expand/Collapse
+- [Create Edge](https://g6.antv.antgroup.com/en/api/behaviors/create-edge): Create edge
+- [Drag Canvas](https://g6.antv.antgroup.com/en/api/behaviors/drag-canvas): Drag canvas
+- [Drag Element](https://g6.antv.antgroup.com/en/api/behaviors/drag-element): Drag element
+- [Focus Element](https://g6.antv.antgroup.com/en/api/behaviors/focus-element): Focus element
+- [Hover Element](https://g6.antv.antgroup.com/en/api/behaviors/hover-activate): Hover over element
+- [Lasso Select](https://g6.antv.antgroup.com/en/api/behaviors/lasso-select): Lasso selection
+- [Zoom Canvas](https://g6.antv.antgroup.com/en/api/behaviors/zoom-canvas): Zoom canvas
+
+If the built-in interactions do not meet specific needs, custom interactions can be created following the tutorial on [G6 - Custom Interactions](https://g6.antv.antgroup.com/en/manual/custom-extension/behavior).
+
+Additionally, Graphs also provides a set of interaction extensions.
+
+| Extension | Register Type | Description | Applicable Scenarios |  |
+| --- | --- | --- | --- | --- |
+| HoverActivateChain | `hover-activate-chain` | Hovering to activate the node and its linked elements. | All graph types | [Configuration](https://g6.antv.antgroup.com/en/api/behaviors/hover-activate) |
+| HoverActivateNeighbors | `hover-activate-neighbors` | Hovering to highlight adjacent nodes and edges. | All graph types | [Configuration](https://g6.antv.antgroup.com/en/api/behaviors/hover-activate) |
+
+### HoverActivateChain
+
+**Purpose**: When the user hovers over a node or edge, this interaction highlights the hovered node or edge and its directly connected links (upstream and downstream paths). It is commonly used to emphasize paths in network structures, aiding users in quickly analyzing link relationships.
+
+**Configuration**: Same as [G6 - Behavior - HoverActivate](https://g6.antv.antgroup.com/en/api/behaviors/hover-activate).
+
+### HoverActivateNeighbors
+
+**Purpose**: When hovering over an element, this interaction highlights directly adjacent elements, helping users quickly understand the local context of the element.
+
+**Configuration**: Same as [G6 - Behavior - HoverActivate](https://g6.antv.antgroup.com/en/api/behaviors/hover-activate).
+
+## Data Transforms
+
+Data processing (Transforms) is used to manipulate the input data provided by the user. These transformations only affect the data as rendered and do not alter the original input data.
+
+**Type Definition**: `TransformOptions[] | (existingTransforms: TransformOptions[]) => TransformOptions[]`
+
+Transforms can be defined in two ways:
+
+- Static array: explicitly specify all required transformers.
+- **(👍 Recommended)** Dynamic function: dynamically generate a new array of transformers based on the existing array.
+
+```jsx
 import { MindMap } from '@ant-design/graphs';
 
 export default () => {
-  const options = {
-    autoFit: 'view',
-    edge: {
-      style: {
-        lineWidth: 3,
-      },
-    },
+  // Static array approach
+  const transforms = [
+    { type: 'assign-color-by-branch' /* properties */ },
+    { type: 'map-edge-line-width' /* properties */ },
+  ];
+
+  // Dynamic function approach
+  const dynamicTransforms = (existingTransforms) => {
+    return [...existingTransforms, { type: 'arrange-edge-z-index' /* properties */ }];
   };
-  return <MindMap {...options} />;
+
+  return <MindMap transforms={transforms /** or dynamicTransforms **/} />;
 };
 ```
 
-#### Update Interactions/Plugins/Data Transformations
+All data transforms provided by G6 are supported. For a list of built-in transforms, please refer to [G6 - API - Data Transform](https://g6.antv.antgroup.com/en/api/transforms/map-node-size).
+
+Additionally, Graphs also provide various data processing options.
+
+| Extension | Registration Type | Description | Applicable Scenarios |  |
+| --- | --- | --- | --- | --- |
+| TranslateReactNodeOrigin | `translate-react-node-origin` | Adjusts the React node origin from top-left to center | All graph types | [Configuration](#translatereactnodeorigin) |
+| CollapseExpandReactNode | `collapse-expand-react-node` | Collapse/expand React nodes | All graph types | [Configuration](#collapseexpandreactnode) |
+| AssignColorByBranch | `assign-color-by-branch` | Assign colors to nodes based on the branch they belong to | MindMap, IndentedTree, Fishbone | [Configuration](#assigncolorbybranch) |
+| ArrangeEdgeZIndex | `arrange-edge-z-index` | Adjusts the z-index of edges | IndentedTree, Fishbone | [Configuration](#arrangeedgezindex) |
+| MapEdgeLineWidth | `map-edge-line-width` | Adjusts the width of edges | FlowDirectionGraph | [Configuration](#mapedgelinewidth) |
+
+### TranslateReactNodeOrigin
 
-> The following explanation on how to update plugins also applies to interactions and data transformations.
+**Purpose**: Since the default origin of React nodes is at the top-left corner, which may not align with the expected layout, this transformation moves the origin to the center of the node using offset values `dx` and `dy`.
 
-When configuring plugins, special attention should be paid to how they are added. To ensure that new functionality can be added without affecting the existing default plugins, we introduce a 🔔 specific plugin update strategy.
+### CollapseExpandReactNode
+
+**Purpose**: Implements the ability to collapse and expand child nodes of React nodes. This functionality is only valid for React node types. The collapse/expand behavior is controlled by associating side effects with the node.
+
+**Configuration**:
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| enable | Enables the collapse/expand functionality | boolean \| ((data: NodeData) => boolean) | true |
+| trigger | Specifies the element that triggers node collapse/expand | `icon` \| `node` \| HTMLElement | `icon` |
+| direction | Specifies whether to collapse/expand neighbors in a specified direction: <br> - `in`: Predecessor nodes <br> - `out`: Successor nodes <br> - `both`: Both predecessor and successor nodes | `in` \| `out` \| `both` | `out` |
+| iconType | Built-in icon options | `plus-minus` \| `arrow-count` | - |
+| iconRender | Render function to customize collapse/expand icons. Takes property `isCollapsed` (whether the node is collapsed) and `data` (node data), returning a custom icon | (this: Graph, isCollapsed: boolean, data: NodeData) => React.ReactNode | - |
+| iconPlacement | Specifies the icon’s relative position to the node | `left` \| `right` \| `top` \| `bottom` \| ((this: Graph, data: NodeData) => CardinalPlacement) | `bottom` |
+| iconOffsetX | Specifies the horizontal offset of the icon relative to the node | number \| ((this: Graph, data: NodeData) => number) | 0 |
+| iconOffsetY | Specifies the vertical offset of the icon relative to the node | number \| ((this: Graph, data: NodeData) => number) | 0 |
+| iconClassName | Specifies the CSS class for the icon | string | - |
+| iconStyle | Specifies the inline style for the icon | React.CSSProperties | {} |
+| refreshLayout | Whether to refresh the layout after collapsing/expanding nodes | boolean | false |
 
-Specifically, this involves extending the existing plugin list through a higher-order function, rather than directly replacing it. This function accepts the current graph instance (`this: Graph`) and the existing plugin configuration (`plugins: PluginOptions`) as parameters, and returns a new array of plugin configurations.
+### AssignColorByBranch
 
-Here’s a concrete example showing how to add a mini-map plugin to a mind map:
+**Purpose**: Assigns colors to branches within a tree diagram to enhance visual distinction within logical branches or hierarchical structures.
 
-```js
+**Configuration**:
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| colors | Color palette | string[] | `['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F']` |
+
+### ArrangeEdgeZIndex
+
+**Purpose**: Adjusts the z-index of edges to optimize layer rendering, preventing edges from being obscured or unclear. Commonly used in tree diagrams alongside `assign-color-by-branch`.
+
+### MapEdgeLineWidth
+
+**Purpose**: Dynamically adjusts the width of edges based on their attributes (such as weight), making the graph more intuitive.
+
+**Configuration**:
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| **(Required)** value | Specifies the edge’s line width | number \| ((this: Graph, data: EdgeData) => number) | - |
+| minValue | Minimum line width | number \| ((data: EdgeData, edges: Record<ID, number>) => number) | - |
+| maxValue | Maximum line width | number \| ((data: EdgeData, edges: Record<ID, number>) => number) | - |
+| minLineWidth | Minimum threshold for line width mapping | number \| ((data: EdgeData) => number) | 1 |
+| maxLineWidth | Maximum threshold for line width mapping | number \| ((data: EdgeData) => number) | 10 |
+| scale | Mapping function or scale for line width (supports linear, logarithmic, etc.) | `linear` \| `log` \| `pow` \| `sqrt` \| ((value: number, domain: [number, number], range: [number, number]) => number) | `linear` |
+
+## Plugins
+
+Plugins are used to manage the rendering logic of the canvas and additional component rendering, such as embedding graphic components or enabling undo/redo features on the canvas.
+
+**Type Definition**: `PluginOptions[] | ((existingPlugins: PluginOptions[]) => PluginOptions[])`
+
+Plugins can be defined as either a static array or a dynamic function:
+
+- Static array: explicitly list the required plugins.
+- **(👍 Recommended)** Dynamic function: dynamically adjust the plugin list based on existing plugins.
+
+```jsx
 import { MindMap } from '@ant-design/graphs';
 
 export default () => {
-  const options = {
-    plugins: (existingPlugins) => [
-      ...existingPlugins, // Retain all existing plugins
-      { type: 'minimap', key: 'minimap' }, // Add the mini-map plugin
-    ],
+  // Static array approach
+  const plugins = [{ type: 'minimap' /* properties */ }];
+
+  // Dynamic function approach
+  const dynamicTransforms = (existingPlugins) => {
+    // console.log(existingPlugins); 👉 []
+    return [...existingPlugins, { type: 'minimap' /* properties */ }];
   };
 
-  return <MindMap {...options} />;
+  return <MindMap plugins={plugins /** or dynamicPlugins **/} />;
 };
 ```
+
+All built-in plugins from G6 are supported. For a list of plugins, refer to [G6 - API - Plugins](https://g6.antv.antgroup.com/en/api/plugins/background).
diff --git a/site/docs/options/graphs/overview.zh.md b/site/docs/options/graphs/overview.zh.md
index 2011702b9..928802d65 100644
--- a/site/docs/options/graphs/overview.zh.md
+++ b/site/docs/options/graphs/overview.zh.md
@@ -3,96 +3,263 @@ title: 总览
 order: 0
 ---
 
-`@ant-design/graphs` 是基于 [G6](https://g6.antv.antgroup.com/manual/introduction) 精心打造的 React 组件库，旨在为开发者提供一套直接可用于业务的 “一图一做” 封装，同时保持 G6 能力同步，让关系图集成变得更加简单、高效。
+@ant-design/graphs 是基于 [G6](https://g6.antv.antgroup.com/manual/introduction) 精心打造的 React 组件库，旨在为开发者提供一套直接可用于业务的 “一图一做” 封装，同时保持 G6 能力同步，让关系图集成变得更加简单、高效。
 
-> 该库提供的图组件会在内部维护一套默认配置，能够满足大多数常见场景的需求。用户可以通过自定义传参轻松修改这些配置，来优化渲染效果，贴合特定业务需求。然而，针对需深度定制的复杂场景，推荐使用 G6 直接开发，充分利用其底层强大的功能与灵活性。
+**如何理解 “一图一做”？**
+
+“一图” 指的是特定业务场景（如思维导图、组织结构图、流程图等）量身定制的图组件，“一做” 则强调了这种封装是即拿即用的，用户不再需要从零开始搭建，只需根据业务场景选择对应的图组件，并可能通过简单的配置调整即可满足需求。
+
+但对于需要深度定制化的复杂场景，推荐使用 G6 直接开发，充分利用其底层强大的功能与灵活性。
+
+## 术语定义
+
+在深入了解关系图用法之前，我们需要了解以下术语：
+
+- graph：图的统一入口，由节点（代表实体）和边（代表实体间的关系）构成的复杂网络结构。
+- data：数据是图表的核心，图表的展示和交互都是基于数据驱动的。
+- element：作为基本构成单元，包括节点(Node)、边(Edge)、组合(Combo)。
+- layout：布局，将图中的元素按照一定的规则进行排列。
+- behavior：交互，用户与画布、元素之间的一系列行为操作，例如拖拽、缩放、平移、选中等。
+- plugin：插件，用于扩展能力，例如在画布中额外挂载图形组件、实现撤销重做等功能。
+- transform：数据转换，对用户输入数据进行处理，最终会影响渲染数据，但用户输入数据不受污染。
 
 ## 图通用属性
 
-> Tips: 以下通用属性适用于 graphs 组件，不支持的组件会单独说明。
+> Tips: 以下通用属性适用于 Graphs 组件，不支持的组件会单独说明。
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| containerStyle | 配置图表容器的样式，接受一个包含 CSS 属性和值的对象 | `React.CSSProperties` | - |
-| containerAttributes | 为图表容器添加自定义的 HTML 属性 | `Record<string, any>` | - |
-| className | 添加在组件最外层的 className | `string` | - |
-| loading | 表示图表是否处于加载状态 | `boolean` | `false` |
-| loadingTemplate | 自定义加载模板，当图表加载时显示的元素 | `React.ReactElement` | - |
-| errorTemplate | 自定义错误模板，当图表出错时调用的函数，返回显示的错误信息 | `(e: Error) => React.ReactNode` | - |
-| autoFit | 是否自动适应 | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6.antv.antgroup.com/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming)`}` <br> \| `{ type: 'center'; animation?:` [`ViewportAnimationEffectTiming`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming)`}` <br> \| `'view'` \| `'center'` | - |
-| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置。关于动画的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/animation) | `boolean` \| [`AnimationEffectTiming`](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - |
-| autoResize | 是否自动调整画布大小 | `boolean` | `false` |
-| background | 画布背景色 | `string` | - |
-| combo | Combo，支持 G6 内置 Combo。关于 Combo 的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E7%BB%84%E5%90%88) | [`ComboOptions`](https://g6.antv.antgroup.com/api/reference/g6/combooptions) | - |
-| container | 画布容器 | `string` \| [`HTMLElement`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement) \| [`Canvas`](https://g.antv.antgroup.com/api/renderer/canvas) | - |
-| cursor | 指针样式 | [`Cursor`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor) | - |
-| data | 数据。关于图数据的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/data) | [`GraphData`](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - |
-| devicePixelRatio | 设备像素比 | `number` | - |
-| edge | 边，支持 G6 内置边。关于边的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%BE%B9) | [`EdgeOptions`](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - |
-| height | 画布高度 | `number` | - |
-| layout | 布局，支持 G6 内置布局。关于图布局的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/layout) | [`LayoutOptions`](https://g6.antv.antgroup.com/examples#layout-force-directed) \| `LayoutOptions[]` | - |
-| node | 节点，支持 G6 内置节点。关于节点的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%8A%82%E7%82%B9) | [`NodeOptions`](https://g6.antv.antgroup.com/api/reference/g6/nodeoptions) | - |
-| padding | 画布内边距，通常在自适应时，会根据内边距进行适配 | `number` \| `number[]` | - |
-| renderer | 获取渲染器 | `(layer: 'background' \| 'main' \| 'label' \| 'transient') =>`[`IRenderer`](https://g.antv.antgroup.com/api/canvas/options#renderer) | - |
-| rotation | 旋转角度 | `number` | `0` |
-| theme | 主题 | `'light'` \| `'dark'` \| `string` | - |
-| width | 画布宽度 | `number` | - |
-| x | 视口 x 坐标 | `number` | - |
-| y | 视口 y 坐标 | `number` | - |
-| zoom | 缩放比例 | `number` | `1` |
-| zoomRange | 缩放范围 | `[number, number]` | `[0.01, 10]` |
-| behaviors | 设置用户交互事件，同样支持 G6 内置交互。关于交互的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | 组件中查看 |
-| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件。关于插件的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - |
-| transforms | 设置数据转换器，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器。关于数据转换的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | 组件中查看 |
-| onDestroy | 当图销毁后（即 `graph.destroy()` 之后）执行回调 | `() => void` | - |
-| onInit | 当图初始化完成后（即 `new Graph()` 之后）执行回调 | `(graph:`[`Graph`](https://g6.antv.antgroup.com/api/reference/g6/graph)`) => void` | - |
-| onReady | 当图渲染完成后（即 `graph.render()` 之后）执行回调 | `(graph:`[`Graph`](https://g6.antv.antgroup.com/api/reference/g6/graph)`) => void` | - |
-
-## 定制需求
-
-为了满足多样化需求，用户可以在标准图组件基础上进行扩展，实现自定义关系图。
-
-#### 更新基本配置
-
-除了交互、插件、数据转换以外，其他图配置项都可以直接配置。
-
-```js
+| data | 数据。关于图数据的详细说明，请参考 [G6 - 核心概念 - 数据](https://g6.antv.antgroup.com/manual/core-concept/data) | [GraphData](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - |
+| node | 节点，支持 G6 内置节点。关于节点的详细说明，请参考 [G6 - 核心概念 - 元素 - 节点](https://g6.antv.antgroup.com/manual/core-concept/element#节点) | [NodeOptions](https://g6.antv.antgroup.com/api/reference/g6/nodeoptions) | - |
+| edge | 边，支持 G6 内置边。关于边的详细说明，请参考 [G6 - 核心概念 - 元素 - 边](https://g6.antv.antgroup.com/manual/core-concept/element#边) | [EdgeOptions](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - |
+| combo | Combo，支持 G6 内置 Combo。关于 Combo 的详细说明，请参考 [G6 - 核心概念 - 元素 - 组合](https://g6.antv.antgroup.com/manual/core-concept/element#组合) | [ComboOptions](https://g6.antv.antgroup.com/api/reference/g6/combooptions) | - |
+| layout | 布局，支持 G6 内置布局。关于图布局的详细说明，请参考 [G6 - 核心概念 - 布局](https://g6.antv.antgroup.com/manual/core-concept/layout) | 组件内查看 | - |
+| behaviors | 设置用户交互事件 | [交互 Behavior](#交互-behavior) | - |
+| plugins | 设置插件 | [插件 Plugin](#插件-plugin) | - |
+| transforms | 设置数据处理 | [数据处理 Transform](#数据处理-transform) | - |
+| theme | 主题 | `light` \| `dark` \| string | - |
+
+### 容器属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| containerStyle | 配置图表容器的样式，接受一个包含 CSS 属性和值的对象 | React.CSSProperties | - |
+| containerAttributes | 为图表容器添加自定义的 HTML 属性 | Record<string, any> | - |
+| className | 添加在组件最外层的 className | string | - |
+| loading | 表示图表是否处于加载状态 | boolean | false |
+| loadingTemplate | 自定义加载模板，当图表加载时显示的元素 | React.ReactElement | - |
+| errorTemplate | 自定义错误模板，当图表出错时调用的函数，返回显示的错误信息 | (e: Error) => React.ReactNode | - |
+
+### 画布属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置。关于动画的详细说明，请参考 [G6 - 核心概念 - 动画](https://g6.antv.antgroup.com/manual/core-concept/animation) | boolean \| [AnimationEffectTiming](https://g6.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - |
+| autoFit | 是否自动适应 | `view` \| `center` | - |
+| autoResize | 是否自动调整画布大小 | boolean | false |
+| background | 画布背景色 | string | - |
+| cursor | 指针样式 | [Cursor](https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor) | - |
+| devicePixelRatio | 设备像素比 | number | - |
+| width | 画布宽度 | number | - |
+| height | 画布高度 | number | - |
+| zoom | 缩放比例 | number | 1 |
+| zoomRange | 缩放范围 | [number, number] | [0.01, 10] |
+| padding | 画布内边距，通常在自适应时，会根据内边距进行适配 | number \| number[] | - |
+| renderer | 获取渲染器 | (layer: `background` \| `main` \| `label` \| `transient`) =>[IRenderer](https://g.antv.antgroup.com/api/canvas/options#renderer) | - |
+| rotation | 旋转角度 | number | 0 |
+
+### 生命周期属性
+
+定义在图的不同生命周期阶段执行特定的回调。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| onDestroy | 当图销毁后（即 graph.destroy() 之后）执行回调 | () => void | - |
+| onInit | 当图初始化完成后（即 new Graph() 之后）执行回调 | (graph:[Graph](https://g6.antv.antgroup.com/api/reference/g6/graph)) => void | - |
+| onReady | 当图渲染完成后（即 graph.render() 之后）执行回调 | (graph:[Graph](https://g6.antv.antgroup.com/api/reference/g6/graph)) => void | - |
+
+## 交互 Behavior
+
+交互（Behaviors）指的是用户与画布及元素间的一系列操作，如拖拽、缩放、平移和选择等。这些交互方式增强了用户从图表中获取信息的直观性。
+
+**类型定义**：`BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])`
+
+默认情况下，`zoom-canvas`（缩放画布）和 `drag-canvas`（拖拽画布）交互是开启的。若需其他交互方式，则需进行额外配置。
+
+Behavior 可定义为静态数组或动态函数：
+
+- 静态数组：直接声明所有需要的交互方式。
+- **（👍 推荐）** 动态函数：基于现有交互数组，动态添加或调整。
+
+```jsx
+import { MindMap } from '@ant-design/graphs';
+
+export default () => {
+  // 静态数组形式
+  const behaviors = ['zoom-canvas', { type: 'drag-canvas', direction: 'x' }];
+
+  // 动态函数形式
+  const dynamicBehaviors = (existingBehaviors) => {
+    // console.log(existingBehaviors); 👉 [{ key: 'zoom-canvas', type: 'zoom-canvas' }, { key: 'drag-canvas', type: 'drag-canvas' }]
+    return [...existingBehaviors, { type: 'click-select' /* 参数 */ }];
+  };
+
+  return <MindMap behaviors={behaviors /** or dynamicBehaviors **/} />;
+};
+```
+
+支持 G6 提供的所有交互。以下是部分内置交互的简介，详情可参考 [G6 - 核心概念 - 交互](https://g6.antv.antgroup.com/manual/core-concept/behavior)：
+
+- [Brush Select](https://g6.antv.antgroup.com/api/behaviors/brush-select)：框选
+- [Click Element](https://g6.antv.antgroup.com/api/behaviors/click-select)：单击选中
+- [Collapse Expand](https://g6.antv.antgroup.com/api/behaviors/collapse-expand)：展开收起
+- [Create Edge](https://g6.antv.antgroup.com/api/behaviors/create-edge)：创建边
+- [Drag Canvas](https://g6.antv.antgroup.com/api/behaviors/drag-canvas)：拖拽画布
+- [Drag Element](https://g6.antv.antgroup.com/api/behaviors/drag-element)：拖拽元素
+- [Focus Element](https://g6.antv.antgroup.com/api/behaviors/focus-element)：聚焦元素
+- [Hover Element](https://g6.antv.antgroup.com/api/behaviors/hover-activate)：悬停元素
+- [Lasso Select](https://g6.antv.antgroup.com/api/behaviors/lasso-select)：套索选择
+- [Zoom Canvas](https://g6.antv.antgroup.com/api/behaviors/zoom-canvas)：缩放画布
+
+若内置交互无法满足特定需求，还可根据 [G6 - 自定义交互](https://g6.antv.antgroup.com/manual/custom-extension/behavior) 教程来自定义交互。
+
+此外，Graphs 也提供了一系列交互。
+
+| 扩展 | 注册类型 | 描述 | 适用场景 |  |
+| --- | --- | --- | --- | --- |
+| HoverActivateChain | `hover-activate-chain` | 鼠标悬停激活节点及其链路 | 所有图类型 | [配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate) |
+| HoverActivateNeighbors | `hover-activate-neighbors` | 鼠标悬停高亮邻接的节点和边 | 所有图类型 | [配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate) |
+
+### HoverActivateChain
+
+**用途：** 当用户将鼠标悬停在一个节点或边上时，高亮该节点或边以及其直接关联的链路（上下游路径）。该交互常用于突出显示网络结构中的路径，帮助用户快速分析链路关系。
+
+**配置项：** 同 [G6 - Behavior - HoverActivate](https://g6.antv.antgroup.com/api/behaviors/hover-activate) 配置项。
+
+### HoverActivateNeighbors
+
+**用途：** 鼠标悬停时，高亮与当前节点或边直接邻接的元素，帮助用户快速理解元素的局部上下文。
+
+**配置项：** 同 [G6 - Behavior - HoverActivate](https://g6.antv.antgroup.com/api/behaviors/hover-activate) 配置项。
+
+## 数据处理 Transform
+
+数据处理 (Transforms) 用于对用户输入数据进行处理。这种转换只会影响渲染数据，原始输入数据始终保持不变。
+
+**类型定义**：`TransformOptions[] | (existingTransforms: TransformOptions[]) => TransformOptions[]`
+
+Transform 可定义为静态数组或动态函数：
+
+- 静态数组：明确列出所有需要的转换器。
+- **（👍 推荐）** 动态函数：基于现有转换器数组，动态生成新的转换器数组。
+
+```jsx
 import { MindMap } from '@ant-design/graphs';
 
 export default () => {
-  const options = {
-    autoFit: 'view',
-    edge: {
-      style: {
-        lineWidth: 3,
-      },
-    },
+  // 静态数组形式
+  const transforms = [{ type: 'assign-color-by-branch' /* 参数 */ }, { type: 'map-edge-line-width' /* 参数 */ }];
+
+  // 动态函数形式
+  const dynamicTransforms = (existingTransforms) => {
+    return [...existingTransforms, { type: 'arrange-edge-z-index' /* 参数 */ }];
   };
-  return <MindMap {...options} />;
+
+  return <MindMap transforms={transforms /** or dynamicTransforms**/} />;
 };
 ```
 
-#### 更新交互/插件/数据转换配置
+支持 G6 提供的所有数据处理。内置数据处理列表请查看 [G6 - API - 数据转换](https://g6.antv.antgroup.com/api/transforms/map-node-size)。
+
+另外，Graphs 也提供了一系列数据处理。
+
+| 扩展 | 注册类型 | 描述 | 适用场景 |  |
+| --- | --- | --- | --- | --- |
+| TranslateReactNodeOrigin | `translate-react-node-origin` | 调整 React 节点原点，从左上调整成中心 | 所有图类型 | [配置项](#translatereactnodeorigin) |
+| CollapseExpandReactNode | `collapse-expand-react-node` | 折叠/展开 React 节点 | 所有图类型 | [配置项](#collapseexpandreactnode) |
+| AssignColorByBranch | `assign-color-by-branch` | 根据节点所在分支为节点分配颜色 | MindMap、IndentedTree、Fishbone | [配置项](#assigncolorbybranch) |
+| ArrangeEdgeZIndex | `arrange-edge-z-index` | 调整边的层级 | IndentedTree、Fishbone | [配置项](#arrangeedgezindex) |
+| MapEdgeLineWidth | `map-edge-line-width` | 调整边的描边宽度 | FlowDirectionGraph | [配置项](#mapedgelinewidth) |
+
+### TranslateReactNodeOrigin
+
+**用途：** 由于 React Node 默认原点位于左上角，与布局预期不符。通过调整偏移量 `dx` 和 `dy`，将原点设置为节点中心。
+
+### CollapseExpandReactNode
 
-> 详细讲解如何更新插件，该策略同样适用于交互与数据转换。
+**用途：** 用于实现 React 节点的子节点展开和收起功能。仅对 React 节点类型有效。通过为节点绑定副作用，控制其“展开/收起”行为。
 
-在进行插件配置时，需特别留意插件的添加方式。为了确保既能增添新的功能，又不影响原有预设插件的正常运行，我们引入了一种 🔔 特定的插件更新策略。
+**配置项：**
 
-具体来说，就是通过一个高阶函来对现有插件列表进行扩展，而不是直接替换。该函数接受当前图表实例（`this: Graph`）及现有插件配置（`plugins: PluginOptions`）作为参数，并返回一个新的插件配置数组。
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| enable | 是否启用收起/展开功能 | boolean \| ((data: NodeData) => boolean) | true |
+| trigger | 点击指定元素，触发节点收起/展开 | `icon` \| `node` \| HTMLElement | `icon` |
+| enable | 收起/展开指定方向上的邻居节点 <br> - `in`: 前驱节点 <br> - `out`: 后继节点 <br> - `both`: 前驱和后继节点 | `in` \| `out` \| `both` | `out` |
+| iconType | 内置图标语法糖 | `plus-minus` \| `arrow-count` | - |
+| iconRender | 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 | (this: Graph, isCollapsed: boolean, data: NodeData) => React.ReactNode | - |
+| iconPlacement | 图标相对于节点的位置 | `left` \| `right` \| `top` \| `bottom` \| ((this: Graph, data: NodeData) => CardinalPlacement) | `bottom` |
+| iconOffsetX | 图标相对于节点的水平偏移量 | number \| ((this: Graph, data: NodeData) => number) | 0 |
+| iconOffsetY | 图标相对于节点的垂直偏移量 | number \| ((this: Graph, data: NodeData) => number) | 0 |
+| iconClassName | 指定图标的 CSS 类名 | string | - |
+| iconStyle | 指定图标的内联样式 | React.CSSProperties | {} |
+| refreshLayout | 每次收起/展开节点后，是否刷新布局 | boolean | false |
+
+### AssignColorByBranch
+
+**用途：** 为树图中的分支分配颜色，有助于在逻辑分支或层级结构中增强视觉区分。
+
+**配置项：**
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| colors | 色板 | string[] | `['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F']` |
+
+### ArrangeEdgeZIndex
+
+**用途：** 调整边的 z-index 以优化渲染层次，避免边缘被遮挡或不清晰。常用于树图场景，配合 `assign-color-by-branch`使用。
+
+### MapEdgeLineWidth
+
+**用途：** 根据边的属性（如权重）动态调整其线宽，使图形信息表达更直观。
 
-以下是一个具体的示例，展示了如何在思维导图中添加小地图插件：
+**配置项：**
 
-```js
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| **(Required)** value | 指定边的线宽值 | number \| ((this: Graph, data: EdgeData) => number) | - |
+| minValue | 线宽的最小值 | number \| ((data: EdgeData, edges: Record<ID, number>) => number) | - |
+| maxValue | 线宽的最大值 | number \| ((data: EdgeData, edges: Record<ID, number>) => number) | - |
+| minLineWidth | 映射线宽的最小阈值 | number \| ((data: EdgeData) => number) | 1 |
+| maxLineWidth | 映射线宽的最大阈值 | number \| ((data: EdgeData) => number) | 10 |
+| scale | 线宽的映射函数或比例（支持线性、对数等变换） | `linear` \| `log` \| `pow` \| `sqrt` \| ((value: number, domain: [number, number], range: [number, number]) => number) | `linear` |
+
+## 插件 Plugin
+
+插件 (Plugin) 用于处理画布的渲染逻辑、额外组件渲染，例如在画布中额外挂载图形组件、实现撤销重做等功能。
+
+**类型定义**：`PluginOptions[] | ((existingPlugins: PluginOptions[]) => PluginOptions[])`
+
+Plugin 可定义为静态数组或动态函数：
+
+- 静态数组：明确列出所有需要的插件。
+- **（👍 推荐）** 动态函数：基于现有插件，动态新增或调整。
+
+```jsx
 import { MindMap } from '@ant-design/graphs';
 
 export default () => {
-  const options = {
-    plugins: (existingPlugins) => [
-      ...existingPlugins, // 保留原有的所有插件
-      { type: 'minimap', key: 'minimap' }, // 添加小地图插件
-    ],
+  // 静态数组形式
+  const plugins = [{ type: 'minimap' /* 参数 */ }];
+
+  // 动态函数形式
+  const dynamicTransforms = (existingPlugins) => {
+    // console.log(existingPlugins); 👉 []
+    return [...existingPlugins, { type: 'minimap' /* 参数 */ }];
   };
 
-  return <MindMap {...options} />;
+  return <MindMap plugins={plugins /** or existingPlugins**/} />;
 };
 ```
+
+支持 G6 的所有内置插件。内置插件列表请参考 [G6 - API - 插件](https://g6.antv.antgroup.com/api/plugins/background)。
diff --git a/site/package.json b/site/package.json
index df9dff40b..9dc6b6b51 100644
--- a/site/package.json
+++ b/site/package.json
@@ -44,7 +44,7 @@
   "dependencies": {
     "@ant-design/graphs": "workspace:*",
     "@ant-design/plots": "workspace:*",
-    "@antv/dumi-theme-antv": "^0.5.4",
+    "@antv/dumi-theme-antv": "0.5.5-beta.1",
     "antd": "^5.22.4",
     "dumi": "^2.4.16",
     "insert-css": "^2.0.0",