System diagram API and Resource boxes missing / not drawn

Expected Behavior

All entities in the diagram would be displayed properly

Current Behavior

Here I have a service component that provides and API and depends on two Resources. The latter do not get drawn on the diagram for some reason

Possible Solution

Unknown

Steps to Reproduce

Create a component that is part of a system and depends on resources or provides an API that does not have any system assigned.

apiVersion: backstage.io/v1alpha1
kind: System
metadata:
  name: test-system
  description: test system
spec:
  owner: architecture-team
  system: monolith
---
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: test
  description: test service
  labels:
    language: csharp
    framework: dotnet
    frameworkVersion: net5.0
spec:
  type: service
  lifecycle: experimental
  owner: architecture-team
  system: test-system
  dependsOn: ['resource:test-db']
  providesApis:
    - test-api
---
apiVersion: backstage.io/v1alpha1
kind: API
metadata:
  name: test-api
  description: test api
spec:
  type: openapi
  lifecycle: experimental
  owner: architecture-team
  definition: | left out for brevity
---
apiVersion: backstage.io/v1alpha1
kind: Resource
metadata:
  name: test-db
  description: test db
spec:
  type: database
  owner: team-a

Context

Trying to do a proof of concept for using Backstage so it is important I get this addressed before presenting to our teams. Any assistance is greatly appreciated!

Your Environment

OS: Windows_NT 10.0.19043 - win32/x64 node: v14.17.1 yarn: 1.22.5 cli: 0.10.4 (installed)

Dependencies: @backstage/app-defaults 0.1.3 @backstage/backend-common 0.10.1 @backstage/backend-tasks 0.1.1 @backstage/catalog-client 0.5.3 @backstage/catalog-model 0.9.8 @backstage/cli-common 0.1.6 @backstage/cli 0.10.4 @backstage/config-loader 0.9.1 @backstage/config 0.1.11 @backstage/core-app-api 0.3.0 @backstage/core-components 0.8.2 @backstage/core-plugin-api 0.4.0 @backstage/errors 0.1.5 @backstage/integration-react 0.1.17 @backstage/integration 0.7.0 @backstage/plugin-api-docs 0.6.20 @backstage/plugin-app-backend 0.3.21 @backstage/plugin-auth-backend 0.6.0 @backstage/plugin-catalog-backend 0.19.4 @backstage/plugin-catalog-import 0.7.7 @backstage/plugin-catalog-react 0.6.9 @backstage/plugin-catalog 0.7.6 @backstage/plugin-github-actions 0.4.29 @backstage/plugin-org 0.3.32 @backstage/plugin-permission-common 0.3.0 @backstage/plugin-permission-react 0.2.0 @backstage/plugin-proxy-backend 0.2.15 @backstage/plugin-scaffolder-backend-module-cookiecutter 0.1.7 @backstage/plugin-scaffolder-backend 0.15.19 @backstage/plugin-scaffolder-common 0.1.2 @backstage/plugin-scaffolder 0.11.16 @backstage/plugin-search-backend-node 0.4.3 @backstage/plugin-search-backend 0.3.0 @backstage/plugin-search 0.5.3 @backstage/plugin-tech-radar 0.5.0 @backstage/plugin-techdocs-backend 0.12.2 @backstage/plugin-techdocs 0.12.12 @backstage/plugin-user-settings 0.3.14 @backstage/search-common 0.2.1 @backstage/techdocs-common 0.11.2 @backstage/test-utils 0.2.1 @backstage/theme 0.2.14 @backstage/types 0.1.1 @backstage/version-bridge 0.1.1

[jhaals]

Thanks for reporting this! As @awanlin so kindly pointed out this is the old diagram which we really should deprecate and possibly remove in the future. The new one require a bit of setup but we should make sure to it up in the default create app for new projects.

[JarrodJ83]

@jhaals Thanks for the additional information! This all makes sense. Thanks again!