@eventcatalog/core 2.44.5 → 2.45.0

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-ULCIAC3E.js";
-import "../chunk-WG64IAI3.js";
+} from "../chunk-DRD67V64.js";
+import "../chunk-XBSAAKTV.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

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

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-WO7XQZNY.js";
-import "../chunk-ULCIAC3E.js";
-import "../chunk-WG64IAI3.js";
+} from "../chunk-L4YKSQ4D.js";
+import "../chunk-DRD67V64.js";
+import "../chunk-XBSAAKTV.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-ULCIAC3E.js → chunk-DRD67V64.js}

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

package/dist/{chunk-WO7XQZNY.js → chunk-L4YKSQ4D.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-ULCIAC3E.js";
+} from "./chunk-DRD67V64.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-WG64IAI3.js → chunk-XBSAAKTV.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-DCLTVJDP.js";
 import {
   log_build_default
-} from "./chunk-WO7XQZNY.js";
-import "./chunk-ULCIAC3E.js";
+} from "./chunk-L4YKSQ4D.js";
+import "./chunk-DRD67V64.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-EXAALOQA.js";
 import {
   VERSION
-} from "./chunk-WG64IAI3.js";
+} from "./chunk-XBSAAKTV.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

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

@@ -10,6 +10,7 @@ import {
   getNodesAndEdges as getNodesAndEdgesForDomain,
   getNodesAndEdgesForDomainContextMap,
 } from '@utils/node-graphs/domains-node-graph';
+import { getDomainsCanvasData } from '@utils/node-graphs/domains-canvas';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
 import { buildUrl } from '@utils/url-builder';
 import { getVersionFromCollection } from '@utils/collections/versions';
@@ -89,6 +90,12 @@ if (collection === 'domain-context-map') {
   nodes = fetchedNodes;
   edges = fetchedEdges;
 }
+
+if (collection === 'domains-canvas') {
+  const { domainNodes, messageNodes, edges: fetchedEdges } = await getDomainsCanvasData();
+  nodes = [...domainNodes, ...messageNodes];
+  edges = fetchedEdges;
+}
 ---
 
 <div>

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

@@ -28,6 +28,7 @@ import UserNode from './Nodes/User';
 import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
 import ExternalSystemNode from './Nodes/ExternalSystem';
+import DomainNode from './Nodes/Domain';
 import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
 import FlowEdge from './Edges/FlowEdge';
 import CustomNode from './Nodes/Custom';
