diff --git a/package-lock.json b/package-lock.json
index a31621bd0e7..32435b39b12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8598,6 +8598,118 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/@mongodb-js/diagramming": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-1.3.5.tgz",
+      "integrity": "sha512-s4mrOUj10Fpole5V5zUSgj6GqD+CYsxSQuTo3oi2gu8zGR6GHlKrYilIj3mC6mO7UHktyPeHEE8ARmF8aHUcQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@leafygreen-ui/icon": "^13.2.0",
+        "@leafygreen-ui/leafygreen-provider": "^5.0.0",
+        "@leafygreen-ui/palette": "^5.0.0",
+        "@leafygreen-ui/tokens": "^3.0.0",
+        "@leafygreen-ui/typography": "^20.1.4",
+        "@xyflow/react": "12.5.1",
+        "d3-path": "^3.1.0",
+        "elkjs": "^0.10.0",
+        "react": "17.0.2",
+        "react-dom": "17.0.2"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/emotion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.0.tgz",
+      "integrity": "sha512-MOfouBCmHuFa6UObhUl03CUFqXvD2PP+nI7CLk0ny8/UKOLgAX4N+JuuSX606u+Efxk4lI2m3FZiyCrfi6oeFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@emotion/css": "^11.1.3",
+        "@emotion/server": "^11.4.0"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/hooks": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.1.1.tgz",
+      "integrity": "sha512-WVAu5NgFo5eALb7Z2E8v2mEaUtiGXsOrOGX8fLHSU75Xs343SGWllwxqqGnhf+bbUNlSXBAbprHAD3/Yn4QcyQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@leafygreen-ui/lib": "^15.2.0",
+        "@leafygreen-ui/tokens": "^3.1.2",
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/leafygreen-provider": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-5.0.2.tgz",
+      "integrity": "sha512-mLD7ziluM0ZoTlzoauu6AeA3vGVlf9JilUjmWZEcZeRfzJcIyF48PoL7Mj23AqY1k1PNcJHhlK9ALpIzpI33ug==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@leafygreen-ui/hooks": "^9.1.1",
+        "@leafygreen-ui/lib": "^15.2.0",
+        "react-transition-group": "^4.4.5"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/lib": {
+      "version": "15.2.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
+      "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/palette": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.0.tgz",
+      "integrity": "sha512-RHQy165X7lKMlNU+2BkvGCNuo8fP3bS5NVOJ6thSKingoksYrz1a6SNAzuHDIkww+njf0GaKiXYT64og2Xm4Fw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/tokens": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-3.2.1.tgz",
+      "integrity": "sha512-FJwgN9zRFa/1Lrw3teuBdTF+Fi/IAdpaNuUUEiVIissHK4Py8Dsc6HJhWKBOocBj5dEw78cRDgnqSVFvU6EjMg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@leafygreen-ui/emotion": "^5.0.0",
+        "@leafygreen-ui/lib": "^15.2.0",
+        "@leafygreen-ui/palette": "^5.0.0",
+        "polished": "^4.2.2"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@xyflow/react": {
+      "version": "12.5.1",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.5.1.tgz",
+      "integrity": "sha512-jMKQVqGwCz0x6pUyvxTIuCMbyehfua7CfEEWDj29zQSHigQpCy0/5d8aOmZrqK4cwur/pVHLQomT6Rm10gXfHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.53",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@xyflow/system": {
+      "version": "0.0.53",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.53.tgz",
+      "integrity": "sha512-QTWieiTtvNYyQAz1fxpzgtUGXNpnhfh6vvZa7dFWpWS2KOz6bEHODo/DTK3s07lDu0Bq0Db5lx/5M5mNjb9VDQ==",
+      "license": "MIT",
+      "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/@mongodb-js/dl-center": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/dl-center/-/dl-center-1.3.0.tgz",
@@ -15510,38 +15622,6 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
-    "node_modules/@xyflow/react": {
-      "version": "12.8.1",
-      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.8.1.tgz",
-      "integrity": "sha512-t5Rame4Gc/540VcOZd28yFe9Xd8lyjKUX+VTiyb1x4ykNXZH5zyDmsu+lj9je2O/jGBVb0pj1Vjcxrxyn+Xk2g==",
-      "license": "MIT",
-      "dependencies": {
-        "@xyflow/system": "0.0.65",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.0"
-      },
-      "peerDependencies": {
-        "react": ">=17",
-        "react-dom": ">=17"
-      }
-    },
-    "node_modules/@xyflow/system": {
-      "version": "0.0.65",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.65.tgz",
-      "integrity": "sha512-AliQPQeurQMoNlOdySnRoDQl9yDSA/1Lqi47Eo0m98lHcfrTdD9jK75H0tiGj+0qRC10SKNUXyMkT0KL0opg4g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/d3-drag": "^3.0.7",
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/d3-selection": "^3.0.10",
-        "@types/d3-transition": "^3.0.8",
-        "@types/d3-zoom": "^3.0.8",
-        "d3-drag": "^3.0.0",
-        "d3-interpolate": "^3.0.1",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0"
-      }
-    },
     "node_modules/@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
