@eventcatalog/core 3.36.3 → 3.36.5

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-4U6TPQGC.js";
-import "../chunk-DTE424XY.js";
+} from "../chunk-VDTDZ4XR.js";
+import "../chunk-TGSOUKM7.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.3";
+var version = "3.36.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

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

package/dist/{chunk-SPFT3VTV.js → chunk-2WL2AHTJ.js}

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

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

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

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

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-4U6TPQGC.js";
+} from "./chunk-VDTDZ4XR.js";
 import {
   countResources,
   serializeCounts

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

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

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

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-DTE424XY.js";
+} from "./chunk-TGSOUKM7.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/bring-your-own-documentation/custom-pages/03-components.md

@@ -36,6 +36,10 @@ This is my custom documentation page, here is a NodeGraph:
 Rest of my markdown content...
 ```
 
+:::note Required props
+In custom documentation pages, `id`, `version`, and `type` are all required. A `<NodeGraph />` missing any of these props is silently ignored.
+:::
+
 #### NodeGraph props
 
 | Prop | Type | Required | Description |
@@ -43,4 +47,7 @@ Rest of my markdown content...
 | `id` | string | Yes | The id of the resource (domain, service, or message) |
 | `version` | string | Yes | The version of the resource |
 | `type` | string | Yes | The type of the resource (domain, service, command, event, query) |
+| `search` | boolean | No | Show or hide the search bar. Accepts `true`/`false` or `"true"`/`"false"`. Defaults to `true`. |
+| `legend` | boolean | No | Show or hide the legend. Accepts `true`/`false` or `"true"`/`"false"`. Defaults to `true`. |
+| `mode` | string | No | `"simple"` or `"full"`. Defaults to `"simple"`. |
 

package/dist/docs/development/components/components/08-flow.md

@@ -14,20 +14,29 @@ Embed flows into your pages.
 **Example**
 
 ```jsx /domains/MyDomain/index.mdx
