diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index e9673dd176b..cca7d3c7dc8 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -9,12 +9,15 @@
   NOTE: use `feat`, `fix` and `perf` for user facing changes that will be part of
   release notes.
 -->
+
 ## Description
+
 <!--- Describe your changes in detail -->
 <!--- If applicable, describe (or illustrate) architecture flow -->
 <!--- If the UI changes in a non-trivial way, consider adding screenshots/video illustrating the new flows -->
 
 ### Checklist
+
 - [ ] New tests and/or benchmarks are included
 - [ ] Documentation is changed or added
 - [ ] If this change updates the UI, screenshots/videos are added and a design review is requested
@@ -22,22 +25,28 @@
 - [ ] I have signed the MongoDB Contributor License Agreement (https://www.mongodb.com/legal/contributor-agreement)
 
 ## Motivation and Context
+
 <!--- Why is this change required? What problem does it solve? -->
 <!--- If it's updating a dependency, link to the Pull Request that originally introduced the fix -->
+
 - [ ] Bugfix
 - [ ] New feature
 - [ ] Dependency update
 - [ ] Misc
 
 ## Open Questions
+
 <!--- Any particular areas you'd like reviewers to pay attention to? -->
 
 ## Dependents
+
 <!--- If applicable, link PRs/commits that this PR is dependent on or is a dependency of. -->
 
 ## Types of changes
+
 <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] *Backport Needed*
+
+- [ ] _Backport Needed_
 - [ ] Patch (non-breaking change which fixes an issue)
 - [ ] Minor (non-breaking change which adds functionality)
 - [ ] Major (fix or feature that would cause existing functionality to change)
diff --git a/package-lock.json b/package-lock.json
index ca7db37de43..d82dc94142a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10730,6 +10730,49 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/@mongodb-js/diagramming": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.1.tgz",
+      "integrity": "sha512-xUaQSyMnyNeXILT+tPl0JoC+hlh38cYltYuL6uniyg36g20cPuCXZ9geQp0sbVt5/p1BtfgdqsKMfox+oaOlIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@leafygreen-ui/icon": "^14.3.0",
+        "@leafygreen-ui/inline-definition": "^9.0.5",
+        "@leafygreen-ui/leafygreen-provider": "^5.0.2",
+        "@leafygreen-ui/palette": "^5.0.0",
+        "@leafygreen-ui/tokens": "^3.2.1",
+        "@leafygreen-ui/tooltip": "^14.2.1",
+        "@leafygreen-ui/typography": "^22.1.0",
+        "@xyflow/react": "12.5.1",
+        "d3-path": "^3.1.0",
+        "elkjs": "^0.11.0",
+        "react": "17.0.2",
+        "react-dom": "17.0.2"
+      }
+    },
+    "node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/tooltip": {
+      "version": "14.2.2",
+      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-14.2.2.tgz",
+      "integrity": "sha512-WqWjHzhK+BZrUaJjgph2LQjvQtEYjjR/uyxRubJVrW9GhzBd9xZ9ztnBnTMGT6rz5aRWptV0iZ0YwS+73KbBEw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@leafygreen-ui/emotion": "^5.1.0",
+        "@leafygreen-ui/hooks": "^9.2.2",
+        "@leafygreen-ui/icon": "^14.6.1",
+        "@leafygreen-ui/lib": "^15.6.2",
+        "@leafygreen-ui/palette": "^5.0.2",
+        "@leafygreen-ui/popover": "^14.3.0",
+        "@leafygreen-ui/tokens": "^4.0.0",
+        "@leafygreen-ui/typography": "^22.2.0",
+        "lodash": "^4.17.21",
+        "polished": "^4.2.2"
+      },
+      "peerDependencies": {
+        "@leafygreen-ui/leafygreen-provider": ">=3.2.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",
@@ -48839,7 +48882,7 @@
         "@lg-chat/suggestions": "^0.2.3",
         "@lg-chat/title-bar": "^4.0.7",
         "@mongodb-js/compass-context-menu": "^0.3.0",
-        "@mongodb-js/diagramming": "^2.2.0",
+        "@mongodb-js/diagramming": "^2.2.1",
         "@react-aria/interactions": "^3.9.1",
         "@react-aria/utils": "^3.13.1",
         "@react-aria/visually-hidden": "^3.3.1",
@@ -49227,234 +49270,6 @@
         "polished": "^4.2.2"
       }
     },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.0.tgz",
