diff --git a/package.json b/package.json
index a45cdc46e..7b979ed83 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "docs:build": "dumi build && node cname.js",
     "docs:deploy": "gh-pages -d dist",
     "docs:deploy-2": "gh-pages -d ./dist -r https://github.com/antvis/graphin-docs.git",
-    "bootstrap": "lerna bootstrap --ignore @antv/graphin-studio --ignore graphin-site --ignore dumi-theme-graphin",
+    "bootstrap": "lerna bootstrap --ignore @antv/graphin-studio --ignore graphin-site && npm run remove:deps",
+    "remove:deps": "rm -rf packages/graphin/node_modules/antd && rm -rf packages/graphin/node_modules/@ant-design/icons && rm -rf packages/graphin-components/node_modules/antd && rm -rf packages/graphin-components/node_modules/@ant-design/icons && rm -rf packages/graphin-icons/node_modules/@ant-design/icons  && rm -rf packages/graphin-icons/node_modules/antd && rm -rf packages/dumi-theme-graphin/node_modules/@ant-design/icons && rm -rf packages/dumi-theme-graphin/node_modules/antd",
     "bootstrap:ci": "lerna bootstrap --ignore @antv/graphin-studio --ignore graphin-site --ignore @antv/graphin-graphscope",
     "build": "lerna run build",
     "contributor": "git-contributor",
@@ -40,7 +41,7 @@
     "d3": "^6.3.1",
     "d3-selection": "^2.0.0",
     "dumi": "^1.1.0",
-    "dumi-theme-graphin": "0.1.3",
+    "dumi-theme-graphin": "file:packages/dumi-theme-graphin",
     "eslint": "^7.18.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.2.0",
@@ -56,7 +57,7 @@
     "lint-staged": "^10.2.2",
     "prettier": "^2.2.1",
     "react-color": "^2.19.3",
-    "react-pie-menu": "^0.2.5",
+    "react-pie-menu": "^0.3.0",
     "styled-components": "^5.2.1",
     "typescript": "^4.1.3"
   },
@@ -73,11 +74,14 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "^4.5.0",
-    "@antv/gatsby-theme-antv": "^1.0.8",
+    "@ant-design/create-react-context": "^0.2.5",
+    "@ant-design/icons": "^4.6.2",
+    "@ant-design/icons-react": "^2.0.1",
+    "@antv/gatsby-theme-antv": "latest",
     "antd": "^4.12.3",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "rc-footer": "^0.6.6",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "repository": {
     "type": "git",
diff --git a/packages/dumi-theme-graphin/package.json b/packages/dumi-theme-graphin/package.json
index c0c195400..e88539675 100644
--- a/packages/dumi-theme-graphin/package.json
+++ b/packages/dumi-theme-graphin/package.json
@@ -16,6 +16,7 @@
   "homepage": "http://github.com/antvis/graphin",
   "authors": [],
   "dependencies": {
+    "@ant-design/icons": "^4.6.2",
     "prism-react-renderer": "^1.1.1",
     "prismjs": "^1.21.0",
     "rc-tabs": "^11.7.1",
@@ -29,11 +30,12 @@
     "dumi": "1.1.5-0",
     "father": "^2.30.1",
     "global-dirs": "^2.1.0",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^17.0.1"
   },
   "peerDependencies": {
+    "@antv/gatsby-theme-antv": "latest",
     "@umijs/preset-dumi": "1.x",
-    "react": "^16.13.1"
+    "react": "^17.0.1"
   },
   "license": "MIT"
 }
diff --git a/packages/dumi-theme-graphin/src/components/Products/getProducts.tsx b/packages/dumi-theme-graphin/src/components/Products/getProducts.tsx
index c0dabe2d3..f5b1bc84e 100644
--- a/packages/dumi-theme-graphin/src/components/Products/getProducts.tsx
+++ b/packages/dumi-theme-graphin/src/components/Products/getProducts.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   AreaChartOutlined,
   DingdingOutlined,
@@ -8,8 +6,10 @@ import {
   HomeOutlined,
   PieChartOutlined,
   ReadOutlined,
-  YuqueOutlined,
+  YuqueOutlined
 } from '@ant-design/icons';
+import React from 'react';
+
 
 const tuple = <T extends string[]>(...args: T) => args;
 const Categories = tuple('basic', 'extension', 'ecology');
