message: Simplify changeset
diff: Adds a new `SystemDiagram` component to visually map all elements in a system.
  -To use this new component, a new system entity page would need to be added to the `packages/app/src/components/catalog/EntityPage.tsx` file.
  +To use this new component, you can add a new tab with the component on to the System Entity Page in your `packages/app/src/components/catalog/EntityPage.tsx` file.
  For example,
  -```tsx
  -const SystemOverviewContent = ({ entity }: { entity: Entity }) => (
  - <Grid container spacing={3}>
  - <Grid item xs={12} md={4}>
  - <AboutCard entity={entity} variant="gridItem" />
  - </Grid>
  - <Grid item xs={12} md={8}>
  - <SystemDiagram entity={entity} />
  - </Grid>
  - </Grid>
  -);
  -
  +```diff
  const SystemEntityPage = ({ entity }: { entity: Entity }) => (
  <EntityPageLayout>
  <EntityPageLayout.Content
  @@ -27,34 +16,11 @@ const SystemEntityPage = ({ entity }: { entity: Entity }) => (
  title="Overview"
  element={<SystemOverviewContent entity={entity} />}
  />
  - <EntityPageLayout.Content
  - path="/docs/*"
  - title="Docs"
  - element={<DocsRouter entity={entity} />}
  - />
  ++ <EntityPageLayout.Content
  ++ path="/diagram/*"
  ++ title="Diagram"
  ++ element={<SystemDiagram entity={entity} />}
  ++ />
  </EntityPageLayout>
  );
  ```
  -
  -And the addition of a new switch case to the `EntityPage` object:
  -
  -```diff
  - export const EntityPage = () => {
  - const { entity } = useEntity();
  -
  - switch (entity?.kind?.toLowerCase()) {
  - case 'component':
  - return <ComponentEntityPage entity={entity} />;
  - case 'api':
  - return <ApiEntityPage entity={entity} />;
  - case 'group':
  - return <GroupEntityPage entity={entity} />;
  - case 'user':
  - return <UserEntityPage entity={entity} />;
  -+ case 'system':
  -+ return <SystemEntityPage entity={entity} />;
  - default:
  - return <DefaultEntityPage entity={entity} />;
  - }
  - };
  -```
  