diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx
index a9d1f4fc2fcc44d3e09680441444a8723f00257e..f42f28b03624a8a34633e3a1d54e97d7515e5e6f 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx
@@ -59,7 +59,11 @@ const GraphData = () => {
       })
       if (!modelData || !nodesEdges || JSON.stringify(currentGraphData.nodes) !== JSON.stringify(nodesEdges.nodes)) {
         setModelData(cloneDeep(currentGraphData.model))
-        setNodesEdges({ nodes: cloneDeep(currentGraphData.nodes), edges: cloneDeep(currentGraphData.edges) });
+        setNodesEdges({ 
+          nodes: cloneDeep(currentGraphData.nodes), 
+          edges: cloneDeep(currentGraphData.edges), 
+          clusters: cloneDeep(currentGraphData.clusters),
+        });
       }
     }
   }, [currentGraph, JSON.stringify(subgraphs)]);
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts
index 152ee2f241d52ac36298d509878b77b5077be876..f9ba8e4980cf0561c19370ac23f586bba1cfcf62 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts
@@ -25,6 +25,7 @@ import opCategories, {
     type OperatorCategory
 } from "./op-category.ts"
 import {
+    Clusters,
     Ctx,
     DYN_HEIGHT,
     DYN_WIDTH,
@@ -70,6 +71,7 @@ const render = () => {
     if (DisplayFsg && MaxFsgs !== null) renderMaxFsgs()
 
     renderNodes(Nodes, sx, sy, ex, ey)
+    renderClusters()
     // When the zoom is too small, the edge is hard to see, so it is hidden
     // directly when the zoom is less than 0.3. In addition, the thumbnail
     // function is also very important.
@@ -182,6 +184,29 @@ const renderNodes = (
     setVisibleNodes(visibleNodes)
 }
 
+const renderCluster = (cluster: Clusters) => {
+    const { id, points } = cluster
+    const color = GraphTheme === "dark" ? "#f8f8f8" : "#333333"
+    Ctx.save()
+    Ctx.lineWidth = 1
+    Ctx.strokeStyle = color
+    Ctx.beginPath()
+    Ctx.moveTo(points[0].x, points[0].y)
+
+    for (let i = 1; i < points.length; i++)
+        Ctx.lineTo(points[i].x, points[i].y)
+    Ctx.lineTo(points[0].x, points[0].y)
+    Ctx.closePath()
+    Ctx.stroke()
+    Ctx.textAlign = "left"
+    Ctx.fillStyle = color
+    Ctx.fillText(id, points[0].x, points[0].y - 10)
+    Ctx.textAlign = "center"
+    Ctx.restore()
+
+}
+const renderClusters = () => Clusters.map(renderCluster)
+
 /**
  * The Dynamic OP Mark is a small rectangle with a blue background and white text
  * @desc
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts
index da26d372b51842507ca31cf0c8d490b999ee6c00..f90697eb4135b2024b8efe16ae19c1ce3f0d94b1 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts
@@ -36,6 +36,7 @@ let HighlightCanvas: OffscreenCanvas | null = null!
 export let HighlightCtx: OffscreenCanvasRenderingContext2D | null = null!
 export let Nodes: RenderNode[] | null = null!
 export let Edges: RenderEdge[] | null = null!
+export let Clusters: Clusters[] | null = null!
 export let VisibleNodes: RenderNode[] | null = null!
 export let VisibleEdges: RenderEdge[] | null = null!
 export let HighlightTarget: RenderNode | RenderEdge | null = null!
@@ -63,9 +64,10 @@ export const setVisibleNodes = (newVal: RenderNode[]) => (VisibleNodes = newVal)
 export const setVisibleEdges = (newVal: RenderEdge[]) => (VisibleEdges = newVal)
 
 const applyLayoutResul = (data: NodesEdges) => {
-    const { nodes, edges } = data
+    const { nodes, edges, clusters } = data
     Nodes = nodes
     Edges = edges
+    Clusters = clusters
 
     const dynamicNodes: RenderNode[] = []
     for (const node of Nodes) {
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts
index 8d44134b0f0e235a6fa43b51a00e544ff96b04d7..33a01e38539be3cc7cf08d1ed1bd1155e2f97ae1 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts
@@ -88,10 +88,17 @@ type LayoutRet = {
     paths: string[]
 }
 
+type Clusters = {
+    id: string
+    opType:string
+    points:Array<{ x: number; y: number }>
+}
+
 type GraphData = {
     model: ModelData
     nodes: RenderNode[]
     edges: RenderEdge[]
+    clusters: Clusters[]
 }
 
 type Subgraphs = {
@@ -101,6 +108,7 @@ type Subgraphs = {
 type NodesEdges = {
     nodes: RenderNode[]
     edges: RenderEdge[]
+    clusters: Clusters[]
 }
 
 type NodeId = {