diff --git a/src/ProFlow/demos/ProFlowDemo.tsx b/src/ProFlow/demos/ProFlowDemo.tsx
index 875d52e..126e3ab 100644
--- a/src/ProFlow/demos/ProFlowDemo.tsx
+++ b/src/ProFlow/demos/ProFlowDemo.tsx
@@ -1,7 +1,7 @@
-import { EdgeType, NodeSelect, ProFlowNode } from '@/index';
+import { NodeSelect, ProFlowEdge, ProFlowNode } from '@/index';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import styled from 'styled-components';
 import ProFlow from '..';
 
@@ -51,7 +51,6 @@ const DangerLogo = styled.div`
 const nodes: ProFlowNode[] = [
   {
     id: 'a1',
-    select: NodeSelect.SELECT,
     label: '123',
     data: {
       title: 'XXX数据源',
@@ -61,7 +60,6 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'b1',
-    select: NodeSelect.SUB_SELECT,
     data: {
       title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -83,7 +81,6 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'b2',
-    select: NodeSelect.SUB_DANGER,
     data: {
       title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -96,7 +93,6 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'b3',
-    select: NodeSelect.SUB_WARNING,
     data: {
       title: 'XXX_API_b3',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -105,7 +101,6 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'b4',
-    select: NodeSelect.DEFAULT,
     data: {
       title: 'XXX_API_b4',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -114,7 +109,6 @@ const nodes: ProFlowNode[] = [
   },
   {
     id: 'c1',
-    select: NodeSelect.WARNING,
     data: {
       title: 'XXXX产品',
       logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
@@ -124,12 +118,10 @@ const nodes: ProFlowNode[] = [
   {
     id: 'd1',
     group: true,
-    select: NodeSelect.SUB_SELECT,
     label: '456',
     data: [
       {
         id: 'a5',
-        select: NodeSelect.SELECT,
         data: {
           title: 'XXX数据源',
           describe: 'cksadjfnf',
@@ -138,7 +130,6 @@ const nodes: ProFlowNode[] = [
       },
       {
         id: 'a6',
-        select: NodeSelect.DANGER,
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -147,7 +138,6 @@ const nodes: ProFlowNode[] = [
       },
       {
         id: 'a7',
-        select: NodeSelect.WARNING,
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
@@ -156,7 +146,6 @@ const nodes: ProFlowNode[] = [
       },
       {
         id: 'a8',
-        select: NodeSelect.SELECT,
         data: {
           title: 'XXX数据源',
           describe: 'cksadjfnf',
@@ -165,7 +154,6 @@ const nodes: ProFlowNode[] = [
       },
       {
         id: 'a9',
-        select: NodeSelect.DANGER,
         data: {
           title: 'XXX_API',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
@@ -174,7 +162,6 @@ const nodes: ProFlowNode[] = [
       },
       {
         id: 'a10',
-        select: NodeSelect.WARNING,
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
@@ -183,7 +170,6 @@ const nodes: ProFlowNode[] = [
       },
       {
         id: 'a11',
-        select: NodeSelect.WARNING,
         data: {
           title: 'XXXX产品',
           logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
@@ -194,78 +180,88 @@ const nodes: ProFlowNode[] = [
   },
 ];
 
-const edges = [
+const edges: ProFlowEdge[] = [
   {
     id: 'a1-b1',
     source: 'a1',
-    select: NodeSelect.SUB_WARNING,
     target: 'b1',
-    type: EdgeType.default,
   },
   {
     id: 'a1-b2',
     source: 'a1',
-    select: NodeSelect.SUB_WARNING,
     target: 'b2',
-    type: EdgeType.default,
   },
   {
     id: 'a1-b3',
     source: 'a1',
-    select: NodeSelect.SUB_DANGER,
     target: 'b3',
-    type: EdgeType.default,
   },
   {
     id: 'a1-b4',
     source: 'a1',
-    select: NodeSelect.SUB_SELECT,
     target: 'b4',
-    type: EdgeType.default,
   },
 
   {
     id: 'b2-c1',
     source: 'b2',
-    select: NodeSelect.WARNING,
     target: 'c1',
-    type: EdgeType.default,
   },
   {
     id: 'b3-c1',
     source: 'b3',
-    select: NodeSelect.WARNING,
     target: 'c1',
-    type: EdgeType.default,
   },
   {
     id: 'b1-c1',
     source: 'b1',
-    select: NodeSelect.WARNING,
     target: 'c1',
-    type: EdgeType.default,
   },
   {
     id: 'b4-c1',
     source: 'b4',
-    select: NodeSelect.WARNING,
     target: 'c1',
-    type: EdgeType.default,
   },
   {
     id: 'c1-d1',
     source: 'c1',
-    select: NodeSelect.WARNING,
     target: 'd1',
-    type: EdgeType.default,
   },
 ];
 
 const ProFlowDemo = memo(() => {
+  const [_nodes, setNodes] = useState<ProFlowNode[]>([...nodes]);
+  const [_edges, setEdges] = useState<ProFlowEdge[]>([...edges]);
   const { styles } = useStyles();
+
+  const handleHighlight = (node: ProFlowNode) => {
+    console.log(node);
+
+    setEdges(
+      edges.map((edge) => {
+        if (edge.source === node.id || edge.target === node.id) {
+          edge.select = NodeSelect.SUB_SELECT;
+        }
+        return {
+          ...edge,
+        };
+      }),
+    );
+  };
+
+  const handleUnHighlight = () => {
+    setNodes(nodes);
+    setEdges(edges);
+  };
+
   return (
     <div className={styles.container}>
-      <ProFlow nodes={nodes} edges={edges} />
+      <ProFlow
+        onNodeDragStart={(e, node: any) => handleHighlight(node)}
+        onPaneClick={handleUnHighlight}
+        nodes={_nodes}
+        edges={_edges}
+      />
     </div>
   );
 });
diff --git a/src/ProFlow/helper.tsx b/src/ProFlow/helper.tsx
index d291e77..b6b733b 100644
--- a/src/ProFlow/helper.tsx
+++ b/src/ProFlow/helper.tsx
@@ -84,13 +84,19 @@ export function setNodePosition(nodes: Node[], edges: Edge[]) {
 }
 
 function sortEdges(edges: Edge[]) {
-  const highEdges: Edge[] = edges.filter((item) =>
-    item.className?.includes('initialNode-selected'),
+  console.log(edges);
+  const highEdges: Edge[] = edges.filter((item) => {
+    return item.className?.includes('edgeSelected') || item.className?.includes('edgeSubSelected');
+  });
+  const midEdges: Edge[] = edges.filter(
+    (item) => item.className?.includes('edgeDanger') || item.className?.includes('edgeSubDanger'),
   );
-  const midEdges: Edge[] = edges.filter((item) => item.className?.includes('edgeDanger'));
   const lowEdges: Edge[] = edges.filter(
     (item) =>
-      !item.className?.includes('initialNode-selected') && !item.className?.includes('edgeDanger'),
+      !item.className?.includes('edgeSelected') &&
+      !item.className?.includes('edgeSubSelected') &&
+      !item.className?.includes('edgeDanger') &&
+      !item.className?.includes('edgeSubDanger'),
   );
 
   return [...lowEdges, ...midEdges, ...highEdges];
@@ -115,43 +121,43 @@ function getEdgeClsFromNodeSelect(select: NodeSelect) {
   }
 }
 
-function getEdgeLevel(select: NodeSelect) {
-  switch (select) {
-    case NodeSelect.SELECT:
-      return 6;
-    case NodeSelect.SUB_SELECT:
-      return 5;
-    case NodeSelect.DANGER:
-      return 4;
-    case NodeSelect.SUB_DANGER:
-      return 3;
-    case NodeSelect.WARNING:
-      return 2;
-    case NodeSelect.SUB_WARNING:
-      return 1;
-    default:
-      return 0;
-  }
-}
+// function getEdgeLevel(select: NodeSelect) {
+//   switch (select) {
+//     case NodeSelect.SELECT:
+//       return 6;
+//     case NodeSelect.SUB_SELECT:
+//       return 5;
+//     case NodeSelect.DANGER:
+//       return 4;
+//     case NodeSelect.SUB_DANGER:
+//       return 3;
+//     case NodeSelect.WARNING:
+//       return 2;
+//     case NodeSelect.SUB_WARNING:
+//       return 1;
+//     default:
+//       return 0;
+//   }
+// }
 
 export function getRenderEdges(edges: ProFlowEdge[]) {
-  return edges
-    .sort((a, b) => {
-      const aLevel = a.select ? getEdgeLevel(a.select) : 0;
-      const bLevel = b.select ? getEdgeLevel(b.select) : 0;
-      return aLevel - bLevel;
-    })
-    .map((edge) => {
-      const { source, target, select = NodeSelect.DEFAULT } = edge;
+  return edges.map((edge) => {
+    const { source, target, select = NodeSelect.DEFAULT } = edge;
+
+    return {
+      id: `${source}-${target}`,
+      source,
+      target,
+      type: 'smoothstep',
+      className: getEdgeClsFromNodeSelect(select),
+    };
+  });
 
-      return {
-        id: `${source}-${target}`,
-        source,
-        target,
-        type: 'smoothstep',
-        className: getEdgeClsFromNodeSelect(select),
-      };
-    });
+  // .sort((a, b) => {
+  //   const aLevel = a.select ? getEdgeLevel(a.select) : 0;
+  //   const bLevel = b.select ? getEdgeLevel(b.select) : 0;
+  //   return aLevel - bLevel;
+  // })
 }
 
 export const getRenderData = (