@eventcatalog/core 4.6.3 → 4.7.0

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.6.3";
+var version = "4.7.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-PWY4SP6L.js";
-import "../chunk-LB5VXS6X.js";
+} from "../chunk-ZU5WMIH4.js";
+import "../chunk-3HMY77MN.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.6.3";
+var version = "4.7.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-54KFOI6Z.js";
-import "../chunk-PWY4SP6L.js";
+} from "../chunk-WJVRBHVC.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-LB5VXS6X.js";
+import "../chunk-ZU5WMIH4.js";
+import "../chunk-3HMY77MN.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-LB5VXS6X.js → chunk-3HMY77MN.js}

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

package/dist/{chunk-4BBXOL6K.js → chunk-CZ6C3FBV.js}

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

package/dist/{chunk-FZJDCQZE.js → chunk-HRSTURLY.js}

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

package/dist/{chunk-54KFOI6Z.js → chunk-WJVRBHVC.js}

@@ -1,10 +1,10 @@
-import {
-  raiseEvent
-} from "./chunk-PWY4SP6L.js";
 import {
   countResources,
   serializeCounts
 } from "./chunk-K2XIENVT.js";
+import {
+  raiseEvent
+} from "./chunk-ZU5WMIH4.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-PWY4SP6L.js → chunk-ZU5WMIH4.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-LB5VXS6X.js";
+} from "./chunk-3HMY77MN.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-LB5VXS6X.js";
+} from "./chunk-3HMY77MN.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -1,6 +1,7 @@
 import {
   log_build_default
-} from "./chunk-54KFOI6Z.js";
+} from "./chunk-WJVRBHVC.js";
+import "./chunk-K2XIENVT.js";
 import {
   FederationConflictError,
   federateCatalog
@@ -20,10 +21,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-4BBXOL6K.js";
+} from "./chunk-CZ6C3FBV.js";
 import {
   logger
-} from "./chunk-FZJDCQZE.js";
+} from "./chunk-HRSTURLY.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -33,8 +34,7 @@ import {
 import {
   watch
 } from "./chunk-CAJUIMDJ.js";
-import "./chunk-PWY4SP6L.js";
-import "./chunk-K2XIENVT.js";
+import "./chunk-ZU5WMIH4.js";
 import {
   createAstroDevLineFilter,
   createAstroLineFilter
@@ -45,7 +45,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-LB5VXS6X.js";
+} from "./chunk-3HMY77MN.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-4BBXOL6K.js";
-import "./chunk-FZJDCQZE.js";
-import "./chunk-LB5VXS6X.js";
+} from "./chunk-CZ6C3FBV.js";
+import "./chunk-HRSTURLY.js";
+import "./chunk-3HMY77MN.js";
 import "./chunk-6QENHZZP.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 = "4.6.3";
+var version = "4.7.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-FZJDCQZE.js";
-import "../chunk-LB5VXS6X.js";
+} from "../chunk-HRSTURLY.js";
+import "../chunk-3HMY77MN.js";
 export {
   logger
 };

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

@@ -22,6 +22,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForChannel } from '@utils/node-graphs/channel-node-graph';
 import config from '@config';
 import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
@@ -79,6 +80,7 @@ const getNodesAndEdgesFunctions = {
   domains: getNodesAndEdgesForDomain,
   flows: getNodesAndEdgesForFlows,
   containers: getNodesAndEdgesForContainer,
+  channels: getNodesAndEdgesForChannel,
   'data-products': getNodesAndEdgesForDataProduct,
   systems: getNodesAndEdgesForSystem,
 };

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

@@ -13,7 +13,7 @@ import {
   removeFavorite as removeFavoriteAction,
   type FavoriteItem,
 } from '@stores/favorites-store';
