Welcome to the relations plugin.
npm install @dweber019/backstage-plugin-relationsWelcome to the relations plugin.
This plugin improves the experience when using the relations processor plugin by:
- Providing a custom component for visualizing relations
- Provide catalog graph wrappers for
- Better defaults
- Add new relations to filter als options


Install this plugin:
``bash`From your Backstage root directory
yarn --cwd packages/app add @dweber019/backstage-plugin-relations
You need to have the relations processor plugin configured.
Additionally, make sure to use at least Backstage version 1.27.0.
As you introduced new relations you either have to manually add the relation to the EntityCatalogGraphCard or the replacementEntityRelationsCatalogGraphCard. This new card will add all newly configured relation pairs and enable arrows as default.
`tsx
// packages/app/src/components/catalog/EntityPage.tsx
import { EntityRelationsCatalogGraphCard } from '@dweber019/backstage-plugin-relations';
const groupPage = (
{entityWarningContent}
...
...
);
`
Additionally, there is a custom card called EntityRelationsCard to show additional relations.
`tsx`
const userPage = (
{entityWarningContent}
...
);
You can define a list of relations incl. labels to show like above with relationLabels, which look like
`ts`
export const relationLabels = [
{
name: 'applicationOwnerOf',
label: 'Application owner of',
},
{
name: 'applicationOwnerBy',
label: 'Application owner',
},
];
If you don't define this, only the custom relations (e.g. no owner) will be displayed.
The catalog graph at /catalog-graph can be changed to by using the RelationsCatalogGraphPage like
`tsx
// packages/app/src/App.tsx
import { RelationsCatalogGraphPage } from '@dweber019/backstage-plugin-relations';
const routes = (
...
);
``