@eventcatalog/core 3.36.1 → 3.36.3

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.36.1";
+var version = "3.36.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-V22QY5Q3.js";
-import "../chunk-C7JCOHTI.js";
+} from "../chunk-4U6TPQGC.js";
+import "../chunk-DTE424XY.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -111,7 +111,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "3.36.1";
+var version = "3.36.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-UJ7DX4SA.js";
+} from "../chunk-ZE3NM2MH.js";
+import "../chunk-4U6TPQGC.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-V22QY5Q3.js";
-import "../chunk-C7JCOHTI.js";
+import "../chunk-DTE424XY.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-V22QY5Q3.js → chunk-4U6TPQGC.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-C7JCOHTI.js";
+} from "./chunk-DTE424XY.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-HDENGAZL.js → chunk-6L5LHQ3C.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-6D65JSOA.js";
+} from "./chunk-SPFT3VTV.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-C7JCOHTI.js → chunk-DTE424XY.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "3.36.1";
+var version = "3.36.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-6D65JSOA.js → chunk-SPFT3VTV.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-C7JCOHTI.js";
+} from "./chunk-DTE424XY.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-UJ7DX4SA.js → chunk-ZE3NM2MH.js}

@@ -1,10 +1,10 @@
+import {
+  raiseEvent
+} from "./chunk-4U6TPQGC.js";
 import {
   countResources,
   serializeCounts
 } from "./chunk-4UVFXLPI.js";
-import {
-  raiseEvent
-} from "./chunk-V22QY5Q3.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "3.36.1";
+var version = "3.36.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-C7JCOHTI.js";
+} from "./chunk-DTE424XY.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.config.d.cts

@@ -64,6 +64,7 @@ type IntegrationsConfig = {
     /** Log all analytics events to the browser console */
     debug?: boolean;
 };
+type CatalogTheme = 'default' | 'ocean' | 'sapphire' | 'sunset' | 'forest' | (string & {});
 type ScalarConfiguration = any;
 interface Config {
     title: string;
@@ -82,9 +83,12 @@ interface Config {
      * Theme for the catalog UI.
      * - 'default': Default purple/slate theme
      * - 'ocean': Deep blue/teal ocean-inspired theme
+     * - 'sapphire': Blue/violet theme
+     * - 'sunset': Orange/pink sunset-inspired theme
+     * - 'forest': Green forest-inspired theme
      * @default 'default'
      */
-    theme?: 'default' | 'ocean';
+    theme?: CatalogTheme;
     auth?: AuthConfig;
     rss?: {
         enabled: boolean;

package/dist/eventcatalog.config.d.ts

@@ -64,6 +64,7 @@ type IntegrationsConfig = {
     /** Log all analytics events to the browser console */
     debug?: boolean;
 };
+type CatalogTheme = 'default' | 'ocean' | 'sapphire' | 'sunset' | 'forest' | (string & {});
 type ScalarConfiguration = any;
 interface Config {
     title: string;
@@ -82,9 +83,12 @@ interface Config {
      * Theme for the catalog UI.
      * - 'default': Default purple/slate theme
      * - 'ocean': Deep blue/teal ocean-inspired theme
+     * - 'sapphire': Blue/violet theme
+     * - 'sunset': Orange/pink sunset-inspired theme
+     * - 'forest': Green forest-inspired theme
      * @default 'default'
      */
-    theme?: 'default' | 'ocean';
+    theme?: CatalogTheme;
     auth?: AuthConfig;
     rss?: {
         enabled: boolean;

package/dist/eventcatalog.js

@@ -1,7 +1,7 @@
 import {
-  log_build_default
-} from "./chunk-UJ7DX4SA.js";
-import "./chunk-4UVFXLPI.js";
+  runMigrations
+} from "./chunk-XUAF2H54.js";
+import "./chunk-CA4U2JP7.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-WAJIJEI3.js";
@@ -12,10 +12,10 @@ import {
   watch
 } from "./chunk-K3ZVEX2Y.js";
 import {
-  runMigrations
-} from "./chunk-XUAF2H54.js";
-import "./chunk-CA4U2JP7.js";
-import "./chunk-V22QY5Q3.js";
+  log_build_default
+} from "./chunk-ZE3NM2MH.js";
+import "./chunk-4U6TPQGC.js";
+import "./chunk-4UVFXLPI.js";
 import {
   catalogToAstro
 } from "./chunk-YDXB3BD2.js";
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-HDENGAZL.js";
+} from "./chunk-6L5LHQ3C.js";
 import {
   logger
-} from "./chunk-6D65JSOA.js";
+} from "./chunk-SPFT3VTV.js";
 import {
   VERSION
-} from "./chunk-C7JCOHTI.js";
+} from "./chunk-DTE424XY.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.36.1";
+var version = "3.36.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-HDENGAZL.js";
-import "./chunk-6D65JSOA.js";
-import "./chunk-C7JCOHTI.js";
+} from "./chunk-6L5LHQ3C.js";
+import "./chunk-SPFT3VTV.js";
+import "./chunk-DTE424XY.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.36.1";
+var version = "3.36.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-6D65JSOA.js";
-import "../chunk-C7JCOHTI.js";
+} from "../chunk-SPFT3VTV.js";
+import "../chunk-DTE424XY.js";
 export {
   logger
 };

