backend/app/schemas/network_diagram.py

@@ -22,12 +22,20 @@ class DeviceProperties(BaseModel):
     status: str = Field(default="unknown", pattern=r"^(unknown|online|offline|degraded)$")
 
 
+class NodeStyle(BaseModel):
+    width: float | None = None
+    height: float | None = None
+
+
 class DiagramNode(BaseModel):
     id: str
     type: str
     label: str
     position: Position
     properties: DeviceProperties = Field(default_factory=DeviceProperties)
+    nodeType: str | None = None
+    style: NodeStyle | None = None
+    parentId: str | None = None
 
 
 class DiagramEdge(BaseModel):

frontend/src/pages/NetworkDiagrams/DiagramEditor.tsx

@@ -207,6 +207,7 @@ function DiagramEditorInner() {
               type: 'device',
               position: n.position,
               style: n.style || { width: 120, height: 120 },
+              ...(n.parentId ? { parentId: n.parentId, extent: 'parent' as const } : {}),
               data: {
                 label: n.label,
                 deviceType: n.type,
@@ -247,6 +248,7 @@ function DiagramEditorInner() {
             type: 'device' as const,
             position: n.position,
             style: n.style || { width: 120, height: 120 },
+            ...(n.parentId ? { parentId: n.parentId, extent: 'parent' as const } : {}),
             data: { label: n.label, deviceType: n.type, properties: n.properties } satisfies DeviceNodeData,
           }
         })
@@ -297,6 +299,7 @@ function DiagramEditorInner() {
         position: n.position,
         properties: data.properties,
         style: { width: dw, height: dh },
+        ...(n.parentId ? { parentId: n.parentId } : {}),
       }
     })
   }, [getNodes])

frontend/src/types/network-diagram.ts

@@ -18,6 +18,7 @@ export interface DiagramNode {
   properties: DeviceProperties
   nodeType?: string
   style?: { width?: number; height?: number } | null
+  parentId?: string | null
 }
 
 export interface DiagramEdge {