diff --git a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
similarity index 93%
rename from plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx
rename to plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
index 8a5434db8b..ed1a1a69ea 100644
--- a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.test.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.test.tsx
@@ -19,9 +19,9 @@ import { catalogApiRef, CatalogApi } from '@backstage/plugin-catalog-react';
import { Entity, RELATION_PART_OF } from '@backstage/catalog-model';
import { renderInTestApp } from '@backstage/test-utils';
import React from 'react';
-import { EntitySystemDiagramCard } from './EntitySystemDiagramCard';
+import { SystemDiagramCard } from './SystemDiagramCard';
-describe('', () => {
+describe('', () => {
beforeAll(() => {
Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
value: () => ({ width: 100, height: 100 }),
@@ -51,7 +51,7 @@ describe('', () => {
const { queryByText } = await renderInTestApp(
-
+
,
);
@@ -105,7 +105,7 @@ describe('', () => {
const { getByText } = await renderInTestApp(
-
+
,
);
diff --git a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
similarity index 97%
rename from plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx
rename to plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
index 4231ee22ff..bec2e844c8 100644
--- a/plugins/catalog/src/components/EntitySystemDiagramCard/EntitySystemDiagramCard.tsx
+++ b/plugins/catalog/src/components/SystemDiagramCard/SystemDiagramCard.tsx
@@ -37,7 +37,7 @@ import ZoomOutMap from '@material-ui/icons/ZoomOutMap';
import React from 'react';
import { useAsync } from 'react-use';
-type EntitySystemDiagramProps = {
+type SystemDiagramProps = {
entity: Entity;
};
@@ -61,7 +61,7 @@ function simplifiedEntityName(
* Dynamically generates a diagram of a system, its assigned entities,
* and relationships of those entities.
*/
-export function EntitySystemDiagramCard({ entity }: EntitySystemDiagramProps) {
+export function SystemDiagramCard({ entity }: SystemDiagramProps) {
const currentSystemName = entity.metadata.name;
const currentSystemNode = simplifiedEntityName(entity);
const systemNodes = new Array<{ id: string }>();
diff --git a/plugins/catalog/src/components/EntitySystemDiagramCard/index.ts b/plugins/catalog/src/components/SystemDiagramCard/index.ts
similarity index 89%
rename from plugins/catalog/src/components/EntitySystemDiagramCard/index.ts
rename to plugins/catalog/src/components/SystemDiagramCard/index.ts
index b9a924a511..6d86b31b68 100644
--- a/plugins/catalog/src/components/EntitySystemDiagramCard/index.ts
+++ b/plugins/catalog/src/components/SystemDiagramCard/index.ts
@@ -14,4 +14,4 @@
* limitations under the License.
*/
-export { EntitySystemDiagramCard } from './EntitySystemDiagramCard';
+export { SystemDiagramCard } from './SystemDiagramCard';
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 2494e5ba28..7ab7b95dd7 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -17,7 +17,6 @@
export { AboutCard } from './components/AboutCard';
export { EntityLayout } from './components/EntityLayout';
export { EntityPageLayout } from './components/EntityPageLayout';
-export { EntitySystemDiagramCard } from './components/EntitySystemDiagramCard';
export * from './components/EntitySwitch';
export { Router } from './components/Router';
export {
@@ -30,4 +29,5 @@ export {
EntityHasSubcomponentsCard,
EntityHasSystemsCard,
EntityLinksCard,
+ EntitySystemDiagramCard,
} from './plugin';
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index 19dc778280..20c7a865db 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/plugins/catalog/src/plugin.ts
@@ -114,3 +114,12 @@ export const EntityHasSubcomponentsCard = catalogPlugin.provide(
},
}),
);
+
+export const EntitySystemDiagramCard = catalogPlugin.provide(
+ createComponentExtension({
+ component: {
+ lazy: () =>
+ import('./components/SystemDiagramCard').then(m => m.SystemDiagramCard),
+ },
+ }),
+);