-import { canCollapseGroup, getBadgeClasses, getGroupLabel, isGroupCollapsed } from './utils';
+import { canCollapseGroup, findNodeKeyByUrl, getBadgeClasses, getGroupLabel, isGroupCollapsed } from './utils';
 import { resolveIconUrl } from '@utils/icon';
 
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
@@ -201,86 +201,9 @@ export default function NestedSideBar() {
   /**
    * Find a node key by matching URL patterns
    */
-  const findNodeKeyByUrl = useCallback(
+  const findNodeKeyForUrl = useCallback(
     (url: string): string | null => {
-      // Strip the base path so patterns always match against /docs/..., /visualiser/..., etc.
-      const normalizedUrl = stripBasePath(url);
-
-      // URL patterns to match resources with version
-      const urlPatternsWithVersion = [
-        // Domains
-        { pattern: /^\/docs\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
-        { pattern: /^\/visualiser\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
-        { pattern: /^\/architecture\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
-        // Systems (key prefix is `system`, url segment is `systems`).
-        // The visualiser pattern also matches the System Diagram
-        // (/visualiser/systems/:id/:version/context) since it is not end-anchored.
-        { pattern: /^\/docs\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
-        { pattern: /^\/visualiser\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
-        { pattern: /^\/architecture\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
-        // Agents
-        { pattern: /^\/docs\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
-        { pattern: /^\/visualiser\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
-        // Decision Records
-        { pattern: /^\/docs\/adrs\/([^/]+)\/([^/]+)/, type: 'adr' },
-        // Services
-        { pattern: /^\/docs\/services\/([^/]+)\/([^/]+)/, type: 'service' },
-        { pattern: /^\/architecture\/services\/([^/]+)\/([^/]+)/, type: 'service' },
-        { pattern: /^\/visualiser\/services\/([^/]+)\/([^/]+)/, type: 'service' },
-        // Messages (events, commands, queries) - note: keys use singular form
-        { pattern: /^\/docs\/events\/([^/]+)\/([^/]+)/, type: 'event' },
-        { pattern: /^\/docs\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
-        { pattern: /^\/docs\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
-        { pattern: /^\/visualiser\/messages\/([^/]+)\/([^/]+)/, type: 'message' },
-        { pattern: /^\/visualiser\/events\/([^/]+)\/([^/]+)/, type: 'event' },
-        { pattern: /^\/visualiser\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
-        { pattern: /^\/visualiser\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
-        // Containers
-        { pattern: /^\/docs\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
-        { pattern: /^\/visualiser\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
-        // Flows
-        { pattern: /^\/docs\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
-        { pattern: /^\/visualiser\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
-        // Data Products
-        { pattern: /^\/docs\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
-        { pattern: /^\/visualiser\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
-        // Entities
-        { pattern: /^\/docs\/entities\/([^/]+)\/([^/]+)/, type: 'entity' },
-      ];
-
-      // URL patterns without version (language pages, etc)
-      const urlPatternsWithoutVersion = [{ pattern: /^\/docs\/domains\/([^/]+)\/language/, type: 'domain' }];
-
-      // First try to match patterns with version
-      for (const { pattern, type } of urlPatternsWithVersion) {
-        const match = normalizedUrl.match(pattern);
-        if (match) {
-          const id = match[1];
-          const version = match[2];
-
-          // First try with version
-          const keyWithVersion = `${type}:${id}:${version}`;
-          if (nodes[keyWithVersion]) {
-            return keyWithVersion;
-          }
-
-          // Fallback to lookup without version (for latest)
-          const foundNodeKey = nodeLookup.get(`${type}:${id}`);
-          if (foundNodeKey) return foundNodeKey;
-        }
-      }
-
-      // Then try patterns without version
-      for (const { pattern, type } of urlPatternsWithoutVersion) {
-        const match = normalizedUrl.match(pattern);
-        if (match) {
-          const id = match[1];
-          const foundNodeKey = nodeLookup.get(`${type}:${id}`);
-          if (foundNodeKey) return foundNodeKey;
-        }
-      }
-
-      return null;
+      return findNodeKeyByUrl(stripBasePath(url), nodes, nodeLookup);
     },
     [nodeLookup, nodes]
   );
@@ -337,7 +260,7 @@ export default function NestedSideBar() {
    */
   const findAndNavigateToUrl = useCallback(
     (url: string) => {
-      const foundNodeKey = findNodeKeyByUrl(url);
+      const foundNodeKey = findNodeKeyForUrl(url);
 
       if (foundNodeKey) {
         setNavigationStack((currentStack) => {
@@ -373,7 +296,7 @@ export default function NestedSideBar() {
       }
       return false;
     },
-    [findNodeKeyByUrl, tryConnectStack, resolveRef, roots]
+    [findNodeKeyForUrl, tryConnectStack, resolveRef, roots]
   );
 
   /**
@@ -393,7 +316,7 @@ export default function NestedSideBar() {
     }
 
     const savedState = loadState();
-    const targetKey = findNodeKeyByUrl(currentUrl);
+    const targetKey = findNodeKeyForUrl(currentUrl);
 
     let finalStack: NavigationLevel[] | null = null;
 
@@ -432,7 +355,7 @@ export default function NestedSideBar() {
     }
 
     setIsInitialized(true);
-  }, [data, roots, isInitialized, buildStackFromPath, findNodeKeyByUrl, tryConnectStack, resolveRef]);
+  }, [data, roots, isInitialized, buildStackFromPath, findNodeKeyForUrl, tryConnectStack, resolveRef]);
 
   /**
    * Save state whenever navigation changes
@@ -510,7 +433,7 @@ export default function NestedSideBar() {
     return stripBasePath(left).replace(/\/$/, '') === stripBasePath(right).replace(/\/$/, '');
   }, []);
 
-  const activeNodeKey = useMemo(() => findNodeKeyByUrl(currentPath), [currentPath, findNodeKeyByUrl]);
+  const activeNodeKey = useMemo(() => findNodeKeyForUrl(currentPath), [currentPath, findNodeKeyForUrl]);
 
   // Show loading state if no data yet
   if (!data || roots.length === 0) {

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { canCollapseGroup, getGroupLabel, isGroupCollapsed } from './utils';
+import { canCollapseGroup, findNodeKeyByUrl, getGroupLabel, isGroupCollapsed } from './utils';
 
 const preferences = (expanded: string[] = []) => ({
   expanded: new Set(expanded),
@@ -41,3 +41,21 @@ describe('isGroupCollapsed', () => {
     expect(isGroupCollapsed(true, 'outbound-messages', preferences(['outbound-messages']))).toBe(false);
   });
 });
+
+describe('findNodeKeyByUrl', () => {
+  const channelKey = 'channel:product-events:1.0.0';
+  const nodes = { [channelKey]: {} };
+  const nodeLookup = new Map([['channel:product-events', channelKey]]);
+
+  it('selects the channel sidebar for channel documentation', () => {
+    expect(findNodeKeyByUrl('/docs/channels/product-events/1.0.0', nodes, nodeLookup)).toBe(channelKey);
+  });
+
+  it('keeps the channel sidebar selected on the channel map', () => {
+    expect(findNodeKeyByUrl('/visualiser/channels/product-events/1.0.0', nodes, nodeLookup)).toBe(channelKey);
+  });
+
+  it('falls back to the available channel version', () => {
+    expect(findNodeKeyByUrl('/docs/channels/product-events/latest', nodes, nodeLookup)).toBe(channelKey);
+  });
+});

package/eventcatalog/src/components/SideNav/NestedSideBar/utils.ts

@@ -17,6 +17,86 @@ export const isGroupCollapsed = (canCollapse: boolean, groupId: string, preferen
   return canCollapse && !preferences.expanded.has(groupId);
 };
 
+/**
+ * Finds the sidebar node represented by a resource URL.
+ * The URL must have its configured base path removed before it is passed in.
+ */
+export const findNodeKeyByUrl = (
+  url: string,
+  nodes: Record<string, unknown>,
+  nodeLookup: ReadonlyMap<string, string>
+): string | null => {
+  const urlPatternsWithVersion = [
+    // Domains
+    { pattern: /^\/docs\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
+    { pattern: /^\/visualiser\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
+    { pattern: /^\/architecture\/domains\/([^/]+)\/([^/]+)/, type: 'domain' },
+    // Systems (key prefix is `system`, url segment is `systems`).
+    // The visualiser pattern also matches the System Diagram
+    // (/visualiser/systems/:id/:version/context) since it is not end-anchored.
+    { pattern: /^\/docs\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
+    { pattern: /^\/visualiser\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
+    { pattern: /^\/architecture\/systems\/([^/]+)\/([^/]+)/, type: 'system' },
+    // Agents
+    { pattern: /^\/docs\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
+    { pattern: /^\/visualiser\/agents\/([^/]+)\/([^/]+)/, type: 'agent' },
+    // Decision Records
+    { pattern: /^\/docs\/adrs\/([^/]+)\/([^/]+)/, type: 'adr' },
+    // Services
+    { pattern: /^\/docs\/services\/([^/]+)\/([^/]+)/, type: 'service' },
+    { pattern: /^\/architecture\/services\/([^/]+)\/([^/]+)/, type: 'service' },
+    { pattern: /^\/visualiser\/services\/([^/]+)\/([^/]+)/, type: 'service' },
+    // Messages (events, commands, queries) - note: keys use singular form
+    { pattern: /^\/docs\/events\/([^/]+)\/([^/]+)/, type: 'event' },
+    { pattern: /^\/docs\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
+    { pattern: /^\/docs\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
+    { pattern: /^\/visualiser\/messages\/([^/]+)\/([^/]+)/, type: 'message' },
+    { pattern: /^\/visualiser\/events\/([^/]+)\/([^/]+)/, type: 'event' },
+    { pattern: /^\/visualiser\/commands\/([^/]+)\/([^/]+)/, type: 'command' },
+    { pattern: /^\/visualiser\/queries\/([^/]+)\/([^/]+)/, type: 'query' },
+    // Channels
+    { pattern: /^\/docs\/channels\/([^/]+)\/([^/]+)/, type: 'channel' },
+    { pattern: /^\/visualiser\/channels\/([^/]+)\/([^/]+)/, type: 'channel' },
+    // Containers
+    { pattern: /^\/docs\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
+    { pattern: /^\/visualiser\/containers\/([^/]+)\/([^/]+)/, type: 'container' },
+    // Flows
+    { pattern: /^\/docs\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
+    { pattern: /^\/visualiser\/flows\/([^/]+)\/([^/]+)/, type: 'flow' },
+    // Data Products
+    { pattern: /^\/docs\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
+    { pattern: /^\/visualiser\/data-products\/([^/]+)\/([^/]+)/, type: 'data-product' },
+    // Entities
+    { pattern: /^\/docs\/entities\/([^/]+)\/([^/]+)/, type: 'entity' },
+  ];
+
+  const urlPatternsWithoutVersion = [{ pattern: /^\/docs\/domains\/([^/]+)\/language/, type: 'domain' }];
+
+  for (const { pattern, type } of urlPatternsWithVersion) {
+    const match = url.match(pattern);
+    if (match) {
+      const id = match[1];
+      const version = match[2];
+      const keyWithVersion = `${type}:${id}:${version}`;
+
+      if (nodes[keyWithVersion]) return keyWithVersion;
+
+      const foundNodeKey = nodeLookup.get(`${type}:${id}`);
+      if (foundNodeKey) return foundNodeKey;
+    }
+  }
+
+  for (const { pattern, type } of urlPatternsWithoutVersion) {
+    const match = url.match(pattern);
+    if (match) {
+      const foundNodeKey = nodeLookup.get(`${type}:${match[1]}`);
+      if (foundNodeKey) return foundNodeKey;
+    }
+  }
+
+  return null;
+};
+
 /**
  * Returns Tailwind classes for badge styling based on badge type.
  * Uses CSS variables from theme.css for proper theming support.

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/_index.data.ts

@@ -29,6 +29,7 @@ export class Page extends HybridPage {
       'domains',
       'flows',
       'containers',
+      'channels',
       'data-products',
       'systems',
     ];

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

@@ -764,6 +764,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode>
   );
 
+  const visualiserEnabled = config?.visualiser?.enabled !== false;
+
   const channelNodes = channels.reduce(
     (acc, channel) => {
       const versionedKey = `channel:${channel.data.id}:${channel.data.version}`;
@@ -796,6 +798,18 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
               ].filter(Boolean) as { title: string; href: string }[]
             ),
             docsSection,
+            visualiserEnabled && {
+              type: 'group',
+              title: 'Architecture',
+              icon: 'Workflow',
+              pages: [
+                {
+                  type: 'item',
+                  title: 'Map',
+                  href: buildUrl(`/visualiser/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+                },
+              ],
+            },
           ].filter(Boolean) as ChildRef[],
         },
         channel,
@@ -827,7 +841,6 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode>
   );
 
-  const visualiserEnabled = config?.visualiser?.enabled !== false;
   const rootDomainsNodes: Record<string, NavNode> = {};
 
   if (rootDomains.length > 0) {

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

@@ -1,6 +1,27 @@
-import type { CollectionEntry } from 'astro:content';
-import { createEdge, createNode, generatedIdForEdge, generateIdForNode, getColorFromString } from './utils/utils';
+import { getCollection, type CollectionEntry } from 'astro:content';
+import dagre from 'dagre';
+import {
+  buildContextMenuForAgent,
+  buildContextMenuForMessage,
+  buildContextMenuForResource,
+  buildContextMenuForService,
+  calculatedNodes,
+  createDagreGraph,
+  createEdge,
+  createNode,
+  generatedIdForEdge,
+  generateIdForNode,
+  getColorFromString,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelForServiceAsTarget,
+  getOperationFields,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_NODE_HEIGHT,
+} from './utils/utils';
+import { createVersionedMap, findInMap } from '@utils/collections/util';
+import { getChannelChain, getChannels } from '@utils/collections/channels';
 import { type Node, type Edge } from '@xyflow/react';
+import type { CollectionMessageTypes } from '@types';
 
 interface CollectionItem {
   collection: string;
@@ -27,7 +48,15 @@ export const getNodesAndEdgesForChannelChain = ({
       createNode({
         id: generateIdForNode(channel),
         type: channel.collection,
-        data: { mode, channel: { ...channel.data, ...channel } },
+        data: {
+          mode,
+          channel: { ...channel.data, ...channel },
+          contextMenu: buildContextMenuForResource({
+            collection: 'channels',
+            id: channel.data.id,
+            version: channel.data.version,
+          }),
+        },
         position: { x: 0, y: 0 },
       })
     );
@@ -73,3 +102,366 @@ export const getNodesAndEdgesForChannelChain = ({
 
   return { nodes, edges };
 };
+
+type MessageProducerOrConsumer = CollectionEntry<'services'> | CollectionEntry<'agents'>;
+type ChannelPointer = { id: string; version?: string };
+type ChannelRoute = CollectionEntry<'channels'>[];
+type RoutedResource = {
+  resource: MessageProducerOrConsumer;
+  channelRoutes: ChannelRoute[];
+};
+
+type DagreGraph = any;
+
+interface Props {
+  id: string;
+  version: string;
+  defaultFlow?: DagreGraph;
+  mode?: 'simple' | 'full';
+  layout?: boolean;
+}
+
+/**
+ * Builds the graph for a single channel: everything that publishes into it on the left,
+ * everything that consumes out of it on the right, and any channels it routes to (or is
+ * routed from) either side of it.
+ */
+export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple', layout = true }: Props) => {
+  const flow = defaultFlow || createDagreGraph({ ranksep: 300, nodesep: 50 });
+  const nodes: any[] = [];
+  const edges: any[] = [];
+
+  const [channels, services, agents, events, commands, queries] = await Promise.all([
+    getChannels(),
+    getCollection('services'),
+    getCollection('agents'),
+    getCollection('events'),
+    getCollection('commands'),
+    getCollection('queries'),
+  ]);
+
+  const channel = channels.find((c) => c.data.id === id && c.data.version === version);
+
+  // Nothing found...
+  if (!channel) {
+    return { nodes: [], edges: [] };
+  }
+
+  const allMessages = [...events, ...commands, ...queries] as CollectionEntry<CollectionMessageTypes>[];
+  const messageMap = createVersionedMap(allMessages);
+  const channelMap = createVersionedMap(channels);
+
+  const getRoutesThroughFocusedChannel = (
+    pointers: ChannelPointer[] | undefined,
+    direction: 'producers' | 'consumers'
+  ): ChannelRoute[] =>
+    (pointers ?? []).flatMap((pointer) => {
+      const resolved = findInMap(channelMap, pointer.id, pointer.version) as CollectionEntry<'channels'> | undefined;
+      if (!resolved) return [];
+
+      const route =
+        direction === 'producers' ? getChannelChain(resolved, channel, channels) : getChannelChain(channel, resolved, channels);
+
+      return route.length > 0 ? [route] : [];
+    });
+
+  const routesDirectlyToFocusedChannel = (pointers: ChannelPointer[] | undefined) =>
+    (pointers ?? []).some((pointer) => {
+      const resolved = findInMap(channelMap, pointer.id, pointer.version) as CollectionEntry<'channels'> | undefined;
+      return !!resolved && generateIdForNode(resolved) === generateIdForNode(channel);
+    });
+
+  // messageNodeId -> { message, producers, consumers }
+  const messageFlows = new Map<
+    string,
+    {
+      message: CollectionEntry<CollectionMessageTypes>;
+      producers: RoutedResource[];
+      consumers: RoutedResource[];
+    }
+  >();
+
+  const trackFlow = (
+    message: CollectionEntry<CollectionMessageTypes>,
+    resource: MessageProducerOrConsumer,
+    direction: 'producers' | 'consumers',
+    channelRoutes: ChannelRoute[]
+  ) => {
+    const messageNodeId = generateIdForNode(message);
+    const flowForMessage = messageFlows.get(messageNodeId) ?? { message, producers: [], consumers: [] };
+    const alreadyTracked = flowForMessage[direction].some(
+      (existing) => existing.resource.data.id === resource.data.id && existing.resource.data.version === resource.data.version
+    );
+
+    if (!alreadyTracked) {
+      flowForMessage[direction].push({ resource, channelRoutes });
+    }
+
+    messageFlows.set(messageNodeId, flowForMessage);
+  };
+
+  for (const resource of [...services, ...agents] as MessageProducerOrConsumer[]) {
+    const pointerGroups = [
+      { pointers: resource.data.sends ?? [], channelKey: 'to' as const, direction: 'producers' as const },
+      { pointers: resource.data.receives ?? [], channelKey: 'from' as const, direction: 'consumers' as const },
+    ];
+
+    for (const { pointers, channelKey, direction } of pointerGroups) {
+      for (const pointer of pointers as any[]) {
+        const message = findInMap(messageMap, pointer.id, pointer.version) as CollectionEntry<CollectionMessageTypes> | undefined;
+
+        if (!message) continue;
+
+        const channelPointers = pointer[channelKey] as ChannelPointer[] | undefined;
+        const hasExplicitChannels = Array.isArray(channelPointers) && channelPointers.length > 0;
+        const effectiveChannelPointers = hasExplicitChannels
+          ? channelPointers
+          : (message.data.channels as ChannelPointer[] | undefined);
+        const channelRoutes = getRoutesThroughFocusedChannel(effectiveChannelPointers, direction);
+
+        if (channelRoutes.length > 0) {
+          trackFlow(message, resource, direction, channelRoutes);
+        }
+      }
+    }
+  }
+
+  // Messages whose declared channel routes into the focused channel still belong on the graph,
+  // even when no producer or consumer references them.
+  for (const message of allMessages) {
+    const messageNodeId = generateIdForNode(message);
+    const declaredRoutes = getRoutesThroughFocusedChannel(message.data.channels as ChannelPointer[] | undefined, 'producers');
+    if (declaredRoutes.length > 0 && !messageFlows.has(messageNodeId)) {
+      messageFlows.set(messageNodeId, { message, producers: [], consumers: [] });
+    }
+  }
+
+  const channelNodeId = generateIdForNode(channel);
+  const addedNodeIds = new Set<string>();
+  const addedEdgeIds = new Set<string>();
+
+  const addNode = (node: any) => {
+    if (addedNodeIds.has(node.id)) return;
+    addedNodeIds.add(node.id);
+    nodes.push(node);
+  };
+
+  const addEdge = (edge: any) => {
+    if (addedEdgeIds.has(edge.id)) return;
+    addedEdgeIds.add(edge.id);
+    edges.push(edge);
+  };
+
+  const addResourceNode = (resource: MessageProducerOrConsumer) => {
+    addNode(
+      createNode({
+        id: generateIdForNode(resource),
+        type: resource.collection,
+        data: {
+          mode,
+          ...(resource.collection === 'agents' ? { agent: { ...resource.data } } : { service: { ...resource.data } }),
+          contextMenu:
+            resource.collection === 'agents'
+              ? buildContextMenuForAgent({ id: resource.data.id, version: resource.data.version })
+              : buildContextMenuForService({
+                  id: resource.data.id,
+                  version: resource.data.version,
+                  specifications: (resource.data as any).specifications,
+                  repository: (resource.data as any).repository,
+                }),
+        },
+        position: { x: 0, y: 0 },
+      })
+    );
+  };
+
+  const addChannelNode = (channelToAdd: CollectionEntry<'channels'>, isFocused = false) => {
+    addNode(
+      createNode({
+        id: generateIdForNode(channelToAdd),
+        type: channelToAdd.collection,
+        data: {
+          mode,
+          ...(isFocused ? { isFocused: true } : {}),
+          channel: { ...channelToAdd.data },
+          contextMenu: buildContextMenuForResource({
+            collection: 'channels',
+            id: channelToAdd.data.id,
+            version: channelToAdd.data.version,
+          }),
+        },
+        position: { x: 0, y: 0 },
+      })
+    );
+  };
+
+  // The channel itself
+  addChannelNode(channel, true);
+
+  const addChannelRoute = (route: ChannelRoute, colorSourceId: string) => {
+    route.forEach((channelInRoute) => addChannelNode(channelInRoute, generateIdForNode(channelInRoute) === channelNodeId));
+
+    for (let index = 0; index < route.length - 1; index++) {
+      const sourceChannel = route[index];
+      const targetChannel = route[index + 1];
+      addEdge(
+        createEdge({
+          id: generatedIdForEdge(sourceChannel, targetChannel),
+          source: generateIdForNode(sourceChannel),
+          target: generateIdForNode(targetChannel),
+          label: 'routes to',
+          data: { customColor: getColorFromString(colorSourceId) },
+        })
+      );
+    }
+  };
+
+  // channelNodeId + consumerNodeId -> messages consumed, so each channel/consumer pair gets one edge.
+  const messagesByConsumer = new Map<
+    string,
+    {
+      sourceChannel: CollectionEntry<'channels'>;
+      consumer: MessageProducerOrConsumer;
+      messages: CollectionEntry<CollectionMessageTypes>[];
+    }
+  >();
+
+  for (const { message, producers, consumers } of messageFlows.values()) {
+    const messageNodeId = generateIdForNode(message);
+
+    addNode(
+      createNode({
+        id: messageNodeId,
+        type: message.collection,
+        data: {
+          mode,
+          message: { ...message.data, ...getOperationFields(message.data) },
+          contextMenu: buildContextMenuForMessage({
+            id: message.data.id,
+            version: message.data.version,
+            name: message.data.name,
+            collection: message.collection,
+            schemaPath: (message.data as any).schemaPath,
+          }),
+        },
+        position: { x: 0, y: 0 },
+      })
+    );
+
+    const producerRoutes = producers.flatMap((producer) => producer.channelRoutes);
+    const declaredRoutes = getRoutesThroughFocusedChannel(message.data.channels as ChannelPointer[] | undefined, 'producers');
+    const ingressRoutes = producerRoutes.length > 0 ? producerRoutes : declaredRoutes;
+
+    // When only a consumer declares the focused channel, the message still enters at the
+    // focused channel, matching the message graph's no-producer-channel behaviour.
+    const routesToRender = ingressRoutes.length > 0 ? ingressRoutes : [[channel]];
+    for (const route of routesToRender) {
+      addChannelRoute(route, message.data.id);
+      const firstChannel = route[0];
+      addEdge(
+        createEdge({
+          id: generatedIdForEdge(message, firstChannel),
+          source: messageNodeId,
+          target: generateIdForNode(firstChannel),
+          label: 'routes to',
+          data: { customColor: getColorFromString(message.data.id) },
+        })
+      );
+    }
+
+    for (const { resource: producer } of producers) {
+      addResourceNode(producer);
+      addEdge(
+        createEdge({
+          id: generatedIdForEdge(producer, message),
+          source: generateIdForNode(producer),
+          target: messageNodeId,
+          label: getEdgeLabelForServiceAsTarget(message),
+          type: 'multiline',
+          data: { customColor: getColorFromString(message.data.id) },
+        })
+      );
+    }
+
+    for (const { resource: consumer, channelRoutes } of consumers) {
+      for (const route of channelRoutes) {
+        addChannelRoute(route, message.data.id);
+        const sourceChannel = route[route.length - 1];
+        const consumerNodeId = generateIdForNode(consumer);
+        const groupKey = `${generateIdForNode(sourceChannel)}:${consumerNodeId}`;
+        const grouped = messagesByConsumer.get(groupKey) ?? { sourceChannel, consumer, messages: [] };
+        if (!grouped.messages.some((groupedMessage) => generateIdForNode(groupedMessage) === messageNodeId)) {
+          grouped.messages.push(message);
+        }
+        messagesByConsumer.set(groupKey, grouped);
+      }
+    }
+  }
+
+  // One edge per consumer, labelled with the message when there is only one
+  for (const { sourceChannel, consumer, messages } of messagesByConsumer.values()) {
+    addResourceNode(consumer);
+    addEdge(
+      createEdge({
+        id: generatedIdForEdge(sourceChannel, consumer),
+        source: generateIdForNode(sourceChannel),
+        target: generateIdForNode(consumer),
+        label:
+          messages.length === 1 ? getEdgeLabelForMessageAsSource(messages[0], true) : `consumes ${messages.length}\nmessages`,
+        type: 'multiline',
+        data: { customColor: getColorFromString(sourceChannel.data.id) },
+      })
+    );
+  }
+
+  // Channels this channel routes messages on to
+  for (const route of (channel.data.routes ?? []) as { id: string; version?: string }[]) {
+    const routedChannel = findInMap(channelMap, route.id, route.version) as CollectionEntry<'channels'> | undefined;
+    if (!routedChannel || generateIdForNode(routedChannel) === channelNodeId) continue;
+
+    addChannelNode(routedChannel);
+    addEdge(
+      createEdge({
+        id: generatedIdForEdge(channel, routedChannel),
+        source: channelNodeId,
+        target: generateIdForNode(routedChannel),
+        label: 'routes to',
+        data: { customColor: getColorFromString(channel.data.id) },
+      })
+    );
+  }
+
+  // Channels that route messages into this channel
+  for (const upstreamChannel of channels) {
+    if (generateIdForNode(upstreamChannel) === channelNodeId) continue;
+    if (!routesDirectlyToFocusedChannel(upstreamChannel.data.routes as ChannelPointer[] | undefined)) continue;
+
+    addChannelNode(upstreamChannel);
+    addEdge(
+      createEdge({
+        id: generatedIdForEdge(upstreamChannel, channel),
+        source: generateIdForNode(upstreamChannel),
+        target: channelNodeId,
+        label: 'routes to',
+        data: { customColor: getColorFromString(upstreamChannel.data.id) },
+      })
+    );
+  }
+
+  nodes.forEach((node) => {
+    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
+  });
+
+  edges.forEach((edge) => {
+    flow.setEdge(edge.source, edge.target);
+  });
+
+  if (layout) {
+    dagre.layout(flow);
+  }
+
+  return {
+    nodes: calculatedNodes(flow, nodes),
+    edges,
+  };
+};

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "publishConfig": {
     "access": "public"
   },
@@ -121,7 +121,7 @@
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.1.11",
     "@eventcatalog/sdk": "2.27.2",
-    "@eventcatalog/visualiser": "^4.1.2"
+    "@eventcatalog/visualiser": "^4.1.3"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",