diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cc21cc4329..d1d8c89f7b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,12 +10,14 @@
 			"license": "AGPL-3.0",
 			"dependencies": {
 				"@aws-crypto/sha256-js": "^4.0.0",
+				"@dagrejs/dagre": "^1.1.3",
 				"@json2csv/plainjs": "^7.0.6",
 				"@leeoniya/ufuzzy": "^1.0.8",
 				"@popperjs/core": "^2.11.6",
 				"@redocly/json-to-json-schema": "^0.0.1",
 				"@tanstack/svelte-table": "^8.9.9",
 				"@windmill-labs/svelte-dnd-action": "latest",
+				"@xyflow/svelte": "^0.1.14",
 				"ag-charts-community": "^9.0.1",
 				"ag-charts-enterprise": "^9.0.1",
 				"ag-grid-community": "^31.0.0",
@@ -520,6 +522,22 @@
 				"@csstools/css-tokenizer": "^2.2.1"
 			}
 		},
+		"node_modules/@dagrejs/dagre": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.1.3.tgz",
+			"integrity": "sha512-umT7fBPECI4zgxxXW07H3vJN7W1WZcnBjk613eOEAKcwoFrYNyMZO+1SHmoC8zPZWR18DquK2wRUp9VHUE+94g==",
+			"dependencies": {
+				"@dagrejs/graphlib": "2.2.2"
+			}
+		},
+		"node_modules/@dagrejs/graphlib": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-2.2.2.tgz",
+			"integrity": "sha512-CbyGpCDKsiTg/wuk79S7Muoj8mghDGAESWGxcSyhHX5jD35vYMBZochYVFzlHxynpE9unpu6O+4ZuhrLxASsOg==",
+			"engines": {
+				"node": ">17.0.0"
+			}
+		},
 		"node_modules/@esbuild/aix-ppc64": {
 			"version": "0.19.12",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
@@ -1474,6 +1492,14 @@
 			"resolved": "https://registry.npmjs.org/@streamparser/json/-/json-0.0.20.tgz",
 			"integrity": "sha512-VqAAkydywPpkw63WQhPVKCD3SdwXuihCUVZbbiY3SfSTGQyHmwRoq27y4dmJdZuJwd5JIlQoMPyGvMbUPY0RKQ=="
 		},
+		"node_modules/@svelte-put/shortcut": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-3.1.1.tgz",
+			"integrity": "sha512-2L5EYTZXiaKvbEelVkg5znxqvfZGZai3m97+cAiUBhLZwXnGtviTDpHxOoZBsqz41szlfRMcamW/8o0+fbW3ZQ==",
+			"peerDependencies": {
+				"svelte": "^3.55.0 || ^4.0.0 || ^5.0.0"
+			}
+		},
 		"node_modules/@sveltejs/adapter-static": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.1.tgz",
@@ -1719,8 +1745,7 @@
 		"node_modules/@types/d3-color": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