@@ -44501,6 +44581,7 @@
         "@leafygreen-ui/tooltip": "^13.0.13",
         "@leafygreen-ui/typography": "^20.0.2",
         "@mongodb-js/compass-context-menu": "^0.2.5",
+        "@mongodb-js/diagramming": "^1.3.3",
         "@react-aria/interactions": "^3.9.1",
         "@react-aria/utils": "^3.13.1",
         "@react-aria/visually-hidden": "^3.3.1",
@@ -45298,7 +45379,6 @@
         "@mongodb-js/compass-user-data": "^0.9.0",
         "@mongodb-js/compass-utils": "^0.9.10",
         "@mongodb-js/compass-workspaces": "^0.51.0",
-        "@mongodb-js/diagramming": "^1.3.3",
         "bson": "^6.10.4",
         "compass-preferences-model": "^2.50.0",
         "html-to-image": "1.11.11",
@@ -45313,6 +45393,7 @@
         "redux-thunk": "^2.4.2"
       },
       "devDependencies": {
+        "@mongodb-js/diagramming": "^1.3.3",
         "@mongodb-js/eslint-config-compass": "^1.4.6",
         "@mongodb-js/mocha-config-compass": "^1.7.0",
         "@mongodb-js/prettier-config-compass": "^1.2.8",
@@ -45333,112 +45414,6 @@
         "xvfb-maybe": "^0.2.1"
       }
     },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/emotion": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.0.tgz",
