From 6b4bf59ea66658df1955bead430c5b76155d2a2b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 24 Sep 2025 07:22:05 +0000
Subject: [PATCH 1/2] Initial plan


From 3f3e5d35025068d9de0cff767470a9726352e9f4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 24 Sep 2025 07:43:09 +0000
Subject: [PATCH 2/2] feat: replace vis-network with vueflow.dev for network
 graph

Co-authored-by: robertsLando <11502495+robertsLando@users.noreply.github.com>
---
 package-lock.json                    | 348 ++++++++++++++------
 package.json                         |   6 +-
 src/components/custom/ZwaveGraph.vue | 476 +++++++++++++--------------
 3 files changed, 485 insertions(+), 345 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0b744dc3f..29a6bec9c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,10 @@
         "@jamescoyle/vue-icon": "^0.1.2",
         "@kvaster/zwavejs-prom": "^0.0.3",
         "@mdi/js": "7.4.47",
+        "@vue-flow/background": "^1.3.2",
+        "@vue-flow/controls": "^1.1.3",
+        "@vue-flow/core": "^1.46.5",
+        "@vue-flow/minimap": "^1.5.4",
         "@zwave-js/log-transport-json": "^3.0.0",
         "@zwave-js/server": "^3.2.1",
         "ansi_up": "^6.0.2",
@@ -50,8 +54,6 @@
         "socket.io": "^4.7.5",
         "socket.io-client": "^4.7.5",
         "uplot": "^1.6.30",
-        "vis-data": "^7.1.9",
-        "vis-network": "^9.1.9",
         "vue": "^3.5.0",
         "vue-prism-editor": "^2.0.0-alpha.2",
         "vue-router": "^4.5.0",
@@ -1849,18 +1851,6 @@
         "kuler": "^2.0.0"
       }
     },
-    "node_modules/@egjs/hammerjs": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "peer": true,
-      "dependencies": {
-        "@types/hammerjs": "^2.0.36"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.1.tgz",
@@ -3811,12 +3801,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/hammerjs": {
-      "version": "2.0.45",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
-      "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==",
-      "peer": true
-    },
     "node_modules/@types/http-errors": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
@@ -4028,6 +4012,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.5.10",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@@ -4249,6 +4239,56 @@
         "vue": "^3.2.25"
       }
     },
+    "node_modules/@vue-flow/background": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@vue-flow/background/-/background-1.3.2.tgz",
+      "integrity": "sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/controls": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@vue-flow/controls/-/controls-1.1.3.tgz",
+      "integrity": "sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/core": {
+      "version": "1.46.5",
+      "resolved": "https://registry.npmjs.org/@vue-flow/core/-/core-1.46.5.tgz",
+      "integrity": "sha512-G1m9qNhCTgzw9K5Q8ZcRKbCXssgytWj00R/THUQA9fdO6oYJfBR8kwbI5tA+WHYHTRSCUvgz4xvp0wlF0tSaVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/core": "^10.5.0",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.0"
+      }
+    },
+    "node_modules/@vue-flow/minimap": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@vue-flow/minimap/-/minimap-1.5.4.tgz",
+      "integrity": "sha512-l4C+XTAXnRxsRpUdN7cAVFBennC1sVRzq4bDSpVK+ag7tdMczAnhFYGgbLkUw3v3sY6gokyWwMl8CDonp8eB2g==",
+      "license": "MIT",
+      "dependencies": {
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      },
+      "peerDependencies": {
+        "@vue-flow/core": "^1.23.0",
+        "vue": "^3.3.0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.17",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.17.tgz",
@@ -4425,6 +4465,94 @@
         "yarn": "*"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@yao-pkg/pkg": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/@yao-pkg/pkg/-/pkg-6.1.1.tgz",
@@ -6880,15 +7008,6 @@
         "dot-prop": "^5.1.0"
       }
     },