-      "integrity": "sha512-Y0ny54pPUMrFHhX0EGW8sognP/G3Bi1f5Xq6YnAkihX63cF8jCggsBVnMNi5yB15bCTseUawYJsePv1KxB0jQQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/react": "^11.14.0",
-        "@emotion/styled": "^11.14.0",
-        "@leafygreen-ui/icon": "^14.3.0",
-        "@leafygreen-ui/inline-definition": "^9.0.5",
-        "@leafygreen-ui/leafygreen-provider": "^5.0.2",
-        "@leafygreen-ui/palette": "^5.0.0",
-        "@leafygreen-ui/tokens": "^3.2.1",
-        "@leafygreen-ui/typography": "^22.1.0",
-        "@xyflow/react": "12.5.1",
-        "d3-path": "^3.1.0",
-        "elkjs": "^0.11.0",
-        "react": "17.0.2",
-        "react-dom": "17.0.2"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/emotion": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.3.tgz",
-      "integrity": "sha512-elu8af9Qh8Oy/IwqXcNKitHAQBAO4+zmHuLi0fRzY46kTwXvLYqPpJFRcySqITWLPyBcMsF56ta8yQKXghEYOA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@emotion/css": "^11.1.3",
-        "@emotion/server": "^11.4.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/hooks": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.2.1.tgz",
-      "integrity": "sha512-yFJu5RITboWYJh5x9iVdumkPlSuNEY8PQcockO+6lOExldER4Yoqfp8MSLN5X2uPEwMmrxL/xwfZnEKUtEmW3g==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/lib": "^15.6.2",
-        "@leafygreen-ui/tokens": "^3.2.4",
-        "lodash": "^4.17.21"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/hooks/node_modules/@leafygreen-ui/lib": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-      "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/inline-definition": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/inline-definition/-/inline-definition-9.1.0.tgz",
-      "integrity": "sha512-SaYeGnivIy/KnO6Zdrb4TLsQa6ENp8CgwELECMsqqu6rl/ZXcsp0fEu4PrsuvqtmWxSmPbRekdmNRarNIpMXnw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/emotion": "^5.0.3",
-        "@leafygreen-ui/lib": "^15.6.1",
-        "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/tokens": "^3.2.4",
-        "@leafygreen-ui/tooltip": "^14.2.0"
-      },
-      "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.4"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/inline-definition/node_modules/@leafygreen-ui/lib": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-      "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/leafygreen-provider": {
-      "version": "5.0.4",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-5.0.4.tgz",
-      "integrity": "sha512-VDlmjTiIqlITVhq4VKUDq8FLySWnHkTxSV2n1sxOanLNPuatOXjxsPmCkPUBXhmQKk/fBf4yQnDKOwJvkyzE6Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/hooks": "^9.1.3",
-        "@leafygreen-ui/lib": "^15.3.0",
-        "react-transition-group": "^4.4.5"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/palette": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.2.tgz",
-      "integrity": "sha512-+PrfGeJSv4goxm/vKpfJJDOP7t/uElj+14K8jiIyu3qR3TcFRIZ5h1VMvICTUgqvRc8W+xIZYQwsLa2XCu2lvw==",
-      "license": "Apache-2.0"
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/polymorphic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/polymorphic/-/polymorphic-3.1.0.tgz",
-      "integrity": "sha512-5fbXD6ExTmMScvODuipfB1Ti/Dvoaxxg+daSftqXfNQlEkEnd5cPnezOOl1LMsu2xUoZT6NXsFgukZYsmXEVpQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/lib": "^15.4.0",
-        "lodash": "^4.17.21"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/polymorphic/node_modules/@leafygreen-ui/lib": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-      "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/popover": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/popover/-/popover-14.1.0.tgz",
-      "integrity": "sha512-H2s3FGRCARTyH2yQHLzz4bezp/HSyMOkgnEhnSuP94Yadx0gH1FvRisSYc9UJUTt+cGqBxdjReoLgeciqLmg9Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@floating-ui/react": "^0.26.28",
-        "@leafygreen-ui/emotion": "^5.0.3",
-        "@leafygreen-ui/hooks": "^9.2.0",
-        "@leafygreen-ui/lib": "^15.6.1",
-        "@leafygreen-ui/portal": "^7.1.0",
-        "@leafygreen-ui/tokens": "^3.2.4",
-        "@types/react-transition-group": "^4.4.5",
-        "lodash": "^4.17.21",
-        "react-transition-group": "^4.4.5"
-      },
-      "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.4"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/popover/node_modules/@leafygreen-ui/lib": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-      "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/popover/node_modules/@leafygreen-ui/portal": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/portal/-/portal-7.1.0.tgz",
-      "integrity": "sha512-wCldB70m/NtlIeVRxi5S/U74W6jxQScqptI2I4+7RweBquBfxIg1SipHXqMC+Zo3aL+s/fCMuFKNlLuwGWu8MA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/hooks": "^9.2.0",
-        "@leafygreen-ui/lib": "^15.6.1"
-      },
-      "peerDependencies": {
-        "react-dom": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/tooltip": {
-      "version": "14.2.0",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-14.2.0.tgz",
-      "integrity": "sha512-+kOCnC9uTa7EViGeLlVthk//FPJ34r+Z7itSTJVt9Y+zB28FU31ZlAclC8VCxDTdRFWt1UtlaM00jj89NfAP/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/emotion": "^5.0.3",
-        "@leafygreen-ui/hooks": "^9.2.0",
-        "@leafygreen-ui/icon": "^14.6.0",
-        "@leafygreen-ui/lib": "^15.6.1",
-        "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/popover": "^14.1.0",
-        "@leafygreen-ui/tokens": "^3.2.4",
-        "@leafygreen-ui/typography": "^22.1.3",
-        "lodash": "^4.17.21",
-        "polished": "^4.2.2"
-      },
-      "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.4"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/tooltip/node_modules/@leafygreen-ui/lib": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-      "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/typography": {
-      "version": "22.1.3",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.1.3.tgz",
-      "integrity": "sha512-yhQGva/0t2wyJe+edt88Dld1FUyw0xXMrHVegjtTH7c7EiLjG1eD4S+ze/Iz4F7Pxm0wXuxV3ZBrHfx2XqR6mA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@leafygreen-ui/emotion": "^5.0.3",
-        "@leafygreen-ui/icon": "^14.5.1",
-        "@leafygreen-ui/lib": "^15.4.0",
-        "@leafygreen-ui/palette": "^5.0.2",
-        "@leafygreen-ui/polymorphic": "^3.1.0",
-        "@leafygreen-ui/tokens": "^3.2.4"
-      },
-      "peerDependencies": {
-        "@leafygreen-ui/leafygreen-provider": "^5.0.4"
-      }
-    },
-    "packages/compass-components/node_modules/@mongodb-js/diagramming/node_modules/@leafygreen-ui/typography/node_modules/@leafygreen-ui/lib": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-      "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "peerDependencies": {
-        "react": "^17.0.0 || ^18.0.0"
-      }
-    },
     "packages/compass-components/node_modules/sinon": {
       "version": "9.2.4",
       "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz",
@@ -63510,7 +63325,7 @@
         "@lg-chat/suggestions": "^0.2.3",
         "@lg-chat/title-bar": "^4.0.7",
         "@mongodb-js/compass-context-menu": "^0.3.0",
-        "@mongodb-js/diagramming": "^2.2.0",
+        "@mongodb-js/diagramming": "^2.2.1",
         "@mongodb-js/eslint-config-compass": "^1.4.12",
         "@mongodb-js/mocha-config-compass": "^1.7.2",
         "@mongodb-js/prettier-config-compass": "^1.2.9",
@@ -63841,198 +63656,6 @@
             }
           }
         },
