diff --git a/nezha-fronted/package-lock.json b/nezha-fronted/package-lock.json
index 4e5def9c3..1004afb6a 100644
--- a/nezha-fronted/package-lock.json
+++ b/nezha-fronted/package-lock.json
@@ -5605,6 +5605,11 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true
     },
+    "heap": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
+      "integrity": "sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw="
+    },
     "hex-color-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
@@ -6510,6 +6515,11 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12436,6 +12446,11 @@
         "propagating-hammerjs": "^1.4.6"
       }
     },
+    "vis-network": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-8.3.2.tgz",
+      "integrity": "sha512-vJDctP2gZzZbpgpB+MJxNudsqRGdkRablwdLOWd6yZKZQuEBZltOJSBaSCsyQVMD1gY8mjuYhNRoIcy7g+PDvQ=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
diff --git a/nezha-fronted/package.json b/nezha-fronted/package.json
index 111eb9ba5..978773239 100644
--- a/nezha-fronted/package.json
+++ b/nezha-fronted/package.json
@@ -19,6 +19,7 @@
     "pl-table": "^2.5.8",
     "quill": "^1.3.7",
     "vis": "^4.21.0-EOL",
+    "vis-network": "^8.3.2",
     "vue": "^2.5.2",
     "vue-countupjs": "^1.0.0",
     "vue-i18n": "^8.15.1",
diff --git a/nezha-fronted/src/components/common/project/cytoscape.vue b/nezha-fronted/src/components/common/project/cytoscape.vue
new file mode 100644
index 000000000..af1ca43c5
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/cytoscape.vue
@@ -0,0 +1,68 @@
+<template>
+  <div id="cy"></div>
+</template>
+
+<script>
+  import cytoscape from 'cytoscape';
+	export default {
+		name:"cytoscape",
+    data(){
+		  return {
+		    cy:'',
+      }
+    },
+    mounted(){
+		  this.init();
+    },
+    methods:{
+		  init(){
+        this.cy = cytoscape({
+          container: document.getElementById('cy'), // container to render in
+          elements: [ // list of graph elements to start with
+            { // node a
+              data: { id: 'a' }
+            },
+            { // node b
+              data: { id: 'b' }
+            },
+            { // edge ab
+              data: { id: 'ab', source: 'a', target: 'b' }
+            }
+          ],
+          style: [ // the stylesheet for the graph
+            {
+              selector: 'node',
+              style: {
+                'background-color': '#666',
+                'label': 'data(id)'
+              }
+            },
+
+            {
+              selector: 'edge',
+              style: {
+                'width': 3,
+                'line-color': '#ccc',
+                'target-arrow-color': '#ccc',
+                'target-arrow-shape': 'triangle',
+                'curve-style': 'bezier'
+              }
+            }
+          ],
+          layout: {
+            name: 'grid',
+            rows: 1
+          }
+        });
+      },
+    }
+	}
+</script>
+
+<style scoped>
+  #cy {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index 3046ff9ed..474c6c053 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -104,7 +104,18 @@
             @reload="reload"
           >
           </topology>
-          <!--<other />-->
+          <!--<cytoscape-->
+            <!--:editVisNetwork="editVisNetwork"-->
+            <!--:nodesArray="nodesArray"-->
+            <!--:edgesArray="edgesArray"-->
+            <!--@setTopologyData="setTopologyData"-->
+            <!--:isFullScreen="false"-->
+            <!--ref="topology"-->
+            <!--:allModuleInfo="allModuleInfo"-->
+            <!--v-loading="topologyLoading"-->
+            <!--@editVisNetworkChange="editVisNetworkChange"-->
+            <!--@reload="reload"-->
+          <!--/>-->
         </div>
       </div>
 
@@ -116,6 +127,7 @@
   import loading from "@/components/common/loading";
   import timePicker from '@/components/common/timePicker';
   import topology from './topology'
+  import cytoscape from './cytoscape'
   // import other from './other'
   export default {
     name: 'visNetwork',
@@ -123,6 +135,7 @@
       'loading': loading,
       'time-picker':timePicker,
       'topology':topology,
+      cytoscape,
       // other
     },
     props:{
@@ -415,7 +428,7 @@
   .content-high-title{
     background: #F2866E;
     border-radius: 4px 0 0 4px;
-    width: 44px;
+    width: 54px;
     height: 100%;
   }
   .content-high-title + div{
@@ -439,7 +452,7 @@
   .content-low-title{
     background: #F7BA78;
     border-radius: 4px 0 0 4px;
-    width: 44px;
+    width: 54px;
     height: 100%;
   }
   .content-low-title + div{