diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 853d3480a..09685600d 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -275,3 +275,8 @@
     overflow: hidden;
   }
 }
+.chart-diagram{
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
diff --git a/nezha-fronted/src/components/chart/chart.vue b/nezha-fronted/src/components/chart/chart.vue
index 2f2597d20..741d297c8 100644
--- a/nezha-fronted/src/components/chart/chart.vue
+++ b/nezha-fronted/src/components/chart/chart.vue
@@ -33,6 +33,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
       ></chartHexagon>
       <chart-url
         :ref="'chart' + chartInfo.id"
@@ -40,6 +41,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
       ></chart-url>
       <chart-text
         :ref="'chart' + chartInfo.id"
@@ -47,6 +49,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
       ></chart-text>
       <chart-treemap
         :ref="'chart' + chartInfo.id"
@@ -54,6 +57,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
       ></chart-treemap>
       <chart-log
         :ref="'chart' + chartInfo.id"
@@ -61,6 +65,7 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
       ></chart-log>
       <chart-stat
         :ref="'chart' + chartInfo.id"
@@ -68,7 +73,16 @@
         :chart-data="chartData"
         :chart-info="chartInfo"
         :chart-option="chartOption"
+        :is-fullscreen="isFullscreen"
       ></chart-stat>
+      <chart-diagram
+        :ref="'chart' + chartInfo.id"
+        v-if="isDiagram(chartInfo.type)"
+        :chart-data="chartData"
+        :chart-info="chartInfo"
+        :is-fullscreen="isFullscreen"
+        :chart-option="chartOption"
+      ></chart-diagram>
     </template>
   </div>
 </template>
@@ -93,7 +107,7 @@ import chartTreemap from './chart/chartTreemap'
 import chartUrl from './chart/chartUrl'
 import chartValue from './chart/chartValue'
 import chartHexagon from './chart/chartHexagon'
-import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat } from './chart/tools'
+import { getOption, isTimeSeries, isHexagonFigure, isUrl, isText, isChartPie, isChartBar, isTreemap, isLog, isStat, isDiagram } from './chart/tools'
 import lodash from 'lodash'
 
 export default {
@@ -148,6 +162,7 @@ export default {
     isTreemap,
     isLog,
     isStat,
+    isDiagram,
     resize () {
       this.$refs['chart' + this.chartInfo.id].resize()
     }
diff --git a/nezha-fronted/src/components/chart/chart/chartDiagram.vue b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
index 3a093e07d..7e20020cd 100644
--- a/nezha-fronted/src/components/chart/chart/chartDiagram.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDiagram.vue
@@ -1,10 +1,33 @@
 <template>
-
+  <div class="chart-diagram">
+    <diagram
+      style="height: 100%;width: 100%"
+      :topoData="chartInfo.param.topo"
+      :fromChart="true"
+      :isScreen="isFullscreen"
+      :topologyIndexF="isFullscreen ? (chartInfo.id + '-' + 'isFullscreen') : chartInfo.id"
+      :isPanel="true"
+      ref="diagram"
+      :chartInfo="chartInfo" />
+  </div>
 </template>
 
 <script>
+import diagram from '@/components/common/ChartDiagram/diagram'
+import chartMixin from '@/components/chart/chartMixin'
+import chartFormat from '@/components/chart/chartFormat'
 export default {
-  name: 'chart-diagram'
+  name: 'chart-diagram',
+  mixins: [chartMixin, chartFormat],
+  components: {
+    diagram
+  },
+  methods: {
+    resize () {
+      console.log('diagram',this.$refs.diagram)
+      this.$refs.diagram.winResize()
+    }
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js
index ad381c12f..c851072ea 100644
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/nezha-fronted/src/components/chart/chart/tools.js
@@ -76,6 +76,9 @@ export function isLog (type) {
 export function isStat (type) {
   return type === chartType.stat
 }
+export function isDiagram (type) {
+  return type === chartType.diagram
+}
 
 export function initColor (colorNum = 20) {
   const colorList = [
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 8d5aec248..2a1706e4b 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -138,6 +138,9 @@ export default {
                 this.loading = false
               })
             }
+            if (this.chartInfo.type === 'diagram') {
+              this.chartData = [this.chartInfo.param.topo]
+            }
             break
           }
         }
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index b08e477ea..065699562 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -2075,7 +2075,11 @@ export default {
     /* tools 方法 */
 
     winResize () {
-      setTimeout(() => {
+      if (this.timer) {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
+      this.timer = setTimeout(() => {
         const dom = document.getElementById('topology-canvas' + this.topologyIndex)
         const domRect = dom ? dom.getBoundingClientRect() : {}
         getTopology(this.topologyIndex).canvasPos = domRect
@@ -2083,7 +2087,6 @@ export default {
           getTopology(this.topologyIndex).open(this.oldTopologyData)
         }
         let flag = false
-
         const position = {
           x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth,
           y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight
@@ -2097,8 +2100,11 @@ export default {
             flag = true
           }
         })
+        getTopology(this.topologyIndex).resize()
         getTopology(this.topologyIndex).centerView()
-        this.getNodesArr()
+        clearTimeout(this.timer)
+        this.timer = null
+        // this.getNodesArr()
       }, 100)
     },
     contextmenuNone () {