-      "integrity": "sha512-MOfouBCmHuFa6UObhUl03CUFqXvD2PP+nI7CLk0ny8/UKOLgAX4N+JuuSX606u+Efxk4lI2m3FZiyCrfi6oeFQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@emotion/css": "^11.1.3",
-        "@emotion/server": "^11.4.0"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/hooks": {
-      "version": "9.1.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.1.1.tgz",
-      "integrity": "sha512-WVAu5NgFo5eALb7Z2E8v2mEaUtiGXsOrOGX8fLHSU75Xs343SGWllwxqqGnhf+bbUNlSXBAbprHAD3/Yn4QcyQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/lib": "^15.2.0",
-        "@leafygreen-ui/tokens": "^3.1.2",
-        "lodash": "^4.17.21"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/hooks/node_modules/@leafygreen-ui/lib": {
-      "version": "15.2.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
-      "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/leafygreen-provider": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-5.0.2.tgz",
-      "integrity": "sha512-mLD7ziluM0ZoTlzoauu6AeA3vGVlf9JilUjmWZEcZeRfzJcIyF48PoL7Mj23AqY1k1PNcJHhlK9ALpIzpI33ug==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/hooks": "^9.1.1",
-        "@leafygreen-ui/lib": "^15.2.0",
-        "react-transition-group": "^4.4.5"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/leafygreen-provider/node_modules/@leafygreen-ui/lib": {
-      "version": "15.2.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
-      "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/palette": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.0.tgz",
-      "integrity": "sha512-RHQy165X7lKMlNU+2BkvGCNuo8fP3bS5NVOJ6thSKingoksYrz1a6SNAzuHDIkww+njf0GaKiXYT64og2Xm4Fw==",
-      "license": "Apache-2.0"
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/tokens": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-3.2.1.tgz",
-      "integrity": "sha512-FJwgN9zRFa/1Lrw3teuBdTF+Fi/IAdpaNuUUEiVIissHK4Py8Dsc6HJhWKBOocBj5dEw78cRDgnqSVFvU6EjMg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/emotion": "^5.0.0",
-        "@leafygreen-ui/lib": "^15.2.0",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "polished": "^4.2.2"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@leafygreen-ui/tokens/node_modules/@leafygreen-ui/lib": {
-      "version": "15.2.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
-      "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-data-modeling/node_modules/@mongodb-js/diagramming": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-1.3.3.tgz",
-      "integrity": "sha512-wE5MXYgLPDdB9MQnPuggCP8A4sHKR0goRSiFxR7yQyaUT1VSuugKv/PObF6CarOpAq9+WYyl1I1vU9ea4D5Tng==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.0",
-        "@leafygreen-ui/icon": "^13.2.0",
-        "@leafygreen-ui/leafygreen-provider": "^5.0.0",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "@leafygreen-ui/tokens": "^3.0.0",
-        "@leafygreen-ui/typography": "^20.1.4",
-        "@xyflow/react": "^12.5.1",
-        "d3-path": "^3.1.0",
-        "elkjs": "^0.10.0",
-        "react": "17.0.2",
-        "react-dom": "17.0.2"
-      }
-    },
     "packages/compass-data-modeling/node_modules/@sinonjs/commons": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
@@ -57264,6 +57239,7 @@
         "@leafygreen-ui/tooltip": "^13.0.13",
         "@leafygreen-ui/typography": "^20.0.2",
         "@mongodb-js/compass-context-menu": "^0.2.5",
+        "@mongodb-js/diagramming": "^1.3.3",
         "@mongodb-js/eslint-config-compass": "^1.4.6",
         "@mongodb-js/mocha-config-compass": "^1.7.0",
         "@mongodb-js/prettier-config-compass": "^1.2.8",