-        "@mongodb-js/diagramming": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.0.tgz",
-          "integrity": "sha512-Y0ny54pPUMrFHhX0EGW8sognP/G3Bi1f5Xq6YnAkihX63cF8jCggsBVnMNi5yB15bCTseUawYJsePv1KxB0jQQ==",
-          "requires": {
-            "@emotion/react": "^11.14.0",
-            "@emotion/styled": "^11.14.0",
-            "@leafygreen-ui/icon": "^14.3.0",
-            "@leafygreen-ui/inline-definition": "^9.0.5",
-            "@leafygreen-ui/leafygreen-provider": "^5.0.2",
-            "@leafygreen-ui/palette": "^5.0.0",
-            "@leafygreen-ui/tokens": "^3.2.1",
-            "@leafygreen-ui/typography": "^22.1.0",
-            "@xyflow/react": "12.5.1",
-            "d3-path": "^3.1.0",
-            "elkjs": "^0.11.0",
-            "react": "17.0.2",
-            "react-dom": "17.0.2"
-          },
-          "dependencies": {
-            "@leafygreen-ui/emotion": {
-              "version": "5.0.3",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/emotion/-/emotion-5.0.3.tgz",
-              "integrity": "sha512-elu8af9Qh8Oy/IwqXcNKitHAQBAO4+zmHuLi0fRzY46kTwXvLYqPpJFRcySqITWLPyBcMsF56ta8yQKXghEYOA==",
-              "requires": {
-                "@emotion/css": "^11.1.3",
-                "@emotion/server": "^11.4.0"
-              }
-            },
-            "@leafygreen-ui/hooks": {
-              "version": "9.2.1",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/hooks/-/hooks-9.2.1.tgz",
-              "integrity": "sha512-yFJu5RITboWYJh5x9iVdumkPlSuNEY8PQcockO+6lOExldER4Yoqfp8MSLN5X2uPEwMmrxL/xwfZnEKUtEmW3g==",
-              "requires": {
-                "@leafygreen-ui/lib": "^15.6.2",
-                "@leafygreen-ui/tokens": "^3.2.4",
-                "lodash": "^4.17.21"
-              },
-              "dependencies": {
-                "@leafygreen-ui/lib": {
-                  "version": "15.6.2",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-                  "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-                  "requires": {
-                    "lodash": "^4.17.21"
-                  }
-                }
-              }
-            },
-            "@leafygreen-ui/inline-definition": {
-              "version": "9.1.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/inline-definition/-/inline-definition-9.1.0.tgz",
-              "integrity": "sha512-SaYeGnivIy/KnO6Zdrb4TLsQa6ENp8CgwELECMsqqu6rl/ZXcsp0fEu4PrsuvqtmWxSmPbRekdmNRarNIpMXnw==",
-              "requires": {
-                "@leafygreen-ui/emotion": "^5.0.3",
-                "@leafygreen-ui/lib": "^15.6.1",
-                "@leafygreen-ui/palette": "^5.0.2",
-                "@leafygreen-ui/tokens": "^3.2.4",
-                "@leafygreen-ui/tooltip": "^14.2.0"
-              },
-              "dependencies": {
-                "@leafygreen-ui/lib": {
-                  "version": "15.6.2",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-                  "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-                  "requires": {
-                    "lodash": "^4.17.21"
-                  }
-                }
-              }
-            },
-            "@leafygreen-ui/leafygreen-provider": {
-              "version": "5.0.4",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/leafygreen-provider/-/leafygreen-provider-5.0.4.tgz",
-              "integrity": "sha512-VDlmjTiIqlITVhq4VKUDq8FLySWnHkTxSV2n1sxOanLNPuatOXjxsPmCkPUBXhmQKk/fBf4yQnDKOwJvkyzE6Q==",
-              "requires": {
-                "@leafygreen-ui/hooks": "^9.1.3",
-                "@leafygreen-ui/lib": "^15.3.0",
-                "react-transition-group": "^4.4.5"
-              }
-            },
-            "@leafygreen-ui/palette": {
-              "version": "5.0.2",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/palette/-/palette-5.0.2.tgz",
-              "integrity": "sha512-+PrfGeJSv4goxm/vKpfJJDOP7t/uElj+14K8jiIyu3qR3TcFRIZ5h1VMvICTUgqvRc8W+xIZYQwsLa2XCu2lvw=="
-            },
-            "@leafygreen-ui/polymorphic": {
-              "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/polymorphic/-/polymorphic-3.1.0.tgz",
-              "integrity": "sha512-5fbXD6ExTmMScvODuipfB1Ti/Dvoaxxg+daSftqXfNQlEkEnd5cPnezOOl1LMsu2xUoZT6NXsFgukZYsmXEVpQ==",
-              "requires": {
-                "@leafygreen-ui/lib": "^15.4.0",
-                "lodash": "^4.17.21"
-              },
-              "dependencies": {
-                "@leafygreen-ui/lib": {
-                  "version": "15.6.2",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-                  "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-                  "requires": {
-                    "lodash": "^4.17.21"
-                  }
-                }
-              }
-            },
-            "@leafygreen-ui/popover": {
-              "version": "14.1.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/popover/-/popover-14.1.0.tgz",
-              "integrity": "sha512-H2s3FGRCARTyH2yQHLzz4bezp/HSyMOkgnEhnSuP94Yadx0gH1FvRisSYc9UJUTt+cGqBxdjReoLgeciqLmg9Q==",
-              "requires": {
-                "@floating-ui/react": "^0.26.28",
-                "@leafygreen-ui/emotion": "^5.0.3",
-                "@leafygreen-ui/hooks": "^9.2.0",
-                "@leafygreen-ui/lib": "^15.6.1",
-                "@leafygreen-ui/portal": "^7.1.0",
-                "@leafygreen-ui/tokens": "^3.2.4",
-                "@types/react-transition-group": "^4.4.5",
-                "lodash": "^4.17.21",
-                "react-transition-group": "^4.4.5"
-              },
-              "dependencies": {
-                "@leafygreen-ui/lib": {
-                  "version": "15.6.2",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-                  "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-                  "requires": {
-                    "lodash": "^4.17.21"
-                  }
-                },
-                "@leafygreen-ui/portal": {
-                  "version": "7.1.0",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/portal/-/portal-7.1.0.tgz",
-                  "integrity": "sha512-wCldB70m/NtlIeVRxi5S/U74W6jxQScqptI2I4+7RweBquBfxIg1SipHXqMC+Zo3aL+s/fCMuFKNlLuwGWu8MA==",
-                  "requires": {
-                    "@leafygreen-ui/hooks": "^9.2.0",
-                    "@leafygreen-ui/lib": "^15.6.1"
-                  }
-                }
-              }
-            },
-            "@leafygreen-ui/tooltip": {
-              "version": "14.2.0",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-14.2.0.tgz",
-              "integrity": "sha512-+kOCnC9uTa7EViGeLlVthk//FPJ34r+Z7itSTJVt9Y+zB28FU31ZlAclC8VCxDTdRFWt1UtlaM00jj89NfAP/Q==",
-              "requires": {
-                "@leafygreen-ui/emotion": "^5.0.3",
-                "@leafygreen-ui/hooks": "^9.2.0",
-                "@leafygreen-ui/icon": "^14.6.0",
-                "@leafygreen-ui/lib": "^15.6.1",
-                "@leafygreen-ui/palette": "^5.0.2",
-                "@leafygreen-ui/popover": "^14.1.0",
-                "@leafygreen-ui/tokens": "^3.2.4",
-                "@leafygreen-ui/typography": "^22.1.3",
-                "lodash": "^4.17.21",
-                "polished": "^4.2.2"
-              },
-              "dependencies": {
-                "@leafygreen-ui/lib": {
-                  "version": "15.6.2",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-                  "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-                  "requires": {
-                    "lodash": "^4.17.21"
-                  }
-                }
-              }
-            },
-            "@leafygreen-ui/typography": {
-              "version": "22.1.3",
-              "resolved": "https://registry.npmjs.org/@leafygreen-ui/typography/-/typography-22.1.3.tgz",
-              "integrity": "sha512-yhQGva/0t2wyJe+edt88Dld1FUyw0xXMrHVegjtTH7c7EiLjG1eD4S+ze/Iz4F7Pxm0wXuxV3ZBrHfx2XqR6mA==",
-              "requires": {
-                "@leafygreen-ui/emotion": "^5.0.3",
-                "@leafygreen-ui/icon": "^14.5.1",
-                "@leafygreen-ui/lib": "^15.4.0",
-                "@leafygreen-ui/palette": "^5.0.2",
-                "@leafygreen-ui/polymorphic": "^3.1.0",
-                "@leafygreen-ui/tokens": "^3.2.4"
-              },
-              "dependencies": {
-                "@leafygreen-ui/lib": {
-                  "version": "15.6.2",
-                  "resolved": "https://registry.npmjs.org/@leafygreen-ui/lib/-/lib-15.6.2.tgz",
-                  "integrity": "sha512-HsjXXovBqyrXL3Y7V09g2bEidGn58AK/mfoIPMlen/hEcWlbXbefoCzXF7AQqWLhd0F/lS2XgX7+BqVUHXx2/Q==",
-                  "requires": {
-                    "lodash": "^4.17.21"
-                  }
-                }
-              }
-            }
-          }
-        },
         "sinon": {
           "version": "9.2.4",
           "resolved": "https://registry.npmjs.org/sinon/-/sinon-9.2.4.tgz",
@@ -67647,6 +67270,46 @@
         }
       }
     },