-			"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-			"dev": true
+			"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
 		},
 		"node_modules/@types/d3-contour": {
 			"version": "3.0.6",
@@ -1748,7 +1773,6 @@
 			"version": "3.0.7",
 			"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
 			"integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
-			"dev": true,
 			"dependencies": {
 				"@types/d3-selection": "*"
 			}
@@ -1805,7 +1829,6 @@
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
 			"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
-			"dev": true,
 			"dependencies": {
 				"@types/d3-color": "*"
 			}
@@ -1852,8 +1875,7 @@
 		"node_modules/@types/d3-selection": {
 			"version": "3.0.10",
 			"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.10.tgz",
-			"integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==",
-			"dev": true
+			"integrity": "sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg=="
 		},
 		"node_modules/@types/d3-shape": {
 			"version": "3.1.5",
@@ -1886,7 +1908,6 @@
 			"version": "3.0.8",
 			"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.8.tgz",
 			"integrity": "sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==",
-			"dev": true,
 			"dependencies": {
 				"@types/d3-selection": "*"
 			}
@@ -1895,7 +1916,6 @@
 			"version": "3.0.8",
 			"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
 			"integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
-			"dev": true,
 			"dependencies": {
 				"@types/d3-interpolate": "*",
 				"@types/d3-selection": "*"
@@ -1987,8 +2007,7 @@
 		"node_modules/@types/pug": {
 			"version": "2.0.9",
 			"resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.9.tgz",
-			"integrity": "sha512-Yg4LkgFYvn1faISbDNWmcAC1XoDT8IoMUFspp5mnagKk+UvD2N0IWt5A7GRdMubsNWqgCLmrkf8rXkzNqb4szA==",
-			"dev": true
+			"integrity": "sha512-Yg4LkgFYvn1faISbDNWmcAC1XoDT8IoMUFspp5mnagKk+UvD2N0IWt5A7GRdMubsNWqgCLmrkf8rXkzNqb4szA=="
 		},
 		"node_modules/@types/semver": {
 			"version": "7.5.5",
@@ -2208,6 +2227,34 @@
 				"svelte": ">=3.23.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/@xyflow/svelte": {
+			"version": "0.1.14",
+			"resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.1.14.tgz",
+			"integrity": "sha512-DdlFz+JKW1sQt8Q8O1DoSsroTvFk1RzmpcEZcGARt1REbnLy4BYG/03piaiclaC4iHK6feaPDvxpF057CkMCTw==",
+			"dependencies": {
+				"@svelte-put/shortcut": "^3.1.0",
+				"@xyflow/system": "0.0.37",
+				"classcat": "^5.0.4",
+				"svelte-preprocess": "^5.1.3"
+			},
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0"
+			}
+		},
+		"node_modules/@xyflow/system": {
+			"version": "0.0.37",
+			"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.37.tgz",
+			"integrity": "sha512-hSIhezhxgftPUpC+xiQVIorcRILZUOWlLjpYPTyGWRu8s4RJvM4GqvrsFmD5OnMKXLgpU7/PqqUibDVO67oWQQ==",
+			"dependencies": {
+				"@types/d3-drag": "^3.0.7",
+				"@types/d3-selection": "^3.0.10",
+				"@types/d3-transition": "^3.0.8",
+				"@types/d3-zoom": "^3.0.8",
+				"d3-drag": "^3.0.0",
+				"d3-selection": "^3.0.0",
+				"d3-zoom": "^3.0.0"
+			}
+		},
 		"node_modules/@zerodevx/svelte-toast": {
 			"version": "0.9.5",
 			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
@@ -2563,7 +2610,6 @@
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
 			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-			"devOptional": true,
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
@@ -2641,7 +2687,6 @@
 			"version": "0.2.13",
 			"resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
 			"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
-			"dev": true,
 			"engines": {
 				"node": "*"
 			}
@@ -2909,6 +2954,11 @@
 				"consola": "^3.2.3"
 			}
 		},
+		"node_modules/classcat": {
+			"version": "5.0.5",
+			"resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+			"integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w=="
+		},
 		"node_modules/clone": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -2976,8 +3026,7 @@
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-			"devOptional": true
+			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
 		},
 		"node_modules/confbox": {
 			"version": "0.1.6",
@@ -3582,7 +3631,6 @@
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
 			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -3809,8 +3857,7 @@
 		"node_modules/es6-promise": {
 			"version": "3.3.1",
 			"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
-			"integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==",
-			"dev": true
+			"integrity": "sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg=="
 		},
 		"node_modules/esbuild": {
 			"version": "0.19.12",
@@ -4460,8 +4507,7 @@
 		"node_modules/fs.realpath": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-			"devOptional": true
+			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
 		},
 		"node_modules/fsevents": {
 			"version": "2.3.3",
@@ -4579,7 +4625,6 @@
 			"version": "7.2.3",
 			"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
 			"integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-			"devOptional": true,
 			"dependencies": {
 				"fs.realpath": "^1.0.0",
 				"inflight": "^1.0.4",
@@ -4716,8 +4761,7 @@
 		"node_modules/graceful-fs": {
 			"version": "4.2.11",
 			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-			"dev": true
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
 		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
@@ -5025,7 +5069,6 @@
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
 			"integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-			"devOptional": true,
 			"dependencies": {
 				"once": "^1.3.0",
 				"wrappy": "1"
@@ -5034,8 +5077,7 @@
 		"node_modules/inherits": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-			"devOptional": true
+			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
 		},
 		"node_modules/ini": {
 			"version": "1.3.8",
@@ -5515,7 +5557,7 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
 			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-			"dev": true,
+			"devOptional": true,
 			"engines": {
 				"node": ">=10"
 			}
@@ -6582,7 +6624,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
 			"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-			"dev": true,
 			"engines": {
 				"node": ">=4"
 			}
@@ -6600,7 +6641,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
 			"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-			"devOptional": true,
 			"dependencies": {
 				"brace-expansion": "^1.1.7"
 			},
@@ -6669,7 +6709,6 @@
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
 			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-			"dev": true,
 			"dependencies": {
 				"minimist": "^1.2.6"
 			},
@@ -6782,7 +6821,7 @@
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "github",
@@ -7091,7 +7130,6 @@
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
 			"integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-			"devOptional": true,
 			"dependencies": {
 				"wrappy": "1"
 			}
@@ -7259,7 +7297,6 @@
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
 			"integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-			"devOptional": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -7347,7 +7384,7 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
 			"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-			"dev": true
+			"devOptional": true
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
@@ -7449,7 +7486,7 @@
 			"version": "8.4.35",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
 			"integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -7624,7 +7661,7 @@
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
 			"integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
-			"dev": true,
+			"devOptional": true,
 			"dependencies": {
 				"lilconfig": "^2.0.5",
 				"yaml": "^2.1.1"
@@ -8563,7 +8600,6 @@
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
 			"integrity": "sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==",
-			"dev": true,
 			"dependencies": {
 				"es6-promise": "^3.1.2",
 				"graceful-fs": "^4.1.3",
@@ -8575,7 +8611,6 @@
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
 			"integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-			"dev": true,
 			"dependencies": {
 				"glob": "^7.1.3"
 			},
@@ -8745,7 +8780,6 @@
 			"version": "0.11.0",
 			"resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.11.0.tgz",
 			"integrity": "sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.14",
 				"buffer-crc32": "^0.2.5",
@@ -9382,27 +9416,26 @@
 			"integrity": "sha512-uF7is5sM4aq5iN7QF/67XLnTUvQCf2iiG/B1BHTqLwYVY1dsVmTeXZ/LeEyU6dLjApOQdbEG9lkqHzxiQtOLEQ=="
 		},
 		"node_modules/svelte-preprocess": {
-			"version": "5.1.0",
-			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.0.tgz",
-			"integrity": "sha512-EkErPiDzHAc0k2MF5m6vBNmRUh338h2myhinUw/xaqsLs7/ZvsgREiLGj03VrSzbY/TB5ZXgBOsKraFee5yceA==",
-			"dev": true,
+			"version": "5.1.4",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz",
+			"integrity": "sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==",
 			"hasInstallScript": true,
 			"dependencies": {
 				"@types/pug": "^2.0.6",
 				"detect-indent": "^6.1.0",
-				"magic-string": "^0.27.0",
+				"magic-string": "^0.30.5",
 				"sorcery": "^0.11.0",
 				"strip-indent": "^3.0.0"
 			},
 			"engines": {
-				"node": ">= 14.10.0"
+				"node": ">= 16.0.0"
 			},
 			"peerDependencies": {
 				"@babel/core": "^7.10.2",
 				"coffeescript": "^2.5.1",
 				"less": "^3.11.3 || ^4.0.0",
 				"postcss": "^7 || ^8",
-				"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0",
+				"postcss-load-config": "^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
 				"pug": "^3.0.0",
 				"sass": "^1.26.8",
 				"stylus": "^0.55.0",
@@ -9443,23 +9476,10 @@
 				}
 			}
 		},
-		"node_modules/svelte-preprocess/node_modules/magic-string": {
-			"version": "0.27.0",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
-			"integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
-			"dev": true,
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.13"
-			},
-			"engines": {
-				"node": ">=12"
-			}
-		},
 		"node_modules/svelte-preprocess/node_modules/strip-indent": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
 			"integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-			"dev": true,
 			"dependencies": {
 				"min-indent": "^1.0.0"
 			},
@@ -9839,7 +9859,7 @@
 			"version": "5.2.2",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
 			"integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-			"dev": true,
+			"devOptional": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -10279,8 +10299,7 @@
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-			"devOptional": true
+			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
 		},
 		"node_modules/write-file-atomic": {
 			"version": "5.0.1",
diff --git a/frontend/package.json b/frontend/package.json
index f90fc462b9..e20f60659d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -90,12 +90,14 @@
 	"type": "module",
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
+		"@dagrejs/dagre": "^1.1.3",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@tanstack/svelte-table": "^8.9.9",
 		"@windmill-labs/svelte-dnd-action": "latest",
+		"@xyflow/svelte": "^0.1.14",
 		"ag-charts-community": "^9.0.1",
 		"ag-charts-enterprise": "^9.0.1",
 		"ag-grid-community": "^31.0.0",
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index 6edeea3596..2ccd3f5bbe 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -7,6 +7,7 @@
 	import { twMerge } from 'tailwind-merge'
 
 	import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
+	import FlowGraphV2 from './graph/FlowGraphV2.svelte'
 
 	export let flow: {
 		summary: string
@@ -30,7 +31,7 @@
 			class="{noSide ? 'col-span-3' : 'sm:col-span-2 col-span-3'} w-full border max-h-full"
 			class:overflow-auto={overflowAuto}
 		>
-			<FlowGraph
+			<FlowGraphV2
 				{download}
 				minHeight={400}
 				modules={flow?.value?.modules}
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 2bcad4e6b4..a7993f636d 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -68,9 +68,10 @@
 		'w-full flex relative overflow-hidden rounded-sm',
 		selectable ? 'cursor-pointer' : '',
 		selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
-		label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : ''
+		label === 'Input' && $copilotCurrentStepStore === 'Input' ? 'z-[901]' : '',
+		'bg-surface'
 	)}
-	style="min-width: 275px; max-height: 80px; background-color: {bgColor};"
+	style="min-width: 275px; max-height: 80px; background-color: {bgColor} !important;"
 	on:click={() => {
 		if (selectable) {
 			if (id) {
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
new file mode 100644
index 0000000000..0c8feb80e2
--- /dev/null
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { type FlowModule } from '../../gen'
+	import { type GraphModuleState } from '.'
+	import { setContext } from 'svelte'
+
+	import { writable, type Writable } from 'svelte/store'
+	import '@xyflow/svelte/dist/style.css'
+	import type { FlowInput } from '../flows/types'
+	import {
+		SvelteFlow,
+		Background,
+		Position,
+		type Node,
+		type Edge,
+		ConnectionLineType
+	} from '@xyflow/svelte'
+	// @ts-ignore
+	import dagre from '@dagrejs/dagre'
+	import graphBuilder from './graphBuilder'
+	import ModuleNode from './renderers/nodes/ModuleNode.svelte'
+	import InputNode from './renderers/nodes/InputNode.svelte'
+	import BranchAllStart from './renderers/nodes/BranchAllStart.svelte'
+	import BranchAllEndNode from './renderers/nodes/branchAllEndNode.svelte'
+	import ForLoopEndNode from './renderers/nodes/ForLoopEndNode.svelte'
+	import ForLoopStartNode from './renderers/nodes/ForLoopStartNode.svelte'
+	import ResultNode from './renderers/nodes/ResultNode.svelte'
+	import BaseEdge from './renderers/edges/BaseEdge.svelte'
+
+	export let success: boolean | undefined = undefined
+	export let modules: FlowModule[] | undefined = []
+	export let failureModule: FlowModule | undefined = undefined
+	export let minHeight: number = 0
+	export let maxHeight: number | undefined = undefined
+	export let notSelectable = false
+	export let flowModuleStates: Record<string, GraphModuleState> | undefined = undefined
+	export let rebuildOnChange: any = undefined
+
+	export let selectedId: Writable<string | undefined> = writable<string | undefined>(undefined)
+
+	export let insertable = false
+	export let moving: string | undefined = undefined
+	export let scroll = false
+	export let download = false
+	export let fullSize = false
+	export let disableAi = false
+	export let flowInputsStore: Writable<FlowInput | undefined> = writable<FlowInput | undefined>(
+		undefined
+	)
+
+	setContext<{
+		selectedId: Writable<string | undefined>
+		flowInputsStore: Writable<FlowInput | undefined>
+	}>('FlowGraphContext', { selectedId, flowInputsStore })
+
+	// XYFLOW
+
+	const nodeWidth = 300
+	const nodeHeight = 36
+	const dagreGraph = new dagre.graphlib.Graph()
+	dagreGraph.setDefaultEdgeLabel(() => ({}))
+
+	function getLayoutedElements(nodes: Node[], edges: Edge[], direction = 'TB') {
+		dagreGraph.setGraph({ rankdir: direction })
+
+		nodes.forEach((node) => {
+			dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight })
+		})
+
+		edges.forEach((edge) => {
+			dagreGraph.setEdge(edge.source, edge.target, {
+				minlen: 1
+			})
+		})
+
+		dagre.layout(dagreGraph)
+
+		nodes.forEach((node) => {
+			const nodeWithPosition = dagreGraph.node(node.id)
+			node.targetPosition = Position.Top
+			node.sourcePosition = Position.Bottom
+
+			node.position = {
+				x: nodeWithPosition.x - nodeWidth / 2,
+				y: nodeWithPosition.y - nodeHeight / 2
+			}
+		})
+
+		return { nodes, edges }
+	}
+
+	const { nodes: initialNodes, edges: initialEdges } = graphBuilder(modules)
+
+	const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
+		initialNodes,
+		initialEdges
+	)
+
+	const nodes = writable<Node[]>(layoutedNodes)
+	const edges = writable<Edge[]>(layoutedEdges)
+
+	const nodeTypes = {
+		input2: InputNode,
+		module: ModuleNode,
+		branchAllStart: BranchAllStart,
+		branchAllEnd: BranchAllEndNode,
+		forLoopEnd: ForLoopEndNode,
+		forLoopStart: ForLoopStartNode,
+		result: ResultNode
+	}
+	const edgeTypes = {
+		edge: BaseEdge
+	}
+</script>
+
+<div class="h-screen">
+	<SvelteFlow
+		{nodes}
+		{edges}
+		{edgeTypes}
+		{nodeTypes}
+		nodesDraggable={false}
+		connectionLineType={ConnectionLineType.SmoothStep}
+		defaultEdgeOptions={{ type: 'smoothstep' }}
+		fitView
+	>
+		<Background />
+	</SvelteFlow>
+</div>
diff --git a/frontend/src/lib/components/graph/graphBuilder.ts b/frontend/src/lib/components/graph/graphBuilder.ts
new file mode 100644
index 0000000000..58352d5d9f
--- /dev/null
+++ b/frontend/src/lib/components/graph/graphBuilder.ts
@@ -0,0 +1,196 @@
+import type { FlowModule } from '$lib/gen'
+import { type Node, type Edge } from '@xyflow/svelte'
+
+export default function graphBuilder(modules: FlowModule[] | undefined): {
+	nodes: Node[]
+	edges: Edge[]
+} {
+	const nodes: Node[] = []
+	const edges: Edge[] = []
+
+	if (!modules) {
+		return { nodes, edges }
+	}
+
+	function addNode(module: FlowModule, offset: number, type: string) {
+		nodes.push({
+			id: module.id,
+			data: {
+				value: module.value,
+				offset: offset,
+				module: module
+			},
+			position: { x: 0, y: 0 },
+			type: type
+		})
+
+		return module.id
+	}
+
+	function addEdge(sourceId: string, targetId: string, customId?: string) {
+		edges.push({
+			id: customId || `edge:${sourceId}->${targetId}`,
+			source: sourceId,
+			target: targetId,
+			type: 'edge'
+		})
+	}
+
+	const inputNode: Node = {
+		id: 'input',
+		position: { x: 0, y: 0 },
+		type: 'input2',
+		data: {}
+	}
+
+	const resultNode: Node = {
+		id: 'result',
+		data: {},
+		position: { x: 0, y: 0 },
+		type: 'result'
+	}
+
+	nodes.push(inputNode)
+	nodes.push(resultNode)
+
+	function processModules(
+		modules: FlowModule[],
+		beforeNode: Node,
+		nextNode: Node,
+		currentOffset = 0
+	) {
+		let previousId: string | undefined = undefined
+
+		modules.forEach((module, index) => {
+			// Add the edge between the previous node and the current one
+			if (index > 0 && previousId) {
+				addEdge(previousId, module.id)
+			}
+
+			if (module.value.type === 'rawscript') {
+				addNode(module, currentOffset, 'module')
+				previousId = module.id
+			} else if (module.value.type === 'branchall') {
+				// Start
+				addNode(module, currentOffset, 'module')
+
+				// "Collect result of each branch" node
+				const endNode = {
+					id: `${module.id}-end`,
+					data: { offset: currentOffset, id: module.id },
+					position: { x: 0, y: 0 },
+					type: 'branchAllEnd'
+				}
+				nodes.push(endNode)
+
+				module.value.branches.forEach((branch, branchIndex) => {
+					// Start node by branch
+
+					const startNode = {
+						id: `${module.id}-branch-${branchIndex}`,
+						data: { offset: currentOffset, label: `Branch ${branchIndex + 1}`, id: module.id },
+						position: { x: 0, y: 0 },
+						type: 'branchAllStart'
+					}
+
+					nodes.push(startNode)
+
+					addEdge(module.id, startNode.id)
+
+					processModules(branch.modules, startNode, endNode)
+				})
+
+				previousId = endNode.id
+			} else if (module.value.type === 'forloopflow') {
+				addNode(module, currentOffset, 'module')
+
+				const startNode = {
+					id: `${module.id}-start`,
+					data: { offset: currentOffset + 50, id: module.id },
+					position: { x: 0, y: 0 },
+					type: 'forLoopStart'
+				}
+
+				addEdge(module.id, startNode.id)
+
+				const endNode = {
+					id: `${module.id}-end`,
+					data: { offset: currentOffset, id: module.id },
+					position: { x: 0, y: 0 },
+					type: 'forLoopEnd'
+				}
+
+				nodes.push(startNode)
+				nodes.push(endNode)
+
+				processModules(module.value.modules, startNode, endNode, currentOffset + 50)
+
+				previousId = endNode.id
+			} else if (module.value.type === 'whileloopflow') {
+				addNode(module, currentOffset, 'module')
+
+				const startNode = {
+					id: `${module.id}-start`,
+					data: { offset: currentOffset + 50 },
+					position: { x: 0, y: 0 },
+					type: 'whileLoopStart'
+				}
+
+				const endNode = {
+					id: `${module.id}-end`,
+					data: { offset: currentOffset },
+					position: { x: 0, y: 0 },
+					type: 'whileLoopEnd'
+				}
+
+				nodes.push(startNode)
+				nodes.push(endNode)
+
+				processModules(module.value.modules, startNode, endNode, currentOffset + 50)
+			} else if (module.value.type === 'branchone') {
+				// Start
+				addNode(module, currentOffset, 'module')
+
+				// "Collect result of each branch" node
+				const endNode = {
+					id: `${module.id}-end`,
+					data: { offset: currentOffset },
+					position: { x: 0, y: 0 },
+					type: 'branchOneEnd'
+				}
+				nodes.push(endNode)
+
+				module.value.branches.forEach((branch, branchIndex) => {
+					// Start node by branch
+
+					const startNode = {
+						id: `${module.id}-branch-${branchIndex}`,
+						data: { offset: currentOffset },
+						position: { x: 0, y: 0 },
+						type: 'branchOneStart'
+					}
+
+					nodes.push(startNode)
+
+					addEdge(module.id, startNode.id)
+
+					processModules(branch.modules, startNode, endNode)
+				})
+			}
+
+			if (index === 0) {
+				console.log('Adding edge between beforeNode and module', beforeNode.id, module.id)
+				addEdge(beforeNode.id, module.id)
+			}
+
+			if (index === modules.length - 1 && previousId) {
+				console.log(nextNode, previousId)
+				addEdge(previousId, nextNode.id)
+			}
+		})
+	}
+
+	processModules(modules, inputNode, resultNode)
+
+	return { nodes, edges }
+}
diff --git a/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
new file mode 100644
index 0000000000..c7ecc86f0a
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getBezierPath, BaseEdge, type EdgeProps } from '@xyflow/svelte'
+
+	type $$Props = EdgeProps
+
+	export let sourceX: $$Props['sourceX']
+	export let sourceY: $$Props['sourceY']
+	export let sourcePosition: $$Props['sourcePosition']
+	export let targetX: $$Props['targetX']
+	export let targetY: $$Props['targetY']
+	export let targetPosition: $$Props['targetPosition']
+	export let markerEnd: $$Props['markerEnd'] = undefined
+	export let style: $$Props['style'] = undefined
+
+	$: [edgePath] = getBezierPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition
+	})
+</script>
+
+<BaseEdge path={edgePath} {markerEnd} {style} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
new file mode 100644
index 0000000000..2b8d5d99cf
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+
+	type $$Props = NodeProps
+
+	export let data: $$Props['data']
+	$$restProps
+</script>
+
+{#if data.time}
+	<NodeToolbar isVisible position={Position.Top} align="end">
+		<span class="text-xs">0.01s</span>
+	</NodeToolbar>
+{/if}
+
+<VirtualItem
+	label={data.label}
+	modules={[]}
+	index={1}
+	selectable
+	selected={false}
+	insertable={false}
+/>
+
+<Handle type="source" position={Position.Bottom} />
+<Handle type="target" position={Position.Top} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
new file mode 100644
index 0000000000..0932346918
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+
+	type $$Props = NodeProps
+
+	export let data: $$Props['data']
+	$$restProps
+</script>
+
+{#if data.time}
+	<NodeToolbar isVisible position={Position.Top} align="end">
+		<span class="text-xs">0.01s</span>
+	</NodeToolbar>
+{/if}
+
+<VirtualItem
+	label={'Collect result of each iteration'}
+	modules={[]}
+	id={data.id}
+	index={1}
+	selectable
+	selected={false}
+	insertable={false}
+/>
+
+<Handle type="source" position={Position.Bottom} />
+<Handle type="target" position={Position.Top} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
new file mode 100644
index 0000000000..68edb04707
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+
+	type $$Props = NodeProps
+
+	export let data: $$Props['data']
+	let darkMode: boolean = false
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+{#if data.time}
+	<NodeToolbar isVisible position={Position.Top} align="end">
+		<span class="text-xs">0.01s</span>
+	</NodeToolbar>
+{/if}
+
+<div style={`margin-left: ${data.offset}px;`}>
+	<VirtualItem
+		label={'Do one iteration'}
+		modules={[]}
+		index={1}
+		selectable
+		selected={false}
+		insertable={false}
+		id={data.id}
+		bgColor={darkMode ? '#2e3440' : '#dfe6ee'}
+	/>
+</div>
+
+<Handle type="source" position={Position.Bottom} style={`margin-left: ${data.offset / 2}px;`} />
+<Handle type="target" position={Position.Top} style={`margin-left: ${data.offset / 2}px;`} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
new file mode 100644
index 0000000000..7ed5a0d769
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+	import { Wand2 } from 'lucide-svelte'
+
+	type $$Props = NodeProps
+	export let data: $$Props['data']
+</script>
+
+<NodeToolbar isVisible position={Position.Top}>
+	<button class="rounded-full border bg-indigo-100 p-2 hover:bg-indigo-200">
+		<Wand2 size={16} />
+	</button>
+</NodeToolbar>
+
+<VirtualItem label="Input" modules={[]} index={1} selectable selected={false} insertable={false} />
+
+<Handle type="source" position={Position.Bottom} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
new file mode 100644
index 0000000000..1be2dceb23
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import MapItem from '$lib/components/flows/map/MapItem.svelte'
+	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+
+	type $$Props = NodeProps
+
+	export let data: $$Props['data']
+	export let id: $$Props['id']
+
+	$$restProps
+</script>
+
+{#if data.time}
+	<NodeToolbar isVisible position={Position.Top} align="end">
+		<span class="text-xs">0.01s</span>
+	</NodeToolbar>
+{/if}
+
+<div style={`margin-left: ${data.offset}px;`}>
+	<MapItem mod={data.module} modules={[]} />
+</div>
+
+<Handle type="source" position={Position.Bottom} style={`margin-left: ${data.offset / 2}px;`} />
+<Handle type="target" position={Position.Top} style={`margin-left: ${data.offset / 2}px;`} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
new file mode 100644
index 0000000000..f81a1a5562
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { Handle, Position, type NodeProps } from '@xyflow/svelte'
+
+	type $$Props = NodeProps
+
+	$$restProps
+	let darkMode: boolean = false
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<VirtualItem
+	label={'Result'}
+	modules={[]}
+	index={1}
+	selectable
+	selected={false}
+	insertable={false}
+	bgColor={darkMode ? '#2e3440' : '#dfe6ee'}
+/>
+
+<Handle type="target" position={Position.Top} />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte
new file mode 100644
index 0000000000..fcd9ef1b11
--- /dev/null
+++ b/frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
+	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+
+	type $$Props = NodeProps
+
+	export let data: $$Props['data']
+	$$restProps
+</script>
+
+{#if data.time}
+	<NodeToolbar isVisible position={Position.Top} align="end">
+		<span class="text-xs">0.01s</span>
+	</NodeToolbar>
+{/if}
+
+<VirtualItem
+	label={'Collect result from all branches'}
+	modules={[]}
+	index={1}
+	id={data.id}
+	selectable
+	selected={false}
+	insertable={false}
+/>
+
+<Handle type="source" position={Position.Bottom} />
+<Handle type="target" position={Position.Top} />