-    "node_modules/component-emitter": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.1.tgz",
-      "integrity": "sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==",
-      "peer": true,
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/compress-commons": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-6.0.2.tgz",
@@ -7891,6 +8010,111 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/dargs": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/dargs/-/dargs-8.1.0.tgz",
@@ -12645,12 +12869,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/keycharm": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
-      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
-      "peer": true
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -19088,19 +19306,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "peer": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
@@ -19139,53 +19344,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/vis-data": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.9.tgz",
-      "integrity": "sha512-COQsxlVrmcRIbZMMTYwD+C2bxYCFDNQ2EHESklPiInbD/Pk3JZ6qNL84Bp9wWjYjAzXfSlsNaFtRk+hO9yBPWA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
-        "vis-util": "^5.0.1"
-      }
-    },
-    "node_modules/vis-network": {
-      "version": "9.1.9",
-      "resolved": "https://registry.npmjs.org/vis-network/-/vis-network-9.1.9.tgz",
-      "integrity": "sha512-Ft+hLBVyiLstVYSb69Q1OIQeh3FeUxHJn0WdFcq+BFPqs+Vq1ibMi2sb//cxgq1CP7PH4yOXnHxEH/B2VzpZYA==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.0",
-        "component-emitter": "^1.3.0",
-        "keycharm": "^0.2.0 || ^0.3.0 || ^0.4.0",
-        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
-        "vis-data": "^6.3.0 || ^7.0.0",
-        "vis-util": "^5.0.1"
-      }
-    },
-    "node_modules/vis-util": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.7.tgz",
-      "integrity": "sha512-E3L03G3+trvc/X4LXvBfih3YIHcKS2WrP0XTdZefr6W6Qi/2nNCqZfe4JFfJU6DcQLm6Gxqj2Pfl+02859oL5A==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.0",
-        "component-emitter": "^1.3.0 || ^2.0.0"
-      }
-    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
diff --git a/package.json b/package.json
index cf3955fbb3..1931e1b77b 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,10 @@
     "@jamescoyle/vue-icon": "^0.1.2",
     "@kvaster/zwavejs-prom": "^0.0.3",
     "@mdi/js": "7.4.47",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.46.5",
+    "@vue-flow/minimap": "^1.5.4",
     "@zwave-js/log-transport-json": "^3.0.0",
     "@zwave-js/server": "^3.2.1",
     "ansi_up": "^6.0.2",
@@ -105,8 +109,6 @@
     "socket.io": "^4.7.5",
     "socket.io-client": "^4.7.5",
     "uplot": "^1.6.30",
-    "vis-data": "^7.1.9",
-    "vis-network": "^9.1.9",
     "vue": "^3.5.0",
     "vue-prism-editor": "^2.0.0-alpha.2",
     "vue-router": "^4.5.0",
diff --git a/src/components/custom/ZwaveGraph.vue b/src/components/custom/ZwaveGraph.vue
index 3decb6176a..3df015bfab 100644
--- a/src/components/custom/ZwaveGraph.vue
+++ b/src/components/custom/ZwaveGraph.vue
@@ -181,12 +181,27 @@
 				ref="container"
 				v-resize="onResize"
 			>
-				<div
+				<VueFlow
+					:nodes="vueFlowNodes"
+					:edges="vueFlowEdges"
 					:style="{
 						height: containerHeight + 'px',
 					}"
-					ref="content"
-				></div>
+					:fitViewOnInit="true"
+					:snapToGrid="false"
+					:zoomOnDoubleClick="false"
+					@nodesInitialized="onNodesInitialized"
+					@nodeClick="handleNodeClick"
+					@nodeMouseEnter="handleNodeMouseEnter"
+					@nodeMouseLeave="handleNodeMouseLeave"
+					@nodeDragStart="handleNodeDragStart"
+					@nodeDragStop="handleNodeDragStop"
+					@selectionChange="handleSelectionChange"
+				>
+					<Background />
+					<Controls />
+					<MiniMap />
+				</VueFlow>
 				<v-menu
 					v-model="showMenu"
 					:close-on-content-click="false"
@@ -259,9 +274,15 @@
 <style></style>
 
 <script>