-<Flow id="CancelSubscription" version="latest" includeKey={false} />
+<Flow id="CancelSubscription" version="latest" legend={false} />
 ```
 
 ### Output
 ![Example output](./img/flows.png)
 
 ### Props
+
+<AddedIn version="3.36.3" />
+
 | Name                    | Type      | Default           | Description                                                       |
 | ----------------------- | --------- | ----------------- | ----------------------------------------------------------------- |
 | `id` (required)                 | `string`  | (empty)           | Flow id to render in your page                               |
-| `version` (optional)             | `string`  | "latest"           | Version of the flow to render. Supports exact version and semver versions (e.g 1.0.x, ^1.3.5, latest)|
-| `includeKey` (optional)             | `boolean`  | true           | Renders the diagram key on the UI |
-| `search` (optional)             | `boolean`  | true           | Show or hide the search bar in the flow _(Added in v2.50.3)_ |
-| `mode` (optional)             | `string` ("simple" or "full")  | "simple"           | `simple` will render the flow in a simplfied view not rendering descriptions. Full will render the flow in a full view, rendering descriptions and other information _(Added in v2.50.3)_|
+| `version` (optional)             | `string`  | `"latest"`           | Version of the flow to render. Supports exact version and semver versions (e.g 1.0.x, ^1.3.5, latest)|
+| `legend` (optional)             | `boolean`  | `true`           | Show or hide the diagram key. Accepts `true`/`false` or `"true"`/`"false"`. `includeKey` is still accepted as an alias. |
+| `search` (optional)             | `boolean`  | `false`           | Show or hide the search bar in the flow. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `walkthrough` (optional)             | `boolean`  | `false`           | Show or hide the step walkthrough controls. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `mode` (optional)             | `string` ("simple" or "full")  | `"simple"`           | `simple` renders the flow in a simplified view without descriptions. `full` renders descriptions and other information.|
+
+:::tip Multiple embeds per page
+You can embed multiple `<Flow />` components on the same page and each one renders independently.
+:::
+
 
 ## Interactive controls
 

package/dist/docs/development/components/components/12-nodegraph.md

@@ -25,12 +25,15 @@ The `<NodeGraph/>` component is supported in domains, services, and all messages
 ![Example output](./img/nodegraph.png)
 
 #### Props
+
+<AddedIn version="3.36.3" />
+
 | Name                    | Type      | Default           | Description                                                       |
 | ----------------------- | --------- | ----------------- | ----------------------------------------------------------------- |
-| `maxHeight` (optional)             | `string`  | 30           | Max height to set the nodegraph in your document|
-| `search` (optional)             | `boolean`  | true           | Show or hide the search bar in the nodegraph _(Added in v2.50.3)_ |
-| `legend` (optional)             | `boolean`  | true           | Show or hide the legend in the nodegraph _(Added in v2.50.3)_ |
-| `mode` (optional)             | `string` ("simple" or "full")  | "simple"           | `simple` will render the nodegraph in a simplfied view not rendering descriptions. Full will render the nodegraph in a full view, rendering descriptions and other information _(Added in v2.50.3)_|
+| `maxHeight` (optional)             | `string`  | `30`           | Max height to set the nodegraph in your document|
+| `search` (optional)             | `boolean`  | `true`           | Show or hide the search bar. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `legend` (optional)             | `boolean`  | `true`           | Show or hide the legend. Accepts `true`/`false` or `"true"`/`"false"`. |
+| `mode` (optional)             | `string` ("simple" or "full")  | `"simple"`           | `simple` renders a simplified view without descriptions. `full` renders descriptions and other information.|
 
 
 ## Interactive controls

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

package/dist/eventcatalog.js

@@ -13,8 +13,8 @@ import {
 } from "./chunk-K3ZVEX2Y.js";
 import {
   log_build_default
-} from "./chunk-ZE3NM2MH.js";
-import "./chunk-4U6TPQGC.js";
+} from "./chunk-J3ZV5QI5.js";
+import "./chunk-VDTDZ4XR.js";
 import "./chunk-4UVFXLPI.js";
 import {
   catalogToAstro
@@ -28,13 +28,13 @@ import {
 } from "./chunk-ULZYHF3V.js";
 import {
   generate
-} from "./chunk-6L5LHQ3C.js";
+} from "./chunk-CZV4WMQ2.js";
 import {
   logger
-} from "./chunk-SPFT3VTV.js";
+} from "./chunk-2WL2AHTJ.js";
 import {
   VERSION
-} from "./chunk-DTE424XY.js";
+} from "./chunk-TGSOUKM7.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.3";
+var version = "3.36.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-6L5LHQ3C.js";
-import "./chunk-SPFT3VTV.js";
-import "./chunk-DTE424XY.js";
+} from "./chunk-CZV4WMQ2.js";
+import "./chunk-2WL2AHTJ.js";
+import "./chunk-TGSOUKM7.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.3";
+var version = "3.36.5";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-SPFT3VTV.js";
-import "../chunk-DTE424XY.js";
+} from "../chunk-2WL2AHTJ.js";
+import "../chunk-TGSOUKM7.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/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()
                         ? {
@@ -177,7 +182,7 @@ const editUrl =
                     class="group flex flex-col border border-[rgb(var(--ec-page-border))] rounded-lg p-4 hover:border-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors w-full sm:w-1/2"
                   >
                     <span class="text-sm text-[rgb(var(--ec-page-text-muted))] mb-1">Previous</span>
-                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-primary-600 transition-colors">
+                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))] transition-colors">
                       {prev.label}
                     </span>
                   </a>
@@ -193,7 +198,7 @@ const editUrl =
                     class="group flex flex-col items-end text-right border border-[rgb(var(--ec-page-border))] rounded-lg p-4 hover:border-[rgb(var(--ec-content-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors w-full sm:w-1/2"
                   >
                     <span class="text-sm text-[rgb(var(--ec-page-text-muted))] mb-1">Next</span>
-                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-primary-600 transition-colors">
+                    <span class="font-medium text-[rgb(var(--ec-page-text))] group-hover:text-[rgb(var(--ec-accent))] transition-colors">
                       {next.label}
                     </span>
                   </a>

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/root-index.astro

@@ -99,28 +99,28 @@ if (!isCustomDocsEnabled()) {
 ---
 
 <VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
-  <body class="min-h-screen font-inter">
+  <body class="min-h-screen font-inter bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text))]">
     <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
       <div class="mb-12">
         <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
           <div>
             <div class="flex flex-wrap items-center gap-3 mb-3">
-              <h1 class="text-4xl font-semibold text-gray-900 font-inter">Custom Documentation</h1>
+              <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] font-inter">Custom Documentation</h1>
               <div
                 class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.3)] shadow-xs"
               >
                 Pro feature
               </div>
             </div>
-            <p class="text-base mb-0 text-gray-600 max-w-3xl">
+            <p class="text-base mb-0 text-[rgb(var(--ec-page-text-muted))] max-w-3xl">
               Add custom documentation to EventCatalog to create a unified source of truth for your team. Document your
               architecture decisions, patterns, and guidelines.
             </p>
           </div>
           <div class="flex space-x-4 shrink-0">
             <a
-              href="https://www.eventcatalog.dev/docs/custom-documentation"
-              class="inline-flex items-center justify-center px-5 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+              href="https://www.eventcatalog.dev/docs/development/bring-your-own-documentation/custom-pages/introduction"
+              class="inline-flex items-center justify-center px-5 py-2 border border-[rgb(var(--ec-page-border))] text-sm font-medium rounded-md text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
             >
               Read documentation &rarr;
             </a>
@@ -128,7 +128,7 @@ if (!isCustomDocsEnabled()) {
               !isCustomDocsEnabled() && (
                 <a
                   href="https://www.eventcatalog.dev/pro/trial"
-                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-xs"
+                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-[rgb(var(--ec-button-text))] bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-xs"
                 >
                   Start 14-day trial
                 </a>
@@ -138,58 +138,62 @@ if (!isCustomDocsEnabled()) {
         </div>
       </div>
 
-      <h2 class="text-2xl font-semibold mb-2 text-gray-900">Setup Guide</h2>
-      <p class="text-gray-600 mb-8 max-w-3xl">
+      <h2 class="text-2xl font-semibold mb-2 text-[rgb(var(--ec-page-text))]">Setup Guide</h2>
+      <p class="text-[rgb(var(--ec-page-text-muted))] mb-8 max-w-3xl">
         Custom documentation let's you bring any documentation into EventCatalog. This is useful for documenting your architecture
         decisions, patterns, and guidelines. Follow these steps to get started:
       </p>
 
       <div class="space-y-10 mb-12">
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               1
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Create the content structure</h3>
-              <p class="text-gray-600 mb-4">Create a folder structure in your directory to organize your documentation.</p>
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Create the content structure</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
+                Create a folder structure in your directory to organize your documentation.
+              </p>
               <Code code={folderStructureExample} lang="bash" frame="terminal" />
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               2
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Add MDX files</h3>
-              <p class="text-gray-600 mb-4">Create MDX files with frontmatter and markdown content.</p>
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Add MDX files</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">Create MDX files with frontmatter and markdown content.</p>
               <Code code={mdxFileExample} lang="mdx" frame="terminal" />
             </div>
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               3
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Update your eventcatalog.config.js file</h3>
-              <p class="text-gray-600 mb-4">
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Update your eventcatalog.config.js file</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                 Add the customDocs configuration to your eventcatalog.config.js file to define your sidebar structure.
               </p>
               <Code code={configExample} lang="js" frame="terminal" />
-              <p class="text-gray-600 mt-4">This configuration defines the sidebar structure for your custom documentation:</p>
-              <ul class="list-disc list-inside text-gray-600 mt-2 ml-2 space-y-1">
+              <p class="text-[rgb(var(--ec-page-text-muted))] mt-4">
+                This configuration defines the sidebar structure for your custom documentation:
+              </p>
+              <ul class="list-disc list-inside text-[rgb(var(--ec-page-text-muted))] mt-2 ml-2 space-y-1">
                 <li>
                   <strong>label</strong>: The display name for each sidebar section
                 </li>
@@ -210,25 +214,25 @@ if (!isCustomDocsEnabled()) {
           </div>
         </div>
 
-        <div class="bg-white p-6 rounded-lg shadow-xs border border-gray-200">
+        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
           <div class="flex items-start gap-4">
             <div
-              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 text-lg font-medium shrink-0 mt-1"
+              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
             >
               4
             </div>
             <div class="w-full">
-              <h3 class="text-xl font-semibold text-gray-900 mb-3">Restart EventCatalog</h3>
-              <p class="text-gray-600 mb-4">
+              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Restart EventCatalog</h3>
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                 After configuring your documentation, restart EventCatalog to see your custom documentation.
               </p>
               <div class="mb-4">
                 <Code code="npm run dev" lang="bash" frame="terminal" />
               </div>
-              <p class="text-gray-600 mb-4">
+              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                 Once restarted, you'll see your custom documentation displayed with the sidebar structure you defined:
               </p>
-              <div class="border border-gray-200 rounded-lg overflow-hidden">
+              <div class="border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden">
                 <img src="/images/custom-docs-placeholder.png" alt="Example of custom documentation interface" class="w-full" />
               </div>
             </div>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -150,7 +150,7 @@ const navigationItems = [
     href: getDefaultUrl('docs/custom', '/docs/custom'),
     current: currentPath.includes('/docs/custom'),
     isPremium: true,
-    visible: isCustomDocsEnabled(),
+    visible: isCustomDocsEnabled() && customDocs.length > 0,
   },
   {
     id: '/schemas/explorer',

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/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/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.36.3",
+  "version": "3.36.5",
   "publishConfig": {
     "access": "public"
   },
@@ -107,8 +107,8 @@
     "uuid": "^10.0.0",
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.0.23",
-    "@eventcatalog/visualiser": "^3.20.2",
-    "@eventcatalog/sdk": "2.21.1"
+    "@eventcatalog/sdk": "2.21.1",
+    "@eventcatalog/visualiser": "^3.20.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",