diff --git a/graph/pom.xml b/graph/pom.xml
new file mode 100644
index 0000000000000000000000000000000000000000..61ec566aeaec3aeec1101d4e2401142acf54697c
--- /dev/null
+++ b/graph/pom.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <parent>
+        <artifactId>bic-parent</artifactId>
+        <groupId>cn.icanci.loopstack.bic</groupId>
+        <version>1.0-SNAPSHOT</version>
+    </parent>
+    <modelVersion>4.0.0</modelVersion>
+
+    <artifactId>bic-graph</artifactId>
+
+    <properties>
+        <maven.compiler.source>8</maven.compiler.source>
+        <maven.compiler.target>8</maven.compiler.target>
+    </properties>
+
+</project>
\ No newline at end of file
diff --git a/graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java b/graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java
new file mode 100644
index 0000000000000000000000000000000000000000..27b377f44331da066798b9da22cd2926f4061f0b
--- /dev/null
+++ b/graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java
@@ -0,0 +1,5 @@
+/**
+ * @author icanci
+ * @since 1.0 Created in 2023/08/20 15:42
+ */
+package cn.icanci.loopstack.bic.graph;
\ No newline at end of file
diff --git a/pom.xml b/pom.xml
index 4fbdd0c41fb30a177ba835d464840790e4eb387d..c22d155a8b7c2a7819ef9df126a1da93aaa3722a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -20,6 +20,7 @@
         <module>dal</module>
         <module>biz</module>
         <module>web</module>
+        <module>graph</module>
     </modules>
 
     <properties>
diff --git a/views/src/main/resources/vueboot/package.json b/views/src/main/resources/vueboot/package.json
index 02f68e2376412a8414f9d93aa6dd480551faa3b9..5207d19e0d0c805d863db6acf8d499f4ac96cfb8 100644
--- a/views/src/main/resources/vueboot/package.json
+++ b/views/src/main/resources/vueboot/package.json
@@ -15,6 +15,11 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@antv/layout": "^0.3.23",
+    "@antv/x6": "^2.13.1",
+    "@antv/x6-plugin-scroller": "^2.0.10",
+    "@antv/x6-plugin-selection": "^2.1.7",
+    "@antv/x6-plugin-snapline": "^2.1.7",
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
diff --git a/views/src/main/resources/vueboot/src/router/index.js b/views/src/main/resources/vueboot/src/router/index.js
index 2c4d686f9abb92ccf873af781f775b5aa5a6ce78..7672d09949e153cc6620c58760851f93e52bf4aa 100644
--- a/views/src/main/resources/vueboot/src/router/index.js
+++ b/views/src/main/resources/vueboot/src/router/index.js
@@ -184,6 +184,12 @@ export const constantRoutes = [
         name: 'bicSummaryView',
         meta: {title: '聚合视图'}
       },