@@ -57974,100 +57950,6 @@
         "xvfb-maybe": "^0.2.1"
       },
       "dependencies": {
-        "@leafygreen-ui/emotion": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.0.tgz",
-          "integrity": "sha512-MOfouBCmHuFa6UObhUl03CUFqXvD2PP+nI7CLk0ny8/UKOLgAX4N+JuuSX606u+Efxk4lI2m3FZiyCrfi6oeFQ==",
-          "requires": {
-            "@emotion/css": "^11.1.3",
-            "@emotion/server": "^11.4.0"
-          }
-        },
-        "@leafygreen-ui/hooks": {
-          "version": "9.1.1",
-          "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.1.1.tgz",
-          "integrity": "sha512-WVAu5NgFo5eALb7Z2E8v2mEaUtiGXsOrOGX8fLHSU75Xs343SGWllwxqqGnhf+bbUNlSXBAbprHAD3/Yn4QcyQ==",
-          "requires": {
-            "@leafygreen-ui/lib": "^15.2.0",
-            "@leafygreen-ui/tokens": "^3.1.2",
-            "lodash": "^4.17.21"
-          },
-          "dependencies": {
-            "@leafygreen-ui/lib": {
-              "version": "15.2.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
-              "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
-              "requires": {
-                "lodash": "^4.17.21"
-              }
-            }
-          }
-        },
-        "@leafygreen-ui/leafygreen-provider": {
-          "version": "5.0.2",
-          "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-5.0.2.tgz",
-          "integrity": "sha512-mLD7ziluM0ZoTlzoauu6AeA3vGVlf9JilUjmWZEcZeRfzJcIyF48PoL7Mj23AqY1k1PNcJHhlK9ALpIzpI33ug==",
-          "requires": {
-            "@leafygreen-ui/hooks": "^9.1.1",
-            "@leafygreen-ui/lib": "^15.2.0",
-            "react-transition-group": "^4.4.5"
-          },
-          "dependencies": {
-            "@leafygreen-ui/lib": {
-              "version": "15.2.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
-              "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
-              "requires": {
-                "lodash": "^4.17.21"
-              }
-            }
-          }
-        },
-        "@leafygreen-ui/palette": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.0.tgz",
-          "integrity": "sha512-RHQy165X7lKMlNU+2BkvGCNuo8fP3bS5NVOJ6thSKingoksYrz1a6SNAzuHDIkww+njf0GaKiXYT64og2Xm4Fw=="
-        },
-        "@leafygreen-ui/tokens": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-3.2.1.tgz",
-          "integrity": "sha512-FJwgN9zRFa/1Lrw3teuBdTF+Fi/IAdpaNuUUEiVIissHK4Py8Dsc6HJhWKBOocBj5dEw78cRDgnqSVFvU6EjMg==",
-          "requires": {
-            "@leafygreen-ui/emotion": "^5.0.0",
-            "@leafygreen-ui/lib": "^15.2.0",
-            "@leafygreen-ui/palette": "^5.0.0",
-            "polished": "^4.2.2"
-          },
-          "dependencies": {
-            "@leafygreen-ui/lib": {
-              "version": "15.2.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
-              "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
-              "requires": {
-                "lodash": "^4.17.21"
-              }
-            }
-          }
-        },
-        "@mongodb-js/diagramming": {
-          "version": "1.3.3",
-          "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-1.3.3.tgz",
-          "integrity": "sha512-wE5MXYgLPDdB9MQnPuggCP8A4sHKR0goRSiFxR7yQyaUT1VSuugKv/PObF6CarOpAq9+WYyl1I1vU9ea4D5Tng==",
-          "requires": {
-            "@emotion/react": "^11.14.0",
-            "@emotion/styled": "^11.14.0",
-            "@leafygreen-ui/icon": "^13.2.0",
-            "@leafygreen-ui/leafygreen-provider": "^5.0.0",
-            "@leafygreen-ui/palette": "^5.0.0",
-            "@leafygreen-ui/tokens": "^3.0.0",
-            "@leafygreen-ui/typography": "^20.1.4",
-            "@xyflow/react": "^12.5.1",
-            "d3-path": "^3.1.0",
-            "elkjs": "^0.10.0",
-            "react": "17.0.2",
-            "react-dom": "17.0.2"
-          }
-        },
         "@sinonjs/commons": {
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
@@ -61003,6 +60885,104 @@
         }
       }
     },