@@ -78,6 +79,7 @@ const NodeGraphBuilder = ({
       channels: ChannelNode,
       queries: QueryNode,
       commands: CommandNode,
+      domains: DomainNode,
       step: StepNode,
       user: UserNode,
       actor: UserNode,

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Domain.tsx

@@ -0,0 +1,155 @@
+import type { CollectionEntry } from 'astro:content';
+import { Handle, useReactFlow, useOnSelectionChange, Position } from '@xyflow/react';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
+import { getIcon } from '@utils/badges';
+import { useState } from 'react';
+
+interface Data {
+  mode: 'simple' | 'full';
+  domain: CollectionEntry<'domains'>;
+}
+
+export default function DomainNode({ data, id: nodeId }: any) {
+  const { mode, domain } = data as Data;
+  const reactFlow = useReactFlow();
+  const [highlightedServices, setHighlightedServices] = useState<Set<string>>(new Set());
+
+  const { id, version, name, services = [], styles } = domain.data;
+  const { icon = 'RectangleGroupIcon' } = styles || {};
+
+  const Icon = getIcon(icon);
+  const ServerIcon = getIcon('ServerIcon');
+
+  // Listen for selection changes to highlight connected services
+  useOnSelectionChange({
+    onChange: ({ nodes: selectedNodes }) => {
+      if (selectedNodes.length === 0) {
+        setHighlightedServices(new Set());
+        return;
+      }
+
+      const selectedNode = selectedNodes[0];
+      if (!selectedNode) {
+        setHighlightedServices(new Set());
+        return;
+      }
+
+      // Get all edges
+      const edges = reactFlow.getEdges();
+      const connectedServiceIds = new Set<string>();
+
+      // Find services connected to the selected node
+      edges.forEach((edge) => {
+        if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
+          // Check if this edge connects to our domain
+          if (edge.source === nodeId && edge.sourceHandle) {
+            // Extract service ID from sourceHandle (format: "serviceId-source")
+            const serviceId = edge.sourceHandle.replace('-source', '');
+            connectedServiceIds.add(serviceId);
+          }
+          if (edge.target === nodeId && edge.targetHandle) {
+            // Extract service ID from targetHandle (format: "serviceId-target")
+            const serviceId = edge.targetHandle.replace('-target', '');
+            connectedServiceIds.add(serviceId);
+          }
+        }
+      });
+
+      setHighlightedServices(connectedServiceIds);
+    },
+  });
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div className="w-full rounded-lg border-2 border-yellow-400 bg-white shadow-lg">
+          <div className="bg-yellow-100 px-3 py-2 flex items-center space-x-2">
+            {Icon && <Icon className="w-4 h-4 text-yellow-700" />}
+            <div>
+              <span className="text-sm font-bold text-yellow-900">{name}</span>
+              <span className="text-xs text-yellow-700 ml-2">v{version}</span>
+            </div>
+          </div>
+          {mode === 'full' && services.length > 0 && (
+            <div>
+              {services.map((service: any, index: number) => {
+                const isHighlighted = highlightedServices.has(service.data.id);
+
+                return (
+                  <ContextMenu.Root key={`${service.data.id}-${index}`}>
+                    <ContextMenu.Trigger asChild>
+                      <div
+                        className={`relative flex items-center justify-between px-3 py-2 cursor-pointer ${index !== services.length - 1 ? 'border-b border-gray-300' : ''} ${isHighlighted ? 'bg-pink-100 border-pink-300' : ''}`}
+                      >
+                        <Handle
+                          type="target"
+                          position={Position.Left}
+                          id={`${service.data.id}-target`}
+                          className="!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
+                          style={{ left: '-1px' }}
+                        />
+                        <Handle
+                          type="source"
+                          position={Position.Right}
+                          id={`${service.data.id}-source`}
+                          className="!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
+                          style={{ right: '-1px' }}
+                        />
+                        <div className="flex items-center space-x-3">
+                          <div className="flex items-center justify-center w-5 h-5 bg-pink-500 rounded">
+                            {ServerIcon && <ServerIcon className="w-3 h-3 text-white" />}
+                          </div>
+                          <span className="text-sm font-medium text-gray-900">{service.data.name || service.data.id}</span>
+                        </div>
+                        <div className="flex items-center space-x-4 text-sm text-gray-600">
+                          <span className="text-xs">v{service.data.version}</span>
+                        </div>
+                      </div>
+                    </ContextMenu.Trigger>
+                    <ContextMenu.Portal>
+                      <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+                        <ContextMenu.Item
+                          className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                          onClick={() =>
+                            (window.location.href = buildUrl(`/docs/services/${service.data.id}/${service.data.version}`))
+                          }
+                        >
+                          View Service Documentation
+                        </ContextMenu.Item>
+                        <ContextMenu.Item
+                          className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+                          onClick={() =>
+                            (window.location.href = buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`))
+                          }
+                        >
+                          View Service Visualizer
+                        </ContextMenu.Item>
+                      </ContextMenu.Content>
+                    </ContextMenu.Portal>
+                  </ContextMenu.Root>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+            onClick={() => (window.location.href = buildUrl(`/docs/domains/${id}/${version}`))}
+          >
+            View Domain Documentation
+          </ContextMenu.Item>
+          <ContextMenu.Item
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+            onClick={() => (window.location.href = buildUrl(`/visualiser/domains/${id}/${version}`))}
+          >
+            View Domain Visualizer
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}

package/eventcatalog/src/components/MDX/NodeGraph/VisualiserSearch.tsx

@@ -1,9 +1,42 @@
 import { useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
 import type { Node } from '@xyflow/react';
 
+// Define interfaces for different node data structures
+interface MessageData {
+  name: string;
+  version?: string;
+}
+
+interface ServiceData {
+  name: string;
+  version?: string;
+}
+
+interface DomainData {
+  name: string;
+  version?: string;
+}
+
+interface NodeDataContent extends Record<string, unknown> {
+  message?: {
+    data: MessageData;
+  };
+  service?: {
+    data: ServiceData;
+  };
+  domain?: {
+    data: DomainData;
+  };
+  name?: string;
+  version?: string;
+}
+
+// Extend the Node type with our custom data structure
+type CustomNode = Node<NodeDataContent>;
+
 interface VisualiserSearchProps {
-  nodes: Node[];
-  onNodeSelect: (node: Node) => void;
+  nodes: CustomNode[];
+  onNodeSelect: (node: CustomNode) => void;
   onClear: () => void;
   onPaneClick?: () => void;
 }
@@ -15,7 +48,7 @@ export interface VisualiserSearchRef {
 const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
   ({ nodes, onNodeSelect, onClear, onPaneClick }, ref) => {
     const [searchQuery, setSearchQuery] = useState('');
-    const [filteredSuggestions, setFilteredSuggestions] = useState<Node[]>([]);
+    const [filteredSuggestions, setFilteredSuggestions] = useState<CustomNode[]>([]);
     const [showSuggestions, setShowSuggestions] = useState(false);
     const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
     const searchInputRef = useRef<HTMLInputElement>(null);
@@ -34,11 +67,18 @@ const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
       [hideSuggestions]
     );
 
-    const getNodeDisplayName = useCallback((node: Node) => {
-      // @ts-ignore
-      const name = node.data?.message?.data?.name || node.data?.service?.data?.name || node.data?.name || node.id;
-      // @ts-ignore
-      const version = node.data?.message?.data?.version || node.data?.service?.data?.version || node.data?.version;
+    const getNodeDisplayName = useCallback((node: CustomNode) => {
+      const name =
+        node.data?.message?.data?.name ||
+        node.data?.service?.data?.name ||
+        node.data?.domain?.data?.name ||
+        node.data?.name ||
+        node.id;
+      const version =
+        node.data?.message?.data?.version ||
+        node.data?.service?.data?.version ||
+        node.data?.domain?.data?.version ||
+        node.data?.version;
       return version ? `${name} (v${version})` : name;
     }, []);
 
@@ -50,6 +90,7 @@ const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
         commands: 'bg-blue-600 text-white',
         queries: 'bg-green-600 text-white',
         channels: 'bg-gray-600 text-white',
+        domains: 'bg-yellow-500 text-white',
         externalSystem: 'bg-pink-600 text-white',
         actor: 'bg-yellow-500 text-white',
         step: 'bg-gray-700 text-white',
@@ -90,7 +131,7 @@ const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
     }, [nodes, searchQuery]);
 
     const handleSuggestionClick = useCallback(
-      (node: Node) => {
+      (node: CustomNode) => {
         setSearchQuery(getNodeDisplayName(node));
         setShowSuggestions(false);
         onNodeSelect(node);

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

@@ -4,7 +4,7 @@ import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
 import CollapsibleGroup from './components/CollapsibleGroup';
 import MessageList from './components/MessageList';
 import SpecificationsList from './components/SpecificationList';
-import type { MessageItem, ServiceItem, ListViewSideBarProps } from './types';
+import type { MessageItem, ServiceItem, ListViewSideBarProps, DomainItem, FlowItem, Resources } from './types';
 const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
 const DEBOUNCE_DELAY = 300; // 300ms debounce delay
 
@@ -228,7 +228,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
   }, [searchTerm]);
 
   // Filter data based on search term
-  const filteredData = useMemo(() => {
+  const filteredData: Resources = useMemo(() => {
     if (!debouncedSearchTerm) return data;
 
     const filterItem = (item: { label: string; id?: string }) => {
@@ -245,6 +245,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
     };
 
     return {
+      'context-map': data['context-map']?.filter(filterItem) || [],
       domains: data.domains?.filter(filterItem) || [],
       services:
         data.services
@@ -326,6 +327,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
 
   const hasNoResults =
     debouncedSearchTerm &&
+    !filteredData['context-map']?.length &&
     !filteredData.domains?.length &&
     !filteredData.services?.length &&
     !filteredData.flows?.length &&
@@ -345,9 +347,33 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
           <NoResultsFound searchTerm={debouncedSearchTerm} />
         ) : (
           <>
+            {/* Bounded Context Map (Visualiser only) */}
+            {filteredData['context-map'] && filteredData.domains && filteredData.domains.length > 0 && (
+              <div className="pt-0">
+                <ul className="space-y-1">
+                  {filteredData['context-map'].map((item: any) => (
+                    <li key={item.href}>
+                      <a
+                        href={item.href}
+                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
+                          decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
+                        }`}
+                      >
+                        <span className="truncate flex flex-col items-start">
+                          <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                          <span className="text-[10px] text-gray-500 font-light">Explore integrations between domains</span>
+                        </span>
+                        <span className="text-blue-600 ml-2 text-[10px] font-medium bg-blue-50 px-2 py-0.5 rounded">DOMAINS</span>
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
             {/* Domains */}
             {filteredData['domains'] && (
-              <div>
+              <div className={`${isVisualizer ? 'pt-4 pb-2' : 'p-0'}`}>
                 <ul className="space-y-2">
                   {filteredData['domains'].map((item: any) => (
                     <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>

package/eventcatalog/src/components/SideNav/ListViewSideBar/types.ts

@@ -5,6 +5,7 @@ export interface MessageItem {
   id: string;
   direction: 'sends' | 'receives';
   type: 'command' | 'query' | 'event';
+  collection: string;
   data: {
     name: string;
   };
@@ -35,21 +36,28 @@ export interface ServiceItem {
   }[];
 }
 
-interface DomainItem {
+export interface DomainItem {
   href: string;
   label: string;
   id: string;
   name: string;
   services: any[];
   domains: any[];
+  entities: EntityItem[];
 }
 
-interface FlowItem {
+export interface FlowItem {
   href: string;
   label: string;
 }
 
-interface Resources {
+export interface Resources {
+  'context-map'?: Array<{
+    href: string;
+    label: string;
+    id: string;
+    name: string;
+  }>;
   domains?: DomainItem[];
   services?: ServiceItem[];
   flows?: FlowItem[];

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

@@ -107,8 +107,12 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
   const sideNav = {
     ...(currentPath.includes('visualiser')
       ? {
-          'bounded context map': [
-            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
+          'context-map': [
+            {
+              label: 'Integration Landscape',
+              href: buildUrl('/visualiser/domain-integrations'),
+              collection: 'domain-integrations',
+            },
           ],
         }
       : {}),

package/eventcatalog/src/pages/visualiser/domain-integrations/index.astro

@@ -0,0 +1,31 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import VisualiserLayout from '@layouts/VisualiserLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import { ClientRouter } from 'astro:transitions';
+---
+
+<VisualiserLayout title={`Visualiser | Domain Architecture`} description="High-level view of all domains and their relationships">
+  <div class="bg-gray-100/50 m-4">
+    <div
+      class="h-[calc(100vh-130px)] w-full relative border border-gray-200"
+      id="domains-canvas-portal"
+      transition:animate="fade"
+    >
+    </div>
+    <NodeGraph
+      id="domains-canvas"
+      collection="domains-canvas"
+      title="Domain Integrations"
+      mode="full"
+      linkTo="visualiser"
+      version="1.0.0"
+      linksToVisualiser={false}
+      href={{
+        label: 'View Documentation',
+        url: buildUrl('/docs'),
+      }}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>

package/eventcatalog/src/utils/node-graphs/domains-canvas.ts

@@ -0,0 +1,251 @@
+import { getCollection, type CollectionEntry } from 'astro:content';
+import dagre from 'dagre';
+import { generateIdForNode, createDagreGraph, calculatedNodes, createEdge } from '@utils/node-graphs/utils/utils';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import type { Node, Edge } from '@xyflow/react';
+import { getDomains } from '@utils/collections/domains';
+
+interface DomainCanvasData {
+  domainNodes: Node[];
+  messageNodes: Node[];
+  edges: Edge[];
+}
+
+export const getDomainsCanvasData = async (): Promise<DomainCanvasData> => {
+  let domains = await getDomains({ getAllVersions: false });
+
+  // only interested in domains that are not parent domains (e.g domains that have subdoamins we dont want to display them here)
+  domains = domains.filter((domain) => !domain.data.domains?.length);
+
+  const domainNodes: Node[] = [];
+  const messageNodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  // Create dagre graph for layout
+  const dagreGraph = createDagreGraph({ ranksep: 400, nodesep: 200 });
+
+  // Create a map to store domain data for calculating relationships
+  const domainDataMap = new Map();
+
+  for (let index = 0; index < domains.length; index++) {
+    const domain = domains[index];
+    const domainNodeId = generateIdForNode(domain);
+    const domainServices = domain.data.services as unknown as CollectionEntry<'services'>[];
+
+    // Count total messages for this domain
+    let totalMessages = 0;
+    for (const service of domainServices) {
+      const receives = service.data.receives ?? [];
+      const sends = service.data.sends ?? [];
+      totalMessages += receives.length + sends.length;
+    }
+
+    domainDataMap.set(domainNodeId, {
+      domain,
+      services: domainServices,
+      servicesCount: domainServices.length,
+      messagesCount: totalMessages,
+    });
+
+    // Domain Overview Node (position will be calculated by dagre)
+    domainNodes.push({
+      id: domainNodeId,
+      type: 'domains',
+      position: { x: 0, y: 0 }, // Temporary position, will be calculated by dagre
+      data: {
+        mode: 'full',
+        domain: {
+          ...domain,
+          data: {
+            ...domain.data,
+            services: domainServices,
+          },
+        },
+        servicesCount: domainServices.length,
+        messagesCount: totalMessages,
+      },
+      sourcePosition: 'right',
+      targetPosition: 'left',
+    } as Node);
+  }
+
+  // Get all messages for version resolution
+  const allMessages = await getCollection('events')
+    .then((events) => Promise.all([events, getCollection('commands'), getCollection('queries')]))
+    .then(([events, commands, queries]) => [...events, ...commands, ...queries]);
+
+  // Map to track unique messages and their publishers/consumers across domains
+  const messageRelationships = new Map<
+    string,
+    {
+      message: any;
+      publishers: Array<{ domainId: string; service: any }>;
+      consumers: Array<{ domainId: string; service: any }>;
+    }
+  >();
+
+  // Find all message relationships across domains
+  domainDataMap.forEach((domainData, domainId) => {
+    domainData.services.forEach((service: any) => {
+      // Track messages this service sends
+      const sendsRaw = service.data.sends ?? [];
+      const sendsHydrated = sendsRaw
+        .map((message: any) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, message.id, message.version))
+        .flat()
+        .filter((e: any) => e !== undefined);
+
+      sendsHydrated.forEach((sentMessage: any) => {
+        const messageKey = `${sentMessage.data.id}-${sentMessage.data.version}`;
+
+        if (!messageRelationships.has(messageKey)) {
+          messageRelationships.set(messageKey, {
+            message: sentMessage.data,
+            publishers: [],
+            consumers: [],
+          });
+        }
+
+        const relationship = messageRelationships.get(messageKey)!;
+        // Add publisher if not already added
+        if (!relationship.publishers.some((p) => p.domainId === domainId && p.service.data.id === service.data.id)) {
+          relationship.publishers.push({ domainId, service });
+        }
+      });
+
+      // Track messages this service receives
+      const receivesRaw = service.data.receives ?? [];
+      const receivesHydrated = receivesRaw
+        .map((message: any) => getItemsFromCollectionByIdAndSemverOrLatest(allMessages, message.id, message.version))
+        .flat()
+        .filter((e: any) => e !== undefined);
+
+      receivesHydrated.forEach((receivedMessage: any) => {
+        const messageKey = `${receivedMessage.data.id}-${receivedMessage.data.version}`;
+
+        if (!messageRelationships.has(messageKey)) {
+          messageRelationships.set(messageKey, {
+            message: receivedMessage.data,
+            publishers: [],
+            consumers: [],
+          });
+        }
+
+        const relationship = messageRelationships.get(messageKey)!;
+        // Add consumer if not already added
+        if (!relationship.consumers.some((c) => c.domainId === domainId && c.service.data.id === service.data.id)) {
+          relationship.consumers.push({ domainId, service });
+        }
+      });
+    });
+  });
+
+  // Create message nodes and edges for cross-domain relationships
+
+  // Only create message nodes for messages that cross domain boundaries
+  messageRelationships.forEach(({ message, publishers, consumers }, messageKey) => {
+    // Check if this message crosses domain boundaries
+    const publisherDomains = new Set(publishers.map((p) => p.domainId));
+    const consumerDomains = new Set(consumers.map((c) => c.domainId));
+
+    // Only create a message node if it connects different domains
+    const crossesDomainBoundary = [...publisherDomains].some((pubDomain) =>
+      [...consumerDomains].some((conDomain) => pubDomain !== conDomain)
+    );
+
+    if (crossesDomainBoundary) {
+      // Find the actual message object
+      const messageObject = allMessages.find((m) => m.data.id === message.id && m.data.version === message.version);
+
+      if (messageObject) {
+        const messageNodeId = `message-${messageKey}`;
+
+        // Create a single message node for this unique message
+        messageNodes.push({
+          id: messageNodeId,
+          type: messageObject.collection, // events, commands, or queries
+          position: { x: 0, y: 0 }, // Temporary position, will be calculated by dagre
+          data: {
+            mode: 'simple',
+            message: messageObject,
+          },
+          sourcePosition: 'right',
+          targetPosition: 'left',
+        } as Node);
+
+        // Create edges from all publishers to the message node
+        publishers.forEach(({ domainId, service }) => {
+          // Only create edge if there's a consumer in a different domain
+          const hasExternalConsumer = consumers.some((c) => c.domainId !== domainId);
+
+          if (hasExternalConsumer) {
+            edges.push(
+              createEdge({
+                id: `edge-${domainId}-${service.data.id}-${messageNodeId}`,
+                source: domainId,
+                sourceHandle: `${service.data.id}-source`,
+                target: messageNodeId,
+                type: 'animated',
+                animated: true,
+                label: 'publishes',
+                data: {
+                  message: messageObject,
+                  type: 'domain-to-message',
+                  publisherService: service,
+                },
+              })
+            );
+          }
+        });
+
+        // Create edges from the message node to all consumers
+        consumers.forEach(({ domainId, service }) => {
+          // Only create edge if there's a publisher in a different domain
+          const hasExternalPublisher = publishers.some((p) => p.domainId !== domainId);
+
+          if (hasExternalPublisher) {
+            edges.push(
+              createEdge({
+                id: `edge-${messageNodeId}-${domainId}-${service.data.id}`,
+                source: messageNodeId,
+                target: domainId,
+                targetHandle: `${service.data.id}-target`,
+                type: 'animated',
+                animated: true,
+                label: 'consumed by',
+                data: {
+                  message: messageObject,
+                  type: 'message-to-domain',
+                  consumerService: service,
+                },
+              })
+            );
+          }
+        });
+      }
+    }
+  });
+
+  // Add all nodes to dagre graph for layout calculation
+  const allNodes = [...domainNodes, ...messageNodes];
+
+  allNodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: 250, height: 120 });
+  });
+
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  // Calculate layout using dagre
+  dagre.layout(dagreGraph);
+
+  // Apply calculated positions to nodes
+  const layoutedDomainNodes = calculatedNodes(dagreGraph, domainNodes);
+  const layoutedMessageNodes = calculatedNodes(dagreGraph, messageNodes);
+
+  return {
+    domainNodes: layoutedDomainNodes,
+    messageNodes: layoutedMessageNodes,
+    edges,
+  };
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.44.5",
+  "version": "2.45.0",
   "publishConfig": {
     "access": "public"
   },