Roadie

Backstage Tech Radar Plugin

Visualize the your company's official guidelines of different areas of software development.

Getting started is simple

Install the plugin into Backstage.

yarn add @backstage/plugin-tech-radar

Add plugin to the list of plugins.

// packages/app/src/plugins.ts
export { plugin as TechRadar } from '@backstage/plugin-tech-radar';

Modify your app routes to include the Router component exported from the tech radar, for example

// packages/app/src/App.tsx
import { Router as TechRadarRouter } from '@backstage/plugin-tech-radar';
<Routes>
  {/* other routes ... */}
  <Route
    path="/tech-radar"
    element={<TechRadarRouter width={1500} height={800} />}
  />
  {/* other routes ... */}
</Routes>;

How it looks

Things to know

How do I load in my own data?

To pass own data to plugin use a getData prop which expects a Promise<TechRadarLoaderResponse> signature.

For example:

const getFireBaseData = () =>
  Promise.resolve({
    quadrants: [{ id: 'infrastructure', name: 'Infrastructure' }],
    rings: [{ id: 'use', name: 'USE', color: '#91c49d' }],
    entries: [
      {
        moved: 0,
        ring: 'use',
        url: '#',
        key: 'firebase-function',
        id: 'firebase-function',
        title: 'FireBase Function',
        quadrant: 'infrastructure',
      },
    ],
  });

<TechRadarComponent width={1500} height={900} getData={getFireBaseData} />;

Become a Backstage expert

To get the latest news, deep dives into Backstage features, and a roundup of recent open-source action, sign up for Roadie's Backstage Weekly. See recent editions.