+    "@mongodb-js/diagramming": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-1.3.5.tgz",
+      "integrity": "sha512-s4mrOUj10Fpole5V5zUSgj6GqD+CYsxSQuTo3oi2gu8zGR6GHlKrYilIj3mC6mO7UHktyPeHEE8ARmF8aHUcQA==",
+      "requires": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@leafygreen-ui/icon": "^13.2.0",
+        "@leafygreen-ui/leafygreen-provider": "^5.0.0",
+        "@leafygreen-ui/palette": "^5.0.0",
+        "@leafygreen-ui/tokens": "^3.0.0",
+        "@leafygreen-ui/typography": "^20.1.4",
+        "@xyflow/react": "12.5.1",
+        "d3-path": "^3.1.0",
+        "elkjs": "^0.10.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      },
+      "dependencies": {
+        "@leafygreen-ui/emotion": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.0.tgz",
+          "integrity": "sha512-MOfouBCmHuFa6UObhUl03CUFqXvD2PP+nI7CLk0ny8/UKOLgAX4N+JuuSX606u+Efxk4lI2m3FZiyCrfi6oeFQ==",
+          "requires": {
+            "@emotion/css": "^11.1.3",
+            "@emotion/server": "^11.4.0"
+          }
+        },
+        "@leafygreen-ui/hooks": {
+          "version": "9.1.1",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.1.1.tgz",
+          "integrity": "sha512-WVAu5NgFo5eALb7Z2E8v2mEaUtiGXsOrOGX8fLHSU75Xs343SGWllwxqqGnhf+bbUNlSXBAbprHAD3/Yn4QcyQ==",
+          "requires": {
+            "@leafygreen-ui/lib": "^15.2.0",
+            "@leafygreen-ui/tokens": "^3.1.2",
+            "lodash": "^4.17.21"
+          }
+        },
+        "@leafygreen-ui/leafygreen-provider": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-5.0.2.tgz",
+          "integrity": "sha512-mLD7ziluM0ZoTlzoauu6AeA3vGVlf9JilUjmWZEcZeRfzJcIyF48PoL7Mj23AqY1k1PNcJHhlK9ALpIzpI33ug==",
+          "requires": {
+            "@leafygreen-ui/hooks": "^9.1.1",
+            "@leafygreen-ui/lib": "^15.2.0",
+            "react-transition-group": "^4.4.5"
+          }
+        },
+        "@leafygreen-ui/lib": {
+          "version": "15.2.0",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.2.0.tgz",
+          "integrity": "sha512-wrVJGaqACcYWE/xPHHJREpRvkoy4Biwim1SUuq0hs/lXf6cEMg7MD9x2fUDJ9v6tQmLiFuwRXbJiXrvVXkz4Lg==",
+          "requires": {
+            "lodash": "^4.17.21"
+          }
+        },
+        "@leafygreen-ui/palette": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.0.tgz",
+          "integrity": "sha512-RHQy165X7lKMlNU+2BkvGCNuo8fP3bS5NVOJ6thSKingoksYrz1a6SNAzuHDIkww+njf0GaKiXYT64og2Xm4Fw=="
+        },
+        "@leafygreen-ui/tokens": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/tokens/-/tokens-3.2.1.tgz",
+          "integrity": "sha512-FJwgN9zRFa/1Lrw3teuBdTF+Fi/IAdpaNuUUEiVIissHK4Py8Dsc6HJhWKBOocBj5dEw78cRDgnqSVFvU6EjMg==",
+          "requires": {
+            "@leafygreen-ui/emotion": "^5.0.0",
+            "@leafygreen-ui/lib": "^15.2.0",
+            "@leafygreen-ui/palette": "^5.0.0",
+            "polished": "^4.2.2"
+          }
+        },
+        "@xyflow/react": {
+          "version": "12.5.1",
+          "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.5.1.tgz",
+          "integrity": "sha512-jMKQVqGwCz0x6pUyvxTIuCMbyehfua7CfEEWDj29zQSHigQpCy0/5d8aOmZrqK4cwur/pVHLQomT6Rm10gXfHg==",
+          "requires": {
+            "@xyflow/system": "0.0.53",
+            "classcat": "^5.0.3",
+            "zustand": "^4.4.0"
+          }
+        },
+        "@xyflow/system": {
+          "version": "0.0.53",
+          "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.53.tgz",
+          "integrity": "sha512-QTWieiTtvNYyQAz1fxpzgtUGXNpnhfh6vvZa7dFWpWS2KOz6bEHODo/DTK3s07lDu0Bq0Db5lx/5M5mNjb9VDQ==",
+          "requires": {
+            "@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"
+          }
+        }
+      }
+    },
     "@mongodb-js/dl-center": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/dl-center/-/dl-center-1.3.0.tgz",