package/eventcatalog/src/content.config.ts

@@ -266,6 +266,8 @@ const flows = defineCollection({
             message: pointer.optional(),
             service: pointer.optional(),
             flow: pointer.optional(),
+            container: pointer.optional(),
+            dataProduct: pointer.optional(),
 
             actor: z
               .object({
@@ -308,7 +310,15 @@ const flows = defineCollection({
             if (data.next_step && data.next_steps) return false;
 
             // Either one or non types can be present
-            const typesUsed = [data.message, data.service, data.flow, data.actor, data.custom].filter((v) => v).length;
+            const typesUsed = [
+              data.message,
+              data.service,
+              data.flow,
+              data.container,
+              data.dataProduct,
+              data.actor,
+              data.custom,
+            ].filter((v) => v).length;
             return typesUsed === 0 || typesUsed === 1;
           })
       ),
@@ -425,6 +435,18 @@ const dataProducts = defineCollection({
     .object({
       inputs: z.array(pointer).optional(),
       outputs: z.array(dataProductOutputPointer).optional(),
+      detailsPanel: z
+        .object({
+          domains: detailPanelPropertySchema.optional(),
+          inputs: detailPanelPropertySchema.optional(),
+          outputs: detailPanelPropertySchema.optional(),
+          versions: detailPanelPropertySchema.optional(),
+          repository: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+          flows: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
     })
     .extend(baseSchema.shape),
 });
@@ -517,6 +539,7 @@ const containers = defineCollection({
           changelog: detailPanelPropertySchema.optional(),
           attachments: detailPanelPropertySchema.optional(),
           services: detailPanelPropertySchema.optional(),
+          flows: detailPanelPropertySchema.optional(),
         })
         .optional(),
       services: z.array(reference('services')).optional(),

package/eventcatalog/src/layouts/BaseLayout.astro

@@ -20,17 +20,14 @@ const catalogTheme = config.theme || 'default';
     <!-- Inline script to prevent flash of wrong theme -->
     <script is:inline define:vars={{ catalogTheme }}>
       (function () {
-        function getSystemTheme() {
-          if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return 'dark';
-          }
-          return 'light';
+        function getDefaultTheme() {
+          return 'dark';
         }
 
         function applyTheme() {
-          // Check localStorage first, fall back to system preference
+          // Check localStorage first, fall back to dark mode
           const stored = localStorage.getItem('eventcatalog-theme');
-          const theme = stored === 'light' || stored === 'dark' ? stored : getSystemTheme();
+          const theme = stored === 'light' || stored === 'dark' ? stored : getDefaultTheme();
           document.documentElement.setAttribute('data-theme', theme);
           // Also ensure catalog theme is set (for page transitions)
           document.documentElement.setAttribute('data-catalog-theme', catalogTheme);

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

@@ -16,7 +16,8 @@ import { iconFieldsForResource } from '@utils/icon';
 export const buildContainerNode = (
   container: CollectionEntry<'containers'>,
   owners: any[],
-  context: ResourceGroupContext
+  context: ResourceGroupContext,
+  flowRefs: string[] = []
 ): NavNode => {
   const servicesWritingToContainer = container.data.servicesThatWriteToContainer || [];
   const servicesReadingFromContainer = container.data.servicesThatReadFromContainer || [];
@@ -36,6 +37,7 @@ export const buildContainerNode = (
     ...dataProductsReadingFromContainer.map((dp: any) => `data-product:${dp.data.id}:${dp.data.version}`),
   ];
   const renderReads = allReads.length > 0 && shouldRenderSideBarSection(container, 'services');
+  const renderFlows = flowRefs.length > 0 && shouldRenderSideBarSection(container, 'flows');
 
   const renderVisualiser = isVisualiserEnabled();
 
@@ -108,6 +110,13 @@ export const buildContainerNode = (
         icon: 'ArrowDownToLine',
         pages: allReads,
       },
+      renderFlows && {
+        type: 'group',
+        title: 'Flows',
+        icon: 'Waypoints',
+        pages: flowRefs,
+        visible: flowRefs.length > 0,
+      },
       renderOwners && buildOwnersSection(owners),
       renderRepository && buildRepositorySection(container.data.repository as { url: string; language: string }),
       hasAttachments && buildAttachmentsSection(container.data.attachments as any[]),

package/eventcatalog/src/stores/sidebar-store/builders/data-product.ts

@@ -60,13 +60,15 @@ const resolvePointerToRef = (pointer: { id: string; version?: string }, context:
 export const buildDataProductNode = (
   dataProduct: CollectionEntry<'data-products'>,
   owners: any[],
-  context: DataProductContext
+  context: DataProductContext,
+  flowRefs: string[] = []
 ): NavNode => {
   const inputs = dataProduct.data.inputs || [];
   const outputs = dataProduct.data.outputs || [];
 
   const renderVisualiser = isVisualiserEnabled();
   const renderOwners = owners.length > 0 && shouldRenderSideBarSection(dataProduct, 'owners');
+  const renderFlows = flowRefs.length > 0 && shouldRenderSideBarSection(dataProduct, 'flows');
   const docsSection = buildResourceDocsSection(
     'data-products',
     dataProduct.data.id,
@@ -139,6 +141,13 @@ export const buildDataProductNode = (
         icon: 'FileCheck',
         pages: dataContracts,
       },
+      renderFlows && {
+        type: 'group',
+        title: 'Flows',
+        icon: 'Waypoints',
+        pages: flowRefs,
+        visible: flowRefs.length > 0,
+      },
       renderOwners && buildOwnersSection(owners),
     ].filter(Boolean) as ChildRef[],
   };

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

@@ -56,6 +56,8 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceG
   const queryMap = createVersionedMap(context.queries);
   const serviceMap = createVersionedMap(context.services);
   const flowMap = createVersionedMap(context.flows);
+  const containerMap = createVersionedMap(context.containers);
+  const dataProductMap = createVersionedMap(context.dataProducts);
   const messageRefs = uniqueRefs(
     steps.map((step) => resolveMessageStep(step, { eventMap, commandMap, queryMap })).filter(Boolean) as string[]
   );
@@ -71,6 +73,30 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceG
       .filter(Boolean)
       .map((referencedFlow) => `flow:${referencedFlow!.data.id}:${referencedFlow!.data.version}`)
   );
+  const containerRefs = uniqueRefs(
+    steps
+      .map((step: any) => {
+        const hydratedContainer = Array.isArray(step.container) ? step.container[0] : undefined;
+        if (hydratedContainer?.collection && hydratedContainer?.data) return hydratedContainer;
+
+        const pointer = Array.isArray(step.container) ? undefined : step.container;
+        return pointer ? resolvePointer(containerMap, pointer) : undefined;
+      })
+      .filter(Boolean)
+      .map((container) => `container:${container!.data.id}:${container!.data.version}`)
+  );
+  const dataProductRefs = uniqueRefs(
+    steps
+      .map((step: any) => {
+        const hydratedDataProduct = Array.isArray(step.dataProduct) ? step.dataProduct[0] : undefined;
+        if (hydratedDataProduct?.collection && hydratedDataProduct?.data) return hydratedDataProduct;
+
+        const pointer = Array.isArray(step.dataProduct) ? undefined : step.dataProduct;
+        return pointer ? resolvePointer(dataProductMap, pointer) : undefined;
+      })
+      .filter(Boolean)
+      .map((dataProduct) => `data-product:${dataProduct!.data.id}:${dataProduct!.data.version}`)
+  );
 
   return {
     type: 'item',
@@ -120,6 +146,18 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>, context: ResourceG
         icon: 'Waypoints',
         pages: flowRefs,
       },
+      containerRefs.length > 0 && {
+        type: 'group',
+        title: 'Data Stores',
+        icon: 'Database',
+        pages: containerRefs,
+      },
+      dataProductRefs.length > 0 && {
+        type: 'group',
+        title: 'Data Products',
+        icon: 'Package',
+        pages: dataProductRefs,
+      },
     ].filter(Boolean) as ChildRef[],
   };
 };

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

@@ -61,6 +61,7 @@ export type ResourceGroupContext = {
   queries: CollectionEntry<'queries'>[];
   flows: CollectionEntry<'flows'>[];
   containers: CollectionEntry<'containers'>[];
+  dataProducts: CollectionEntry<'data-products'>[];
   diagrams: CollectionEntry<'diagrams'>[];
   resourceDocs: ResourceDocEntry[];
   resourceDocCategories: ResourceDocCategoryEntry[];

package/eventcatalog/src/stores/sidebar-store/state.ts

@@ -35,6 +35,8 @@ let memoryCache: NavigationData | null = null;
 
 type MessageEntry = CollectionEntry<'events' | 'commands' | 'queries'>;
 type ServiceEntry = CollectionEntry<'services'>;
+type ContainerEntry = CollectionEntry<'containers'>;
+type DataProductEntry = CollectionEntry<'data-products'>;
 
 const getMessageNodeKey = (message: MessageEntry) =>
   `${pluralizeMessageType(message)}:${message.data.id}:${message.data.version}`;
@@ -119,6 +121,78 @@ const buildFlowReferencesByService = ({
   return flowRefsByService;
 };
 
+const buildFlowReferencesByContainer = ({
+  flows,
+  containers,
+}: {
+  flows: CollectionEntry<'flows'>[];
+  containers: CollectionEntry<'containers'>[];
+}) => {
+  const containerMap = createVersionedMap(containers);
+  const flowRefsByContainer = new Map<string, string[]>();
+
+  const addFlowRef = (container: ContainerEntry, flow: CollectionEntry<'flows'>) => {
+    const containerKey = `container:${container.data.id}:${container.data.version}`;
+    const flowKey = `flow:${flow.data.id}:${flow.data.version}`;
+    flowRefsByContainer.set(containerKey, uniqueRefs([...(flowRefsByContainer.get(containerKey) || []), flowKey]));
+  };
+
+  for (const flow of flows) {
+    for (const step of flow.data.steps || []) {
+      if (!step.container) continue;
+
+      const hydratedContainer = Array.isArray(step.container) ? step.container[0] : undefined;
+      if (hydratedContainer?.collection && hydratedContainer?.data) {
+        addFlowRef(hydratedContainer as ContainerEntry, flow);
+        continue;
+      }
+
+      if (Array.isArray(step.container)) continue;
+
+      const container = findInMap(containerMap, step.container.id, step.container.version);
+      if (container) addFlowRef(container as ContainerEntry, flow);
+    }
+  }
+
+  return flowRefsByContainer;
+};
+
+const buildFlowReferencesByDataProduct = ({
+  flows,
+  dataProducts,
+}: {
+  flows: CollectionEntry<'flows'>[];
+  dataProducts: CollectionEntry<'data-products'>[];
+}) => {
+  const dataProductMap = createVersionedMap(dataProducts);
+  const flowRefsByDataProduct = new Map<string, string[]>();
+
+  const addFlowRef = (dataProduct: DataProductEntry, flow: CollectionEntry<'flows'>) => {
+    const dataProductKey = `data-product:${dataProduct.data.id}:${dataProduct.data.version}`;
+    const flowKey = `flow:${flow.data.id}:${flow.data.version}`;
+    flowRefsByDataProduct.set(dataProductKey, uniqueRefs([...(flowRefsByDataProduct.get(dataProductKey) || []), flowKey]));
+  };
+
+  for (const flow of flows) {
+    for (const step of flow.data.steps || []) {
+      if (!step.dataProduct) continue;
+
+      const hydratedDataProduct = Array.isArray(step.dataProduct) ? step.dataProduct[0] : undefined;
+      if (hydratedDataProduct?.collection && hydratedDataProduct?.data) {
+        addFlowRef(hydratedDataProduct as DataProductEntry, flow);
+        continue;
+      }
+
+      if (Array.isArray(step.dataProduct)) continue;
+
+      const dataProduct = findInMap(dataProductMap, step.dataProduct.id, step.dataProduct.version);
+      if (dataProduct) addFlowRef(dataProduct as DataProductEntry, flow);
+    }
+  }
+
+  return flowRefsByDataProduct;
+};
+
 /**
  * Get the navigation data for the sidebar
  */
@@ -326,10 +400,12 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode | string>
   );
 
+  const flowRefsByContainer = buildFlowReferencesByContainer({ flows, containers });
+
   const containerNodes = containerWithOwners.reduce(
     (acc, { container, owners }) => {
       const versionedKey = `container:${container.data.id}:${container.data.version}`;
-      acc[versionedKey] = buildContainerNode(container, owners, context);
+      acc[versionedKey] = buildContainerNode(container, owners, context, flowRefsByContainer.get(versionedKey) || []);
       if (container.data.latestVersion === container.data.version) {
         // Store reference to versioned key instead of duplicating the full node
         acc[`container:${container.data.id}`] = versionedKey;
@@ -358,10 +434,17 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     resourceDocCategories,
   };
 
+  const flowRefsByDataProduct = buildFlowReferencesByDataProduct({ flows, dataProducts });
+
   const dataProductNodes = dataProductWithOwners.reduce(
     (acc, { dataProduct, owners }) => {
       const versionedKey = `data-product:${dataProduct.data.id}:${dataProduct.data.version}`;
-      acc[versionedKey] = buildDataProductNode(dataProduct, owners, dataProductContext);
+      acc[versionedKey] = buildDataProductNode(
+        dataProduct,
+        owners,
+        dataProductContext,
+        flowRefsByDataProduct.get(versionedKey) || []
+      );
       if (dataProduct.data.latestVersion === dataProduct.data.version) {
         acc[`data-product:${dataProduct.data.id}`] = versionedKey;
       }

package/eventcatalog/src/stores/theme-store.ts

@@ -4,14 +4,11 @@ const THEME_KEY = 'eventcatalog-theme';
 
 export type Theme = 'light' | 'dark';
 
-export const themeStore = atom<Theme>('light');
+export const themeStore = atom<Theme>('dark');
 
-// Get system preference
-const getSystemTheme = (): Theme => {
-  if (typeof window !== 'undefined' && window.matchMedia) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-  return 'light';
+// Default theme when the user has not explicitly chosen one.
+const getDefaultTheme = (): Theme => {
+  return 'dark';
 };
 
 // Apply theme to document via data-theme attribute
@@ -31,15 +28,14 @@ const initStore = () => {
         themeStore.set(stored);
         applyTheme(stored);
       } else {
-        // No stored preference, use system preference
-        const systemTheme = getSystemTheme();
-        themeStore.set(systemTheme);
-        applyTheme(systemTheme);
+        // No stored preference, use the catalog default
+        const defaultTheme = getDefaultTheme();
+        themeStore.set(defaultTheme);
+        applyTheme(defaultTheme);
       }
     } catch (e) {
       console.warn('Failed to load theme:', e);
-      const systemTheme = getSystemTheme();
-      applyTheme(systemTheme);
+      applyTheme(getDefaultTheme());
     }
   }
 };

package/eventcatalog/src/utils/collections/flows.ts

@@ -24,11 +24,13 @@ export const getFlows = async ({ getAllVersions = true }: Props = {}): Promise<F
   }
 
   // 1. Fetch collections in parallel
-  const [allFlows, allEvents, allCommands, allQueries] = await Promise.all([
+  const [allFlows, allEvents, allCommands, allQueries, allContainers, allDataProducts] = await Promise.all([
     getCollection('flows'),
     getCollection('events'),
     getCollection('commands'),
     getCollection('queries'),
+    getCollection('containers'),
+    getCollection('data-products'),
   ]);
 
   const allMessages = [...allEvents, ...allCommands, ...allQueries];
@@ -36,6 +38,8 @@ export const getFlows = async ({ getAllVersions = true }: Props = {}): Promise<F
   // 2. Build optimized maps
   const flowMap = createVersionedMap(allFlows);
   const messageMap = createVersionedMap(allMessages);
+  const containerMap = createVersionedMap(allContainers);
+  const dataProductMap = createVersionedMap(allDataProducts);
 
   // 3. Filter flows
   const targetFlows = allFlows.filter((flow) => {
@@ -54,6 +58,30 @@ export const getFlows = async ({ getAllVersions = true }: Props = {}): Promise<F
     const steps = flow.data.steps || [];
 
     const hydrateSteps = steps.map((step) => {
+      if (step.container) {
+        const pointer = step.container;
+        if (!pointer) return { ...step, type: 'node' };
+        const container = findInMap(containerMap, pointer.id, pointer.version);
+
+        return {
+          ...step,
+          type: 'container',
+          container: container ? [container] : [],
+        };
+      }
+
+      if (step.dataProduct) {
+        const pointer = step.dataProduct;
+        if (!pointer) return { ...step, type: 'node' };
+        const dataProduct = findInMap(dataProductMap, pointer.id, pointer.version);
+
+        return {
+          ...step,
+          type: 'data-products',
+          dataProduct: dataProduct ? [dataProduct] : [],
+        };
+      }
+
       if (!step.message) return { ...step, type: 'node' }; // Preserve existing step data for non-messages
 
       const message = findInMap(messageMap, step.message.id, step.message.version);

package/eventcatalog/src/utils/node-graphs/flows-node-graph.ts

@@ -26,6 +26,8 @@ interface Maps {
   messageMap: Map<string, any[]>;
   serviceMap: Map<string, any[]>;
   flowMap: Map<string, any[]>;
+  containerMap: Map<string, any[]>;
+  dataProductMap: Map<string, any[]>;
 }
 
 const getServiceNode = (step: any, serviceMap: Map<string, any[]>) => {
@@ -46,6 +48,26 @@ const getFlowNode = (step: any, flowMap: Map<string, any[]>) => {
   };
 };
 
+const getContainerNode = (step: any, containerMap: Map<string, any[]>) => {
+  const pointer = step.container;
+  const container = findInMap(containerMap, pointer.id, pointer.version);
+  return {
+    ...step,
+    type: container ? 'data' : 'step',
+    container,
+  };
+};
+
+const getDataProductNode = (step: any, dataProductMap: Map<string, any[]>) => {
+  const pointer = step.dataProduct;
+  const dataProduct = findInMap(dataProductMap, pointer.id, pointer.version);
+  return {
+    ...step,
+    type: dataProduct ? 'data-products' : 'step',
+    dataProduct,
+  };
+};
+
 const getMessageNode = (step: any, messageMap: Map<string, any[]>) => {
   const message = findInMap(messageMap, step.message.id, step.message.version);
   return {
@@ -97,6 +119,8 @@ const buildFlowGraphInternal = (
   const hydratedSteps = steps.map((step: any) => {
     if (step.service) return getServiceNode(step, maps.serviceMap);
     if (step.flow) return getFlowNode(step, maps.flowMap);
+    if (step.container) return getContainerNode(step, maps.containerMap);
+    if (step.dataProduct) return getDataProductNode(step, maps.dataProductMap);
     if (step.message) return getMessageNode(step, maps.messageMap);
     if (step.actor) return { ...step, type: 'actor', actor: step.actor };
     if (step.custom) return { ...step, type: 'custom', custom: step.custom };
@@ -159,6 +183,23 @@ const buildFlowGraphInternal = (
         version: step.message.data.version,
       });
     }
+    if (step.container?.data) {
+      node.data.data = { ...step.container.data };
+      node.data.container = { ...step.container, ...step.container.data };
+      node.data.contextMenu = buildContextMenuForResource({
+        collection: 'containers',
+        id: step.container.data.id,
+        version: step.container.data.version,
+      });
+    }
+    if (step.dataProduct?.data) {
+      node.data.dataProduct = { ...step.dataProduct, ...step.dataProduct.data };
+      node.data.contextMenu = buildContextMenuForResource({
+        collection: 'data-products',
+        id: step.dataProduct.data.id,
+        version: step.dataProduct.data.version,
+      });
+    }
     if (step.actor) {
       node.data.actor = { ...step.actor, ...step.actor.data };
       node.data = { ...node.data, ...step.actor };
@@ -214,12 +255,14 @@ const buildFlowGraphInternal = (
 export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
   const graph = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 200 });
 
-  const [flows, events, commands, queries, services] = await Promise.all([
+  const [flows, events, commands, queries, services, containers, dataProducts] = await Promise.all([
     getCollection('flows'),
     getCollection('events'),
     getCollection('commands'),
     getCollection('queries'),
     getCollection('services'),
+    getCollection('containers'),
+    getCollection('data-products'),
   ]);
 
   const flow = flows.find((flow) => flow.data.id === id && flow.data.version === version);
@@ -236,6 +279,8 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     messageMap: createVersionedMap(messages),
     serviceMap: createVersionedMap(services),
     flowMap: createVersionedMap(flows),
+    containerMap: createVersionedMap(containers),
+    dataProductMap: createVersionedMap(dataProducts),
   };
 
   const subFlowCache = new Map<string, { nodes: any[]; edges: any[] }>();

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.36.1",
+  "version": "3.36.3",
   "publishConfig": {
     "access": "public"
   },
@@ -106,9 +106,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
-    "@eventcatalog/sdk": "2.21.0",
-    "@eventcatalog/linter": "1.0.22",
-    "@eventcatalog/visualiser": "^3.20.0"
+    "@eventcatalog/linter": "1.0.23",
+    "@eventcatalog/visualiser": "^3.20.2",
+    "@eventcatalog/sdk": "2.21.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",