+      {
+        path: 'demo-view',
+        component: () => import('@/views/bic-view/demo-view'),
+        name: 'demoView',
+        meta: {title: 'demoView'}
+      },
     ]
   },
   {
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js
new file mode 100644
index 0000000000000000000000000000000000000000..3fdb4b0c05bf8f00569458e9ab5b534c47910a6c
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js
@@ -0,0 +1,260 @@
+const demoViewEdgeData = [
+  {
+    source: {cell: "node1", port: 'port-right'},
+    target: {cell: 'node2', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    labels: [],
+    consumerInfo: {
+      attrs: {
+        line: {
+          stroke: 'red',
+          strokeWidth: 5,
+        },
+      },
+      labels: [{
+        attrs: {
+          label: {text: '调用'}
+        },
+        position: {
+          distance: 0.8
+        },
+      }]
+    },
+    historyInfo: {}
+  }, {
+    source: {cell: "node1", port: 'port-right'},
+    target: {cell: 'node3', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node3", port: 'port-right'},
+    target: {cell: 'node4', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node3", port: 'port-right'},
+    target: {cell: 'node5', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node2", port: 'port-right'},
+    target: {cell: 'node6', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node2", port: 'port-right'},
+    target: {cell: 'node7', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node2", port: 'port-right'},
+    target: {cell: 'node8', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node9', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node10', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node11', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node12', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node13', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node14', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node15', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node16', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node17', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node18', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node19', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node20', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+  {
+    source: {cell: "node8", port: 'port-right'},
+    target: {cell: 'node21', port: 'port-left'},
+    attrs: {
+      line: {
+        stroke: '#7c68fc',
+      },
+    },
+    router: 'manhattan',
+    connector: 'normal',
+    label: ''
+  },
+]
+
+export default demoViewEdgeData
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js
new file mode 100644
index 0000000000000000000000000000000000000000..5013d40074cbf3a00f317baf31266dfcb67687ce
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js
@@ -0,0 +1,1378 @@
+const demoViewNodeData = [
+  {
+    id: 'node1',
+    shape: 'circle',
+    width: 50,
+    height: 50,
+    attrs: {
+      body: {
+        fill: '#F39C12',
+        stroke: '#000',
+        rx: 16,
+        ry: 16,
+      },
+      label: {
+        text: '下单',
+        fill: '#333',
+        fontSize: 18,
+        fontWeight: 'bold',
+        fontVariant: 'small-caps',
+      },
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node2',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '获取Fr2缓存',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node3',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '调用风控接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node4',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '黑名单校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node5',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node6',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node7',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node8',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node9',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node10',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node11',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node12',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node13',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node14',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node15',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node16',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node17',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node18',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node19',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node20',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node21',
+    shape: 'rect',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#2ECC71',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+  },
+  {
+    id: 'node22',
+    shape: 'ellipse',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#ffffff',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+    freeNode: true
+  },
+  {
+    id: 'node23',
+    shape: 'ellipse',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#ffffff',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+    freeNode: true
+  },
+  {
+    id: 'node24',
+    shape: 'ellipse',
+    width: 100,
+    height: 40,
+    attrs: {
+      body: {
+        fill: '#ffffff',
+        stroke: '#000',
+        strokeDasharray: '10,2',
+      },
+      label: {
+        text: '失信人校验接口',
+        fill: '#333',
+        fontSize: 13,
+      }
+    },
+    ports: {
+      groups: {
+        // 输入链接桩群组定义
+        in: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+        // 输出链接桩群组定义
+        out: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 2,
+              magnet: true,
+              stroke: '#31d0c6',
+              strokeWidth: 2,
+              fill: '#fff',
+            },
+          },
+        },
+      },
+      items: [
+        {
+          id: 'port-left',
+          group: 'in',
+        }, {
+          id: 'port-right',
+          group: 'out',
+        },
+      ],
+    },
+    freeNode: true
+  },
+]
+
+export default demoViewNodeData
diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f76bdede5d9d19fa33f7784c28fabb6df9ff7026
--- /dev/null
+++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue
@@ -0,0 +1,171 @@
+<template>
+  <div style="width:100%; height:100%;">
+    <div id="container"></div>
+
+    <el-dialog title="test" :visible.sync="dialogTableVisible">
+      收货地址
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {Graph} from '@antv/x6'
+import {Snapline} from '@antv/x6-plugin-snapline'
+import {Selection} from '@antv/x6-plugin-selection'
+import {DagreLayout} from '@antv/layout'
+import {Scroller} from '@antv/x6-plugin-scroller'
+
+import demoViewNodeData from './demo-view-node-data'
+import demoViewEdgeData from './demo-view-edge-data'
+
+export default {
+  name: "demo-view",
+  data() {
+    return {
+      dialogTableVisible: false
+    }
+  },
+  mounted() {
+    const graph = new Graph({
+      container: document.getElementById('container'),
+      width: 800,
+      height: document.body.scrollHeight - 90,
+      autoResize: true,
+      interacting: {
+        edgeLabelMovable: true,
+      },
+      grid: {
+        size: 10,
+        visible: true,
+        type: 'doubleMesh',
+        args: [
+          {
+            color: '#eee',
+            thickness: 1,
+          },
+          {
+            color: '#ddd',
+            thickness: 1,
+            factor: 4,
+          },
+        ],
+      },
+      background: {
+        color: '#ffffff',
+      },
+      connecting: {
+        allowBlank: true,
+      },
+      selecting: {
+        enabled: true,
+        className: 'node-selecting',
+        rubberband: true,
+        rubberNode: true,
+        movable: true
+      },
+      snapline: {
+        enabled: true,
+        sharp: true,
+      },
+      keyboard: {
+        enabled: true
+      },
+    })
+    const data = {
+      nodes: demoViewNodeData,
+      edges: demoViewEdgeData
+    }
+    graph.fromJSON(data)
+
+    // https://x6.antv.antgroup.com/tutorial/basic/events
+    // graph.addNode({})
+    // graph.addNodes(demoViewNodeData)
+    // graph.centerContent()
+
+    // graph.on('node:click', ({e, x, y, node, view}) => {
+    //   console.log(e)
+    //   console.log(x)
+    //   console.log(y)
+    //   console.log(node)
+    //   console.log(view)
+    // })
+    //
+    // graph.on('node:mouseenter', ({e, node, view}) => {
+    //   alert("eeee")
+    // })
+    // graph.on('cell:click', ({ e, x, y, cell, view }) => {})
+    //   graph.on('node:click', ({ e, x, y, node, view }) => {})
+    //   graph.on('edge:click', ({ e, x, y, edge, view }) => {})
+    //   graph.on('blank:click', ({ e, x, y }) => {})
+    //
+    //   graph.on('cell:mouseenter', ({ e, cell, view }) => {})
+    //   graph.on('node:mouseenter', ({ e, node, view }) => {})
+    //   graph.on('edge:mouseenter', ({ e, edge, view }) => {})
+    //   graph.on('graph:mouseenter', ({ e }) => {})
+
+    graph.on('edge:mouseenter', ({e, edge, view}) => {
+      edge.store.data.historyInfo.attrs = edge.getAttrs()
+      edge.store.data.historyInfo.labels = edge.getLabels()
+
+      let tempData = edge.store.data;
+      edge.setAttrs(tempData.consumerInfo.attrs)
+      edge.setLabels(tempData.consumerInfo.labels)
+    })
+
+    graph.on('edge:mouseleave', ({e, edge, view}) => {
+      edge.setAttrs(edge.store.data.historyInfo.attrs)
+      edge.setLabels(edge.store.data.historyInfo.labels)
+    })
+
+
+    let vm = this
+    graph.on('edge:click', ({e, x, y, edge, view}) => {
+      vm.dialogTableVisible = true
+    })
+
+    graph.use(
+      new Snapline({
+        enabled: true,
+        clean: false,
+      }),
+    )
+
+    graph.use(
+      new Selection({
+        enabled: true,
+        multiple: true,
+        rubberband: true,
+        movable: true,
+        showNodeSelectionBox: true,
+      }),
+    )
+    graph.use(
+      new Scroller({
+        enabled: true,
+      }),
+    )
+
+    // https://x6.antv.antgroup.com/temp/layout#dagre
+    const dagreLayout = new DagreLayout({
+      type: 'dagre',
+      rankdir: 'LR',
+      align: undefined,
+      ranksep: 50,
+      nodesep: 15,
+      controlPoints: true,
+      preventOverlap: true
+    })
+
+    const newModel = dagreLayout.layout(data)
+    console.log(newModel)
+
+    graph.fromJSON(newModel)
+  }
+}
+
+
+</script>
+
+<style scoped>
+
+</style>