@@ -67040,32 +67020,6 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
-    "@xyflow/react": {
-      "version": "12.8.1",
-      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.8.1.tgz",
-      "integrity": "sha512-t5Rame4Gc/540VcOZd28yFe9Xd8lyjKUX+VTiyb1x4ykNXZH5zyDmsu+lj9je2O/jGBVb0pj1Vjcxrxyn+Xk2g==",
-      "requires": {
-        "@xyflow/system": "0.0.65",
-        "classcat": "^5.0.3",
-        "zustand": "^4.4.0"
-      }
-    },
-    "@xyflow/system": {
-      "version": "0.0.65",
-      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.65.tgz",
-      "integrity": "sha512-AliQPQeurQMoNlOdySnRoDQl9yDSA/1Lqi47Eo0m98lHcfrTdD9jK75H0tiGj+0qRC10SKNUXyMkT0KL0opg4g==",
-      "requires": {
-        "@types/d3-drag": "^3.0.7",
-        "@types/d3-interpolate": "^3.0.4",
-        "@types/d3-selection": "^3.0.10",
-        "@types/d3-transition": "^3.0.8",
-        "@types/d3-zoom": "^3.0.8",
-        "d3-drag": "^3.0.0",
-        "d3-interpolate": "^3.0.1",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0"
-      }
-    },
     "@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index 4a86b1be6a1..4f50183232e 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -78,6 +78,7 @@
     "@leafygreen-ui/tooltip": "^13.0.13",
     "@leafygreen-ui/typography": "^20.0.2",
     "@mongodb-js/compass-context-menu": "^0.2.5",