+    "@mongodb-js/diagramming": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/diagramming/-/diagramming-2.2.1.tgz",
+      "integrity": "sha512-xUaQSyMnyNeXILT+tPl0JoC+hlh38cYltYuL6uniyg36g20cPuCXZ9geQp0sbVt5/p1BtfgdqsKMfox+oaOlIQ==",
+      "requires": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@leafygreen-ui/icon": "^14.6.0",
+        "@leafygreen-ui/inline-definition": "^9.0.5",
+        "@leafygreen-ui/leafygreen-provider": "^4.0.2",
+        "@leafygreen-ui/palette": "^4.1.3",
+        "@leafygreen-ui/tokens": "^3.2.4",
+        "@leafygreen-ui/tooltip": "^14.2.1",
+        "@leafygreen-ui/typography": "^20.0.2",
+        "@xyflow/react": "12.5.1",
+        "d3-path": "^3.1.0",
+        "elkjs": "^0.11.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      },
+      "dependencies": {
+        "@leafygreen-ui/tooltip": {
+          "version": "14.2.2",
+          "resolved": "https://registry.npmjs.org/@leafygreen-ui/tooltip/-/tooltip-14.2.2.tgz",
+          "integrity": "sha512-WqWjHzhK+BZrUaJjgph2LQjvQtEYjjR/uyxRubJVrW9GhzBd9xZ9ztnBnTMGT6rz5aRWptV0iZ0YwS+73KbBEw==",
+          "requires": {
+            "@leafygreen-ui/emotion": "^4.0.9",
+            "@leafygreen-ui/hooks": "^8.3.4",
+            "@leafygreen-ui/icon": "^14.6.0",
+            "@leafygreen-ui/lib": "^15.3.0",
+            "@leafygreen-ui/palette": "^4.1.3",
+            "@leafygreen-ui/popover": "^13.0.11",
+            "@leafygreen-ui/tokens": "^3.2.4",
+            "@leafygreen-ui/typography": "^20.0.2",
+            "lodash": "^4.17.21",
+            "polished": "^4.2.2"
+          }
+        }
+      }
+    },
     "@mongodb-js/dl-center": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@mongodb-js/dl-center/-/dl-center-1.3.0.tgz",
