diff --git a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
index b3326abaab..9e46fabefb 100644
--- a/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
@@ -46,28 +46,38 @@ import {
 
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 
-const useStyles = makeStyles((theme: BackstageTheme) => ({
-  domainNode: {
-    fill: theme.palette.primary.main,
-    stroke: theme.palette.border,
-  },
-  systemNode: {
-    fill: 'coral',
-    stroke: theme.palette.border,
-  },
-  componentNode: {
-    fill: 'yellowgreen',
-    stroke: theme.palette.border,
-  },
-  apiNode: {
-    fill: theme.palette.gold,
-    stroke: theme.palette.border,
-  },
-  resourceNode: {
-    fill: 'grey',
-    stroke: theme.palette.border,
-  },
-}));
+export type SystemDiagramCardClassKey =
+  | 'domainNode'
+  | 'systemNode'
+  | 'componentNode'
+  | 'apiNode'
+  | 'resourceNode';
+
+const useStyles = makeStyles(
+  (theme: BackstageTheme) => ({
+    domainNode: {
+      fill: theme.palette.primary.main,
+      stroke: theme.palette.border,
+    },
+    systemNode: {
+      fill: 'coral',
+      stroke: theme.palette.border,
+    },
+    componentNode: {
+      fill: 'yellowgreen',
+      stroke: theme.palette.border,
+    },
+    apiNode: {
+      fill: theme.palette.gold,
+      stroke: theme.palette.border,
+    },
+    resourceNode: {
+      fill: 'grey',
+      stroke: theme.palette.border,
+    },
+  }),
+  { name: 'PluginCatalogSystemDiagramCard' },
+);
 
 // Simplifies the diagram output by hiding the default namespace and kind
 function readableEntityName(
diff --git a/plugins/catalog/src/components/SystemDiagramCard/index.ts b/plugins/catalog/src/components/SystemDiagramCard/index.ts
index 4c1427c838..bc9ed6309d 100644
--- a/plugins/catalog/src/components/SystemDiagramCard/index.ts
+++ b/plugins/catalog/src/components/SystemDiagramCard/index.ts
@@ -15,3 +15,4 @@
  */
 
 export { SystemDiagramCard } from './SystemDiagramCard';
+export type { SystemDiagramCardClassKey } from './SystemDiagramCard';