@eventcatalog/core 3.34.0 → 3.35.1

package/dist/docs/plugins/openapi/03a-workflows.md

@@ -0,0 +1,153 @@
+---
+sidebar_position: 1
+keywords:
+- components
+sidebar_label: Workflows  
+title: Workflows
+description: Workflows of OpenAPI with EventCatalog
+---
+
+import AddedIn from '@site/src/components/MDX/AddedIn';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+There are a few ways to configure the OpenAPI plugin depending on your preferred development workflows.
+Many companies have different needs, so we have provided a few different workflows to choose from.
+
+- [Simple mapping between OpenAPI files and EventCatalog services](#simple-mapping-between-openapi-files-and-eventcatalog-services)
+  - Map a single OpenAPI file to a single EventCatalog service
+- [Independent message versions from your OpenAPI file](#independent-message-versions-from-your-openapi-file)
+  - Version your messages independently of the service version
+- [Mapping multiple OpenAPI files to a single EventCatalog service](#mapping-multiple-openapi-files-to-a-single-eventcatalog-service)
+  - Map multiple OpenAPI files to a single EventCatalog service
+- [Mapping OpenAPI and AsyncAPI files to the same EventCatalog service](#mapping-openapi-and-asyncapi-files-to-the-same-eventcatalog-service)
+  - Map an OpenAPI and AsyncAPI file to the same EventCatalog service
+
+_If we are missing a workflow that you think is useful, please raise an [issue on GitHub](https://github.com/event-catalog/generators/issues)._  
+
+## Simple mapping between OpenAPI files and EventCatalog services
+
+This is the simplest workflow and is useful if you have a single OpenAPI file per service.
+
+EventCatalog will parse your OpenAPI file and map it's specification to the service you define. 
+
+This will document your service, and the messages it produces and consumes.
+
+```js title="eventcatalog.config.js"
+// ...rest of file
+generators: [
+  [
+    '@eventcatalog/generator-openapi',
+    {
+      services: [
+        // Tell EventCatalog where the OpenAPI file is located and map it to the service you define
+        { path: path.join(__dirname, 'openapi-files', 'orders-service.yml'), id: 'orders-service' },
+      ],
+    },
+  ],
+],
+```
+
+### Independent message versions from your OpenAPI file
+
+This is useful if you want to version your messages separately from the OpenAPI file.
+
+OpenAPI currently does not support versioning messages separately from the OpenAPI file, that's why you have to use the `x-eventcatalog-message-version` extension.
+
+You can use the `x-eventcatalog-message-version` extension to specify a different version for a particular message.
+
+```yaml
+openapi: 3.0.0
+info:
+  title: Orders Service
+  version: 1.0.0
+paths:
+  /orders:
+    get:
+      summary: List all orders
+      operationId: listOrders
+      # Specify the version of the message to 2.0.0
+      x-eventcatalog-message-version: 2.0.0
+      tags:
+        - orders
+      responses:
+        '200':
+          description: A list of orders
+          content:
+            application/json:
+```
+
+In the example above, the message `listOrders` will be versioned as `2.0.0` and all other messages will be versioned as `1.0.0`.
+
+You can read more about message versioning in the [Features](/docs/plugins/openapi/features#defining-message-versions) section.
+
+## Mapping multiple OpenAPI files to a single EventCatalog service
+
+This is useful if you have a single service that produces and consumes multiple OpenAPI versions.
+
+Some people call this a "polyglot" service, as it produces and consumes multiple APIs.
+
+```js title="eventcatalog.config.js"
+// ...rest of file
+generators: [
+  [
+    '@eventcatalog/generator-asyncapi',
+    {
+      services: [
+        // Version 1 of the OpenAPI file
+        { path: path.join(__dirname, 'openapi-files', 'orders-service-v1.yml'), id: 'orders-service' },
+        // Version 2 of the AsyncAPI File
+        { path: path.join(__dirname, 'openapi-files', 'orders-service-v2.yml'), id: 'orders-service' },
+      ],
+    },
+  ],
+],
+```
+
+:::info Versioning
+When you map multiple versions of an OpenAPI file to a single service, the `version` property in your OpenAPI files needs to be the same.
+
+If they are different, EventCatalog will version the previous versions of your service.
+
+In the example above, the `version` property in the OpenAPI files is `1.0.0` and `2.0.0`.
+
+EventCatalog will version the service as `1.0.0` and `2.0.0`.
+
+The messages in the service will be versioned as `1.0.0` and `2.0.0`.
+
+This allows you to track the history of your service and the messages in it.
+
+:::
+
+## Mapping OpenAPI and AsyncAPI files to the same EventCatalog service
+
+<AddedIn version="5.1.1" pkg="@eventcatalog/generator-asyncapi" url="https://github.com/event-catalog/generators/releases/tag/v"/>
+<AddedIn version="7.6.1" pkg="@eventcatalog/generator-openapi" url="https://github.com/event-catalog/generators/releases/tag/v"/>
+
+This is useful if you have a single service that produces and consumes both OpenAPI and AsyncAPI files.
+
+In this example we map an OpenAPI file and an AsyncAPI file to the same service (inventory-service). 
+
+The OpenAPI and AsyncAPI may have their own versions independent of each other, but EventCatalog will document both of them in the same service.
+
+:::tip Message Versioning
+You can still use the `x-eventcatalog-message-version` extension to version your messages independently of the service version.
+:::
+
+```js title="eventcatalog.config.js"
+// ...rest of file
+generators: [
+    [
+      "@eventcatalog/generator-openapi",
+      {
+        services: [{ path: path.join(__dirname, "specifications", "openapi.yml"), id: "inventory-service", version: "15.2.0" }],
+      },
+    ],
+    [
+      "@eventcatalog/generator-asyncapi",
+      {
+        services: [{ path: path.join(__dirname, "specifications", "asyncapi.yml"), id: "inventory-service", version: "15.2.0" }],
+      },
+    ],
+  ],
+```

package/dist/docs/plugins/openapi/04-examples.md

@@ -0,0 +1,23 @@
+---
+sidebar_position: 1
+keywords:
+- components
+sidebar_label: Examples
+title: Examples
+description: Examples of using the OpenAPI plugin
+---
+
+You can find many examples of using the OpenAPI plugin in the [EventCatalog GitHub repository](https://github.com/event-catalog/generators).
+
+## Examples
+
+- [OpenAPI Example](https://github.com/event-catalog/generators/tree/main/examples/generator-openapi/basic)
+  -  A basic example of using the OpenAPI plugin to generate a catalog from an OpenAPI file.
+- [Fetch OpenAPI files from remote URLs](https://github.com/event-catalog/generators/tree/main/examples/generator-openapi/fetch-from-remote-urls) 
+  - An example of using the OpenAPI plugin to fetch an OpenAPI file from a remote URL.
+- [Version OpenAPI messages in EventCatalog](https://github.com/event-catalog/generators/tree/main/examples/generator-openapi/independent-message-versioning) 
+  - An example of using the OpenAPI plugin to version OpenAPI messages in EventCatalog.
+- [Map OpenAPI routes to commands, events and queries](https://github.com/event-catalog/generators/tree/main/examples/generator-openapi/mapping-commands-events-queries) 
+  - An example of using the OpenAPI plugin to map OpenAPI routes to commands, events and queries.
+- [Map many OpenAPI files to a single service](https://github.com/event-catalog/generators/tree/main/examples/generator-openapi/mapping-many-openapi-files-to-a-service) 
+  - An example of using the OpenAPI plugin to map many OpenAPI files to a single service. This can be useful if your service exposes multiple APIs.

package/dist/docs/plugins/openapi/_category_.json

@@ -0,0 +1,12 @@
+{
+  "label": "OpenAPI Plugin",
+  "collapsible": true,
+  "position": 3,
+  "collapsed": false,
+  "link": {
+    "type": "generated-index",
+    "slug": "openapi",
+    "title": "OpenAPI",
+    "description": "OpenAPI integration documentation for EventCatalog"
+  }
+}

package/dist/eventcatalog.cjs

@@ -114,7 +114,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.34.0";
+var version = "3.35.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-K3ZVEX2Y.js";
 import {
   log_build_default
-} from "./chunk-BJWMR3ZH.js";
-import "./chunk-IO6EMN5C.js";
+} from "./chunk-JEQZWJWP.js";
+import "./chunk-VJ357XOI.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-3KXCGYET.js";
 import {
   generate
-} from "./chunk-PP7EDIPX.js";
+} from "./chunk-R4DR3YAH.js";
 import {
   logger
-} from "./chunk-K5AM6PPU.js";
+} from "./chunk-4SNN54V4.js";
 import {
   VERSION
-} from "./chunk-623CFR4T.js";
+} from "./chunk-B7C4DHFE.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -78,7 +78,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.34.0";
+var version = "3.35.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-PP7EDIPX.js";
-import "./chunk-K5AM6PPU.js";
-import "./chunk-623CFR4T.js";
+} from "./chunk-R4DR3YAH.js";
+import "./chunk-4SNN54V4.js";
+import "./chunk-B7C4DHFE.js";
 import "./chunk-5T63CXKU.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.34.0";
+var version = "3.35.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-K5AM6PPU.js";
-import "../chunk-623CFR4T.js";
+} from "../chunk-4SNN54V4.js";
+import "../chunk-B7C4DHFE.js";
 export {
   logger
 };

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -27,6 +27,7 @@ import { useStore } from '@nanostores/react';
 import { favoritesStore, toggleFavorite as toggleFavoriteAction } from '../../stores/favorites-store';
 import { buildUrl } from '@utils/url-builder';
 import { resolveIconUrl } from '@utils/icon';
+import { getUrlForSearchItem } from './search-utils';
 
 const typeIcons: any = {
   Domain: RectangleGroupIcon,
@@ -43,6 +44,8 @@ const typeIcons: any = {
   AsyncAPI: DocumentTextIcon,
   Design: Square2StackIcon,
   Container: CircleStackIcon,
+  'Data Product': CubeIcon,
+  Flow: QueueListIcon,
   default: DocumentTextIcon,
 };
 
@@ -62,6 +65,8 @@ const typeColors: any = {
   AsyncAPI: 'text-violet-500 dark:text-violet-400 bg-violet-50 dark:bg-violet-500/10 ring-violet-200 dark:ring-violet-500/30',
   Design: 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-500/10 ring-gray-200 dark:ring-gray-500/30',
   Container: 'text-indigo-500 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 ring-indigo-200 dark:ring-indigo-500/30',
+  'Data Product': 'text-sky-500 dark:text-sky-400 bg-sky-50 dark:bg-sky-500/10 ring-sky-200 dark:ring-sky-500/30',
+  Flow: 'text-fuchsia-500 dark:text-fuchsia-400 bg-fuchsia-50 dark:bg-fuchsia-500/10 ring-fuchsia-200 dark:ring-fuchsia-500/30',
   default: 'text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-500/10 ring-gray-200 dark:ring-gray-500/30',
 };
 
@@ -69,35 +74,6 @@ function classNames(...classes: (string | boolean | undefined)[]) {
   return classes.filter(Boolean).join(' ');
 }
 
-// Helper to construct URL from key if href is missing
-const getUrlForItem = (node: any, key: string) => {
-  const parts = key.split(':');
-  if (parts.length < 2) return null; // Need at least type:id
-
-  const type = parts[0];
-  const id = parts[1];
-  const version = parts[2]; // May be undefined
-
-  // Skip list items and other special keys
-  if (type === 'list') return null;
-
-  // Only show items that have a version to avoid duplicates
-  if (!version) return null;
-
-  // If node has href, use it, otherwise construct from key
-  if (node.href) return node.href;
-
-  // Pluralize type for URL if needed
-  let pluralType = type;
-  if (['event', 'command', 'domain', 'service', 'flow', 'container', 'channel'].includes(type)) {
-    pluralType = type + 's';
-  } else if (type === 'query') {
-    pluralType = 'queries';
-  }
-
-  return buildUrl(`/docs/${pluralType}/${id}/${version}`);
-};
-
 interface SearchNode {
   key: string;
   title: string;
@@ -203,7 +179,7 @@ export default function SearchModal() {
   const items = useMemo(() => {
     return searchNodes
       .map((node) => {
-        const url = getUrlForItem(node as any, node.key);
+        const url = getUrlForSearchItem(node as any, node.key);
         if (!url) return null;
 
         return {
@@ -252,8 +228,11 @@ export default function SearchModal() {
       Message: 0,
       Team: 0,
       Container: 0,
+      Entity: 0,
       Design: 0,
       Channel: 0,
+      Flow: 0,
+      'Data Product': 0,
     };
 
     itemsToCount.forEach((item) => {
@@ -277,8 +256,12 @@ export default function SearchModal() {
     if (counts.Domain > 0) dynamicFilters.push({ id: 'Domain', name: `Domains (${counts.Domain})` });
     if (counts.Service > 0) dynamicFilters.push({ id: 'Service', name: `Services (${counts.Service})` });
     if (counts.Message > 0) dynamicFilters.push({ id: 'Message', name: `Messages (${counts.Message})` });
-    if (counts.Container > 0) dynamicFilters.push({ id: 'Container', name: `Containers (${counts.Container})` });
+    if (counts.Container > 0) dynamicFilters.push({ id: 'Container', name: `Data Stores (${counts.Container})` });
+    if (counts.Entity > 0) dynamicFilters.push({ id: 'Entity', name: `Entities (${counts.Entity})` });
     if (counts.Channel > 0) dynamicFilters.push({ id: 'Channel', name: `Channels (${counts.Channel})` });
+    if (counts.Flow > 0) dynamicFilters.push({ id: 'Flow', name: `Flows (${counts.Flow})` });
+    if (counts['Data Product'] > 0)
+      dynamicFilters.push({ id: 'Data Product', name: `Data Products (${counts['Data Product']})` });
     if (counts.Design > 0) dynamicFilters.push({ id: 'Design', name: `Designs (${counts.Design})` });
     if (counts.Team > 0) dynamicFilters.push({ id: 'Team', name: `Teams & Users (${counts.Team})` });
 
@@ -317,7 +300,7 @@ export default function SearchModal() {
           .slice(0, 5)
           .map((fav) => {
             const node = searchNodeLookup.get(fav.nodeKey);
-            const url = node ? getUrlForItem(node as any, fav.nodeKey) : fav.href;
+            const url = node ? getUrlForSearchItem(node as any, fav.nodeKey) : fav.href;
             if (!url) return null;
 
             return {
@@ -411,7 +394,13 @@ export default function SearchModal() {
                 </div>
 
                 {/* Filter Tabs */}
-                <div className="flex items-center gap-2 px-4 py-3 overflow-x-auto no-scrollbar border-b border-[rgb(var(--ec-page-border))]">
+                <div
+                  className="flex items-center gap-2 px-4 pt-3 pb-3.5 overflow-x-auto overscroll-x-contain border-b border-[rgb(var(--ec-page-border))]"
+                  style={{
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'rgb(var(--ec-page-border)) transparent',
+                  }}
+                >
                   {filters.map((tab) => (
                     <button
                       key={tab.id}
@@ -566,7 +555,7 @@ export default function SearchModal() {
                     <MagnifyingGlassIcon className="mx-auto h-6 w-6 text-[rgb(var(--ec-icon-color))]" />
                     <p className="mt-4 font-semibold text-[rgb(var(--ec-page-text))]">Search for anything</p>
                     <p className="mt-2 text-[rgb(var(--ec-page-text-muted))]">
-                      Search for domains, services, events, commands, queries and more.
+                      Search for domains, services, events, commands, queries, data stores, data products, flows and more.
                     </p>
                   </div>
                 )}

package/eventcatalog/src/components/Search/search-utils.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { getUrlForSearchItem } from './search-utils';
+
+declare global {
+  interface Window {
+    __EC_TRAILING_SLASH__: boolean;
+  }
+}
+
+describe('getUrlForSearchItem', () => {
+  beforeEach(() => {
+    // @ts-ignore
+    global.__EC_TRAILING_SLASH__ = false;
+  });
+
+  it.each([
+    ['container:OrdersDatabase:1.0.0', '/docs/containers/OrdersDatabase/1.0.0'],
+    ['data-product:Customer360:1.0.0', '/docs/data-products/Customer360/1.0.0'],
+    ['entity:Order:1.0.0', '/docs/entities/Order/1.0.0'],
+    ['flow:CheckoutFlow:1.0.0', '/docs/flows/CheckoutFlow/1.0.0'],
+  ])('builds a docs URL for %s', (key, expected) => {
+    expect(getUrlForSearchItem({}, key)).toBe(expected);
+  });
+
+  it('uses the explicit node href when provided', () => {
+    expect(getUrlForSearchItem({ href: '/custom/search-result' }, 'data-product:Customer360:1.0.0')).toBe(
+      '/custom/search-result'
+    );
+  });
+
+  it('skips aliases and unsupported keys', () => {
+    expect(getUrlForSearchItem({}, 'data-product:Customer360')).toBeNull();
+    expect(getUrlForSearchItem({}, 'list:data-products')).toBeNull();
+    expect(getUrlForSearchItem({}, 'unknown:Customer360:1.0.0')).toBeNull();
+  });
+});

package/eventcatalog/src/components/Search/search-utils.ts

@@ -0,0 +1,34 @@
+import { buildUrl } from '@utils/url-builder';
+
+const docsPathByType: Record<string, string> = {
+  channel: 'channels',
+  command: 'commands',
+  container: 'containers',
+  'data-product': 'data-products',
+  domain: 'domains',
+  entity: 'entities',
+  event: 'events',
+  flow: 'flows',
+  query: 'queries',
+  service: 'services',
+};
+
+export const getUrlForSearchItem = (node: { href?: string }, key: string) => {
+  const parts = key.split(':');
+  if (parts.length < 2) return null;
+
+  const type = parts[0];
+  const id = parts[1];
+  const version = parts[2];
+
+  if (type === 'list') return null;
+
+  if (!version) return null;
+
+  if (node.href) return node.href;
+
+  const docsPath = docsPathByType[type];
+  if (!docsPath) return null;
+
+  return buildUrl(`/docs/${docsPath}/${id}/${version}`);
+};

package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx

@@ -16,6 +16,8 @@ import {
   SquareMousePointer,
   ListOrdered,
   ArrowLeftRight,
+  Package,
+  Box,
 } from 'lucide-react';
 import type { NavNode } from '@stores/sidebar-store/state';
 import { getBadgeClasses } from './utils';
@@ -83,8 +85,10 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
     { key: 'channel', label: 'Channels', badge: 'Channel', icon: ArrowLeftRight },
     { key: 'command', label: 'Commands', badge: 'Command', icon: MessageSquare },
     { key: 'container', label: 'Data Stores', badge: 'Container', icon: Database },
+    { key: 'data-product', label: 'Data Products', badge: 'Data Product', icon: Package },
     { key: 'design', label: 'Designs', badge: 'Design', icon: SquareMousePointer },
     { key: 'domain', label: 'Domains', badge: 'Domain', icon: Boxes },
+    { key: 'entity', label: 'Entities', badge: 'Entity', icon: Box },
     { key: 'event', label: 'Events', badge: 'Event', icon: Zap },
     { key: 'flow', label: 'Flows', badge: 'Flow', icon: Waypoints },
     { key: 'query', label: 'Queries', badge: 'Query', icon: SearchIcon },
@@ -116,9 +120,11 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
       Command: 'command',
       Query: 'query',
       Container: 'container',
+      'Data Product': 'data-product',
       Flow: 'flow',
       Design: 'design',
       Channel: 'channel',
+      Entity: 'entity',
     };
 
     // Use the memoized array instead of Object.entries(nodes)
@@ -135,7 +141,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
 
       const keyParts = key.split(':');
       if (keyParts.length >= 3) {
-        const id = keyParts[2].toLowerCase();
+        const id = keyParts[1].toLowerCase();
         if (id.includes(query)) {
           results.push({ nodeKey: key, node, matchType: 'id' });
         }

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -239,6 +239,8 @@ export default function NestedSideBar() {
         // Data Products
         { pattern: /^\/docs\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
         { pattern: /^\/visualiser\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
+        // Entities
+        { pattern: /^\/docs\/entities\/([^/]+)\/([^/]+)/, type: 'entity' },
       ];
 
       // URL patterns without version (language pages, etc)

package/eventcatalog/src/stores/sidebar-store/builders/flow.ts

@@ -3,6 +3,44 @@ import { buildUrl } from '@utils/url-builder';
 import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
 import { buildQuickReferenceSection, buildResourceDocsSection, shouldRenderSideBarSection } from './shared';
 import { isChangelogEnabled } from '@utils/feature';
+import { createVersionedMap, findInMap } from '@utils/collections/util';
+import { pluralizeMessageType } from '@utils/collections/messages';
+
+type VersionedEntry = { collection?: string; data: { id: string; version: string } };
+type VersionedEntryMap<T extends VersionedEntry> = Map<string, T[]>;
+
+const uniqueRefs = (refs: string[]) => [...new Set(refs)];
+
+const resolvePointer = <T extends VersionedEntry>(
+  map: VersionedEntryMap<T>,
+  pointer: { id: string; version?: string }
+): T | undefined => {
+  return findInMap(map, pointer.id, pointer.version);
+};
+
+const resolveMessageStep = (
+  step: any,
+  maps: {
+    eventMap: VersionedEntryMap<CollectionEntry<'events'>>;
+    commandMap: VersionedEntryMap<CollectionEntry<'commands'>>;
+    queryMap: VersionedEntryMap<CollectionEntry<'queries'>>;
+  }
+): string | null => {
+  if (!step.message) return null;
+
+  const hydratedMessage = Array.isArray(step.message) ? step.message[0] : undefined;
+  if (hydratedMessage?.collection && hydratedMessage?.data) {
+    return `${pluralizeMessageType(hydratedMessage as any)}:${hydratedMessage.data.id}:${hydratedMessage.data.version}`;
+  }
+
+  const pointer = Array.isArray(step.message) ? undefined : step.message;
+  if (!pointer?.id) return null;
+
+  const message =
+    resolvePointer(maps.eventMap, pointer) || resolvePointer(maps.commandMap, pointer) || resolvePointer(maps.queryMap, pointer);
+
+  return message ? `${pluralizeMessageType(message as any)}:${message.data.id}:${message.data.version}` : null;
+};
 
 export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceGroupContext): NavNode => {
   const docsSection = buildResourceDocsSection(
@@ -12,6 +50,27 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceG
     context.resourceDocs,
     context.resourceDocCategories
   );
+  const steps = flow.data.steps || [];
+  const eventMap = createVersionedMap(context.events);
+  const commandMap = createVersionedMap(context.commands);
+  const queryMap = createVersionedMap(context.queries);
+  const serviceMap = createVersionedMap(context.services);
+  const flowMap = createVersionedMap(context.flows);
+  const messageRefs = uniqueRefs(
+    steps.map((step) => resolveMessageStep(step, { eventMap, commandMap, queryMap })).filter(Boolean) as string[]
+  );
+  const serviceRefs = uniqueRefs(
+    steps
+      .map((step) => (step.service ? resolvePointer(serviceMap, step.service) : undefined))
+      .filter(Boolean)
+      .map((service) => `service:${service!.data.id}:${service!.data.version}`)
+  );
+  const flowRefs = uniqueRefs(
+    steps
+      .map((step) => (step.flow ? resolvePointer(flowMap, step.flow) : undefined))
+      .filter(Boolean)
+      .map((referencedFlow) => `flow:${referencedFlow!.data.id}:${referencedFlow!.data.version}`)
+  );
 
   return {
     type: 'item',
@@ -43,6 +102,24 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceG
           },
         ].filter(Boolean) as ChildRef[],
       },
+      messageRefs.length > 0 && {
+        type: 'group',
+        title: 'Messages',
+        icon: 'Mail',
+        pages: messageRefs,
+      },
+      serviceRefs.length > 0 && {
+        type: 'group',
+        title: 'Services',
+        icon: 'Server',
+        pages: serviceRefs,
+      },
+      flowRefs.length > 0 && {
+        type: 'group',
+        title: 'Subflows',
+        icon: 'Waypoints',
+        pages: flowRefs,
+      },
     ].filter(Boolean) as ChildRef[],
   };
 };

package/eventcatalog/src/stores/sidebar-store/builders/message.ts

@@ -18,7 +18,8 @@ export const buildMessageNode = (
   message: CollectionEntry<'events' | 'commands' | 'queries'>,
   owners: any[],
   context: ResourceGroupContext,
-  hasFieldUsage: boolean = false
+  hasFieldUsage: boolean = false,
+  flowRefs: string[] = []
 ): NavNode => {
   const producers = message.data.producers || [];
   const consumers = message.data.consumers || [];
@@ -26,6 +27,7 @@ export const buildMessageNode = (
 
   const renderProducers = producers.length > 0 && shouldRenderSideBarSection(message, 'producers');
   const renderConsumers = consumers.length > 0 && shouldRenderSideBarSection(message, 'consumers');
+  const renderFlows = flowRefs.length > 0 && shouldRenderSideBarSection(message, 'flows');
   const renderRepository = message.data.repository && shouldRenderSideBarSection(message, 'repository');
 
   // Determine badge based on collection type
@@ -132,6 +134,13 @@ export const buildMessageNode = (
         pages: consumers.map((consumer) => `service:${(consumer as any).data.id}:${(consumer as any).data.version}`),
         visible: consumers.length > 0,
       },
+      renderFlows && {
+        type: 'group',
+        title: 'Flows',
+        icon: 'Waypoints',
+        pages: flowRefs,
+        visible: flowRefs.length > 0,
+      },
       renderOwners && buildOwnersSection(owners),
       renderRepository && buildRepositorySection(message.data.repository as { url: string; language: string }),
       hasAttachments && buildAttachmentsSection(message.data.attachments as any[]),