diff --git a/packages/compass-components/package.json b/packages/compass-components/package.json
index e3b463161c5..dee06d93e0d 100644
--- a/packages/compass-components/package.json
+++ b/packages/compass-components/package.json
@@ -98,7 +98,7 @@
     "@lg-chat/suggestions": "^0.2.3",
     "@lg-chat/title-bar": "^4.0.7",
     "@mongodb-js/compass-context-menu": "^0.3.0",
-    "@mongodb-js/diagramming": "^2.2.0",
+    "@mongodb-js/diagramming": "^2.2.1",
     "@react-aria/interactions": "^3.9.1",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",
diff --git a/packages/compass-data-modeling/src/components/diagram-editor.tsx b/packages/compass-data-modeling/src/components/diagram-editor.tsx
index 430476e50cf..dcc038bba85 100644
--- a/packages/compass-data-modeling/src/components/diagram-editor.tsx
+++ b/packages/compass-data-modeling/src/components/diagram-editor.tsx
@@ -60,6 +60,7 @@ import {
   relationshipToDiagramEdge,
 } from '../utils/nodes-and-edges';
 import toNS from 'mongodb-ns';
+import { getNamespaceRelationships } from '../utils/utils';
 import { usePreference } from 'compass-preferences-model/provider';
 
 const loadingContainerStyles = css({
@@ -236,6 +237,10 @@ const DiagramContent: React.FunctionComponent<{
         !!selectedItems &&
         selectedItems.type === 'collection' &&
         selectedItems.id === coll.ns;
+      const relationships = getNamespaceRelationships(
+        coll.ns,
+        model?.relationships
+      );
       return collectionToDiagramNode({
         ...coll,
         highlightedFields,
@@ -245,6 +250,7 @@ const DiagramContent: React.FunctionComponent<{
             : undefined,
         selected,
         isInRelationshipDrawingMode,
+        relationships,
         isExpanded: coll.isExpanded,
       });
     });
diff --git a/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx b/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx
index d892ced6930..b394a4adcd5 100644
--- a/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx
+++ b/packages/compass-data-modeling/src/components/drawer/collection-drawer-content.tsx
@@ -21,6 +21,7 @@ import {
 } from './drawer-section-components';
 import { useChangeOnBlur } from './use-change-on-blur';
 import { RelationshipsSection } from './relationships-section';
+import { getNamespaceRelationships } from '../../utils/utils';
 
 type CollectionDrawerContentProps = {
   namespace: string;
@@ -170,12 +171,10 @@ export default connect(
       namespace: collection.ns,
       isDraftCollection: state.diagram?.draftCollection === ownProps.namespace,
       collections: model.collections,
-      relationships: model.relationships.filter((r) => {
-        const [local, foreign] = r.relationship;
-        return (
-          local.ns === ownProps.namespace || foreign.ns === ownProps.namespace
-        );
-      }),
+      relationships: getNamespaceRelationships(
+        ownProps.namespace,
+        model.relationships
+      ),
     };
   },
   {
diff --git a/packages/compass-data-modeling/src/components/drawer/relationships-section.tsx b/packages/compass-data-modeling/src/components/drawer/relationships-section.tsx
index aadea753aab..5917cae2aeb 100644
--- a/packages/compass-data-modeling/src/components/drawer/relationships-section.tsx
+++ b/packages/compass-data-modeling/src/components/drawer/relationships-section.tsx
@@ -4,13 +4,17 @@ import {
   Badge,
   Button,
   css,
+  cx,
   Icon,
   IconButton,
   palette,
   spacing,
+  Tooltip,
+  useDarkMode,
 } from '@mongodb-js/compass-components';
 import type { Relationship } from '../../services/data-model-storage';
 import { getDefaultRelationshipName } from '../../utils';
+import { isRelationshipValid } from '../../utils/utils';
 
 const titleBtnStyles = css({
   marginLeft: 'auto',
@@ -35,13 +39,28 @@ const relationshipItemStyles = css({
   alignItems: 'center',
 });
 
-const relationshipNameStyles = css({
+const relationshipNameWrapperStyles = css({
   flexGrow: 1,
+  minWidth: 0,
+  display: 'flex',
+  alignItems: 'center',
+  gap: spacing[100],
+  paddingRight: spacing[200],
+});
+
+const relationshipNameStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  minWidth: 0,
-  paddingRight: spacing[200],
+});
+
+const warnIconWrapperStyles = css({
+  display: 'flex',
+  color: palette.yellow.dark2,
+});
+
+const warnIconWrapperDarkStyles = css({
+  color: palette.yellow.light2,
 });
 
 const relationshipContentStyles = css({
@@ -65,6 +84,7 @@ export const RelationshipsSection: React.FunctionComponent<
   onEditRelationshipClick,
   onDeleteRelationshipClick,
 }) => {
+  const darkmode = useDarkMode();
   return (
     <DMDrawerSection
       label={
@@ -97,12 +117,31 @@ export const RelationshipsSection: React.FunctionComponent<
                   data-relationship-id={r.id}
                   className={relationshipItemStyles}
                 >
-                  <span
-                    className={relationshipNameStyles}
-                    title={relationshipLabel}
-                  >
-                    {relationshipLabel}
-                  </span>
+                  <div className={relationshipNameWrapperStyles}>
+                    <span
+                      className={relationshipNameStyles}
+                      title={relationshipLabel}
+                    >
+                      {relationshipLabel}
+                    </span>
+                    {!isRelationshipValid(r) && (
+                      <Tooltip
+                        trigger={
+                          <div
+                            className={cx(
+                              warnIconWrapperStyles,
+                              darkmode && warnIconWrapperDarkStyles
+                            )}
+                          >
+                            <Icon glyph="Warning" />
+                          </div>
+                        }
+                      >
+                        Cannot resolve the relationship - please verify the
+                        linked fields and namespace.
+                      </Tooltip>
+                    )}
+                  </div>
                   <IconButton
                     aria-label="Edit relationship"
                     title="Edit relationship"
diff --git a/packages/compass-data-modeling/src/utils/nodes-and-edges.ts b/packages/compass-data-modeling/src/utils/nodes-and-edges.ts
index 74bc189215b..4f69683d0fa 100644
--- a/packages/compass-data-modeling/src/utils/nodes-and-edges.ts
+++ b/packages/compass-data-modeling/src/utils/nodes-and-edges.ts
@@ -13,7 +13,7 @@ import type {
   Relationship,
 } from '../services/data-model-storage';
 import { traverseSchema } from './schema-traversal';
-import { areFieldPathsEqual, isIdField } from './utils';
+import { areFieldPathsEqual, isIdField, isRelationshipValid } from './utils';
 
 const NO_HIGHLIGHTED_FIELDS = {};
 
@@ -156,6 +156,7 @@ type CollectionWithRenderOptions = Pick<
   selectedField?: FieldPath;
   selected: boolean;
   isInRelationshipDrawingMode: boolean;
+  relationships: Relationship[];
 };
 
 export function collectionToDiagramNode({
@@ -166,8 +167,16 @@ export function collectionToDiagramNode({
   highlightedFields,
   selected,
   isInRelationshipDrawingMode,
+  relationships,
   isExpanded,
 }: CollectionWithRenderOptions): NodeProps {
+  let variant: NodeProps['variant'] = undefined;
+  if (relationships.some((r) => !isRelationshipValid(r))) {
+    variant = {
+      type: 'warn' as const,
+      warnMessage: 'One or more relationships cannot be resolved.',
+    };
+  }
   return {
     id: ns,
     type: 'collection',
@@ -185,6 +194,7 @@ export function collectionToDiagramNode({
     selected,
     connectable: isInRelationshipDrawingMode,
     draggable: !isInRelationshipDrawingMode,
+    variant,
   };
 }
 
diff --git a/packages/compass-data-modeling/src/utils/utils.spec.tsx b/packages/compass-data-modeling/src/utils/utils.spec.tsx
index 31e4883d6fb..402d12e7cac 100644
--- a/packages/compass-data-modeling/src/utils/utils.spec.tsx
+++ b/packages/compass-data-modeling/src/utils/utils.spec.tsx
@@ -4,6 +4,7 @@ import {
   isRelationshipOfAField,
   isSameFieldOrAncestor,
   dualSourceHandlerDebounce,
+  isRelationshipValid,
 } from './utils';
 import type { Relationship } from '../services/data-model-storage';
 
@@ -135,3 +136,42 @@ describe('dualSourceHandlerDebounce', function () {
     expect(invocationCount).to.equal(3);
   });
 });
+
+describe('isRelationshipValid', function () {
+  it('should return false for relationships with missing namespaces', function () {
+    const relationship = {
+      relationship: [
+        { ns: '', fields: ['a'], cardinality: 1 },
+        { ns: 'db.coll2', fields: ['b'], cardinality: 1 },
+      ],
+    } as any;
+    expect(isRelationshipValid(relationship)).to.be.false;
+  });
+  it('should return false for relationships with no fields', function () {
+    const relationship = {
+      relationship: [
+        { ns: 'db.coll1', fields: undefined, cardinality: 1 },
+        { ns: 'db.coll2', cardinality: 1 },
+      ],
+    } as any;
+    expect(isRelationshipValid(relationship)).to.be.false;
+  });
+  it('should return false for relationships with empty fields', function () {
+    const relationship = {
+      relationship: [
+        { ns: 'db.coll1', fields: [], cardinality: 1 },
+        { ns: 'db.coll2', fields: [], cardinality: 1 },
+      ],
+    } as any;
+    expect(isRelationshipValid(relationship)).to.be.false;
+  });
+  it('should return true for relationships with correct namespaces and fields', function () {
+    const relationship = {
+      relationship: [
+        { ns: 'db.coll1', fields: ['_id'], cardinality: 1 },
+        { ns: 'db.coll2', fields: ['order_id'], cardinality: 1 },
+      ],
+    } as any;
+    expect(isRelationshipValid(relationship)).to.be.true;
+  });
+});
diff --git a/packages/compass-data-modeling/src/utils/utils.ts b/packages/compass-data-modeling/src/utils/utils.ts
index 421eb6bd6ea..ad2d8efe21a 100644
--- a/packages/compass-data-modeling/src/utils/utils.ts
+++ b/packages/compass-data-modeling/src/utils/utils.ts
@@ -84,3 +84,29 @@ export function dualSourceHandlerDebounce(
   };
   return Array.from({ length: count }, (_, i) => makeHandler(i));
 }
+
+export function getNamespaceRelationships(
+  namespace: string,
+  relationships: Relationship[] = []
+): Relationship[] {
+  return relationships.filter((r) => {
+    const [local, foreign] = r.relationship;
+    return local.ns === namespace || foreign.ns === namespace;
+  });
+}
+
+export function isRelationshipValid(relationship: Relationship): boolean {
+  const [source, target] = relationship.relationship;
+  if (
+    !source.ns ||
+    !target.ns ||
+    !source.fields ||
+    !target.fields ||
+    source.fields.length === 0 ||
+    target.fields.length === 0
+  ) {
+    return false;
+  }
+
+  return true;
+}