-import { Network } from 'vis-network'
-import 'vis-network/styles/vis-network.css'
-// when need to test this, just uncomment this line and find replace `this.nodes` with `testNodes`
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
+import { Background } from '@vue-flow/background'
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
+import '@vue-flow/controls/dist/style.css'
+import '@vue-flow/minimap/dist/style.css'
+// when need to test this, just uncommented this line and find replace `this.nodes` with `testNodes`
 // import fakeNodes from '@/assets/testNodes.json'
 import {
 	ProtocolDataRate,
@@ -280,6 +301,21 @@ const ReturnRouteKind = {
 }
 
 export default {
+	name: 'ZwaveGraph',
+	components: {
+		VueFlow,
+		Controls,
+		MiniMap,
+		Background,
+	},
+	setup() {
+		const { fitView, getSelectedNodes, getSelectedEdges } = useVueFlow()
+		return {
+			fitView,
+			getSelectedNodes,
+			getSelectedEdges,
+		}
+	},
 	props: {
 		nodes: {
 			type: [Array],
@@ -287,9 +323,6 @@ export default {
 	},
 	computed: {
 		...mapState(useBaseStore, ['controllerNode']),
-		content() {
-			return this.$refs.content
-		},
 		fontColor() {
 			return this.isDark ? '#ddd' : '#333'
 		},
@@ -337,8 +370,44 @@ export default {
 		allNodes() {
 			return this.nodes // replace this with `fakeNodes` when testing
 		},
+		vueFlowNodes() {
+			const { nodes } = this.parseNodes()
+			return nodes.map((node) => ({
+				id: String(node.id),
+				type: this.getNodeType(node),
+				position: node.position || {
+					x: Math.random() * 500,
+					y: Math.random() * 500,
+				},
+				data: {
+					label: node.label,
+					...node,
+				},
+				style: this.getNodeStyle(node),
+				draggable: true,
+				selectable: true,
+				hidden: node.hidden || false,
+			}))
+		},
+		vueFlowEdges() {
+			const { edges } = this.parseNodes()
+			return edges.map((edge) => ({
+				id: String(edge.id),
+				source: String(edge.from),
+				target: String(edge.to),
+				type: 'default',
+				animated: false,
+				style: this.getEdgeStyle(edge),
+				label: edge.label || '',
+				labelStyle: this.getEdgeLabelStyle(edge),
+				data: {
+					...edge,
+				},
+				hidden: edge.hidden || false,
+			}))
+		},
 	},
-	network: null, // do not make this reactive, see https://github.com/visjs/vis-network/issues/173#issuecomment-541435420
+	// Remove vis-network instance reference as it's no longer needed
 	unsubscribeUpdate: null, // pinia update action unsubscribe function
 	data() {
 		return {
@@ -467,50 +536,18 @@ export default {
 				this.setSelection()
 			}
 		},
-		showReturnRoutes(v) {
-			// hide/show all edges with returnRoute = true
-			if (
-				this.network &&
-				!this.loading &&
-				this.selectedNodes.length > 0
-			) {
-				const { edges } = this.network.body.data
-
-				const edgesToUpdate = []
-
-				edges.forEach((e) => {
-					if (e.routeKind >= ReturnRouteKind.PRIORITY) {
-						edgesToUpdate.push({
-							id: e.id,
-							hidden: !v,
-						})
-					}
-				})
-
-				edges.update(edgesToUpdate)
+		showReturnRoutes() {
+			// Vue Flow will handle this via the computed vueFlowEdges property
+			// Just trigger a re-render by calling handleSelectNode
+			if (!this.loading && this.selectedNodes.length > 0) {
+				this.handleSelectNode({ nodes: this.selectedNodes })
 			}
 		},
-		showApplicationRoutes(v) {
-			// hide/show all edges with returnRoute = false
-			if (
-				this.network &&
-				!this.loading &&
-				this.selectedNodes.length > 0
-			) {
-				const { edges } = this.network.body.data
-
-				const edgesToUpdate = []
-
-				edges.forEach((e) => {
-					if (e.routeKind === RouteKind.Application) {
-						edgesToUpdate.push({
-							id: e.id,
-							hidden: !v,
-						})
-					}
-				})
-
-				edges.update(edgesToUpdate)
+		showApplicationRoutes() {
+			// Vue Flow will handle this via the computed vueFlowEdges property
+			// Just trigger a re-render by calling handleSelectNode
+			if (!this.loading && this.selectedNodes.length > 0) {
+				this.handleSelectNode({ nodes: this.selectedNodes })
 			}
 		},
 	},
@@ -555,6 +592,53 @@ export default {
 		this.unsubscribeUpdate()
 	},
 	methods: {
+		getNodeType(node) {
+			// Vue Flow uses default node type, we'll style with CSS
+			// Could be extended to return different types based on node properties
+			return node.shape === 'star' ? 'default' : 'default'
+		},
+		getNodeStyle(node) {
+			const styles = {
+				borderWidth: '2px',
+				borderStyle: 'solid',
+				borderColor: node.color || '#ccc',
+				backgroundColor: node.color || '#f0f0f0',
+				color: node.font?.color || this.fontColor,
+				borderRadius: '8px',
+				padding: '8px',
+				fontSize: '12px',
+				textAlign: 'center',
+				minWidth: '80px',
+				maxWidth: '180px',
+			}
+
+			// Different shapes based on node type
+			if (node.shape === 'star') {
+				styles.borderRadius = '50%'
+				styles.clipPath =
+					'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)'
+			} else if (node.shape === 'hexagon') {
+				styles.clipPath =
+					'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)'
+			} else if (node.shape === 'square') {
+				styles.borderRadius = '4px'
+			}
+
+			return styles
+		},
+		getEdgeStyle(edge) {
+			return {
+				stroke: edge.color || '#666',
+				strokeWidth: edge.width || 2,
+				strokeDasharray: edge.dashes ? edge.dashes.join(',') : 'none',
+			}
+		},
+		getEdgeLabelStyle(edge) {
+			return {
+				fontSize: edge.font?.size || 0,
+				fill: edge.font?.color || this.fontColor,
+			}
+		},
 		onResize() {
 			// when container resizes get its height and set content to that
 			// so that the graph can be resized
@@ -576,11 +660,9 @@ export default {
 			}
 		},
 		destroyNetwork() {
-			if (this.network) {
-				this.network.destroy()
-				this.network = null
-				this.content.innerHTML = ''
-			}
+			// Vue Flow doesn't need explicit destruction
+			// Just reset loading state
+			this.loading = false
 		},
 		debounceRefresh() {
 			if (this.refreshTimeout) {
@@ -591,15 +673,19 @@ export default {
 
 			this.refreshTimeout = setTimeout(this.paintGraph.bind(this), 1000)
 		},
+		// eslint-disable-next-line no-unused-vars
 		onNodeUpdate(node) {
 			if (this.updateTimeout) {
 				clearTimeout(this.updateTimeout)
 			}
 
-			if (this.network && !this.loading) {
-				const { nodes, edges } = this.network.body.data
+			if (!this.loading) {
+				// Vue Flow will handle the update via computed properties reactivity
+				// The computed vueFlowNodes and vueFlowEdges will automatically update
+				// when the underlying data changes
 
-				const edgesToRemove = []
+				// Update priority edges tracking
+				const { edges } = this.parseNodes()
 				const allEdges = {} // edgeId => [edge, edge, ...]
 				const removedIds = [] // removed edgeIds
 
@@ -607,11 +693,8 @@ export default {
 					const edgeId = this.getEdgeId(e)
 
 					if (e.routeOf === node.id) {
-						edgesToRemove.push(e.id)
 						if (this.priorityEdges[edgeId]?.id === e.id) {
 							delete this.priorityEdges[edgeId]
-							// we deleted the edge with the higher protocolDataRate
-							// keep track of it so we can update this later
 							removedIds.push(edgeId)
 						}
 					} else if (allEdges[edgeId]) {
@@ -621,12 +704,12 @@ export default {
 					}
 				})
 
-				// update the edge with hight protocolDataRate to prevent
-				// having unconneted nodes
+				// update the edge with highest protocolDataRate to prevent
+				// having unconnected nodes
 				for (const edgeId of removedIds) {
 					const edges = allEdges[edgeId]
 					if (edges) {
-						// set the edge with hight protocolDataRate
+						// set the edge with highest protocolDataRate
 						this.priorityEdges[edgeId] = edges.reduce(
 							(prev, curr) =>
 								prev.protocolDataRate > curr.protocolDataRate
@@ -636,17 +719,10 @@ export default {
 					}
 				}
 
-				nodes.remove(node.id)
-				edges.remove(edgesToRemove)
-				const result = this.parseNode(node)
-				nodes.add(result.node)
-				edges.add(result.edges)
-
 				const params = {
 					nodes: this.selectedNodes,
 				}
 
-				this.network.setSelection(params)
 				this.handleSelectNode(params)
 			}
 		},
@@ -668,7 +744,7 @@ export default {
 			}
 		},
 		setSelection() {
-			if (this.network && !this.loading) {
+			if (!this.loading) {
 				const emptyFilters =
 					this.nodesFilter.length === 0 &&
 					this.locationsFilter.length === 0 &&
@@ -683,121 +759,87 @@ export default {
 				const params = {
 					nodes: all ? [] : this.selectedNodes,
 				}
-				this.network.setSelection(params)
+
 				this.handleSelectNode(params)
 			}
 		},
 		paintGraph() {
 			this.shouldReload = false
-
-			this.destroyNetwork()
-
 			this.priorityEdges = {}
-
 			this.loading = true
 
-			const { edges, nodes } = this.parseNodes()
-
-			const container = this.content
-			const data = {
-				nodes,
-				edges,
-			}
-			const options = {
-				interaction: {
-					// https://visjs.github.io/vis-network/docs/network/interaction.html#
-					hover: true,
-					navigationButtons: true,
-					keyboard: true,
-					multiselect: true,
-					hideEdgesOnDrag: false,
-					hideEdgesOnZoom: false,
-					hideNodesOnDrag: false,
-					hoverConnectedEdges: false,
-					selectable: true,
-					selectConnectedEdges: false,
-					tooltipDelay: 1000,
-					zoomSpeed: 1,
-					zoomView: true,
-				},
-				nodes: {
-					borderWidth: 2,
-					widthConstraint: {
-						maximum: 180,
-					},
-					// shadow: true,
-				},
-				edges: {
-					width: 2,
-					// shadow: true,
-				},
-				physics: {
-					enabled: true, // enabling physics reduces performance a lot
-					stabilization: {
-						enabled: true,
-						iterations: 50,
-						updateInterval: 50,
-						onlyDynamicEdges: false,
-						fit: true,
-					},
-					barnesHut: {
-						theta: 0.99,
-						damping: 0.9,
-						avoidOverlap: 0.15,
-					},
-				},
-			}
-
-			this.network = new Network(container, data, options)
-
-			// event handlers
-			// https://visjs.github.io/vis-network/docs/network/#Events
-			this.network.once('stabilizationIterationsDone', () => {
+			// Vue Flow will handle the rendering via computed properties
+			// Just need to trigger reactivity and fit view
+			this.$nextTick(() => {
 				this.loading = false
 				this.setSelection()
+				this.fitView()
 			})
+		},
+		onNodesInitialized() {
+			this.loading = false
+			this.setSelection()
+		},
+		handleNodeClick(event) {
+			const nodeId = event.node.id
+			if (nodeId) {
+				const node = this.allNodes.find(
+					(n) => n.id === parseInt(nodeId),
+				)
+				this.$emit('node-click', node)
+			} else {
+				this.$emit('node-click', null)
+			}
+		},
+		handleNodeMouseEnter(event) {
+			if (this.dragging) return
+			const nodeId = event.node.id
+			const item = this.allNodes.find((n) => n.id === parseInt(nodeId))
 
-			this.network.on('click', this.handleClick.bind(this))
-
-			this.network.on('hoverNode', this.handleHoverNode.bind(this))
-			this.network.on('blurNode', this.handleBlurNode.bind(this))
-
-			this.network.on('dragStart', this.handleDragStart.bind(this))
-			this.network.on('dragEnd', this.handleDragEnd.bind(this))
-
-			this.network.on('select', this.handleSelectNode.bind(this))
-
-			// this.network.on('hoverEdge', function (e) {
-			// 	this.body.data.edges.update({
-			// 		id: e.edge,
-			// 		font: {
-			// 			size: 12,
-			// 		},
-			// 	})
-			// })
-
-			// this.network.on('blurEdge', function (e) {
-			// 	this.body.data.edges.update({
-			// 		id: e.edge,
-			// 		font: {
-			// 			size: 0,
-			// 		},
-			// 	})
-			// })
+			if (item) {
+				this.hoverNodeTimeout = setTimeout(() => {
+					this.hoverNode = item
+					// Get mouse position from the event
+					this.menuX = event.event?.clientX || 100
+					this.menuY = event.event?.clientY || 100
+					this.showMenu = true
+					this.hoverNodeTimeout = null
+				}, 1000)
+			}
+		},
+		handleNodeMouseLeave() {
+			if (this.hoverNodeTimeout) {
+				clearTimeout(this.hoverNodeTimeout)
+				this.hoverNodeTimeout = null
+			} else {
+				this.showMenu = false
+				this.hoverNode = null
+			}
+		},
+		handleNodeDragStart() {
+			this.dragging = true
+		},
+		handleNodeDragStop() {
+			this.dragging = false
+		},
+		handleSelectionChange(selection) {
+			const nodeIds = selection.nodes.map((node) => parseInt(node.id))
+			this.selectedNodes = nodeIds
+			this.handleSelectNode({ nodes: nodeIds })
 		},
 		handleSelectNode(params) {
 			let { nodes: selectedNodes } = params
 
-			const { edges, nodes } = this.network.body.data
+			// For Vue Flow, we need to work with the computed data instead of network data
+			const edges = this.vueFlowEdges
+			const nodes = this.vueFlowNodes
 			const repeaters = []
 
-			const edgesToUpdate = []
-			const nodesToUpdate = []
-
 			// click on controller
 			if (
 				selectedNodes.length === 1 &&
-				nodes.get(selectedNodes[0]).isControllerNode
+				nodes.find((n) => parseInt(n.id) === selectedNodes[0])?.data
+					?.isControllerNode
 			) {
 				selectedNodes = []
 			}
@@ -806,115 +848,53 @@ export default {
 
 			const showAll = selectedNodes.length === 0
 
-			// DataSet: https://visjs.github.io/vis-data/data/dataset.html
+			// Update edge visibility based on selection
 			edges.forEach((e) => {
-				const edgeId = this.getEdgeId(e)
+				const edgeId = this.getEdgeId({ from: e.source, to: e.target })
 				const shouldBeHidden =
 					(showAll && this.priorityEdges[edgeId]?.id !== e.id) ||
 					(selectedNodes.length > 0 &&
-						!selectedNodes.includes(e.routeOf))
+						!selectedNodes.includes(e.data?.routeOf))
 
 				let checkboxHide = false
 
 				if (!showAll) {
 					if (
-						e.routeKind === RouteKind.Application &&
+						e.data?.routeKind === RouteKind.Application &&
 						!this.showApplicationRoutes
 					) {
 						checkboxHide = true
 					} else if (
-						e.routeKind >= ReturnRouteKind.PRIORITY &&
+						e.data?.routeKind >= ReturnRouteKind.PRIORITY &&
 						!this.showReturnRoutes
 					) {
 						checkboxHide = true
 					}
 				}
 
-				const fontSize = showAll ? 0 : 12
-
-				if (shouldBeHidden !== e.hidden || fontSize !== e.font.size) {
-					edgesToUpdate.push({
-						id: e.id,
-						hidden: shouldBeHidden || checkboxHide,
-						font: {
-							size: fontSize,
-						},
-					})
-				}
+				e.hidden = shouldBeHidden || checkboxHide
 
 				if (!shouldBeHidden) {
-					repeaters.push(e.from)
-					repeaters.push(e.to)
+					repeaters.push(parseInt(e.source))
+					repeaters.push(parseInt(e.target))
 				}
 			})
 
-			edges.update(edgesToUpdate)
-
+			// Update node visibility based on selection
 			nodes.forEach((n) => {
+				const nodeId = parseInt(n.id)
 				const shouldBeHidden =
 					selectedNodes.length > 0 &&
-					!selectedNodes.includes(n.id) &&
-					!repeaters.includes(n.id)
-
-				if (shouldBeHidden !== n.hidden) {
-					nodesToUpdate.push({
-						id: n.id,
-						hidden: shouldBeHidden,
-						color: n.color,
-					})
-				}
-			})
-
-			nodes.update(nodesToUpdate)
+					!selectedNodes.includes(nodeId) &&
+					!repeaters.includes(nodeId)
 
-			this.network.fit()
-		},
-		handleDragStart() {
-			this.dragging = true
-		},
-		handleDragEnd() {
-			this.dragging = false
-		},
-		handleHoverNode(params) {
-			// show menu
-			if (this.dragging) return
-			const { node, event } = params
-
-			const item = this.allNodes.find((n) => n.id === node)
+				n.hidden = shouldBeHidden
+			})
 
-			if (item) {
-				this.hoverNodeTimeout = setTimeout(() => {
-					this.hoverNode = item
-					this.menuX = event.clientX + 5
-					this.menuY = event.clientY + 5
-					this.showMenu = true
-					this.hoverNodeTimeout = null
-				}, 1000)
-			}
-		},
-		handleBlurNode() {
-			if (this.hoverNodeTimeout) {
-				clearTimeout(this.hoverNodeTimeout)
-				this.hoverNodeTimeout = null
-			} else {
-				// hide menu
-				this.showMenu = false
-				this.hoverNode = null
-			}
-		},
-		handleClick(params) {
-			if (params.event) {
-				params.event.preventDefault()
-				// https://visjs.github.io/vis-network/docs/network/#events
-				// Add interactivity
-				const nodeId = params.nodes[0]
-				if (nodeId) {
-					const node = this.allNodes.find((n) => n.id === nodeId)
-					this.$emit('node-click', node)
-				} else {
-					this.$emit('node-click', null)
-				}
-			}
+			// Fit view after selection changes
+			this.$nextTick(() => {
+				this.fitView()
+			})
 		},
 		parseRouteStats(
 			edges,