@@ -35,7 +35,7 @@ export type ValuesOf<T extends any[]> = T[number];
 
 export const getProducts = ({
   t,
-  language,
+  language = 'zh',
 }: {
   t: (key: string) => string;
   language: string;
diff --git a/packages/graphin-components/package.json b/packages/graphin-components/package.json
index d9d2e9b12..a5ab2388e 100644
--- a/packages/graphin-components/package.json
+++ b/packages/graphin-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-components",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Components for graphin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,9 +52,9 @@
     "@antv/util": "^2.0.10"
   },
   "peerDependencies": {
-    "react": "^16.x",
-    "react-dom": "^16.x",
-    "@antv/graphin": "^2.0.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "@antv/graphin": "^2.*"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/graphin-components/src/Hull/api-docs.ts b/packages/graphin-components/src/Hull/api-docs.ts
new file mode 100644
index 000000000..facc2088c
--- /dev/null
+++ b/packages/graphin-components/src/Hull/api-docs.ts
@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { HullCfg as hullcfg, HullCfgStyle as hullcfgstyle, IHullProps as ihullprops } from './index';
+
+export const IHullProps = (props: ihullprops) => {};
+
+export const HullCfg = (props: hullcfg) => {};
+
+export const HullCfgStyle = (props: hullcfgstyle) => {};
diff --git a/packages/graphin-components/src/Hull/demos/Simple.tsx b/packages/graphin-components/src/Hull/demos/Simple.tsx
index b875f7b55..7294f6db1 100644
--- a/packages/graphin-components/src/Hull/demos/Simple.tsx
+++ b/packages/graphin-components/src/Hull/demos/Simple.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
 import Graphin, { Utils } from '@antv/graphin';
+import React from 'react';
 import Hull, { HullCfg } from '../index';
 // Do not forget to import CSS
 
 const Demo = () => {
   const hullOptions: HullCfg[] = [
     {
-      members: ['node-1', 'node-2'], // 必须参数
+      members: ['node-1', 'node-2', 'node-9'], // 必须参数
     },
     {
-      members: ['node-node-3', 'node-4'],
+      members: ['node-3', 'node-4'],
       type: 'bubble',
       padding: 10,
       style: {
diff --git a/packages/graphin-components/src/Hull/index.md b/packages/graphin-components/src/Hull/index.md
index 1ea0aad3d..80cb5bf5a 100644
--- a/packages/graphin-components/src/Hull/index.md
+++ b/packages/graphin-components/src/Hull/index.md
@@ -18,44 +18,7 @@ Hull 轮廓包裹，是常见的一种图分析组件，可以将所属在一组
 
 <code src='./demos/Simple.tsx'></code>
 
-<API src='./index.tsx'></API>
-
-## 用法
-
-```tsx | pure
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Graphin, { Utils } from '@antv/graphin';
-import { Hull } from '@antv/graphin-components';
-// Do not forget to import CSS
-
-const App = () => {
-  const hullOptions = [
-    {
-      members: ['node-1', 'node-2', 'node-7'], // 必须参数
-    },
-    {
-      members: ['node-4', 'node-5'],
-      type: 'bubble',
-      padding: 10,
-      style: {
-        fill: 'lightgreen',
-        stroke: 'green',
-      },
-    },
-  ];
-  return (
-    <div className="App">
-      <Graphin data={Utils.mock(10).graphin()}>
-        <Hull options={hullOptions} />
-      </Graphin>
-    </div>
-  );
-};
-
-const rootElement = document.getElementById('root');
-ReactDOM.render(<App />, rootElement);
-```
+<API src='./api-docs.ts'></API>
 
 ## 功能特性
 
diff --git a/packages/graphin-components/src/Hull/index.tsx b/packages/graphin-components/src/Hull/index.tsx
index 9ab5cfd6a..1ff3d2fd4 100644
--- a/packages/graphin-components/src/Hull/index.tsx
+++ b/packages/graphin-components/src/Hull/index.tsx
@@ -1,10 +1,7 @@
+import { GraphinContext, GraphinContextType } from '@antv/graphin';
 import React from 'react';
 
-// @ts-ignore
-import { GraphinContext } from '@antv/graphin';
-
 const defaultHullCfg = {
-  id: `${Math.random()}`, // Utils.uuid(),
   members: [],
   type: 'round-convex',
   nonMembers: [],
@@ -34,30 +31,51 @@ const deepMergeCfg = (defaultCfg: typeof defaultHullCfg, cfg: HullCfg) => {
   };
 };
 
+export interface HullCfgStyle {
+  /**
+   * @description 填充颜色
+   * @default 'lightblue'
+   */
+  fill: string;
+  /**
+   * @description 描边颜色
+   * @default 'blue'
+   */
+  stroke: string;
+  /**
+   *
+   * @description 透明度
+   * @default 0.2
+   */
+  opacity: number;
+}
 export interface HullCfg {
-  /** 在包裹内部的节点实例或节点 Id 数组 */
+  /**
+   * @description 在包裹内部的节点实例或节点 Id 数组
+   * @default []
+   *
+   */
   members: string[];
-  /** 包裹的 id */
+  /**
+   * 包裹的 id
+   */
   id?: string;
   /**
-   * 包裹的类型：
+   * @description 包裹的类型
    * round-convex: 生成圆角凸包轮廓，
    * smooth-convex: 生成平滑凸包轮廓
    * bubble: 产生一种可以避开 nonMembers 的平滑凹包轮廓（算法）。
-   * 默认值是 round-convex。 */
+   * @default round-convex
+   */
   type?: 'round-convex' | 'smooth-convex' | 'bubble';
   /** 不在轮廓内部的节点数组，只在 bubble 类型的包裹中生效 */
   nonMembers?: string[];
   /** 轮廓的样式属性 */
-  style?: Partial<{
-    /** 填充颜色 */
-    fill: string;
-    /** 描边颜色 */
-    stroke: string;
-    /**  透明度 */
-    opacity: number;
-  }>;
-  /** 轮廓边缘和内部成员的间距 */
+  style?: Partial<HullCfgStyle>;
+  /**
+   * @description 轮廓边缘和内部成员的间距
+   * @default 10
+   */
   padding?: number;
 }
 
@@ -71,20 +89,25 @@ export interface IHullProps {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let hullInstances: any[];
 
-const Hull: React.FunctionComponent<IHullProps> = (props) => {
-  const graphin = React.useContext(GraphinContext);
+const Hull: React.FunctionComponent<IHullProps> = props => {
+  const graphin = React.useContext<GraphinContextType>(GraphinContext);
+  const { graph } = graphin;
 
   React.useEffect(() => {
-    // @ts-ignore
-    const { graph } = graphin;
     const { options } = props;
 
-    hullInstances = options.map((item) => {
-      return graph.createHull(deepMergeCfg(defaultHullCfg, item));
+    hullInstances = options.map(item => {
+      return graph.createHull(
+        // @ts-ignore
+        deepMergeCfg(defaultHullCfg, {
+          id: `${Math.random()}`, // Utils.uuid(),
+          ...item,
+        }),
+      );
     });
 
     const handleAfterUpdateItem = () => {
-      hullInstances.forEach((item) => {
+      hullInstances.forEach(item => {
         item.updateData(item.members);
       });
     };
@@ -93,7 +116,7 @@ const Hull: React.FunctionComponent<IHullProps> = (props) => {
     return () => {
       graph.on('afterupdateitem', handleAfterUpdateItem);
     };
-  }, []);
+  }, [graph]);
 
   return <div className="graphin-hull-container" />;
 };
diff --git a/packages/graphin-components/src/LayoutSelector/demos/LayoutSelectorDemo.tsx b/packages/graphin-components/src/LayoutSelector/demos/LayoutSelectorDemo.tsx
index dd62c8d67..9e5acbc5f 100644
--- a/packages/graphin-components/src/LayoutSelector/demos/LayoutSelectorDemo.tsx
+++ b/packages/graphin-components/src/LayoutSelector/demos/LayoutSelectorDemo.tsx
@@ -118,11 +118,11 @@ const LayoutConfigPanel = ({ updateLayout, layoutConfig = graphLayoutConfig }) =
 
   // 更新布局参数
   const updateLayoutConfig = (changedField, allFields, layoutType) => {
-    const currentFileds = { ...allFields, ...changedField };
-    Object.keys(currentFileds).forEach(key => {
-      defaultValue[key] = currentFileds[key];
+    const currentFields = { ...allFields, ...changedField };
+    Object.keys(currentFields).forEach(key => {
+      defaultValue[key] = currentFields[key];
     });
-    const { x, y, ...others } = currentFileds;
+    const { x, y, ...others } = currentFields;
     const config = others;
     if (layoutType === 'grid') {
       config.begin = [x, y];
@@ -146,7 +146,7 @@ const LayoutConfigPanel = ({ updateLayout, layoutConfig = graphLayoutConfig }) =
 
   /**
    * 当字段值改变后，自动更新布局
-   * @param changedFiled 改变了的字段
+   * @param changedField 改变了的字段
    * @param allFields 所有字段
    */
   const handleFieldValueChange = (changedField, allFields) => {
diff --git a/packages/graphin-components/src/Legend/index.tsx b/packages/graphin-components/src/Legend/index.tsx
index d8d9a246f..069f73a4b 100644
--- a/packages/graphin-components/src/Legend/index.tsx
+++ b/packages/graphin-components/src/Legend/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
 import {
-  GraphinContext,
+  EdgeConfig,
   Graph,
   GraphData,
-  TreeGraphData,
-  NodeConfig,
-  EdgeConfig,
+  GraphinContext,
   GraphinContextType,
+  NodeConfig,
+  TreeGraphData,
 } from '@antv/graphin';
+import React from 'react';
 import Node from './Node';
 
 export interface LegendProps {
@@ -43,6 +43,9 @@ const getEnumValue = (keyString: string, data) => {
   const enumValue = keyArray.reduce((acc, curr) => {
     return acc[curr] || {};
   }, data) as string;
+  if (typeof enumValue === 'object') {
+    return 'others';
+  }
   return enumValue;
 };
 
diff --git a/packages/graphin-components/src/Toolbar/index.tsx b/packages/graphin-components/src/Toolbar/index.tsx
index 793303140..ed9da084a 100644
--- a/packages/graphin-components/src/Toolbar/index.tsx
+++ b/packages/graphin-components/src/Toolbar/index.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import * as Graphin from '@antv/graphin';
-import isArray from '@antv/util/lib/is-array';
+import isArray from '@antv/util/esm/is-array';
+import React from 'react';
 import './index.less';
 
 const { GraphinContext } = Graphin;
diff --git a/packages/graphin-graphscope/package.json b/packages/graphin-graphscope/package.json
index 863f65220..f3bf66221 100644
--- a/packages/graphin-graphscope/package.json
+++ b/packages/graphin-graphscope/package.json
@@ -19,9 +19,9 @@
     "antd": "^4.10.3",
     "classnames": "^2.2.6",
     "re-resizable": "^6.9.0",
-    "react": "^16.9.0",
+    "react": "^17.0.1",
     "react-color": "^2.17.3",
-    "react-dom": "^16.9.0",
+    "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3"
   },
   "devDependencies": {
diff --git a/packages/graphin-icons/package.json b/packages/graphin-icons/package.json
index f4db209de..bed2975c4 100644
--- a/packages/graphin-icons/package.json
+++ b/packages/graphin-icons/package.json
@@ -17,6 +17,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "father": "^2.30.0"
+    "father": "2.30.0"
   }
 }
diff --git a/packages/graphin-site/package.json b/packages/graphin-site/package.json
index db6959aaa..9dd95f430 100644
--- a/packages/graphin-site/package.json
+++ b/packages/graphin-site/package.json
@@ -29,8 +29,8 @@
     "@antv/graphin-components": "*",
     "@antv/graphin-icons": "*",
     "antd": "^4.8.4",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-i18next": "^11.0.1"
   }
 }
diff --git a/packages/graphin-studio/package.json b/packages/graphin-studio/package.json
index 5412ab469..dd853a34e 100644
--- a/packages/graphin-studio/package.json
+++ b/packages/graphin-studio/package.json
@@ -21,9 +21,9 @@
     "copy-to-clipboard": "^3.2.0",
     "immutability-helper-x": "^1.0.5",
     "lodash": "^4.17.15",
-    "react": "^16.9.0",
+    "react": "^17.0.1",
     "react-color": "^2.17.3",
-    "react-dom": "^16.9.0",
+    "react-dom": "^17.0.1",
     "react-hot-loader": "^4.12.14",
     "react-router-dom": "^5.1.1"
   },
diff --git a/packages/graphin/docs/Contributing.zh-CN.md b/packages/graphin/docs/Contributing.zh-CN.md
index 43ddfb535..24139f6cb 100644
--- a/packages/graphin/docs/Contributing.zh-CN.md
+++ b/packages/graphin/docs/Contributing.zh-CN.md
@@ -37,13 +37,13 @@ Graphin 采用 lerna 管理仓库，packages 中包含以下 5 个 package：
 
 - 设置 npmClient
 
-在 lerna.json 中设置你的 npmClient，中国地区的朋友可以设置 [cnpm](https://www.npmjs.com/package/cnpm)
+在 lerna.json 中设置你的 npmClient 为 yarn
 
 ```json
 // ./lerna.json
 {
   "packages": ["packages/*"],
-  "npmClient": "cnpm",
+  "npmClient": "yarn",
   "version": "0.0.0"
 }
 ```
@@ -53,12 +53,27 @@ Graphin 采用 lerna 管理仓库，packages 中包含以下 5 个 package：
 在`该项目根目录`下安装 node_modules
 
 ```bash
-cnpm i
+yarn
 ```
 
 - 安装各 packages 的依赖
 
-在`该项目根目录`下，启动 lerna 的 bootstrap，lerna 自动安装好各个 packages 的依赖，安装好后，可以发现各个 packages 中就存在自己的 node_modules 了
+> ⚠️ 特别注意
+
+安装各个包的依赖之前，需要在`graphin-components`中，需要做一个特殊的处理，将 package.json 中的 graphin 依赖，从`peerDependencies`中移动到`dependencies`中，这样才能在`npm run bootstrap`的时候，可以链接上依赖。源代码为了发布需要是[这样的](https://github.com/antvis/Graphin/blob/master/packages/graphin-components/package.json#L57)，需要改为下面的（此操作仅在第一次安装依赖时候使用）
+
+```json
+ "dependencies": {
+    "@antv/util": "^2.0.10",
+    "@antv/graphin": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.x",
+    "react-dom": "^16.x"
+  },
+```
+
+然后在`该项目根目录`下，启动 lerna 的 bootstrap，lerna 自动安装好各个 packages 的依赖，安装好后，可以发现各个 packages 中就存在自己的 node_modules 了
 
 ```bash
 npm run bootstrap
@@ -68,35 +83,22 @@ npm run bootstrap
 
 在`该项目根目录`启动 graphin， graphin-components 和 graphin-icons 的本地编译.
 
-```bash
-npm run graphin
-npm run components
-npm run icons
-```
-
 注意 ⚠️ 因为 packages 中各个包 存在依赖关系，比如 graphin-components 就依赖 graphin 的打包产物，且 打包启动的速度不一样，因此需要我们先把 packages/graphin 包启动后，再启动 packages/graphin-components .启动完毕后，也可以在 vscode 中重启 ts 编译器，从而确保各个依赖关系 ts 可以推断找到
 
 ```bash
-npm run start
+npm run graphin //本地编译`@antv/graphin`的产物
+npm run components //本地编译`@antv/graphin-components`的产物
+npm run icons //本地编译`@antv/graphin-icons`的产物
 ```
 
-- 启动 Graphin Dumi 开发文档
-
-dumi 是一款针对组件开发场景而生的文档工具，非常好用，因此我们可以启动 dumi 来查看我们的开发文档。
+- 启动 Graphin 官方站点
 
-退回到`该项目根目录`，启动 `npm run docs` ,既可以看到
+graphin 使用 dumi 进行站点构建，因此我们可以在`该项目根目录`，启动 `npm run docs` ,即可在本地看到官方站点
 
 ```bash
 npm run docs
 ```
 
-- 启动 Graphin 官方站点
-
-```bash
-cd packages/graphin-site
-npm run site
-```
-
 ## Graphin 与 G6 兼容版本对照表
 
 | Graphin 版本 | G6 版本 |
diff --git a/packages/graphin/docs/contributing.en-US.md b/packages/graphin/docs/contributing.en-US.md
index 3767f22d6..48e23bc04 100644
--- a/packages/graphin/docs/contributing.en-US.md
+++ b/packages/graphin/docs/contributing.en-US.md
@@ -36,64 +36,66 @@ Please checkout the specific package：
 
 - Set up npmClient
 
-Set your npmClient in lerna.json, friends in China can set [cnpm](https://www.npmjs.com/package/cnpm)
+Set your npmClient to yarn in lerna.json
 
 ```json
 // ./lerna.json
 {
   "packages": ["packages/*"],
-  "npmClient": "cnpm",
+  "npmClient": "yarn",
   "version": "0.0.0"
 }
 ```
 
 - Installation dependencies
 
-Install node_modules in `the project root directory`
+Install node_modules in the `root directory of the project`
 
 ```bash
-cnpm i
+yarn
 ```
 
 - Install the dependencies of each package
 
-In the `root directory of the project`, start lerna's bootstrap, lerna automatically installs the dependencies of each package, after installation, you can find that each package has its own node_modules
+> ⚠️ Special attention
 
-```bash
-npm run bootstrap
-```
+Before installing the dependencies of each package, you need to do a special treatment in `graphin-components`, move the graphin dependencies in package.json from `peerDependencies` to `dependencies`, so that you can run bootstrap in `npm run bootstrap`, you can link to the dependency. The source code needs to be [such](https://github.com/antvis/Graphin/blob/master/packages/graphin-components/package.json#L57) in order to publish, it needs to be changed to the following (this operation is only in Used when installing dependencies for the first time)
 
-- Start local compilation of graphin, graphin-components, graphin-icons
-
-You can perform local compilation for graphin, graphin-components and graphin-icons in the `root directory of the project`.
-
-```bash
-npm run graphin
-npm run components
-npm run icons
+```json
+ "dependencies": {
+    "@antv/util": "^2.0.10",
+    "@antv/graphin": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.x",
+    "react-dom": "^16.x"
+  },
 ```
 
-Note ⚠️ Each package in the packages has a dependency relationship. As an example, graphin-components depends on the compilation of graphin. Thus, we need to start the packages/graphin first, and then start packages/graphin-components. After all the local compilation are complete, it is recommended to restart Typescript compiler in Visual Studio Code to ensure that Typescript dependencies can be inferred and index successfully by the editor.
+Then in the `root directory of the project`, start lerna's bootstrap, lerna automatically installs the dependencies of each package, after installation, you can find that each package has its own node_modules
 
 ```bash
-npm run start
+npm run bootstrap
 ```
 
-- Launch Graphin Dumi development document
+- Start local compilation of graphin, graphin-components, graphin-icons
 
-[dumi](https://d.umijs.org/) is a documentation tool to develop libraries & write docs. It is very convenient, we can start dumi to view our development documents.
+Start the local compilation of graphin, graphin-components and graphin-icons in `the project root directory`.
 
-Return to the `root directory of the project`, start `npm run docs`, you can see
+Note ⚠️ Because each package in the packages has a dependency relationship, for example, `graphin-components` depends on the packaged product of graphin, and the packaging startup speed is different, so we need to start the `packages/graphin` package first, and then start `packages/graphin-components`. After startup, you can also restart the ts compiler in vscode to ensure that each dependency ts can be inferred and found
 
 ```bash
-npm run docs
+npm run graphin // Local compilation of the product of `@antv/graphin`
+npm run components // locally compile the product of `@antv/graphin-components`
+npm run icons // Locally compiled product of `@antv/graphin-icons`
 ```
 
 - Launch Graphin official site
 
+Graphin uses dumi to build the site, so we can start `npm run docs` in the `root directory of the project` to see the official site locally
+
 ```bash
-cd packages/graphin-site
-npm run site
+npm run docs
 ```
 
 ## Graphin and G6 compatible table
diff --git a/packages/graphin/package.json b/packages/graphin/package.json
index b1e07620f..63afbbd09 100644
--- a/packages/graphin/package.json
+++ b/packages/graphin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "the react toolkit for graph analysis based on g6",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,6 +20,7 @@
     "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^9.5.0",
     "@types/jest": "^25.2.3",
+    "@types/lodash-es":"latest",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
     "eventemitter3": "^4.0.0",
@@ -47,14 +48,13 @@
   "author": "AntV",
   "license": "MIT",
   "dependencies": {
-    "@antv/g-canvas": "^0.5.1",
-    "@antv/g6": "4.1.13",
+    "@antv/g6": "4.3.4",
     "@antv/util": "^2.0.10",
     "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
-    "react": "^16.x",
-    "react-dom": "^16.x"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/graphin/src/shape/graphin-line.ts b/packages/graphin/src/shape/graphin-line.ts
index 11cb3ada2..735734dd4 100644
--- a/packages/graphin/src/shape/graphin-line.ts
+++ b/packages/graphin/src/shape/graphin-line.ts
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 // @ts-nocheck
-import { IGroup } from '@antv/g-canvas';
-import G6, { EdgeConfig, IEdge, INode, ModelConfig } from '@antv/g6';
+import G6, { EdgeConfig, IEdge, IGroup, INode, ModelConfig } from '@antv/g6';
 import { deepMix } from '@antv/util';
 import { EdgeStyle } from '../typings/type';
 import { setStatusStyle } from './utils';