+    "@mongodb-js/diagramming": "^1.3.3",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",
diff --git a/packages/compass-components/src/components/diagramming.tsx b/packages/compass-components/src/components/diagramming.tsx
new file mode 100644
index 00000000000..bf1dfe29cab
--- /dev/null
+++ b/packages/compass-components/src/components/diagramming.tsx
@@ -0,0 +1,13 @@
+export {
+  Diagram,
+  DiagramProvider,
+  applyLayout,
+  getNodesBounds,
+  getViewportForBounds,
+  useDiagram,
+} from '@mongodb-js/diagramming';
+export type {
+  EdgeProps,
+  DiagramInstance,
+  NodeProps,
+} from '@mongodb-js/diagramming';
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
index d43122604d6..7a54000b4ac 100644
--- a/packages/compass-components/src/index.ts
+++ b/packages/compass-components/src/index.ts
@@ -1,3 +1,4 @@
+export * from './components/diagramming';
 export * from './components/leafygreen';
 
 export {
diff --git a/packages/compass-data-modeling/package.json b/packages/compass-data-modeling/package.json
index cb48e27c06d..fc4470aeed0 100644
--- a/packages/compass-data-modeling/package.json
+++ b/packages/compass-data-modeling/package.json
@@ -63,7 +63,6 @@
     "@mongodb-js/compass-user-data": "^0.9.0",
     "@mongodb-js/compass-utils": "^0.9.10",
     "@mongodb-js/compass-workspaces": "^0.51.0",
-    "@mongodb-js/diagramming": "^1.3.3",
     "bson": "^6.10.4",
     "compass-preferences-model": "^2.50.0",
     "html-to-image": "1.11.11",
@@ -78,6 +77,7 @@
     "redux-thunk": "^2.4.2"
   },
   "devDependencies": {
+    "@mongodb-js/diagramming": "^1.3.3",
     "@mongodb-js/eslint-config-compass": "^1.4.6",
     "@mongodb-js/mocha-config-compass": "^1.7.0",
     "@mongodb-js/prettier-config-compass": "^1.2.8",
diff --git a/packages/compass-data-modeling/src/components/data-modeling.tsx b/packages/compass-data-modeling/src/components/data-modeling.tsx
index 6db1f08d592..55c53639c5c 100644
--- a/packages/compass-data-modeling/src/components/data-modeling.tsx
+++ b/packages/compass-data-modeling/src/components/data-modeling.tsx
@@ -4,7 +4,7 @@ import DiagramEditor from './diagram-editor';
 import SavedDiagramsList from './saved-diagrams-list';
 import NewDiagramFormModal from './new-diagram-form';
 import type { DataModelingState } from '../store/reducer';
-import { DiagramProvider } from '@mongodb-js/diagramming';
+import { DiagramProvider } from '@mongodb-js/compass-components';
 import DiagramEditorSidePanel from './drawer/diagram-editor-side-panel';
 
 type DataModelingProps = {
diff --git a/packages/compass-data-modeling/src/components/diagram-editor.spec.tsx b/packages/compass-data-modeling/src/components/diagram-editor.spec.tsx
index b8699fffc51..23b14a9b568 100644
--- a/packages/compass-data-modeling/src/components/diagram-editor.spec.tsx
+++ b/packages/compass-data-modeling/src/components/diagram-editor.spec.tsx
@@ -13,7 +13,7 @@ import type {
 } from '../services/data-model-storage';
 import diagramming from '@mongodb-js/diagramming';
 import sinon from 'sinon';
-import { DiagramProvider } from '@mongodb-js/diagramming';
+import { DiagramProvider } from '@mongodb-js/compass-components';
 import { DataModelingWorkspaceTab } from '..';
 import { openDiagram } from '../store/diagram';
 
@@ -156,13 +156,16 @@ describe('DiagramEditor', function () {
   let store: DataModelingStore;
 
   before(function () {
-    // We need to tub the Diagram import because it has problems with ESM/CJS interop
     sinon.stub(diagramming, 'Diagram').callsFake(mockDiagramming.Diagram);
     sinon
       .stub(diagramming, 'applyLayout')
       .callsFake(mockDiagramming.applyLayout as any);
   });
 
+  after(function () {
+    sinon.restore();
+  });
+
   context('with existing diagram', function () {
     beforeEach(async function () {
       const result = renderDiagramEditor({
diff --git a/packages/compass-data-modeling/src/components/diagram-editor.tsx b/packages/compass-data-modeling/src/components/diagram-editor.tsx
index 76efe8ff3ba..43d34e880f1 100644
--- a/packages/compass-data-modeling/src/components/diagram-editor.tsx
+++ b/packages/compass-data-modeling/src/components/diagram-editor.tsx
@@ -19,21 +19,18 @@ import {
 import {
   Banner,
   CancelLoader,
+  Diagram,
   WorkspaceContainer,
   css,
   spacing,
   Button,
   useDarkMode,
+  useDiagram,
   useDrawerActions,
   rafraf,
 } from '@mongodb-js/compass-components';
 import { cancelAnalysis, retryAnalysis } from '../store/analysis-process';
-import {
-  Diagram,
-  type NodeProps,
-  type EdgeProps,
-  useDiagram,
-} from '@mongodb-js/diagramming';
+import type { NodeProps, EdgeProps } from '@mongodb-js/compass-components';
 import type { StaticModel } from '../services/data-model-storage';
 import DiagramEditorToolbar from './diagram-editor-toolbar';
 import ExportDiagramModal from './export-diagram-modal';
diff --git a/packages/compass-data-modeling/src/components/export-diagram-modal.tsx b/packages/compass-data-modeling/src/components/export-diagram-modal.tsx
index 52eaba1788e..f28d243b449 100644
--- a/packages/compass-data-modeling/src/components/export-diagram-modal.tsx
+++ b/packages/compass-data-modeling/src/components/export-diagram-modal.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Button,
-  css,
   Icon,
   Label,
   Modal,
@@ -13,7 +12,10 @@ import {
   spacing,
   SpinLoader,
   PngIcon,
+  css,
+  useDiagram,
 } from '@mongodb-js/compass-components';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import type { ExportDiagramFormat } from '../store/export-diagram';
 import {
   closeExportModal,
@@ -22,8 +24,6 @@ import {
 } from '../store/export-diagram';
 import { connect } from 'react-redux';
 import type { DataModelingState } from '../store/reducer';
-import { useDiagram } from '@mongodb-js/diagramming';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
 
 const modelBodyStyles = css({
   paddingTop: spacing[600],
diff --git a/packages/compass-data-modeling/src/services/export-diagram.tsx b/packages/compass-data-modeling/src/services/export-diagram.tsx
index 5edf1aa8c93..dba005d5b9c 100644
--- a/packages/compass-data-modeling/src/services/export-diagram.tsx
+++ b/packages/compass-data-modeling/src/services/export-diagram.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
 import {
-  getNodesBounds,
-  getViewportForBounds,
   DiagramProvider,
   Diagram,
-} from '@mongodb-js/diagramming';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
+  getNodesBounds,
+  getViewportForBounds,
+  rafraf,
+  spacing,
+} from '@mongodb-js/compass-components';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import type { StaticModel } from './data-model-storage';
 import ReactDOM from 'react-dom';
 import { toPng } from 'html-to-image';
-import { rafraf, spacing } from '@mongodb-js/compass-components';
 import { raceWithAbort } from '@mongodb-js/compass-utils';
 
 function moveSvgDefsToViewportElement(
diff --git a/packages/compass-data-modeling/src/store/analysis-process.ts b/packages/compass-data-modeling/src/store/analysis-process.ts
index 48cbec31c19..6bd69857174 100644
--- a/packages/compass-data-modeling/src/store/analysis-process.ts
+++ b/packages/compass-data-modeling/src/store/analysis-process.ts
@@ -6,7 +6,7 @@ import { getCurrentDiagramFromState } from './diagram';
 import type { Document } from 'bson';
 import type { AggregationCursor } from 'mongodb';
 import type { Relationship } from '../services/data-model-storage';
-import { applyLayout } from '@mongodb-js/diagramming';
+import { applyLayout } from '@mongodb-js/compass-components';
 import { collectionToDiagramNode } from '../utils/nodes-and-edges';
 
 export type AnalysisProcessState = {
diff --git a/packages/compass-data-modeling/src/store/export-diagram.ts b/packages/compass-data-modeling/src/store/export-diagram.ts
index d3d957b96d8..78b1145d0e2 100644
--- a/packages/compass-data-modeling/src/store/export-diagram.ts
+++ b/packages/compass-data-modeling/src/store/export-diagram.ts
@@ -5,7 +5,7 @@ import { exportToJson, exportToPng } from '../services/export-diagram';
 import { selectCurrentModelFromState } from './diagram';
 import { openToast } from '@mongodb-js/compass-components';
 import { isCancelError } from '@mongodb-js/compass-utils';
-import type { DiagramInstance } from '@mongodb-js/diagramming';
+import type { DiagramInstance } from '@mongodb-js/compass-components';
 import { downloadDiagram } from '../services/open-and-download-diagram';
 
 export type ExportDiagramFormat = 'png' | 'json' | 'diagram';
diff --git a/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx b/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx
index 30dbf336402..19b1af54922 100644
--- a/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx
+++ b/packages/compass-data-modeling/src/utils/nodes-and-edges.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import toNS from 'mongodb-ns';
 import { InlineDefinition, Body, css } from '@mongodb-js/compass-components';
-import type { NodeProps, EdgeProps } from '@mongodb-js/diagramming';
+import type { NodeProps, EdgeProps } from '@mongodb-js/compass-components';
 import type { MongoDBJSONSchema } from 'mongodb-schema';
 import type { SelectedItems } from '../store/diagram';
 import type {