@eventcatalog/core 3.36.2 → 3.36.4

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.2";
+var version = "3.36.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-IO4U4MPC.js";
-import "../chunk-R5ZDI2JO.js";
+} from "../chunk-HF27CRFY.js";
+import "../chunk-NV7DNZ3X.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.2";
+var version = "3.36.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-L723FWAT.js";
-import "../chunk-IO4U4MPC.js";
+} from "../chunk-7WJEUZFM.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-R5ZDI2JO.js";
+import "../chunk-HF27CRFY.js";
+import "../chunk-NV7DNZ3X.js";
 import "../chunk-5T63CXKU.js";
 export {
   log_build_default as default

package/dist/{chunk-H6TGUW5O.js → chunk-6JY6QF7D.js}

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

package/dist/{chunk-L723FWAT.js → chunk-7WJEUZFM.js}

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

package/dist/{chunk-IO4U4MPC.js → chunk-HF27CRFY.js}

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

package/dist/{chunk-R5ZDI2JO.js → chunk-NV7DNZ3X.js}

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

package/dist/{chunk-SEAN3UND.js → chunk-XTJ636IF.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/docs/api/09-flow-api.md

@@ -261,7 +261,45 @@ Flows allow you to create [service nodes](/docs/services). Services link to your
 
 _[See example of Message node in a workflow](https://demo.eventcatalog.dev/visualiser/flows/CancelSubscription/0.0.1)._
 
+#### Container Nodes
 
+<AddedIn version="3.36.3" />
+
+Flows allow you to create [container (data store) nodes](/docs/development/guides/data/introduction). Containers link to your defined data stores in EventCatalog. The container's sidebar will automatically show a "Flows" section linking back to any flow that references it.
+
+```md title="Example"
+---
+  steps:
+    - id: "orders_db"
+      title: "Orders DB"
+      container:
+        id: "orders-db"
+        version: "1.0.0"
+      next_step:
+        id: "next_step"
+        label: "Persist order records"
+---
+```
+
+#### Data Product Nodes
+
+<AddedIn version="3.36.3" />
+
+Flows allow you to create [data product nodes](/docs/development/guides/data-products/introduction). Data products link to your defined data products in EventCatalog. The data product's sidebar will automatically show a "Flows" section linking back to any flow that references it.
+
+```md title="Example"
+---
+  steps:
+    - id: "order_analytics"
+      title: "Order Analytics"
+      dataProduct:
+        id: "order-analytics"
+        version: "1.0.0"
+      next_step:
+        id: "next_step"
+        label: "Prepare fulfillment KPIs"
+---
+```
 
 ## Optional fields {#optional-fields}
 

package/dist/docs/api/11-data-api.md

@@ -235,7 +235,12 @@ Options:
 | `changelog` | `object` | No | An object with a `visible` property to show/hide the changelog button |  
 | `owners` | `object` | No | An object with a `visible` property to show/hide the owners section |  
 | `attachments` | `object` | No | An object with a `visible` property to show/hide the attachments section |  
-| `repository` | `object` | No | An object with a `visible` property to show/hide the repository section |  
+| `repository` | `object` | No | An object with a `visible` property to show/hide the repository section |
+| `flows` | `object` | No | An object with a `visible` property to show/hide the flows section |
+
+**`flows`** <AddedIn version="3.36.3" />
+
+Shows which flows reference this data store as a step. Flows are surfaced automatically when a [flow step](/docs/development/guides/flows/flow-nodes) uses the `container` node type to reference this resource.
 
 ### `attachments` {#attachments}
 

package/dist/docs/development/guides/flows/01-introduction.md

@@ -12,7 +12,7 @@ import AddedIn from '@site/src/components/MDX/AddedIn';
 
 <AddedIn version="2.5.0" />
 
-Flows are a way to document business workflows in your organization. You can reuse your documented resources (e.g services, messages, data stores) in your flows.
+Flows are a way to document business workflows in your organization. You can reuse your documented resources (e.g services, messages, data stores, data products) in your flows.
 
 An example of a flow would be when a user makes a payment to an e-commence system, this interaction triggers many parts of the architecture (services, external services, commands, queries and events):
 

package/dist/docs/development/guides/flows/03-flow-nodes.md

@@ -13,9 +13,7 @@ import AddedIn from '@site/src/components/MDX/AddedIn';
 
 Flow nodes are the building blocks of flows. They are used to represent the different steps in a flow.
 
-With flow nodes you can reference your services, events, commands and queries, external systems, users (actors) or even create your own custom nodes.
-
-EventCatalog (> 2.34.2) you can also reference flows as a node type.
+With flow nodes you can reference your services, events, commands and queries, external systems, users (actors), data stores (containers), data products, or create your own custom nodes.
 
 ## Common step properties
 
@@ -31,7 +29,7 @@ Every flow step (regardless of node type) supports these properties:
 | `next_steps` | [Step reference](#connecting-steps)[] | No | Multiple next steps for branching (cannot be used with `next_step`) |
 
 :::tip Type exclusivity rule
-Each step can only use **one** node type property. You cannot combine `message`, `service`, `flow`, `actor`, `custom`, or `externalSystem` on the same step.
+Each step can only use **one** node type property. You cannot combine `message`, `service`, `flow`, `container`, `dataProduct`, `actor`, `custom`, or `externalSystem` on the same step.
 :::
 
 ## Connecting steps {#connecting-steps}
@@ -67,6 +65,8 @@ next_steps:
 - [message](#message) — Represents an event, command or query resource in EventCatalog
 - [service](#service) — Represents a service resource in EventCatalog
 - [flow](#flow) — Represents a flow in EventCatalog (added in EventCatalog 2.34.2)
+- [container](#container) — Represents a data store (container) resource in EventCatalog
+- [dataProduct](#dataproduct) — Represents a data product resource in EventCatalog
 - [custom](#custom) — A custom node type with configurable title, summary, icon, properties and more
 
 
@@ -202,6 +202,60 @@ Click a flow node in the visualiser to expand the referenced flow's steps inline
 
 ---
 
+### container
+
+<AddedIn version="3.36.3" />
+
+Represents and refers to a data store (container) resource in EventCatalog. When a flow references a container, the container's sidebar automatically shows a "Flows" section linking back to the referencing flow.
+
+#### Container properties
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | **Yes** | The id of the container in your catalog |
+| `version` | `string` | No | The version to reference (defaults to `latest`) |
+
+```yml
+steps:
+  - id: "orders_db"
+    title: "Orders DB"
+    container:
+      id: "orders-db"
+      version: "1.0.0"
+    next_step:
+      id: "next_step"
+      label: "Persist order records"
+```
+
+---
+
+### dataProduct
+
+<AddedIn version="3.36.3" />
+
+Represents and refers to a data product resource in EventCatalog. When a flow references a data product, the data product's sidebar automatically shows a "Flows" section linking back to the referencing flow.
+
+#### Data product properties
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| `id` | `string` | **Yes** | The id of the data product in your catalog |
+| `version` | `string` | No | The version to reference (defaults to `latest`) |
+
+```yml
+steps:
+  - id: "order_analytics"
+    title: "Order Analytics"
+    dataProduct:
+      id: "order-analytics"
+      version: "1.0.0"
+    next_step:
+      id: "next_step"
+      label: "Prepare fulfillment KPIs"
+```
+
+---
+
 ### custom
 
 <AddedIn version="2.30.6" />

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.2";
+var version = "3.36.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,7 +1,7 @@
 import {
-  runMigrations
-} from "./chunk-XUAF2H54.js";
-import "./chunk-CA4U2JP7.js";
+  log_build_default
+} from "./chunk-7WJEUZFM.js";
+import "./chunk-4UVFXLPI.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-WAJIJEI3.js";
@@ -12,10 +12,10 @@ import {
   watch
 } from "./chunk-K3ZVEX2Y.js";
 import {
-  log_build_default
-} from "./chunk-L723FWAT.js";
-import "./chunk-IO4U4MPC.js";
-import "./chunk-4UVFXLPI.js";
+  runMigrations
+} from "./chunk-XUAF2H54.js";
+import "./chunk-CA4U2JP7.js";
+import "./chunk-HF27CRFY.js";
 import {
   catalogToAstro
 } from "./chunk-YDXB3BD2.js";
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-H6TGUW5O.js";
+} from "./chunk-6JY6QF7D.js";
 import {
   logger
-} from "./chunk-SEAN3UND.js";
+} from "./chunk-XTJ636IF.js";
 import {
   VERSION
-} from "./chunk-R5ZDI2JO.js";
+} from "./chunk-NV7DNZ3X.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.2";
+var version = "3.36.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-H6TGUW5O.js";
-import "./chunk-SEAN3UND.js";
-import "./chunk-R5ZDI2JO.js";
+} from "./chunk-6JY6QF7D.js";
+import "./chunk-XTJ636IF.js";
+import "./chunk-NV7DNZ3X.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.2";
+var version = "3.36.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-SEAN3UND.js";
-import "../chunk-R5ZDI2JO.js";
+} from "../chunk-XTJ636IF.js";
+import "../chunk-NV7DNZ3X.js";
 export {
   logger
 };

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -6,10 +6,15 @@ import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
+import { randomUUID } from 'node:crypto';
+import { parseMdxBooleanProp } from '@utils/markdown';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
-const { id, version = 'latest', maxHeight, includeKey = true, mode = 'simple', walkthrough = true, search = true } = Astro.props;
+const { id, version = 'latest', maxHeight, mode = 'simple' } = Astro.props;
+const includeKey = parseMdxBooleanProp(Astro.props.legend ?? Astro.props.includeKey, true);
+const search = parseMdxBooleanProp(Astro.props.search, false);
+const walkthrough = parseMdxBooleanProp(Astro.props.walkthrough, false);
 
 // Find the flow for the given id and version
 const flows = await getFlows();
@@ -28,6 +33,7 @@ const { nodes, edges } = await getNodesAndEdges({
 const resourceKey = buildResourceKey('flows', id, flow.data.version);
 const savedLayout = await loadSavedLayout(resourceKey);
 const nodesWithLayout = applyLayoutToNodes(nodes, savedLayout);
+const portalId = `${id}-${flow.data.version}-flow-${randomUUID()}-portal`;
 ---
 
 {
@@ -45,7 +51,7 @@ const nodesWithLayout = applyLayoutToNodes(nodes, savedLayout);
 
 <div
   class="h-[30em] my-6 mb-12 w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
-  id={`${id}-portal`}
+  id={portalId}
   style={{
     maxHeight: maxHeight ? `${maxHeight}em` : `30em`,
   }}
@@ -57,12 +63,10 @@ const nodesWithLayout = applyLayoutToNodes(nodes, savedLayout);
     id={id}
     nodes={nodesWithLayout}
     edges={edges}
-    hrefLabel={'View in visualizer'}
-    href={isVisualiserEnabled() ? `/visualiser/flows/${id}/${version}` : undefined}
-    linkTo={'visualiser'}
+    mode={mode}
     includeKey={includeKey}
-    footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`
     client:only="react"
+    portalId={portalId}
     showFlowWalkthrough={walkthrough}
     showSearch={search}
     isChatEnabled={isChatEnabled}

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/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -9,7 +9,7 @@ import mdxComponents from '@components/MDX/components';
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl, buildEditUrlForResource } from '@utils/url-builder';
 import { resourceToCollectionMap } from '@utils/collections/util';
-import { getMDXComponentsByName } from '@utils/markdown';
+import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
 import { getAdjacentPages, getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
@@ -22,7 +22,10 @@ const doc = props.data;
 const { Content, headings } = await render(props as any);
 const currentSlug = props.id;
 
-const nodeGraphs = getMDXComponentsByName(props.body, 'NodeGraph') || [];
+const nodeGraphs =
+  getMDXComponentsByName(props.body, 'NodeGraph')?.filter((nodeGraph: any) => {
+    return nodeGraph.id && nodeGraph.version && nodeGraph.type;
+  }) || [];
 
 const { prev, next } = await getAdjacentPages(currentSlug);
 
@@ -152,8 +155,10 @@ const editUrl =
                     version={nodeGraph.version}
                     collection={collection}
                     title={nodeGraph.title}
-                    mode="simple"
+                    mode={nodeGraph.mode || 'simple'}
                     linksToVisualiser={true}
+                    showSearch={parseMdxBooleanProp(nodeGraph.search, true)}
+                    showLegend={parseMdxBooleanProp(nodeGraph.legend, true)}
                     href={
                       isVisualiserEnabled()
                         ? {

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -43,7 +43,7 @@ import {
   isRSSEnabled,
   isExportPDFEnabled,
 } from '@utils/feature';
-import { getMDXComponentsByName } from '@utils/markdown';
+import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
 
 import type { CollectionTypes } from '@types';
 
@@ -265,10 +265,40 @@ const generatePromptForResource = (props: any) => {
 };
 
 // Handle node graphs in the markdown
-let nodeGraphs = getMDXComponentsByName(props.body || '', 'NodeGraph') || [];
+const currentPageNodeGraph = {
+  id: props.data.id,
+  version: props.data.version,
+  type: collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap],
+};
+
+let nodeGraphs =
+  getMDXComponentsByName(props.body || '', 'NodeGraph')?.map((nodeGraph: any) => {
+    const graph = nodeGraph.id === undefined ? { ...currentPageNodeGraph, ...nodeGraph } : nodeGraph;
+
+    return {
+      ...graph,
+      search: parseMdxBooleanProp(nodeGraph.search, true),
+      legend: parseMdxBooleanProp(nodeGraph.legend, true),
+    };
+  }) || [];
+const flowEmbeds = getMDXComponentsByName(props.body || '', 'Flow') || [];
 
 // Get props for the node graph (when no id is passed, we assume its the current page)
-const nodeGraphPropsForPage = nodeGraphs.find((nodeGraph: any) => nodeGraph.id === undefined) || ({} as any);
+const hasCurrentFlowEmbed =
+  props.collection === 'flows' &&
+  flowEmbeds.some((flowEmbed: any) => {
+    const flowId = flowEmbed.id;
+    const flowVersion = flowEmbed.version || 'latest';
+
+    return flowId === props.data.id && (flowVersion === 'latest' || flowVersion === props.data.version);
+  });
+const hasCurrentPageNodeGraph = nodeGraphs.some((nodeGraph: any) => {
+  return (
+    nodeGraph.id === currentPageNodeGraph.id &&
+    nodeGraph.version === currentPageNodeGraph.version &&
+    nodeGraph.type === currentPageNodeGraph.type
+  );
+});
 
 const shouldRenderVersionList =
   shouldRenderSideBarSection(props, 'versions') && props.data.versions && props.data.versions.length > 1;
@@ -287,15 +317,14 @@ const httpMethodStyle = httpOperation?.method
   ? httpMethodColors[httpOperation.method.toUpperCase()] || { background: '#6b7280', color: '#ffffff' }
   : undefined;
 
-// This will render the graph for this page
-nodeGraphs.push({
-  id: props.data.id,
-  version: props.data.version,
-  type: collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap],
-  ...nodeGraphPropsForPage,
-  search: nodeGraphPropsForPage?.search ? nodeGraphPropsForPage.search === 'true' : true,
-  legend: nodeGraphPropsForPage?.legend ? nodeGraphPropsForPage.legend === 'true' : true,
-});
+// This will render the graph for this page. Flow pages can already render their graph explicitly via <Flow />.
+if (!hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
+  nodeGraphs.push({
+    ...currentPageNodeGraph,
+    search: true,
+    legend: true,
+  });
+}
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>

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/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/markdown.ts

@@ -2,15 +2,15 @@
 // rarely used, but useful for components that need to know how many times
 // the user wants to render a component in a markdown file
 export const getMDXComponentsByName = (document: string, componentName: string) => {
-  // Define regex pattern to match <SchemaViewer ... />
-  const pattern = new RegExp(`<${componentName}\\s+([^>]*)\\/>`, 'g');
+  // Define regex pattern to match self-closing MDX components with or without props.
+  const pattern = new RegExp(`<${componentName}(\\s+[^>]*)?\\s*\\/>`, 'g');
 
   // Find all matches of the pattern
   const matches = [...document.matchAll(pattern)];
 
   // Extract the properties of each SchemaViewer
   const components = matches.map((match) => {
-    const propsString = match[1];
+    const propsString = match[1] || '';
     const props = {};
 
     // Use regex to extract key-value pairs from propsString
@@ -28,3 +28,8 @@ export const getMDXComponentsByName = (document: string, componentName: string)
 
   return components;
 };
+
+export const parseMdxBooleanProp = (value: unknown, defaultValue: boolean) => {
+  if (value === undefined) return defaultValue;
+  return value === true || value === 'true';
+};

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.2",
+  "version": "3.36.4",
   "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.3",
+    "@eventcatalog/sdk": "2.21.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",