diff --git a/packages/create-app/package.json b/packages/create-app/package.json
index 2a3e35988a..63fc3b1c2c 100644
--- a/packages/create-app/package.json
+++ b/packages/create-app/package.json
@@ -63,6 +63,7 @@
"@backstage/plugin-auth-backend": "",
"@backstage/plugin-catalog": "",
"@backstage/plugin-catalog-backend": "",
+ "@backstage/plugin-catalog-graph": "",
"@backstage/plugin-catalog-import": "",
"@backstage/plugin-explore": "",
"@backstage/plugin-github-actions": "",
diff --git a/packages/create-app/src/lib/versions.ts b/packages/create-app/src/lib/versions.ts
index f89ff7f391..34d016ebde 100644
--- a/packages/create-app/src/lib/versions.ts
+++ b/packages/create-app/src/lib/versions.ts
@@ -51,6 +51,7 @@ import { version as pluginAuthBackend } from '../../../../plugins/auth-backend/p
import { version as pluginCatalog } from '../../../../plugins/catalog/package.json';
import { version as pluginCatalogReact } from '../../../../plugins/catalog-react/package.json';
import { version as pluginCatalogBackend } from '../../../../plugins/catalog-backend/package.json';
+import { version as pluginCatalogGraph } from '../../../../plugins/catalog-graph/package.json';
import { version as pluginCatalogImport } from '../../../../plugins/catalog-import/package.json';
import { version as pluginCircleci } from '../../../../plugins/circleci/package.json';
import { version as pluginExplore } from '../../../../plugins/explore/package.json';
@@ -90,6 +91,7 @@ export const packageVersions = {
'@backstage/plugin-catalog': pluginCatalog,
'@backstage/plugin-catalog-react': pluginCatalogReact,
'@backstage/plugin-catalog-backend': pluginCatalogBackend,
+ '@backstage/plugin-catalog-graph': pluginCatalogGraph,
'@backstage/plugin-catalog-import': pluginCatalogImport,
'@backstage/plugin-circleci': pluginCircleci,
'@backstage/plugin-explore': pluginExplore,
diff --git a/packages/create-app/templates/default-app/packages/app/package.json.hbs b/packages/create-app/templates/default-app/packages/app/package.json.hbs
index f968a076d7..23c45d3f9d 100644
--- a/packages/create-app/templates/default-app/packages/app/package.json.hbs
+++ b/packages/create-app/templates/default-app/packages/app/package.json.hbs
@@ -13,6 +13,7 @@
"@backstage/integration-react": "^{{version '@backstage/integration-react'}}",
"@backstage/plugin-api-docs": "^{{version '@backstage/plugin-api-docs'}}",
"@backstage/plugin-catalog": "^{{version '@backstage/plugin-catalog'}}",
+ "@backstage/plugin-catalog-graph": "^{{version '@backstage/plugin-catalog-graph'}}",
"@backstage/plugin-catalog-import": "^{{version '@backstage/plugin-catalog-import'}}",
"@backstage/plugin-catalog-react": "^{{version '@backstage/plugin-catalog-react'}}",
"@backstage/plugin-github-actions": "^{{version '@backstage/plugin-github-actions'}}",
diff --git a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
index d3b4b786a0..8e307f1d28 100644
--- a/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/create-app/templates/default-app/packages/app/src/components/catalog/EntityPage.tsx
@@ -27,7 +27,6 @@ import {
EntityAboutCard,
EntityDependsOnComponentsCard,
EntityDependsOnResourcesCard,
- EntitySystemDiagramCard,
EntityHasComponentsCard,
EntityHasResourcesCard,
EntityHasSubcomponentsCard,
@@ -54,7 +53,20 @@ import {
} from '@backstage/plugin-org';
import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
import { EmptyState } from '@backstage/core-components';
-
+import {
+ Direction,
+ EntityCatalogGraphCard,
+} from '@backstage/plugin-catalog-graph';
+import {
+ RELATION_API_CONSUMED_BY,
+ RELATION_API_PROVIDED_BY,
+ RELATION_CONSUMES_API,
+ RELATION_DEPENDENCY_OF,
+ RELATION_DEPENDS_ON,
+ RELATION_HAS_PART,
+ RELATION_PART_OF,
+ RELATION_PROVIDES_API,
+} from '@backstage/catalog-model';
const cicdContent = (
// This is an example of how you can implement your company's logic in entity page.
// You can for example enforce that all components of type 'service' should use GitHubActions
@@ -108,6 +120,10 @@ const overviewContent = (
+
+
+
+
@@ -223,6 +239,9 @@ const apiPage = (
+
+
+
@@ -290,6 +309,9 @@ const systemPage = (
+
+
+
@@ -302,7 +324,23 @@ const systemPage = (
-
+
);
@@ -315,6 +353,9 @@ const domainPage = (
+
+
+