diff --git a/addons/core/translations/resources/en-us.yaml b/addons/core/translations/resources/en-us.yaml
index a997fc77a..36b8a30dd 100644
--- a/addons/core/translations/resources/en-us.yaml
+++ b/addons/core/translations/resources/en-us.yaml
@@ -359,6 +359,12 @@ target:
     deprecation_message:
       title: Worker filters have been updated
       description: This target is configured using an older version of worker filters. You can update to the new filters but this will also update this field in the Boundary API. We will continue to use this filter until you update.
+    diagram:
+      client: Client
+      any-worker: Any worker
+      egress-worker: Egress worker
+      host: Host
+      network: Private network
 credential-store:
   title: Credential Store
   title_plural: Credential Stores
diff --git a/ui/admin/app/components/ordered-series-diagram/index.hbs b/ui/admin/app/components/ordered-series-diagram/index.hbs
index b0d67eb67..f6ab9a6c2 100644
--- a/ui/admin/app/components/ordered-series-diagram/index.hbs
+++ b/ui/admin/app/components/ordered-series-diagram/index.hbs
@@ -1,4 +1,4 @@
-<ol class='ordered-series-diagram'>
+<ol ...attributes class='ordered-series-diagram'>
   {{yield
     (hash
       Item=(component 'ordered-series-diagram/item')
diff --git a/ui/admin/app/components/worker-diagram/index.hbs b/ui/admin/app/components/worker-diagram/index.hbs
new file mode 100644
index 000000000..f2ed98083
--- /dev/null
+++ b/ui/admin/app/components/worker-diagram/index.hbs
@@ -0,0 +1 @@
+{{yield (hash SingleFilter=(component 'worker-diagram/single-filter'))}}
\ No newline at end of file
diff --git a/ui/admin/app/components/worker-diagram/single-filter/index.hbs b/ui/admin/app/components/worker-diagram/single-filter/index.hbs
new file mode 100644
index 000000000..a2420e610
--- /dev/null
+++ b/ui/admin/app/components/worker-diagram/single-filter/index.hbs
@@ -0,0 +1,30 @@
+{{#if @egressFilter}}
+  <OrderedSeriesDiagram data-test-single-filter-egress-on as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
+    <D.Group
+      @title={{t 'resources.target.workers.diagram.network'}}
+      @color='highlight'
+    >
+      <D.Item @icon='settings'>
+        {{t 'resources.target.workers.diagram.egress-worker'}}
+      </D.Item>
+      <D.Item @icon='server'>
+        {{t 'resources.target.workers.diagram.host'}}
+      </D.Item>
+    </D.Group>
+  </OrderedSeriesDiagram>
+{{else}}
+  <OrderedSeriesDiagram data-test-single-filter-egress-off as |D|>
+    <D.Item @icon='user'>
+      {{t 'resources.target.workers.diagram.client'}}
+    </D.Item>
+    <D.Item @icon='settings'>
+      {{t 'resources.target.workers.diagram.any-worker'}}
+    </D.Item>
+    <D.Item @icon='server'>
+      {{t 'resources.target.workers.diagram.host'}}
+    </D.Item>
+  </OrderedSeriesDiagram>
+{{/if}}
\ No newline at end of file
diff --git a/ui/admin/tests/integration/components/worker-diagram/index-test.js b/ui/admin/tests/integration/components/worker-diagram/index-test.js
new file mode 100644
index 000000000..50ebe4972
--- /dev/null
+++ b/ui/admin/tests/integration/components/worker-diagram/index-test.js
@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module('Integration | Component | worker-diagram/index', function (hooks) {
+  setupRenderingTest(hooks);
+  setupIntl(hooks);
+
+  let featuresService;
+  const targetWorkerFilterIngress = 'target-worker-filters-v2-ingress';
+  const targetWorkerFilterHCP = 'target-worker-filters-v2-hcp';
+
+  test('it renders a single filter diagram', async function (assert) {
+    featuresService = this.owner.lookup('service:features');
+    featuresService.disable(targetWorkerFilterIngress);
+    featuresService.disable(targetWorkerFilterHCP);
+    assert.expect(1);
+    await render(hbs`<WorkerDiagram::SingleFilter />`);
+
+    assert.dom('[data-test-single-filter-egress-off]').isVisible();
+  });
+});
diff --git a/ui/admin/tests/integration/components/worker-diagram/single-filter/index-test.js b/ui/admin/tests/integration/components/worker-diagram/single-filter/index-test.js
new file mode 100644
index 000000000..f8d6071f8
--- /dev/null
+++ b/ui/admin/tests/integration/components/worker-diagram/single-filter/index-test.js
@@ -0,0 +1,31 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'admin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import { setupIntl } from 'ember-intl/test-support';
+
+module(
+  'Integration | Component | worker-diagram/single-filter',
+  function (hooks) {
+    setupRenderingTest(hooks);
+    setupIntl(hooks);
+
+    test('it renders the correct diagram when egressFilter is false', async function (assert) {
+      assert.expect(2);
+      await render(
+        hbs`<WorkerDiagram::SingleFilter @egressFilter={{false}} />`
+      );
+
+      assert.dom('[data-test-single-filter-egress-off]').isVisible();
+      assert.dom('[data-test-single-filter-egress-on]').doesNotExist();
+    });
+
+    test('it renders the correct diagram when egressFilter is true', async function (assert) {
+      assert.expect(2);
+      await render(hbs`<WorkerDiagram::SingleFilter @egressFilter={{true}} />`);
+
+      assert.dom('[data-test-single-filter-egress-on]').isVisible();
+      assert.dom('[data-test-single-filter-egress-off]').doesNotExist();
+    });
+  }
+);