diff --git a/docs/caseShow/cicdPipeLine.md b/docs/caseShow/cicdPipeLine.md
index 220f9bb..837ea3a 100644
--- a/docs/caseShow/cicdPipeLine.md
+++ b/docs/caseShow/cicdPipeLine.md
@@ -10,4 +10,4 @@ description:
 
 ## Default
 
-<code src="./demos/pipelineDemo.tsx" ></code>
+<code src="./demos/pipeline/multiPipe/pipelineDemo.tsx" ></code>
diff --git a/docs/caseShow/dataFlow.md b/docs/caseShow/dataFlow.md
new file mode 100644
index 0000000..5d60769
--- /dev/null
+++ b/docs/caseShow/dataFlow.md
@@ -0,0 +1,25 @@
+---
+nav:
+  title: 案例展示
+  order: 100
+group:
+  title: 场景展示
+  order: 1
+title: 数据流程图
+order: 1
+description:
+---
+
+## 数据流程图
+
+案例特点：
+
+- 点击选中节点，自动高亮相关链路
+- 无级缩放的 label
+- 节点拖拽
+- Danger 节点链路高亮
+- 选中节点唤起抽屉
+- 点击画布或其他节点重置选中态
+- 初始化自动布局
+
+<code src='./demos/dataflow/index.tsx'></code>
diff --git a/docs/caseShow/demos/dataflow/data.tsx b/docs/caseShow/demos/dataflow/data.tsx
new file mode 100644
index 0000000..472717e
--- /dev/null
+++ b/docs/caseShow/demos/dataflow/data.tsx
@@ -0,0 +1,261 @@
+import { FlowViewEdge, FlowViewNode } from '@ant-design/pro-flow';
+import { Progress } from 'antd';
+import React from 'react';
+import useStyles from './styled';
+
+const ApiScore: React.FC<{ score: number }> = ({ score }) => {
+  return (
+    <Progress
+      style={{
+        fontSize: '6px',
+        textAlign: 'center',
+      }}
+      type="circle"
+      trailColor={'white'}
+      percent={score === 0 ? 1 : score * 20}
+      strokeColor={score * 20 > 60 ? '#30a46c' : '#e5484d'}
+      format={() => `${score}`}
+      size={28}
+    />
+  );
+};
+
+const DangerLogo: React.FC = () => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.dangerLogo}>
+      <img
+        src={
+          'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*wkEJRbSowekAAAAAAAAAAAAADvuvAQ/original'
+        }
+        alt=""
+      />
+    </div>
+  );
+};
+
+export const nodes: FlowViewNode[] = [
+  {
+    id: 'a1',
+    label: '数据源',
+    data: {
+      title: 'XXX_API_ddddddddddddddddddddddddddddddƒddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*jWDsQ5GTmHMAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b1',
+    label: ' API',
+    data: {
+      isDanger: true,
+      title: 'XXX_API_ddddddddddddddddddddddddddddddddddddddddddddddddddddddb1',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'left',
+        value: <DangerLogo />,
+      },
+    },
+  },
+  {
+    id: 'b2',
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+      titleSlot: {
+        type: 'right',
+        value: <ApiScore score={4} />,
+      },
+    },
+  },
+  {
+    id: 'b3',
+    data: {
+      title: 'XXX_APIddddddddddddddddddddddddddddddddddddddddddddddddddd_b2',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'b4',
+    data: {
+      title: 'XXX_API_b4',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original',
+      description: 'XXX_XXX_XXX_API',
+    },
+  },
+  {
+    id: 'c1',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'c2',
+    label: '产品',
+    data: {
+      isDanger: true,
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'c3',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*ezaYT4wYRBwAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'd1',
+    data: {
+      title: 'XXXX产品',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+  {
+    id: 'd2',
+    type: 'BasicNodeGroup',
+    label: '用户',
+    data: [
+      {
+        id: 'a5',
+        data: {
+          title: 'XXX数据源',
+          description: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a6',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a7',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+      {
+        id: 'a8',
+        data: {
+          title: 'XXX数据源',
+          description: 'cksadjfnf',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+        },
+      },
+      {
+        id: 'a9',
+        data: {
+          title: 'XXX_API',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: 'XXX_XXX_XXX_API',
+        },
+      },
+      {
+        id: 'a10',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+      {
+        id: 'a11',
+        data: {
+          title: 'XXXX产品',
+          logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+          description: '2031030213014',
+        },
+      },
+    ],
+  },
+  {
+    id: 'd3',
+    data: {
+      title: 'XXXX用户',
+      logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*8KacSbGkJxIAAAAAAAAAAAAADvuvAQ/original',
+      description: '2031030213014',
+    },
+  },
+];
+
+export const edges: FlowViewEdge[] = [
+  {
+    id: 'a1-b1',
+    source: 'a1',
+    target: 'b1',
+  },
+  {
+    id: 'a1-b2',
+    source: 'a1',
+    target: 'b2',
+  },
+  {
+    id: 'a1-b3',
+    source: 'a1',
+    target: 'b3',
+  },
+  {
+    id: 'a1-b4',
+    source: 'a1',
+    target: 'b4',
+  },
+
+  {
+    id: 'b2-c1',
+    source: 'b2',
+    target: 'c1',
+    type: 'radius',
+  },
+  {
+    id: 'b3-c1',
+    source: 'b3',
+    target: 'c1',
+    type: 'radius',
+  },
+  {
+    id: 'b1-c2',
+    source: 'b1',
+    target: 'c2',
+    type: 'radius',
+  },
+  {
+    id: 'c2-d2',
+    source: 'c2',
+    target: 'd2',
+    type: 'radius',
+  },
+  {
+    id: 'b4-c3',
+    source: 'b4',
+    target: 'c3',
+    type: 'radius',
+  },
+  {
+    id: 'c1-d1',
+    source: 'c1',
+    target: 'd1',
+    type: 'radius',
+  },
+  {
+    id: 'c3-d3',
+    source: 'c3',
+    target: 'd3',
+    type: 'radius',
+  },
+];
diff --git a/docs/caseShow/demos/dataflow/helper.ts b/docs/caseShow/demos/dataflow/helper.ts
new file mode 100644
index 0000000..68e653d
--- /dev/null
+++ b/docs/caseShow/demos/dataflow/helper.ts
@@ -0,0 +1,106 @@
+import { SelectType } from '@ant-design/pro-flow';
+
+export const formatNodeMapping = (nodes, edges) => {
+  const obj = {};
+  nodes.forEach((node) => {
+    obj[node.id] = { ...node };
+    obj[node.id].left = getLeftNode(nodes, edges, node.id);
+    obj[node.id].right = getRightNode(nodes, edges, node.id);
+  });
+  return obj;
+};
+
+export const formatEdgeMapping = (nodes, edges) => {
+  const obj = {};
+  edges.forEach((edge) => {
+    obj[edge.id] = { ...edge };
+    obj[edge.id].targetNode = nodes.find((node) => node.id === edge.target);
+    obj[edge.id].sourceNode = nodes.find((node) => node.id === edge.source);
+  });
+  return obj;
+};
+
+export const setNodeDanger = (nodeMapping) => {
+  Object.keys(nodeMapping).forEach((key) => {
+    const node = nodeMapping[key];
+    if (node.data.isDanger) {
+      const highNodes = getAllHighLightNode(nodeMapping, node.id);
+
+      highNodes.forEach((item) => {
+        if ([SelectType.SELECT, SelectType.SUB_SELECT].includes(nodeMapping[item.id].select))
+          return;
+        nodeMapping[item.id].select = SelectType.SUB_DANGER;
+      });
+    }
+  });
+
+  return nodeMapping;
+};
+
+export const setEdgeDanger = (edgeMapping) => {
+  Object.keys(edgeMapping).forEach((key) => {
+    const edge = edgeMapping[key];
+
+    if (edge.targetNode.data.isDanger || edge.sourceNode.data.isDanger) {
+      if ([SelectType.SELECT, SelectType.SUB_SELECT].includes(edge.select)) return;
+      edge.select = SelectType.SUB_DANGER;
+    }
+  });
+
+  return edgeMapping;
+};
+
+export const getLeftNode = (nodes, edges, currentId) => {
+  return edges
+    .filter((edge) => {
+      return edge.target === currentId;
+    })
+    .map((edge) => {
+      const node = nodes.find((node) => node.id === edge.source);
+      return node.id;
+    });
+};
+
+export const getRightNode = (nodes, edges, currentId) => {
+  return edges
+    .filter((edge) => {
+      return edge.source === currentId;
+    })
+    .map((edge) => {
+      const node = nodes.find((node) => node.id === edge.target);
+      return node.id;
+    });
+};
+
+export const getAllHighLightNode = (nodeMapping, currentId) => {
+  const leftNodes = [];
+  const rightNodes = [];
+
+  function getLeft(nodeId) {
+    if (nodeMapping[nodeId] === undefined) return;
+
+    const lefts = nodeMapping[nodeId].left;
+    if (lefts.length === 0) return;
+
+    leftNodes.push(...lefts.map((item: string) => nodeMapping[item]));
+    lefts.forEach((node) => {
+      getLeft(node);
+    });
+  }
+
+  function getRight(nodeId) {
+    if (nodeMapping[nodeId] === undefined) return;
+
+    const rights = nodeMapping[nodeId].right;
+    if (rights.length === 0) return;
+
+    rightNodes.push(...rights.map((item) => nodeMapping[item]));
+    rights.forEach((node) => {
+      getRight(node);
+    });
+  }
+  getLeft(currentId);
+  getRight(currentId);
+
+  return [...leftNodes, ...rightNodes, nodeMapping[currentId]];
+};
diff --git a/docs/caseShow/demos/dataflow/index.tsx b/docs/caseShow/demos/dataflow/index.tsx
new file mode 100644
index 0000000..df2a7fc
--- /dev/null
+++ b/docs/caseShow/demos/dataflow/index.tsx
@@ -0,0 +1,115 @@
+/**
+ * compact: true
+ */
+import {
+  FlowView,
+  FlowViewNode,
+  Inspector,
+  SelectType,
+  useEdgesState,
+  useNodesState,
+} from '@ant-design/pro-flow';
+import { useCallback, useMemo, useState } from 'react';
+import { edges, nodes } from './data';
+import {
+  formatEdgeMapping,
+  formatNodeMapping,
+  getAllHighLightNode,
+  setEdgeDanger,
+  setNodeDanger,
+} from './helper';
+import useStyles from './styled';
+
+const ProFlowDemo = () => {
+  const { styles } = useStyles();
+  const [current, setCurrent] = useState(0);
+  const [_nodes, setNodes, onNodesChange] = useNodesState([...nodes]);
+  const [_edges, setEdges, onEdgesChange] = useEdgesState([...edges]);
+  const edgeMapping = useMemo(() => {
+    const mapping = formatEdgeMapping(_nodes, _edges);
+    return setEdgeDanger(mapping);
+  }, [_nodes, _edges]);
+  const nodeMapping = useMemo(() => {
+    const mapping = formatNodeMapping(_nodes, _edges);
+    return setNodeDanger(mapping);
+  }, [_nodes, _edges]);
+
+  const renderData = useMemo(() => {
+    return {
+      nodes: Object.values(nodeMapping),
+      edges: Object.values(edgeMapping),
+    };
+  }, [nodeMapping, edgeMapping]);
+
+  const handleHighlight = useCallback(
+    (node: FlowViewNode) => {
+      handleUnHighlight();
+      setCurrent(node.id);
+      const highNodes = getAllHighLightNode(nodeMapping, node.id);
+      _nodes.forEach((_node) => {
+        if (highNodes.find((item) => item.id === _node.id)) {
+          _node.select = SelectType.SUB_SELECT;
+        }
+        if (_node.id === node.id) {
+          _node.select = SelectType.SELECT;
+        }
+      });
+
+      setNodes(_nodes);
+      setEdges(
+        edges.map((edge) => {
+          if (
+            highNodes.find((item) => item.id === edge.source) &&
+            highNodes.find((item) => item.id === edge.target)
+          ) {
+            edge.select = SelectType.SUB_SELECT;
+          }
+          return {
+            ...edge,
+          };
+        }),
+      );
+    },
+    [nodeMapping],
+  );
+
+  const handleUnHighlight = () => {
+    setCurrent(0);
+    setNodes(
+      _nodes.map((_node) => {
+        _node.select = SelectType.DEFAULT;
+        return _node;
+      }),
+    );
+    setEdges(
+      edges.map((edge) => {
+        edge.select = SelectType.DEFAULT;
+        return edge;
+      }),
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <FlowView
+        onNodeDragStart={(e, node: any) => handleHighlight(node)}
+        onPaneClick={handleUnHighlight}
+        nodes={renderData.nodes}
+        edges={renderData.edges}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        stepLessZooming={true}
+        miniMap={false}
+      >
+        <Inspector
+          title={`Current Node - ${current}`}
+          width={250}
+          open={!!current}
+          onClick={() => setCurrent(0)}
+        />
+      </FlowView>
+    </div>
+  );
+};
+
+export default ProFlowDemo;
diff --git a/docs/caseShow/demos/dataflow/styled.ts b/docs/caseShow/demos/dataflow/styled.ts
new file mode 100644
index 0000000..4b0907d
--- /dev/null
+++ b/docs/caseShow/demos/dataflow/styled.ts
@@ -0,0 +1,30 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    dangerLogo: {
+      width: '28px',
+      height: '16px',
+      background: '#ffeef1',
+      borderRadius: '7px',
+      marginTop: '3px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      img: { width: '8px', height: '9px' },
+    },
+    container: css`
+      width: 100%;
+      height: 600px;
+      .ant-progress-text {
+        text-align: center !important;
+      }
+    `,
+    CustomWrap: {
+      width: '300px',
+      height: '100px',
+      backgroundColor: 'red',
+    },
+  };
+});
+export default useStyles;
diff --git a/docs/caseShow/demos/index.style.ts b/docs/caseShow/demos/index.style.ts
index 1800c75..15cce1b 100644
--- a/docs/caseShow/demos/index.style.ts
+++ b/docs/caseShow/demos/index.style.ts
@@ -5,7 +5,7 @@ const useStyles = createStyles(() => {
     pipeNodeWrap: {
       width: '260px',
       minHeight: '100px',
-      backgroundColor: '#f6f8fa',
+      backgroundColor: 'white',
       padding: '16px',
       boxSizing: 'border-box',
       borderRadius: '8px',
@@ -25,6 +25,7 @@ const useStyles = createStyles(() => {
       boxSizing: 'border-box',
       border: '1px solid rgba(0, 0, 0, 0.08)',
       borderRadius: '8px',
+      backgroundColor: 'white',
     },
     mainBox: {
       width: '100%',
diff --git a/docs/caseShow/demos/pipelineDemo.tsx b/docs/caseShow/demos/pipeline/multiPipe/data.ts
similarity index 58%
rename from docs/caseShow/demos/pipelineDemo.tsx
rename to docs/caseShow/demos/pipeline/multiPipe/data.ts
index b4df109..77ba116 100644
--- a/docs/caseShow/demos/pipelineDemo.tsx
+++ b/docs/caseShow/demos/pipeline/multiPipe/data.ts
@@ -1,103 +1,7 @@
-/**
- * compact: true
- */
-import {
-  Background,
-  FlowView,
-  FlowViewProvider,
-  Handle,
-  NodeProps,
-  Position,
-  SelectType,
-  useFlowViewer,
-} from '@ant-design/pro-flow';
-import { FC, useCallback } from 'react';
-import useStyles from './index.style';
-
-interface PipeNodeChild {
-  title: string;
-  des: string;
-  logo: string;
-}
-
-interface PipeNode {
-  stepTitle: string;
-  title: string;
-  des: string;
-  logo: string;
-  needSwitch?: boolean;
-  children?: PipeNodeChild[];
-  selectType?: SelectType;
-}
-
 const nodeWidth = 170;
 const nodeHeight = 500;
 
-export const PipeNode: FC<NodeProps<PipeNode>> = ({ data }) => {
-  const { stepTitle, title, des, logo, needSwitch = false, children = [], selectType } = data;
-  const { styles } = useStyles();
-
-  return (
-    <div className={'pipeNodeWrap' + ` pipeNode-${selectType}`}>
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{
-          opacity: 0,
-          top: 30,
-          left: 3,
-        }}
-      />
-      <div className={styles.stepTitle}>{stepTitle}</div>
-      <div className={styles.pipeNode}>
-        <div className={styles.mainBox}>
-          <div className={styles.logo}>
-            <img src={logo} alt="" />
-          </div>
-          <div className={styles.wrap}>
-            <div className={styles.title}>{title}</div>
-            <div className={styles.des}>{des}</div>
-          </div>
-          {needSwitch && (
-            <div className={styles.pipeNodeRight}>
-              <div className={styles.switch}>
-                <div className={styles.switchIcon}></div>
-              </div>
-            </div>
-          )}
-        </div>
-        {children.length > 0 && (
-          <div className={styles.children}>
-            {children.map((item, index) => (
-              <div className={styles.childrenBox} key={index}>
-                <div className={styles.logo}>
-                  <img src={item.logo} alt="" />
-                </div>
-                <div className={styles.wrap}>
-                  <div className={styles.title}>{item.title}</div>
-                  <div className={styles.des}>{item.des}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{
-          top: 30,
-          right: 3,
-          opacity: 0,
-        }}
-      />
-    </div>
-  );
-};
-
-const nodeTypes = { pipeNode: PipeNode };
-
-const nodes = [
+export const nodes = [
   {
     id: 'a1',
     type: 'pipeNode',
@@ -120,6 +24,8 @@ const nodes = [
           title: 'NPM 组件初始化',
           logo: 'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*sko9RoPu-HgAAAAAAAAAAAAADvl6AQ/original',
           des: '30秒',
+          leftHandle: false,
+          rightHandle: true,
         },
         {
           title: '同步成员（仅子组件生...',
@@ -127,7 +33,7 @@ const nodes = [
           des: '0秒',
         },
         {
-          title: '注册部署平台',
+          title: '注册部署',
           logo: 'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*sko9RoPu-HgAAAAAAAAAAAAADvl6AQ/original',
           des: '0秒',
         },
@@ -234,12 +140,14 @@ const nodes = [
   },
 ];
 
-const edges = [
+export const edges = [
   {
     id: 'e1',
     source: 'a1',
     target: 'a2',
     animated: true,
+    sourceHandle: 'a1',
+    targetHandle: 'a2',
   },
   {
     id: 'e2',
@@ -266,44 +174,3 @@ const edges = [
     animated: true,
   },
 ];
-
-function App() {
-  const flowViewer = useFlowViewer();
-  const { styles } = useStyles();
-
-  const handleClick = useCallback(
-    (e, n) => {
-      flowViewer?.zoomToNode(n.id, 1000);
-    },
-    [flowViewer],
-  );
-
-  const handlePaneClick = useCallback(() => {
-    // flowViewer?.zoomToNode(n.id, 1000);
-  }, [flowViewer]);
-
-  return (
-    <div className={styles.container}>
-      <FlowView
-        onNodeClick={handleClick}
-        onPaneClick={handlePaneClick}
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        background={false}
-      >
-        <Background color="white" variant="none" style={{ background: 'white' }} />
-      </FlowView>
-    </div>
-  );
-}
-
-function ProApp() {
-  return (
-    <FlowViewProvider>
-      <App />
-    </FlowViewProvider>
-  );
-}
-
-export default ProApp;
diff --git a/docs/caseShow/demos/pipeline/multiPipe/pipeNode.tsx b/docs/caseShow/demos/pipeline/multiPipe/pipeNode.tsx
new file mode 100644
index 0000000..01f559f
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/multiPipe/pipeNode.tsx
@@ -0,0 +1,109 @@
+import { Handle, NodeProps, Position, SelectType } from '@ant-design/pro-flow';
+import { FC } from 'react';
+import useStyles from '../../index.style';
+
+interface PipeNodeChild {
+  title: string;
+  des: string;
+  logo: string;
+}
+
+interface PipeNode {
+  stepTitle: string;
+  title: string;
+  des: string;
+  logo: string;
+  needSwitch?: boolean;
+  children?: PipeNodeChild[];
+  selectType?: SelectType;
+}
+
+export const PipeNode: FC<NodeProps<PipeNode>> = ({ id, data }) => {
+  const { stepTitle, title, des, logo, needSwitch = false, children = [], selectType } = data;
+  const { styles } = useStyles();
+
+  return (
+    <div className={'pipeNodeWrap' + ` pipeNode-${selectType}`}>
+      <Handle
+        type="target"
+        id={`${id}`}
+        position={Position.Left}
+        style={{
+          opacity: 0,
+          top: 30,
+          left: 3,
+        }}
+      />
+      <div className={styles.stepTitle}>{stepTitle}</div>
+      <div className={styles.pipeNode}>
+        <div className={styles.mainBox}>
+          <div className={styles.logo}>
+            <img src={logo} alt="" />
+          </div>
+          <div className={styles.wrap}>
+            <div className={styles.title}>{title}</div>
+            <div className={styles.des}>{des}</div>
+          </div>
+          {needSwitch && (
+            <div className={styles.pipeNodeRight}>
+              <div className={styles.switch}>
+                <div className={styles.switchIcon}></div>
+              </div>
+            </div>
+          )}
+        </div>
+        {children.length > 0 && (
+          <div className={styles.children}>
+            {children.map((item, index) => (
+              <div style={{ position: 'relative' }} key={item.title + index}>
+                {item.leftHandle && (
+                  <Handle
+                    type="target"
+                    id={`${id}-${item.title}-target`}
+                    position={Position.Left}
+                    style={{
+                      opacity: 0,
+                      top: 45,
+                      left: 0,
+                    }}
+                  />
+                )}
+                <div className={styles.childrenBox}>
+                  <div className={styles.logo}>
+                    <img src={item.logo} alt="" />
+                  </div>
+                  <div className={styles.wrap}>
+                    <div className={styles.title}>{item.title}</div>
+                    <div className={styles.des}>{item.des}</div>
+                  </div>
+                </div>
+                {item.rightHandle && (
+                  <Handle
+                    type="source"
+                    id={`${id}-${item.title}-source`}
+                    position={Position.Right}
+                    style={{
+                      top: 45,
+                      right: 0,
+                      opacity: 0,
+                    }}
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      <Handle
+        type="source"
+        id={`${id}`}
+        position={Position.Right}
+        style={{
+          top: 30,
+          right: 3,
+          opacity: 0,
+        }}
+      />
+    </div>
+  );
+};
diff --git a/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
new file mode 100644
index 0000000..782cdb1
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/multiPipe/pipelineDemo.tsx
@@ -0,0 +1,57 @@
+/**
+ * compact: true
+ */
+import {
+  Background,
+  FlowView,
+  FlowViewProvider,
+  useEdgesState,
+  useFlowViewer,
+  useNodesState,
+} from '@ant-design/pro-flow';
+import { useCallback } from 'react';
+import useStyles from '../../index.style';
+import { edges, nodes } from './data.ts';
+import { PipeNode } from './pipeNode';
+
+const nodeTypes = { pipeNode: PipeNode };
+
+function App() {
+  const flowViewer = useFlowViewer();
+  const { styles } = useStyles();
+  const [_nodes, , onNodesChange] = useNodesState([...nodes]);
+  const [_edges, , onEdgesChange] = useEdgesState([...edges]);
+
+  const handleClick = useCallback(
+    (e, n) => {
+      flowViewer?.zoomToNode(n.id, 1000);
+    },
+    [flowViewer],
+  );
+
+  return (
+    <div className={styles.container}>
+      <FlowView
+        onNodeClick={handleClick}
+        nodes={_nodes}
+        edges={_edges}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        nodeTypes={nodeTypes}
+        background={false}
+      >
+        <Background color="#f1f1f1" variant="none" style={{ background: '#f1f1f1' }} />
+      </FlowView>
+    </div>
+  );
+}
+
+function ProApp() {
+  return (
+    <FlowViewProvider>
+      <App />
+    </FlowViewProvider>
+  );
+}
+
+export default ProApp;
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/data.tsx b/docs/caseShow/demos/pipeline/taskPipeline/data.tsx
new file mode 100644
index 0000000..9101487
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/taskPipeline/data.tsx
@@ -0,0 +1,223 @@
+import { Button } from 'antd';
+import { TaskContent } from './nodes/taskContent';
+export const ActionBtn = () => {
+  return (
+    <Button size="small" type="text" onClick={(e) => e.stopPropagation()}>
+      action
+    </Button>
+  );
+};
+
+export const nodes = [
+  {
+    id: 'A',
+    type: 'StageNode',
+    position: { x: 100, y: 100 },
+    data: {
+      title: '配置校验',
+      extra: <div style={{ cursor: 'pointer', marginRight: '10px' }}>+</div>,
+      children: [
+        {
+          id: 'task1',
+          title: '提交申请',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+        {
+          id: 'task2',
+          title: '提交申请123',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
+    },
+    zIndex: -1,
+  },
+  {
+    id: 'B',
+    type: 'StageNode',
+    position: { x: 400, y: 100 },
+    data: {
+      title: '多任务并行',
+      children: [
+        {
+          id: 'b1',
+          title: '提交申请',
+          status: 'success',
+          isOpen: false,
+        },
+        {
+          id: 'b2',
+          title: '提交申请',
+          status: 'success',
+          isOpen: true,
+          children: <TaskContent />,
+        },
+        {
+          id: 'b3',
+          title: '提交申请123',
+          status: 'success',
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
+    },
+    zIndex: -1,
+  },
+  {
+    id: 'B2',
+    type: 'StageNode',
+    position: { x: 400, y: 500 },
+    data: {
+      title: '多任务并行',
+      children: [
+        {
+          id: 'b21',
+          title: '提交申请',
+          status: 'success',
+          isOpen: false,
+        },
+        {
+          id: 'b22',
+          title: '提交申请',
+          status: 'success',
+          isOpen: true,
+          children: <TaskContent />,
+        },
+        {
+          id: 'b23',
+          title: '提交申请123',
+          status: 'success',
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
+    },
+    zIndex: -1,
+  },
+  {
+    id: 'C',
+    type: 'StageNode',
+    position: { x: 700, y: 100 },
+    data: {
+      title: '阶段名称',
+      children: [
+        {
+          id: 'c1',
+          title: '提交申请',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+        {
+          id: 'c2',
+          title: '提交申请123',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
+    },
+    zIndex: -1,
+  },
+  {
+    id: 'D',
+    type: 'StageNode',
+    position: { x: 1000, y: 100 },
+    data: {
+      title: '阶段名称',
+      children: [
+        {
+          id: 'd1',
+          title: '提交申请',
+          status: 'success',
+          extra: <ActionBtn />,
+          isOpen: false,
+          children: <TaskContent />,
+        },
+      ],
+    },
+    zIndex: -1,
+  },
+];
+
+export const edges = [
+  {
+    id: 'A-B',
+    source: 'A',
+    target: 'B',
+    sourceHandle: 'task1',
+    targetHandle: 'b2',
+    type: 'bezier',
+  },
+  {
+    id: 'A-B2',
+    source: 'A',
+    target: 'B',
+    sourceHandle: 'task1',
+    type: 'bezier',
+    targetHandle: 'b3',
+  },
+  {
+    id: 'A-B3',
+    source: 'A',
+    target: 'B2',
+    sourceHandle: 'task1',
+    type: 'bezier',
+    targetHandle: 'b23',
+  },
+  {
+    id: 'B-C',
+    source: 'B',
+    target: 'C',
+    sourceHandle: 'b1',
+    type: 'bezier',
+    targetHandle: 'c1',
+  },
+  {
+    id: 'B2-C',
+    source: 'B2',
+    target: 'C',
+    sourceHandle: 'b23',
+    type: 'bezier',
+    targetHandle: 'c1',
+  },
+  {
+    id: 'B-C2',
+    source: 'B',
+    target: 'C',
+    sourceHandle: 'b2',
+    type: 'bezier',
+    targetHandle: 'c1',
+  },
+  {
+    id: 'B-C3',
+    source: 'B',
+    target: 'C',
+    sourceHandle: 'b3',
+    type: 'bezier',
+    targetHandle: 'c2',
+  },
+  {
+    id: 'C-D',
+    source: 'C',
+    target: 'D',
+    sourceHandle: 'c1',
+    type: 'bezier',
+    targetHandle: 'd1',
+  },
+  {
+    id: 'C-D2',
+    source: 'C',
+    target: 'D',
+    sourceHandle: 'c2',
+    type: 'bezier',
+    targetHandle: 'd1',
+  },
+];
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/index.tsx b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx
new file mode 100644
index 0000000..217809c
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/taskPipeline/index.tsx
@@ -0,0 +1,52 @@
+/**
+ * compact: true
+ */
+
+import { Background, FlowView, applyEdgeChanges, applyNodeChanges } from '@ant-design/pro-flow';
+import { useCallback, useState } from 'react';
+import { edges, nodes } from './data';
+import StageNode from './nodes/stageNode';
+import taskNode from './nodes/taskNode';
+import useStyles from './styled';
+
+const nodeTypes = { taskNode, StageNode };
+
+function App() {
+  const { styles } = useStyles();
+  const [_nodes, setNodes] = useState(nodes);
+  const [_edges, setEdges] = useState(edges);
+
+  const onNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    [setNodes],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    [setEdges],
+  );
+
+  return (
+    <div className={styles.container}>
+      <FlowView
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        nodeTypes={nodeTypes}
+        nodes={_nodes}
+        edges={_edges}
+        background={false}
+        layoutOptions={{
+          ranksep: 50,
+        }}
+      >
+        <Background color="#f1f1f1" variant="none" style={{ background: '#f1f1f1' }} />
+      </FlowView>
+    </div>
+  );
+}
+
+function ProApp() {
+  return <App />;
+}
+
+export default ProApp;
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx b/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx
new file mode 100644
index 0000000..01690f9
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/stageNode.tsx
@@ -0,0 +1,27 @@
+import { FlowViewNode } from '@ant-design/pro-flow';
+import { FC } from 'react';
+import useStyles from './styled';
+import TaskNode from './taskNode';
+
+const StageNode: FC<FlowViewNode> = (node) => {
+  // const [open, setOpen] = useState(false);
+  const { styles } = useStyles();
+  const { data } = node;
+  const taskNodes = data.children;
+
+  return (
+    <div className={styles.stageNode}>
+      <div className="wrap">
+        <div className="title">{data.title}</div>
+        {data.extra}
+      </div>
+      <div className="taskNodes">
+        {taskNodes.map((taskNode: any) => {
+          return <TaskNode data={taskNode} key={taskNode.id} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default StageNode;
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts b/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts
new file mode 100644
index 0000000..4ef49a3
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/styled.ts
@@ -0,0 +1,88 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    wrap: {
+      width: '240px',
+      backgroundColor: '#FAFAFA',
+      marginBottom: '10px',
+      borderRadius: '8px',
+      position: 'relative',
+    },
+    taskNode: {
+      width: '240px',
+      minHeight: '42px',
+      backgroundColor: 'white',
+      padding: '8px 12px',
+      borderRadius: '8px',
+      boxSizing: 'border-box',
+      border: '1px solid #e8e8e8',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      '.title': {
+        width: '100px',
+        marginLeft: '10px',
+      },
+      '.group': {
+        width: '100px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+
+        '.extra': {
+          width: '60px',
+        },
+
+        '.span': {
+          width: '20px',
+          display: 'block',
+          textAlign: 'center',
+        },
+      },
+    },
+
+    stageNode: {
+      width: '256px',
+      height: ' 100%',
+      backgroundColor: '#FAFAFA',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      borderRadius: '8px',
+
+      '.wrap': {
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'nowrap',
+        justifyContent: 'space-between',
+        padding: '10px',
+      },
+
+      '.title': {
+        width: '100px',
+        marginLeft: '10px',
+      },
+    },
+
+    taskContent: {
+      margin: '0',
+      padding: '8px 12px',
+      listStyle: 'none',
+      border: '1px solid #f0f0f0',
+      borderTop: 'none',
+      '> li': {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '8px',
+        '> div': {
+          marginLeft: '8px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+        },
+      },
+    },
+  };
+});
+export default useStyles;
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskContent.tsx b/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskContent.tsx
new file mode 100644
index 0000000..c929160
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskContent.tsx
@@ -0,0 +1,43 @@
+import { green, red } from '@ant-design/colors';
+import { CheckCircleFilled, ClockCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import useStyles from './styled';
+
+export const TaskContent = () => {
+  const { styles } = useStyles();
+
+  return (
+    <ul className={styles.taskContent}>
+      <li>
+        <CheckCircleFilled style={{ color: green[5], fontSize: 14 }} />
+        <div>
+          <span>七尼尼 已完成</span>
+          <span>43s</span>
+        </div>
+      </li>
+      <li />
+      <li>
+        <CheckCircleFilled style={{ color: green[5], fontSize: 14 }} />
+        <div>
+          <span>lydon 已完成</span>
+          <span>43s</span>
+        </div>
+      </li>
+      <li />
+      <li>
+        <CloseCircleFilled style={{ color: red[5], fontSize: 14 }} />
+        <div>
+          <span>青霓 审批不通过</span>
+          <span>43s</span>
+        </div>
+      </li>
+      <li />
+      <li>
+        <ClockCircleFilled style={{ color: 'rgba(0, 0, 0, 0.2)', fontSize: 14 }} />
+        <div>
+          <span>青霓 未开始</span>
+          <span />
+        </div>
+      </li>
+    </ul>
+  );
+};
diff --git a/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx b/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx
new file mode 100644
index 0000000..476106d
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/taskPipeline/nodes/taskNode.tsx
@@ -0,0 +1,67 @@
+import { green } from '@ant-design/colors';
+import { CheckCircleFilled } from '@ant-design/icons';
+import { Handle, Position } from '@ant-design/pro-flow';
+import { useState } from 'react';
+import useStyles from './styled';
+
+export interface TaskNodeC {
+  id: string;
+  title: string;
+  status: string;
+  extra: React.JSX.Element;
+  isOpen: boolean;
+  children: React.JSX.Element;
+}
+
+const TaskNode = (props: { data: TaskNodeC }) => {
+  const { data } = props;
+  const [open, setOpen] = useState(data.isOpen);
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.wrap}>
+      <Handle
+        style={{
+          position: 'absolute',
+          top: '21px',
+          transform: 'translateY(-50%)',
+          opacity: 0,
+        }}
+        id={`${data.id}`}
+        type="target"
+        position={Position.Left}
+      />
+      <div
+        className={styles.taskNode}
+        style={{ justifyContent: `${data.children ? 'space-between' : 'flex-start'}` }}
+      >
+        <CheckCircleFilled style={{ color: green[5], fontSize: 14 }} />
+        <div className="title">{data.title}</div>
+        {data.children && (
+          <div
+            className="group"
+            style={{ justifyContent: `${data.extra ? 'space-between' : 'flex-end'}` }}
+          >
+            {data.extra && <div className="extra">{data.extra}</div>}
+            {data.extra && <span className="span">|</span>}
+            <div onClick={() => setOpen(!open)}>{open ? 'on' : 'off'}</div>
+          </div>
+        )}
+      </div>
+      {open && data.children}
+      <Handle
+        style={{
+          position: 'absolute',
+          top: '21px',
+          transform: 'translateY(-50%)',
+          opacity: 0,
+        }}
+        id={`${data.id}`}
+        type="source"
+        position={Position.Right}
+      />
+    </div>
+  );
+};
+
+export default TaskNode;
diff --git a/docs/caseShow/demos/techPipeLine.style.ts b/docs/caseShow/demos/pipeline/taskPipeline/styled.ts
similarity index 100%
rename from docs/caseShow/demos/techPipeLine.style.ts
rename to docs/caseShow/demos/pipeline/taskPipeline/styled.ts
diff --git a/docs/caseShow/demos/techPipeline.tsx b/docs/caseShow/demos/pipeline/techPipe/data.ts
similarity index 58%
rename from docs/caseShow/demos/techPipeline.tsx
rename to docs/caseShow/demos/pipeline/techPipe/data.ts
index 0a8257f..f63e3e6 100644
--- a/docs/caseShow/demos/techPipeline.tsx
+++ b/docs/caseShow/demos/pipeline/techPipe/data.ts
@@ -1,104 +1,8 @@
-/**
- * compact: true
- */
-import {
-  Background,
-  FlowView,
-  FlowViewProvider,
-  Handle,
-  Position,
-  useFlowViewer,
-} from '@ant-design/pro-flow';
-import { FC, useCallback } from 'react';
-import useStyles from './techPipeLine.style';
-
-interface PipeNodeChild {
-  title: string;
-  logo?: string;
-  id: string;
-}
-
-interface PipeNode {
-  title: string;
-  logo: string;
-  des?: string;
-  children?: PipeNodeChild[];
-}
-
 const nodeWidth = 250;
 const nodeHeight = 150;
 const edgeType = 'bezier';
 
-const PipeNode: FC<{
-  data: PipeNode;
-}> = ({ data }) => {
-  const { title, des, logo, children = [] } = data;
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.techUIpipeNodeWrap}>
-      <div className={styles.pipeNode}>
-        <div className={styles.mainBox}>
-          <div className={styles.logo}>
-            <img src={logo} alt="" />
-          </div>
-          <div className={styles.title}>{title}</div>
-          <div className={styles.subLogo}>
-            <img
-              src={
-                'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*Rg0cQpidn8cAAAAAAAAAAAAADvl6AQ/original'
-              }
-              alt=""
-            />
-          </div>
-        </div>
-
-        {children.length > 0 && (
-          <div className={styles.children}>
-            {children.map((item, index) => (
-              <>
-                <div className={styles.childrenBox} key={index}>
-                  <Handle
-                    id={`${item.id}-target`}
-                    type="target"
-                    position={Position.Left}
-                    style={{
-                      opacity: 0,
-                    }}
-                  />
-
-                  {item.logo && (
-                    <div className={styles.logo}>
-                      <img src={item.logo} alt="" />
-                    </div>
-                  )}
-
-                  <div className={styles.wrap}>
-                    <div className={styles.lineTitle}>{item.title}</div>
-                  </div>
-                  <Handle
-                    id={`${item.id}-source`}
-                    type="source"
-                    position={Position.Right}
-                    style={{
-                      opacity: 0,
-                    }}
-                  />
-                </div>
-              </>
-            ))}
-          </div>
-        )}
-
-        {des && <div className={styles.des}>{des}</div>}
-      </div>
-    </div>
-  );
-};
-
-const nodeTypes = { pipeNode: PipeNode };
-
-const nodes = [
+export const nodes = [
   {
     id: 'a1',
     type: 'pipeNode',
@@ -198,7 +102,7 @@ const nodes = [
   },
 ];
 
-const edges = [
+export const edges = [
   {
     id: 'edge-1',
     source: 'a1',
@@ -296,43 +200,3 @@ const edges = [
     targetHandle: 'a4-2-target',
   },
 ];
-
-function App() {
-  const flowViewer = useFlowViewer();
-  const { styles } = useStyles();
-
-  const handleClick = useCallback(
-    (e, n) => {
-      flowViewer?.zoomToNode(n.id, 1000);
-    },
-    [flowViewer],
-  );
-
-  const handlePaneClick = useCallback(() => {
-    // flowViewer?.zoomToNode(n.id, 1000);
-  }, [flowViewer]);
-  return (
-    <div className={styles.container}>
-      <FlowView
-        onNodeClick={handleClick}
-        onPaneClick={handlePaneClick}
-        nodes={nodes}
-        edges={edges}
-        nodeTypes={nodeTypes}
-        background={false}
-      >
-        <Background color="#F6F8FB" variant="none" style={{ background: '#F6F8FB' }} />
-      </FlowView>
-    </div>
-  );
-}
-
-function ProApp() {
-  return (
-    <FlowViewProvider>
-      <App />
-    </FlowViewProvider>
-  );
-}
-
-export default ProApp;
diff --git a/docs/caseShow/demos/pipeline/techPipe/pipeNode.tsx b/docs/caseShow/demos/pipeline/techPipe/pipeNode.tsx
new file mode 100644
index 0000000..a7db940
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/techPipe/pipeNode.tsx
@@ -0,0 +1,84 @@
+import { Handle, Position } from '@ant-design/pro-flow';
+import useStyles from './techPipeLine.style';
+
+interface PipeNodeChild {
+  title: string;
+  logo?: string;
+  id: string;
+}
+
+interface PipeNode {
+  title: string;
+  logo: string;
+  des?: string;
+  children?: PipeNodeChild[];
+}
+
+const PipeNode: FC<{
+  data: PipeNode;
+}> = ({ data }) => {
+  const { title, des, logo, children = [] } = data;
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.techUIpipeNodeWrap}>
+      <div className={styles.pipeNode}>
+        <div className={styles.mainBox}>
+          <div className={styles.logo}>
+            <img src={logo} alt="" />
+          </div>
+          <div className={styles.title}>{title}</div>
+          <div className={styles.subLogo}>
+            <img
+              src={
+                'https://mdn.alipayobjects.com/huamei_d2ejos/afts/img/A*Rg0cQpidn8cAAAAAAAAAAAAADvl6AQ/original'
+              }
+              alt=""
+            />
+          </div>
+        </div>
+
+        {children.length > 0 && (
+          <div className={styles.children}>
+            {children.map((item, index) => (
+              <div key={item.title + index}>
+                <div className={styles.childrenBox}>
+                  <Handle
+                    id={`${item.id}-target`}
+                    type="target"
+                    position={Position.Left}
+                    style={{
+                      opacity: 0,
+                    }}
+                  />
+
+                  {item.logo && (
+                    <div className={styles.logo}>
+                      <img src={item.logo} alt="" />
+                    </div>
+                  )}
+
+                  <div className={styles.wrap}>
+                    <div className={styles.lineTitle}>{item.title}</div>
+                  </div>
+                  <Handle
+                    id={`${item.id}-source`}
+                    type="source"
+                    position={Position.Right}
+                    style={{
+                      opacity: 0,
+                    }}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {des && <div className={styles.des}>{des}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default PipeNode;
diff --git a/docs/caseShow/demos/pipeline/techPipe/techPipeLine.style.ts b/docs/caseShow/demos/pipeline/techPipe/techPipeLine.style.ts
new file mode 100644
index 0000000..592e1aa
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/techPipe/techPipeLine.style.ts
@@ -0,0 +1,93 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    techUIpipeNodeWrap: {
+      width: '260px',
+      minHeight: '100px',
+      backgroundColor: '#f6f8fa',
+      padding: '12px 6px',
+      boxSizing: 'border-box',
+      borderRadius: '8px',
+    },
+
+    pipeNode: {
+      width: '100%',
+      borderRadius: '4px',
+      backgroundColor: '#fff',
+      paddingBottom: '12px',
+    },
+    mainBox: {
+      width: '100%',
+      padding: '12px',
+      height: '45px',
+      backgroundColor: 'white',
+      display: 'flex',
+      borderBottom: 'none',
+      borderRadius: '8px',
+      boxSizing: 'border-box',
+      position: 'relative',
+    },
+    logo: {
+      display: 'flex',
+      alignItems: 'center',
+      img: { width: '16px', height: '16px' },
+    },
+    title: {
+      marginLeft: '8px',
+      fontSize: '14px',
+      fontWeight: '500',
+      color: '#000',
+      lineHeight: '22px',
+      whiteSpace: 'nowrap',
+    },
+    lineTitle: {
+      marginLeft: '8px',
+      fontSize: '14px',
+      fontWeight: '500',
+      color: '#000',
+      lineHeight: '22px',
+      whiteSpace: 'nowrap',
+    },
+    subLogo: {
+      position: 'absolute',
+      right: '6px',
+      top: '8px',
+      img: { width: '80px', height: '25px' },
+    },
+    des: {
+      marginTop: '16px',
+      color: '#00000073',
+      fontSize: '10px',
+    },
+    children: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      paddingBottom: '8px',
+    },
+    childrenBox: {
+      width: '220px',
+      height: '30px',
+      paddingLeft: '5px',
+      backgroundColor: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      border: '1px solid #f1f1f1',
+      borderRadius: '3px',
+      boxSizing: 'border-box',
+      marginTop: '3px',
+      position: 'relative',
+    },
+    wrap: {
+      marginLeft: '8px',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    container: {
+      width: '100%',
+      height: '600px',
+    },
+  };
+});
+export default useStyles;
diff --git a/docs/caseShow/demos/pipeline/techPipe/techPipeline.tsx b/docs/caseShow/demos/pipeline/techPipe/techPipeline.tsx
new file mode 100644
index 0000000..3062263
--- /dev/null
+++ b/docs/caseShow/demos/pipeline/techPipe/techPipeline.tsx
@@ -0,0 +1,58 @@
+/**
+ * compact: true
+ */
+
+import {
+  Background,
+  FlowView,
+  FlowViewProvider,
+  useEdgesState,
+  useFlowViewer,
+  useNodesState,
+} from '@ant-design/pro-flow';
+import { useCallback } from 'react';
+import { edges, nodes } from './data';
+import PipeNode from './pipeNode';
+import useStyles from './techPipeLine.style';
+
+const nodeTypes = { pipeNode: PipeNode };
+
+function App() {
+  const flowViewer = useFlowViewer();
+  const { styles } = useStyles();
+  const [_nodes, , onNodesChange] = useNodesState([...nodes]);
+  const [_edges, , onEdgesChange] = useEdgesState([...edges]);
+
+  const handleClick = useCallback(
+    (e, n) => {
+      flowViewer?.zoomToNode(n.id, 1000);
+    },
+    [flowViewer],
+  );
+
+  return (
+    <div className={styles.container}>
+      <FlowView
+        onNodeClick={handleClick}
+        nodes={_nodes}
+        edges={_edges}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        nodeTypes={nodeTypes}
+        background={false}
+      >
+        <Background color="#F6F8FB" variant="none" style={{ background: '#F6F8FB' }} />
+      </FlowView>
+    </div>
+  );
+}
+
+function ProApp() {
+  return (
+    <FlowViewProvider>
+      <App />
+    </FlowViewProvider>
+  );
+}
+
+export default ProApp;
diff --git a/docs/caseShow/demos/workflow/index.tsx b/docs/caseShow/demos/workflow/index.tsx
new file mode 100644
index 0000000..c556d96
--- /dev/null
+++ b/docs/caseShow/demos/workflow/index.tsx
@@ -0,0 +1,106 @@
+/**
+ * compact: true
+ * defaultShowCode: true
+ */
+import {
+  BasicNode,
+  EditNode,
+  FlowEditor,
+  FlowEditorProvider,
+  useFlowEditor,
+} from '@ant-design/pro-flow';
+import { useCallback, useEffect } from 'react';
+import { StringRender } from '/docs/guide/demos/flowEditor/StringNode';
+
+import TextNode from './nodes/textNode';
+import Sidebar from './sidebar';
+import useStyles from './styled';
+
+let id = 0;
+const getId = () => `node_${id++}`;
+
+const nodeTypes = {
+  TextNode: TextNode,
+  StringNode: StringRender,
+  BasicNode: BasicNode,
+  EditNode: EditNode,
+};
+const ProFlowDemo = () => {
+  const editor = useFlowEditor();
+  const { styles } = useStyles();
+
+  const onDragOver = useCallback((event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (!editor) return;
+
+      const type = event.dataTransfer.getData('application/reactflow');
+      if (typeof type === 'undefined' || !type) {
+        return;
+      }
+
+      const position = editor.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      const newNode = {
+        id: getId(),
+        type,
+        position,
+        content: {
+          a: '123',
+        },
+        data: {
+          title: `${type} node`,
+          content: '123',
+        },
+      };
+
+      editor.addNode(newNode);
+    },
+    [editor],
+  );
+
+  useEffect(() => {
+    editor.addNode({
+      id: 'a1',
+      type: 'TextNode',
+      position: { x: 200, y: 100 },
+      data: {
+        title: '123',
+        aaa: '456',
+      },
+    });
+  }, [editor]);
+
+  return (
+    <div className={styles.container}>
+      <FlowEditor
+        nodeTypes={nodeTypes}
+        flowProps={{
+          onDrop,
+          onDragOver,
+        }}
+        miniMap={false}
+        devtools={true}
+      >
+        <Sidebar />
+      </FlowEditor>
+    </div>
+  );
+};
+
+const FlowDemo = () => {
+  return (
+    <FlowEditorProvider>
+      <ProFlowDemo />
+    </FlowEditorProvider>
+  );
+};
+
+export default FlowDemo;
diff --git a/docs/caseShow/demos/workflow/nodes/network.tsx b/docs/caseShow/demos/workflow/nodes/network.tsx
new file mode 100644
index 0000000..dc887d1
--- /dev/null
+++ b/docs/caseShow/demos/workflow/nodes/network.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import useStyles from '../styled';
+
+interface NetworkNode {
+  title: string;
+  logo: string;
+  des?: string;
+}
+
+const NetworkNode: FC<{
+  data: NetworkNode;
+}> = ({ data }) => {
+  const { styles } = useStyles();
+
+  return <div></div>;
+};
+
+export default NetworkNode;
diff --git a/docs/caseShow/demos/workflow/nodes/textNode.tsx b/docs/caseShow/demos/workflow/nodes/textNode.tsx
new file mode 100644
index 0000000..b661462
--- /dev/null
+++ b/docs/caseShow/demos/workflow/nodes/textNode.tsx
@@ -0,0 +1,16 @@
+import { Handle, Position } from '@ant-design/pro-flow';
+import useStyles from '../styled';
+
+const TextNode = () => {
+  const { styles } = useStyles();
+
+  return (
+    <div className={styles.textNode}>
+      <h1>文本节点</h1>
+      <textarea type="textarea" placeholder="请输入内容" />
+      <Handle type={'source'} position={Position.Right} />
+    </div>
+  );
+};
+
+export default TextNode;
diff --git a/docs/caseShow/demos/workflow/sidebar.tsx b/docs/caseShow/demos/workflow/sidebar.tsx
new file mode 100644
index 0000000..097405f
--- /dev/null
+++ b/docs/caseShow/demos/workflow/sidebar.tsx
@@ -0,0 +1,44 @@
+import useStyles from './styled';
+
+export default () => {
+  const { styles, cx } = useStyles();
+
+  const onDragStart = (event, nodeType) => {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+
+  return (
+    <div className={styles.aside}>
+      <div className={styles.description}>您可以将这些节点拖到左侧的画布中</div>
+      <div
+        className={cx(styles.dndnode, styles.input)}
+        onDragStart={(event) => onDragStart(event, 'StringNode')}
+        draggable
+      >
+        String Node
+      </div>
+      <div
+        className={cx(styles.dndnode, styles.input)}
+        onDragStart={(event) => onDragStart(event, 'TextNode')}
+        draggable
+      >
+        Text Node
+      </div>
+      <div
+        className={styles.dndnode}
+        onDragStart={(event) => onDragStart(event, 'BasicNode')}
+        draggable
+      >
+        BasicNode Node
+      </div>
+      <div
+        className={cx(styles.dndnode, styles.output)}
+        onDragStart={(event) => onDragStart(event, 'EditNode')}
+        draggable
+      >
+        EditNode Node
+      </div>
+    </div>
+  );
+};
diff --git a/docs/caseShow/demos/workflow/styled.ts b/docs/caseShow/demos/workflow/styled.ts
new file mode 100644
index 0000000..a1048dd
--- /dev/null
+++ b/docs/caseShow/demos/workflow/styled.ts
@@ -0,0 +1,73 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(() => {
+  return {
+    container: {
+      width: '100%',
+      height: '600px',
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    aside: {
+      width: '200px',
+      height: '100%',
+      position: 'absolute',
+      right: 0,
+      top: 0,
+      zIndex: 10000000,
+      borderRight: '1px solid #eee',
+      padding: '15px 10px',
+      fontSize: '12px',
+      background: '#fcfcfc',
+      marginBottom: '10px',
+    },
+    description: {
+      marginBottom: '10px',
+    },
+    dndnode: {
+      height: '20px',
+      padding: '4px',
+      border: '1px solid #1a192b',
+      borderRadius: '2px',
+      marginBottom: '10px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      cursor: 'grab',
+    },
+    'dndnode.input': {
+      borderColor: '#0041d0',
+    },
+    'dndnode.output': {
+      borderColor: '#ff0072',
+    },
+    'reactflow-wrapper': {
+      flexGrow: '1',
+      height: '100%',
+    },
+    selectall: {
+      marginTop: '10px',
+    },
+    textNode: {
+      width: '300px',
+      height: '300px',
+      background: '#fff',
+      borderRadius: '10px',
+      border: '1px solid #ddd',
+      display: 'flex',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      h1: {
+        margin: 0,
+        padding: '10px',
+        borderBottom: '1px solid #ddd',
+        fontSize: '',
+      },
+      textarea: {
+        width: '280px',
+        height: '200px',
+      },
+    },
+  };
+});
+export default useStyles;
diff --git a/docs/caseShow/pipeline.md b/docs/caseShow/pipeline.md
new file mode 100644
index 0000000..233e2c5
--- /dev/null
+++ b/docs/caseShow/pipeline.md
@@ -0,0 +1,23 @@
+---
+nav:
+  title: 案例展示
+  order: 100
+group:
+  title: 场景展示
+  order: 1
+title: 流水线&管道图
+order: 3
+description:
+---
+
+## 流水线
+
+<code src="./demos/pipeline/multiPipe/pipelineDemo.tsx" ></code>
+
+## 管道图
+
+<code src="./demos/pipeline/techPipe/techPipeline.tsx" ></code>
+
+## 任务管道图
+
+<code src="./demos/pipeline/taskPipeline/index.tsx" ></code>
diff --git a/docs/caseShow/techPileline.md b/docs/caseShow/techPileline.md
index 8e9785f..fb18c85 100644
--- a/docs/caseShow/techPileline.md
+++ b/docs/caseShow/techPileline.md
@@ -12,4 +12,4 @@ description:
 
 ## Default
 
-<code src="./demos/techPipeline.tsx" ></code>
+<code src="./demos/pipeline/techPipe/techPipeline.tsx" ></code>
diff --git a/docs/caseShow/workFlow.md b/docs/caseShow/workFlow.md
new file mode 100644
index 0000000..cb4c35c
--- /dev/null
+++ b/docs/caseShow/workFlow.md
@@ -0,0 +1,25 @@
+---
+nav:
+  title: 案例展示
+  order: 100
+group:
+  title: 场景展示
+  order: 1
+title: 工作流编辑器
+order: 2
+description:
+---
+
+## 工作流编辑器
+
+案例特点：
+
+- 拖拽节点放入画布
+- 框选多个节点
+- 复制粘贴（快捷键）
+- 撤销重做（快捷键）
+- 单个/框选删除
+- 自由拖拽
+- 连接节点
+
+<code src='./demos/workflow/index.tsx'></code>
diff --git a/docs/guide/demos/flowEditor/css/index.style.ts b/docs/guide/demos/flowEditor/css/index.style.ts
index 2c0c8bf..a180658 100644
--- a/docs/guide/demos/flowEditor/css/index.style.ts
+++ b/docs/guide/demos/flowEditor/css/index.style.ts
@@ -7,13 +7,13 @@ const useStyles = createStyles(() => {
       height: '600px',
     },
     stringNode: {
-      width: '150px',
-      height: '30px',
+      width: '200px',
+      height: '50px',
       textAlign: 'center',
       backgroundColor: 'white',
       border: '1px solid aqua',
       borderRadius: '4px',
-      lineHeight: '30px',
+      lineHeight: '50px',
     },
     selected: {
       border: '1px solid #007bff',
diff --git a/docs/guide/demos/flowViewIntro/dragableNode.tsx b/docs/guide/demos/flowViewIntro/dragableNode.tsx
index df7d212..1a4a2c6 100644
--- a/docs/guide/demos/flowViewIntro/dragableNode.tsx
+++ b/docs/guide/demos/flowViewIntro/dragableNode.tsx
@@ -8,7 +8,7 @@ import { nodes as _nodes, edges } from './data/data2';
 
 function App() {
   const { styles } = useStyles();
-  const [nodes, setNodes, onNodesChange] = useNodesState(_nodes);
+  const [nodes, , onNodesChange] = useNodesState(_nodes);
 
   return (
     <div className={styles.container}>
diff --git a/src/FlowView/helper.tsx b/src/FlowView/helper.tsx
index a9be495..fa1a917 100644
--- a/src/FlowView/helper.tsx
+++ b/src/FlowView/helper.tsx
@@ -30,6 +30,7 @@ export function convertMappingFrom(nodes: FlowViewNode[], edges: FlowViewEdge[],
     } = node;
 
     mapping[node.id] = {
+      ...node,
       id: node.id,
       data: node.data,
       select,
@@ -46,8 +47,8 @@ export function convertMappingFrom(nodes: FlowViewNode[], edges: FlowViewEdge[],
 
   edges.forEach((edge) => {
     const { source, target } = edge;
-    mapping[source].right?.push(target);
-    mapping[target].left?.push(source);
+    if (mapping[source]) mapping[source].right?.push(target);
+    if (mapping[target]) mapping[target].left?.push(source);
   });
 
   return mapping;
@@ -78,6 +79,10 @@ export function setNodePosition(
   const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
 
   g.setGraph({
+    rankdir: 'LR',
+    align: 'UL',
+    nodesep: 100,
+    ranksep: 200,
     ...layoutOptions,
   });
 
@@ -247,6 +252,7 @@ export const getRenderData = (
     const { width, height } = getWidthAndHeight(node);
 
     renderNodes.push({
+      ...node,
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
       id: node.id!,
diff --git a/src/FlowView/index.tsx b/src/FlowView/index.tsx
index ed8fc8a..c0d16ab 100644
--- a/src/FlowView/index.tsx
+++ b/src/FlowView/index.tsx
@@ -83,7 +83,8 @@ const FlowView: React.FC<Partial<FlowViewProps>> = (props) => {
   const { zoom } = useViewport();
 
   useEffect(() => {
-    flowDataAdapter!(nodes, edges, 1, autoLayout, layoutOptions);
+    const _zoom = zoom ? zoom : 1;
+    flowDataAdapter!(nodes, edges, _zoom, autoLayout, layoutOptions);
   }, [nodes, edges]);
 
   useEffect(() => {
diff --git a/src/FlowView/index.zh-CN.md b/src/FlowView/index.zh-CN.md
index d092ab7..02abb33 100644
--- a/src/FlowView/index.zh-CN.md
+++ b/src/FlowView/index.zh-CN.md
@@ -44,8 +44,8 @@ description: 基础画布容器
 | ------- | ------------------------------ | -------- | ------ | ---- |
 | rankdir | `'TB' \| 'BT' \| 'LR' \| 'RL'` | 布局样式 | -      | -    |
 | align   | `'UL' \| 'DL' \| 'UR' \| 'DR'` | 左右对齐 | -      | -    |
-| nodesep | `number`                       | 列间距   | -      | -    |
-| ranksep | `number`                       | 行间距   | -      | -    |
+| nodesep | `number`                       | 行间距   | -      | -    |
+| ranksep | `number`                       | 列间距   | -      | -    |
 
 ### FlowViewNode
 
diff --git a/src/FlowView/provider/FlowViewProvider.tsx b/src/FlowView/provider/FlowViewProvider.tsx
index 86b60ff..424b4d9 100644
--- a/src/FlowView/provider/FlowViewProvider.tsx
+++ b/src/FlowView/provider/FlowViewProvider.tsx
@@ -20,6 +20,7 @@ const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => {
     nodesep: 100,
     ranksep: 200,
   });
+
   const flowViewRef = useRef();
 
   const convertRenderData = useCallback(() => {
@@ -29,6 +30,7 @@ const ProviderInner: FC<{ children: ReactNode }> = ({ children }) => {
       autoLayout,
       layoutOptions,
     );
+
     setNodes(_nodes);
     setEdges(_edges);
   }, [mapping, initEdges, autoLayout, layoutOptions]);
diff --git a/src/index.ts b/src/index.ts
index 857e122..1acd835 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,8 @@ export {
   EdgeLabelRenderer,
   Handle,
   Position,
+  applyEdgeChanges,
+  applyNodeChanges,
   getBezierPath,
   getSmoothStepPath,
 } from 'reactflow';