@backstage/plugin-catalog-graph NPM

catalog-graph

Welcome to the catalog graph plugin! The catalog graph visualizes the relations between entities, like ownership, grouping or API relationships.

The plugin comes with these features:

EntityCatalogGraphCard: A card that displays the directly related entities to the current entity. This card is for use on the entity page. The card can be customized, for example filtering for specific relations.
CatalogGraphPage: A standalone page that can be added to your application providing a viewer for your entities and their relations. The viewer can be used to navigate through the entities and filter for specific relations. You can access it from the EntityCatalogGraphCard.
EntityRelationsGraph: A react component that can be used to build own customized entity relation graphs.

Usage

To use the catalog graph plugin, you have to add some things to your Backstage app:

Add a dependency to your packages/app/package.json, run:
```
 yarn add @backstage/plugin-catalog-graph
```

Add the CatalogGraphPage to your packages/app/src/App.tsx:

<FlatRoutes>
  …
  <Route path="/catalog-graph" element={<CatalogGraphPage />} />…
</FlatRoutes>

You can configure the page to open with some initial filters:

<Route
  path="/catalog-graph"
  element={
    <CatalogGraphPage
      initialState={{
        selectedKinds: ['component', 'domain', 'system', 'api', 'group'],
        selectedRelations: [
          RELATION_OWNER_OF,
          RELATION_OWNED_BY,
          RELATION_CONSUMES_API,
          RELATION_API_CONSUMED_BY,
          RELATION_PROVIDES_API,
          RELATION_API_PROVIDED_BY,
          RELATION_HAS_PART,
          RELATION_PART_OF,
          RELATION_DEPENDS_ON,
          RELATION_DEPENDENCY_OF,
        ],
      }}
    />
  }
/>

Bind the external routes of the catalogGraphPlugin in your packages/app/src/App.tsx:

bindRoutes({ bind }) {
  …
  bind(catalogGraphPlugin.externalRoutes, {
    catalogEntity: catalogPlugin.routes.catalogEntity,
  });
  …
}

Add EntityCatalogGraphCard to any entity page that you want in your packages/app/src/components/catalog/EntityPage.tsx:
```
<Grid item md={6} xs={12}>
  <EntityCatalogGraphCard variant="gridItem" maxHeight={400} />
</Grid>
```

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

2 months ago

3 months ago

2 months ago

3 months ago

3 months ago

3 months ago

2 months ago

3 months ago

3 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

3 months ago

4 months ago

4 months ago

4 months ago

3 months ago

3 months ago

4 months ago

3 months ago

4 months ago

3 months ago

4 months ago

3 months ago

4 months ago

3 months ago

3 months ago

4 months ago

4 months ago

3 months ago

3 months ago

4 months ago

3 months ago

4 months ago

4 months ago

6 months ago

6 months ago

6 months ago

5 months ago

7 months ago

6 months ago

5 months ago

4 months ago

7 months ago

7 months ago

5 months ago

7 months ago

7 months ago

5 months ago

4 months ago

6 months ago

5 months ago

5 months ago

6 months ago

4 months ago

6 months ago

5 months ago

6 months ago

4 months ago

5 months ago

5 months ago

6 months ago

5 months ago

4 months ago

7 months ago

5 months ago

5 months ago

4 months ago

7 months ago

5 months ago

5 months ago

4 months ago

5 months ago

5 months ago

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

6 months ago

4 months ago

5 months ago

5 months ago

7 months ago

6 months ago

5 months ago

6 months ago

5 months ago

7 months ago

4 months ago

5 months ago

6 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

4 months ago

5 months ago

5 months ago

4 months ago

7 months ago

6 months ago

6 months ago

6 months ago

7 months ago

4 months ago

4 months ago

7 months ago

5 months ago

4 months ago

6 months ago

5 months ago

6 months ago

5 months ago

7 months ago

4 months ago

7 months ago

6 months ago

7 months ago

4 months ago

6 months ago

4 months ago

5 months ago

7 months ago

6 months ago

4 months ago

5 months ago

6 months ago

5 months ago

5 months ago

7 months ago

5 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago