From 2de7b9a7f169f77686ad64bfa537e01b74559fe8 Mon Sep 17 00:00:00 2001
From: yvonneyx <zhuyuxin0627@gmail.com>
Date: Thu, 12 Dec 2024 15:47:14 +0800
Subject: [PATCH]  docs: optimize graphs docs

---
 site/.dumirc.ts                               |  18 +-
 site/docs/options/demos/components-list.tsx   | 245 ++++++++++--------
 .../graphs-common/option-behaviors.zh.md      |  22 ++
 .../options/graphs-common/option-data.zh.md   |  72 +++++
 .../graphs-common/option-plugins.zh.md        |   7 +
 .../graphs-demos/indented-tree/color.tsx      |  16 +-
 .../indented-tree/custom-node.tsx             |  48 +++-
 .../graphs-demos/indented-tree/default.tsx    |  16 +-
 .../graphs-demos/indented-tree/direction.tsx  |  44 ++--
 .../graphs-demos/indented-tree/type.tsx       |  16 +-
 .../graphs-demos/mind-map/collapse-expand.tsx |  63 +++--
 .../options/graphs-demos/mind-map/color.tsx   |  16 +-
 .../graphs-demos/mind-map/custom-node.tsx     |  56 ++--
 .../options/graphs-demos/mind-map/default.tsx |  22 +-
 .../graphs-demos/mind-map/direction.tsx       |  16 +-
 .../options/graphs-demos/mind-map/type.tsx    |  33 ++-
 site/docs/options/graphs/dendrogram.zh.md     |  30 ++-
 site/docs/options/graphs/faq.zh.md            |  45 ++++
 site/docs/options/graphs/fishbone.zh.md       |  33 ++-
 site/docs/options/graphs/mind-map.zh.md       |  28 +-
 site/docs/options/graphs/overview.zh.md       | 133 +++++-----
 21 files changed, 698 insertions(+), 281 deletions(-)
 create mode 100644 site/docs/options/graphs-common/option-behaviors.zh.md
 create mode 100644 site/docs/options/graphs-common/option-data.zh.md
 create mode 100644 site/docs/options/graphs-common/option-plugins.zh.md
 create mode 100644 site/docs/options/graphs/faq.zh.md

diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index e355888a4..48684485f 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -55,8 +55,8 @@ export default defineConfig({
       {
         slug: 'docs/options',
         title: {
-          zh: '选项',
-          en: 'Option',
+          zh: '组件',
+          en: 'Components',
         },
       },
       {
@@ -149,13 +149,21 @@ export default defineConfig({
         order: 10,
       },
       {
-        slug: 'options/graphs',
+        slug: 'options/graphs-concepts',
         title: {
-          zh: '关系图',
-          en: 'Relation Graph',
+          zh: '关系图概念',
+          en: 'Relation Graph Concepts',
         },
         order: 1,
       },
+      {
+        slug: 'options/graphs',
+        title: {
+          zh: '关系图组件',
+          en: 'Relation Graph Components',
+        },
+        order: 2,
+      },
     ],
     examples: [
       {
diff --git a/site/docs/options/demos/components-list.tsx b/site/docs/options/demos/components-list.tsx
index 4ebe89bf2..a89a7ba78 100644
--- a/site/docs/options/demos/components-list.tsx
+++ b/site/docs/options/demos/components-list.tsx
@@ -1,11 +1,11 @@
 /**
  * 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',
@@ -15,15 +15,15 @@ enum ChartType {
 const locales = {
   en: {
     [ChartType.PLOT]: 'Statistics',
-    [ChartType.GRAPH]: 'Relations'
+    [ChartType.GRAPH]: 'Relations',
   },
   zh: {
     [ChartType.PLOT]: '统计图',
-    [ChartType.GRAPH]: '关系图'
+    [ChartType.GRAPH]: '关系图',
   },
 };
 
-const URLS = ['/options/plots/special', '/options/graphs'];
+const URLS = ['/options/plots', '/options/graphs'];
 
 const StyledWrapper = styled.div`
   .filter-panel {
@@ -44,54 +44,65 @@ 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',
-}];
+.`;
+
+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;
@@ -100,19 +111,27 @@ export default () => {
   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 = 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 handleChange = (tag: string, checked: boolean) => {
     let nextSelectedUsages;
@@ -132,47 +151,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">
+            {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>
+  );
 };
diff --git a/site/docs/options/graphs-common/option-behaviors.zh.md b/site/docs/options/graphs-common/option-behaviors.zh.md
new file mode 100644
index 000000000..bd8657ef6
--- /dev/null
+++ b/site/docs/options/graphs-common/option-behaviors.zh.md
@@ -0,0 +1,22 @@
+### Behaviors
+
+交互（Behaviors）指的是用户与画布及元素间的一系列操作，如拖拽、缩放、平移和选择等。这些交互方式增强了用户从图表中获取信息的直观性。
+
+**类型定义**：`BehaviorOptions[] | ((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])`
+
+默认情况下，`zoom-canvas`（缩放画布）和 `drag-canvas`（拖拽画布）交互是开启的。若需其他交互方式，则需进行额外配置。
+
+支持 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) 教程来自定义交互。
diff --git a/site/docs/options/graphs-common/option-data.zh.md b/site/docs/options/graphs-common/option-data.zh.md
new file mode 100644
index 000000000..ea0f65822
--- /dev/null
+++ b/site/docs/options/graphs-common/option-data.zh.md
@@ -0,0 +1,72 @@
+### Data
+
+支持两种数据配置方式：
+
+1. **推荐**：使用树图数据（TreeData 格式）。通过内置函数，可将其转换为标准图格式数据。
+
+TreeData 类型定义：
+
+```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 },
+      ],
+    },
+  ],
+};
+```
+
+调用内置工具函数，将树图数据转换成标准的图数据。
+
+```jsx
+import React from 'react';
+import { G6, Fishbone } from '@ant-design/graphs';
+
+const { treeToGraphData } = G6;
+
+export default () => {
+  return <Fishbone data={treeToGraphData(data)} {...options} />;
+};
+```
+
+2. 直接使用标准图数据。若需开启“展开-收起”交互，需确保数据中包含 `children` 字段。
+
+```javascript
+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/option-plugins.zh.md b/site/docs/options/graphs-common/option-plugins.zh.md
new file mode 100644
index 000000000..0af72a7e6
--- /dev/null
+++ b/site/docs/options/graphs-common/option-plugins.zh.md
@@ -0,0 +1,7 @@
+### Plugins
+
+插件(Plugin)用于处理画布的渲染逻辑、额外组件渲染，例如在画布中额外挂载图形组件、实现撤销重做等功能。
+
+**类型定义**：`PluginOptions[] | ((existingPlugins: PluginOptions[]) => PluginOptions[])`
+
+支持 G6 的所有内置插件。内置插件列表请参考 [G6 - API - 插件](https://g6.antv.antgroup.com/api/plugins/background)。
diff --git a/site/docs/options/graphs-demos/indented-tree/color.tsx b/site/docs/options/graphs-demos/indented-tree/color.tsx
index 6bc3ab16e..7ed7da9e7 100644
--- a/site/docs/options/graphs-demos/indented-tree/color.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/color.tsx
@@ -4,12 +4,20 @@ import React from 'react';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -18,6 +26,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
diff --git a/site/docs/options/graphs-demos/indented-tree/custom-node.tsx b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
index 5140e9406..81c6bc247 100644
--- a/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx
@@ -4,12 +4,20 @@ import React from 'react';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -18,22 +26,34 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
 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>
-}
+  const prefix = text === 'Modeling Methods' ? '🔍 ' : '';
+  return (
+    <div
+      style={{
+        height: 'inherit',
+        width: 'inherit',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: '16px',
+        backgroundColor: '#f7f0fe',
+        color: '#873bf4',
+        boxShadow: '0 0 0 3px #873bf4',
+      }}
+    >
+      {prefix}
+      {text}
+    </div>
+  );
+};
 
 export default () => {
   const options: IndentedTreeOptions = {
diff --git a/site/docs/options/graphs-demos/indented-tree/default.tsx b/site/docs/options/graphs-demos/indented-tree/default.tsx
index 248409904..459e1b464 100644
--- a/site/docs/options/graphs-demos/indented-tree/default.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/default.tsx
@@ -4,12 +4,20 @@ import React from 'react';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -18,6 +26,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
diff --git a/site/docs/options/graphs-demos/indented-tree/direction.tsx b/site/docs/options/graphs-demos/indented-tree/direction.tsx
index a2e156d1a..e219b5bf0 100644
--- a/site/docs/options/graphs-demos/indented-tree/direction.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/direction.tsx
@@ -1,16 +1,24 @@
 import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs';
+import { Divider, Radio } from 'antd';
 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: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -19,6 +27,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
@@ -26,22 +38,24 @@ export default () => {
   const [direction, setDirection] = useState<IndentedTreeOptions['direction']>('right');
 
   const options: IndentedTreeOptions = {
-    containerStyle: { height: '320px' },
+    containerStyle: { height: '400px' },
     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} />
-  </>;
+  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
index d9926235d..fa3e87140 100644
--- a/site/docs/options/graphs-demos/indented-tree/type.tsx
+++ b/site/docs/options/graphs-demos/indented-tree/type.tsx
@@ -5,12 +5,20 @@ import { Flex } from 'antd';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -19,6 +27,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
diff --git a/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
index 2fc749f3e..23cdd1e93 100644
--- a/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
+++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx
@@ -1,4 +1,5 @@
-import { MindMap, CollapseExpandIcon, type MindMapOptions } from '@ant-design/graphs';
+import { CollapseExpandIcon, MindMap, type MindMapOptions } from '@ant-design/graphs';
+import { Divider } from 'antd';
 import React from 'react';
 
 const { PlusMinusIcon } = CollapseExpandIcon;
@@ -6,12 +7,21 @@ 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: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+      style: { collapsed: true },
+    },
+    { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -20,14 +30,17 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
 export default () => {
   const options: MindMapOptions = {
-    type: 'boxed',
+    type: 'linear',
     containerStyle: { height: '200px' },
-    padding: [50, 100],
     autoFit: 'view',
     data,
     animation: false,
@@ -37,19 +50,33 @@ export default () => {
     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),
+        ...(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,
-    })} />
-  </>;
+  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.tsx b/site/docs/options/graphs-demos/mind-map/color.tsx
index 008204436..af6bea6bb 100644
--- a/site/docs/options/graphs-demos/mind-map/color.tsx
+++ b/site/docs/options/graphs-demos/mind-map/color.tsx
@@ -4,12 +4,20 @@ import React from 'react';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -18,6 +26,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
diff --git a/site/docs/options/graphs-demos/mind-map/custom-node.tsx b/site/docs/options/graphs-demos/mind-map/custom-node.tsx
index 7b0d21045..eb8655c33 100644
--- a/site/docs/options/graphs-demos/mind-map/custom-node.tsx
+++ b/site/docs/options/graphs-demos/mind-map/custom-node.tsx
@@ -4,12 +4,20 @@ import React from 'react';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -18,28 +26,40 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
 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>
-}
+  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 = {
-    containerStyle: { height: '200px' },
-    autoFit: 'view',
-    padding: 20,
+    containerStyle: { height: '300px' },
+    background: '#F3F3F6',
     data,
     node: {
       style: {
@@ -48,7 +68,7 @@ export default () => {
       },
     },
     edge: {
-      style: { stroke: '#873bf4', endArrow: true },
+      style: { stroke: '#8B5DFF', endArrow: true },
     },
     animation: false,
   };
diff --git a/site/docs/options/graphs-demos/mind-map/default.tsx b/site/docs/options/graphs-demos/mind-map/default.tsx
index fabd2135a..7068e63de 100644
--- a/site/docs/options/graphs-demos/mind-map/default.tsx
+++ b/site/docs/options/graphs-demos/mind-map/default.tsx
@@ -1,21 +1,23 @@
-/**
- * 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: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -24,6 +26,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
diff --git a/site/docs/options/graphs-demos/mind-map/direction.tsx b/site/docs/options/graphs-demos/mind-map/direction.tsx
index 4e8b8bef9..966b60ec1 100644
--- a/site/docs/options/graphs-demos/mind-map/direction.tsx
+++ b/site/docs/options/graphs-demos/mind-map/direction.tsx
@@ -5,12 +5,20 @@ import { Radio, Divider } from 'antd';
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -19,6 +27,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
diff --git a/site/docs/options/graphs-demos/mind-map/type.tsx b/site/docs/options/graphs-demos/mind-map/type.tsx
index df9adbd34..7f9fc5604 100644
--- a/site/docs/options/graphs-demos/mind-map/type.tsx
+++ b/site/docs/options/graphs-demos/mind-map/type.tsx
@@ -1,15 +1,24 @@
 import { MindMap, type MindMapOptions } from '@ant-design/graphs';
+import { Divider } from 'antd';
 import React from 'react';
 
 const data = {
   nodes: [
     { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
+    {
+      id: 'Classification',
+      depth: 1,
+      children: ['Logistic regression', 'Linear discriminant analysis'],
+    },
     { 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 },
+    { id: 'Regression', depth: 1, children: ['Multiple linear regression', 'Partial least squares'] },
+    { id: 'Logistic regression', depth: 2 },
+    { id: 'Linear discriminant analysis', depth: 2 },
+    { id: 'Multiple linear regression', depth: 2 },
+    { id: 'Partial least squares', depth: 2 },
   ],
   edges: [
     { source: 'Modeling Methods', target: 'Classification' },
@@ -18,6 +27,10 @@ const data = {
     { source: 'Consensus', target: 'Models diversity' },
     { source: 'Consensus', target: 'Methods' },
     { source: 'Consensus', target: 'Common' },
+    { source: 'Classification', target: 'Logistic regression' },
+    { source: 'Classification', target: 'Linear discriminant analysis' },
+    { source: 'Regression', target: 'Multiple linear regression' },
+    { source: 'Regression', target: 'Partial least squares' },
   ],
 };
 
@@ -29,8 +42,16 @@ export default () => {
     animation: false,
   };
 
-  return <>
-    <MindMap {...options} type='linear' padding={20} />
-    <MindMap {...options} type='boxed' />
-  </>;
+  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/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md
index 0098e4c04..42be4a8e7 100644
--- a/site/docs/options/graphs/dendrogram.zh.md
+++ b/site/docs/options/graphs/dendrogram.zh.md
@@ -33,9 +33,27 @@ 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[])` | - |
+| direction | 语法糖，设置树图节点的排布方向。当设置 layout.direction 时会以后者为准 | `vertical` \| `horizontal` \| `radial` | `horizontal` |
+| compact | 是否为紧凑模式 | boolean | false |
+| data | 设置数据 | [Data](#data) | - |
+| layout | 设置布局配置 | [Layout](#layout) | - |
+| behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | - |
+| plugins | 设置画布插件 | [Plugins](#plugins) | - |
+
+<embed src="../graphs-common/option-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` |  |  |
+
+<embed src="../graphs-common/option-behaviors.zh.md"></embed>
+
+<embed src="../graphs-common/option-plugins.zh.md"></embed>
diff --git a/site/docs/options/graphs/faq.zh.md b/site/docs/options/graphs/faq.zh.md
new file mode 100644
index 000000000..20b842f99
--- /dev/null
+++ b/site/docs/options/graphs/faq.zh.md
@@ -0,0 +1,45 @@
+---
+title: FAQ
+order: 2
+---
+
+### 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.zh.md b/site/docs/options/graphs/fishbone.zh.md
index cb8e5b124..d1071e413 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
 ---
 
 鱼骨图，又名石川图，用于系统地分析问题根本原因的图表工具，通过将问题分解为多个因素，帮助识别和解决问题。
@@ -29,10 +30,28 @@ import { Fishbone } from '@ant-design/graphs';
 
 通用配置参考：[图通用属性](./overview#图通用属性)
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| 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[])` | - |
+| 属性      | 说明             | 类型                    | 默认值  |
+| --------- | ---------------- | ----------------------- | ------- |
+| type      | 鱼骨图类型       | `cause` \| `decision`   | `cause` |
+| data      | 设置数据         | [Data](#data)           | -       |
+| layout    | 设置布局配置     | [Layout](#layout)       | -       |
+| behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | -       |
+| plugins   | 设置画布插件     | [Plugins](#plugins)     | -       |
+
+<embed src="../graphs-common/option-data.zh.md"></embed>
+
+### Layout
+
+鱼骨图布局，可配置参数如下：
+
+| 属性      | 说明         | 类型                       | 默认值           |
+| --------- | ------------ | -------------------------- | ---------------- |
+| type      | 布局类型     | string                     | `fishbone`       |
+| direction | 排布方向     | `RL` \| `LR`               | `RL`             |
+| vGap      | 设置垂直间距 | number                     | 默认使用节点高度 |
+| hGap      | 设置水平间距 | number                     | 默认使用节点宽度 |
+| getRibSep | 设置鱼骨间距 | (node: NodeData) => number | () => 60         |
+
+<embed src="../graphs-common/option-behaviors.zh.md"></embed>
+
+<embed src="../graphs-common/option-plugins.zh.md"></embed>
diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md
index 6d50cafd5..8d0d703e7 100644
--- a/site/docs/options/graphs/mind-map.zh.md
+++ b/site/docs/options/graphs/mind-map.zh.md
@@ -39,7 +39,27 @@ import { MindMap } from '@ant-design/graphs';
 | 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[])` | - |
+| data | 设置数据 | [Data](#data) | - |
+| layout | 设置布局配置 | [Layout](#layout) | - |
+| behaviors | 设置用户交互事件 | [Behaviors](#behaviors) | - |
+| plugins | 设置画布插件 | [Plugins](#plugins) | - |
+
+<embed src="../graphs-common/option-data.zh.md"></embed>
+
+### Layout
+
+脑图布局，深度相同的节点将会被放置在同一层。可配置参数如下：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 布局类型 | string | `mindmap` |
+| 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 | - |
+
+<embed src="../graphs-common/option-behaviors.zh.md"></embed>
+
+<embed src="../graphs-common/option-plugins.zh.md"></embed>
diff --git a/site/docs/options/graphs/overview.zh.md b/site/docs/options/graphs/overview.zh.md
index 2011702b9..8e4721fbf 100644
--- a/site/docs/options/graphs/overview.zh.md
+++ b/site/docs/options/graphs/overview.zh.md
@@ -3,9 +3,25 @@ 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：数据转换，对用户输入数据进行处理，最终会影响渲染数据，但用户输入数据不受污染。
 
 ## 图通用属性
 
@@ -13,40 +29,56 @@ order: 0
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| 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` | - |
+| data | 数据。关于图数据的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/data) | [GraphData](https://g6.antv.antgroup.com/api/reference/g6/graphdata) | - |
+| 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) | - |
+| edge | 边，支持 G6 内置边。关于边的详细介绍，请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/element#%E8%BE%B9) | [EdgeOptions](https://g6.antv.antgroup.com/api/reference/g6/edgeoptions) | - |
+| 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) | - |
+| theme | 主题 | `light` \| `dark` \| string | - |
+| 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[]) | 组件中查看 |
+
+### 容器属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| containerStyle | 配置图表容器的样式，接受一个包含 CSS 属性和值的对象 | React.CSSProperties | - |
+| containerAttributes | 为图表容器添加自定义的 HTML 属性 | Record<string, any> | - |
+| className | 添加在组件最外层的 className | string | - |
+| loading | 表示图表是否处于加载状态 | boolean | false |
+| loadingTemplate | 自定义加载模板，当图表加载时显示的元素 | React.ReactElement | - |
+| errorTemplate | 自定义错误模板，当图表出错时调用的函数，返回显示的错误信息 | (e: Error) => React.ReactNode | - |
+
+### 画布属性
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置。关于动画的详细介绍，请查阅[此处](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 | - |
+
+### 交互
 
 ## 定制需求
 
@@ -56,21 +88,9 @@ order: 0
 
 除了交互、插件、数据转换以外，其他图配置项都可以直接配置。
 
-```js
-import { MindMap } from '@ant-design/graphs';
+js import { MindMap } from '@ant-design/graphs';
 
-export default () => {
-  const options = {
-    autoFit: 'view',
-    edge: {
-      style: {
-        lineWidth: 3,
-      },
-    },
-  };
-  return <MindMap {...options} />;
-};
-```
+export default () => { const options = { autoFit: 'view', edge: { style: { lineWidth: 3, }, }, }; return <MindMap {...options} />; };
 
 #### 更新交互/插件/数据转换配置
 
@@ -78,21 +98,14 @@ export default () => {
 
 在进行插件配置时，需特别留意插件的添加方式。为了确保既能增添新的功能，又不影响原有预设插件的正常运行，我们引入了一种 🔔 特定的插件更新策略。
 
-具体来说，就是通过一个高阶函来对现有插件列表进行扩展，而不是直接替换。该函数接受当前图表实例（`this: Graph`）及现有插件配置（`plugins: PluginOptions`）作为参数，并返回一个新的插件配置数组。
+具体来说，就是通过一个高阶函来对现有插件列表进行扩展，而不是直接替换。该函数接受当前图表实例（this: Graph）及现有插件配置（plugins: PluginOptions）作为参数，并返回一个新的插件配置数组。
 
 以下是一个具体的示例，展示了如何在思维导图中添加小地图插件：
 
 ```js
 import { MindMap } from '@ant-design/graphs';
 
-export default () => {
-  const options = {
-    plugins: (existingPlugins) => [
-      ...existingPlugins, // 保留原有的所有插件
-      { type: 'minimap', key: 'minimap' }, // 添加小地图插件
-    ],
-  };
+export default () => { const options = { plugins: (existingPlugins) => [ ...existingPlugins, // 保留原有的所有插件 { type: 'minimap', key: 'minimap' }, // 添加小地图插件 ], };
 
-  return <MindMap {...options} />;
-};
+return <MindMap {...options} />; };
 ```