@eventcatalog/core 2.48.5 → 2.49.1

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-WK7LQRVD.js";
-import "../chunk-PYIL7PRQ.js";
+} from "../chunk-TVMUTOOL.js";
+import "../chunk-ZDOGODWQ.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.48.5";
+var version = "2.49.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-WHVRKXDZ.js";
-import "../chunk-WK7LQRVD.js";
-import "../chunk-PYIL7PRQ.js";
+} from "../chunk-AK2PL55W.js";
+import "../chunk-TVMUTOOL.js";
+import "../chunk-ZDOGODWQ.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-WHVRKXDZ.js → chunk-AK2PL55W.js}

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

package/dist/{chunk-WK7LQRVD.js → chunk-TVMUTOOL.js}

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

package/dist/{chunk-PYIL7PRQ.js → chunk-ZDOGODWQ.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.48.5";
+var version = "2.49.1";
 
 // 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.48.5";
+var version = "2.49.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-PYIL7PRQ.js";
+} from "./chunk-ZDOGODWQ.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.48.5";
+var version = "2.49.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-XE6PFSH5.js";
 import {
   log_build_default
-} from "./chunk-WHVRKXDZ.js";
-import "./chunk-WK7LQRVD.js";
+} from "./chunk-AK2PL55W.js";
+import "./chunk-TVMUTOOL.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-LDBRNJIL.js";
 import {
   VERSION
-} from "./chunk-PYIL7PRQ.js";
+} from "./chunk-ZDOGODWQ.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

package/eventcatalog/astro.config.mjs

@@ -20,7 +20,7 @@ import expressiveCode from 'astro-expressive-code';
 const projectDirectory = process.env.PROJECT_DIR || process.cwd();
 const base = config.base || '/';
 const host = config.host || false;
-const compress = config.compress || true;
+const compress = config.compress ?? true;
 
 // https://astro.build/config
 export default defineConfig({

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

@@ -25,9 +25,9 @@ export default function Admonition({ children, type = 'info', className = '', ti
   const Icon = config.icon;
 
   return (
-    <div className={`bg-${config.color}-50 border-l-4 border-${config.color}-500 p-4 my-4 ${className} rounded-md`}>
+    <div className={`bg-${config.color}-50 border-l-4 border-${config.color}-500 p-4 my-4 ${className} rounded-md not-prose`}>
       <div className="flex flex-col">
-        <div className="flex items-center">
+        <div className="flex items-center justify-start">
           <Icon className={`h-6 w-6 text-${config.color}-500 stroke-2`} aria-hidden="true" />
           <h3 className={`ml-2 text-${config.color}-600 font-bold text-md`}>{title || config.title}</h3>
         </div>

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

@@ -0,0 +1,61 @@
+---
+import { getDomains } from '@utils/collections/domains';
+import { getNodesAndEdges } from '@utils/node-graphs/domain-entity-map.ts';
+import Admonition from '@components/MDX/Admonition';
+import NodeGraph from '../NodeGraph/NodeGraph';
+import { getVersionFromCollection } from '@utils/collections/versions';
+
+const { id, version = 'latest', maxHeight, includeKey = true } = Astro.props;
+
+// Find the flow for the given id and version
+const domains = await getDomains();
+const domainCollection = getVersionFromCollection(domains, id, version) || [];
+const domain = domainCollection[0];
+
+const { nodes, edges } = await getNodesAndEdges({
+  id: id,
+  version: domain?.data?.version,
+});
+---
+
+{
+  !domain && (
+    <Admonition type="warning">
+      <div>
+        <span class="block font-bold">{`<EntityMap/>`} failed to load</span>
+        <span class="block">
+          Tried to load domain id: {id} with version {version}. Make sure you have this domain defined in your project.
+        </span>
+      </div>
+    </Admonition>
+  )
+}
+
+<div
+  class="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+  id={`${id}-entity-map-portal`}
+  style={{
+    maxHeight: maxHeight ? `${maxHeight}em` : `30em`,
+  }}
+>
+</div>
+
+<div>
+  <NodeGraph
+    id={id}
+    nodes={nodes}
+    edges={edges}
+    linkTo={'visualiser'}
+    mode="simple"
+    includeKey={includeKey}
+    footerLabel=`Entity Map - ${domain?.data?.name} - v(${domain?.data?.version})`
+    client:only="react"
+    portalId={`${id}-entity-map-portal`}
+  />
+</div>
+
+<style is:global>
+  .react-flow__attribution {
+    display: none;
+  }
+</style>

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 { getNodesAndEdges as getNodesAndEdgesForDomainEntityMap } from '@utils/node-graphs/domain-entity-map';
 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';
@@ -96,6 +97,15 @@ if (collection === 'domains-canvas') {
   nodes = [...domainNodes, ...messageNodes];
   edges = fetchedEdges;
 }
+
+if (collection === 'domains-entities') {
+  const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForDomainEntityMap({
+    id,
+    version,
+  });
+  nodes = fetchedNodes;
+  edges = fetchedEdges;
+}
 ---
 
 <div>

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

@@ -23,6 +23,7 @@ import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
 import EventNode from './Nodes/Event';
+import EntityNode from './Nodes/Entity';
 import QueryNode from './Nodes/Query';
 import UserNode from './Nodes/User';
 import StepNode from './Nodes/Step';
@@ -85,6 +86,7 @@ const NodeGraphBuilder = ({
       actor: UserNode,
       custom: CustomNode,
       externalSystem: ExternalSystemNode,
+      entities: EntityNode,
     }),
     []
   );
@@ -101,7 +103,16 @@ const NodeGraphBuilder = ({
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
-  const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
+
+  // Check if there are channels to determine if we need the visualizer functionality
+  const hasChannels = useMemo(() => initialNodes.some((node: any) => node.type === 'channels'), [initialNodes]);
+  const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({
+    nodes,
+    edges,
+    setNodes,
+    setEdges,
+    skipProcessing: !hasChannels, // Pass flag to skip processing when no channels
+  });
   const { fitView, getNodes } = useReactFlow();
   const searchRef = useRef<VisualiserSearchRef>(null);
 
@@ -540,27 +551,29 @@ const NodeGraphBuilder = ({
               </div>
               <p className="text-[10px] text-gray-500">Animate events, queries and commands.</p>
             </div>
-            <div>
-              <div className="flex items-center justify-between">
-                <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
-                  Hide Channels
-                </label>
-                <button
-                  id="message-animation-toggle"
-                  onClick={toggleChannelsVisibility}
-                  className={`${
-                    hideChannels ? 'bg-purple-600' : 'bg-gray-200'
-                  } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
-                >
-                  <span
+            {hasChannels && (
+              <div>
+                <div className="flex items-center justify-between">
+                  <label htmlFor="hide-channels-toggle" className="text-sm font-medium text-gray-700">
+                    Hide Channels
+                  </label>
+                  <button
+                    id="hide-channels-toggle"
+                    onClick={toggleChannelsVisibility}
                     className={`${
-                      hideChannels ? 'translate-x-6' : 'translate-x-1'
-                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
-                  />
-                </button>
+                      hideChannels ? 'bg-purple-600' : 'bg-gray-200'
+                    } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                  >
+                    <span
+                      className={`${
+                        hideChannels ? 'translate-x-6' : 'translate-x-1'
+                      } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                    />
+                  </button>
+                </div>
+                <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
               </div>
-              <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
-            </div>
+            )}
             <div className="pt-4 border-t border-gray-200">
               <button
                 onClick={handleExportVisual}
@@ -623,6 +636,7 @@ interface NodeGraphProps {
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
   mode?: 'full' | 'simple';
+  portalId?: string;
 }
 
 const NodeGraph = ({
@@ -638,13 +652,16 @@ const NodeGraph = ({
   linksToVisualiser = false,
   links = [],
   mode = 'full',
+  portalId,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
 
+  const containerToRenderInto = portalId || `${id}-portal`;
+
   useEffect(() => {
     // @ts-ignore
-    setElem(document.getElementById(`${id}-portal`));
+    setElem(document.getElementById(containerToRenderInto));
   }, []);
 
   useEffect(() => {

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

@@ -0,0 +1,151 @@
+import { CubeIcon } from '@heroicons/react/16/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle, Position } from '@xyflow/react';
+import { getIcon } from '@utils/badges';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
+import { useState } from 'react';
+
+interface Data {
+  title: string;
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  entity: CollectionEntry<'entities'>;
+  showTarget?: boolean;
+  showSource?: boolean;
+  externalToDomain?: boolean;
+  domainName?: string;
+  domainId?: string;
+  group?: {
+    type: string;
+    value: string;
+  };
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function EntityNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, entity, externalToDomain, domainName } = data as Data;
+  const { name, version, properties = [], aggregateRoot, styles, sidebar } = entity.data;
+
+  const { node: { color = 'blue', label } = {}, icon = 'CubeIcon' } = styles || {};
+
+  const Icon = getIcon(icon);
+
+  const [hoveredProperty, setHoveredProperty] = useState<string | null>(null);
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div
+          className={classNames(
+            'bg-white border border-blue-300 rounded-lg shadow-sm min-w-[200px]',
+            externalToDomain ? 'border-yellow-400' : ''
+          )}
+        >
+          {/* Table Header */}
+          <div
+            className={classNames(
+              'bg-blue-100 px-4 py-2 rounded-t-lg border-b border-gray-300',
+              externalToDomain ? 'bg-yellow-400' : ''
+            )}
+          >
+            <div className="flex items-center gap-2">
+              {Icon && <Icon className="w-4 h-4 text-gray-600" />}
+              <span className="font-semibold text-gray-800 text-sm">{name}</span>
+              {aggregateRoot && <span className="text-xs bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded">AR</span>}
+            </div>
+            {/* {externalToDomain && domainName && ( */}
+            <div className="text-xs text-yellow-800 font-medium mt-1">from {domainName} domain</div>
+            {/* )} */}
+            {mode === 'full' && <div className="text-xs text-gray-600 mt-1">v{version}</div>}
+          </div>
+
+          {/* Properties Table */}
+          {properties.length > 0 ? (
+            <div className="divide-y divide-gray-200 relative">
+              {properties.map((property: any, index: number) => {
+                const propertyKey = `${property.name}-${index}`;
+                const isHovered = hoveredProperty === propertyKey;
+                return (
+                  <div
+                    key={propertyKey}
+                    className="relative flex items-center justify-between px-4 py-2 hover:bg-gray-50"
+                    onMouseEnter={() => property.description && setHoveredProperty(propertyKey)}
+                    onMouseLeave={() => setHoveredProperty(null)}
+                  >
+                    {/* Target handle */}
+                    <Handle
+                      type="target"
+                      position={Position.Left}
+                      id={`${property.name}-target`}
+                      className="!w-3 !h-3 !bg-white !border-2 !border-gray-400 !rounded-full !left-[-0px]"
+                      style={{ left: '-6px' }}
+                    />
+
+                    {/* Source handle */}
+                    <Handle
+                      type="source"
+                      position={Position.Right}
+                      id={`${property.name}-source`}
+                      className="!w-3 !h-3 !bg-white !border-2 !border-gray-400 !rounded-full !right-[-0px]"
+                      style={{ right: '-6px' }}
+                    />
+
+                    {/* Property content */}
+                    <div className="flex-1 flex items-center justify-between">
+                      <div className="flex items-center gap-1">
+                        <span className="text-sm font-medium text-gray-900">{property.name}</span>
+                        {property.required && <span className="text-red-500 text-xs">*</span>}
+                      </div>
+                      <span className="text-sm text-gray-600 font-mono">{property.type}</span>
+                    </div>
+
+                    {/* Reference indicator */}
+                    {property.references && (
+                      <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
+                        <div className="w-2 h-2 bg-blue-500 rounded-full" title={`References ${property.references}`}></div>
+                      </div>
+                    )}
+
+                    {/* Property Tooltip */}
+                    {isHovered && property.description && (
+                      <div className="absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100">
+                        <div className="text-gray-200 whitespace-normal break-words">{property.description}</div>
+                        <div className="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="px-4 py-3 text-sm text-gray-500 text-center">No properties defined</div>
+          )}
+
+          {/* Main node handles (if no properties) */}
+          {properties.length === 0 && (
+            <>
+              {targetPosition && <Handle type="target" position={targetPosition} />}
+              {sourcePosition && <Handle type="source" position={sourcePosition} />}
+            </>
+          )}
+        </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
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
+          >
+            <a href={buildUrl(`/docs/entities/${entity.data.id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}

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

@@ -17,6 +17,11 @@ interface DomainData {
   version?: string;
 }
 
+interface EntityData {
+  name: string;
+  version?: string;
+}
+
 interface NodeDataContent extends Record<string, unknown> {
   message?: {
     data: MessageData;
@@ -27,6 +32,9 @@ interface NodeDataContent extends Record<string, unknown> {
   domain?: {
     data: DomainData;
   };
+  entity?: {
+    data: EntityData;
+  };
   name?: string;
   version?: string;
 }
@@ -72,12 +80,14 @@ const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
         node.data?.message?.data?.name ||
         node.data?.service?.data?.name ||
         node.data?.domain?.data?.name ||
+        node.data?.entity?.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?.entity?.data?.version ||
         node.data?.version;
       return version ? `${name} (v${version})` : name;
     }, []);

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

@@ -4,6 +4,7 @@ import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
 import Flow from '@components/MDX/Flow/Flow.astro';
+import EntityMap from '@components/MDX/EntityMap/EntityMap.astro';
 import Tiles from '@components/MDX/Tiles/Tiles.astro';
 import Tile from '@components/MDX/Tiles/Tile.astro';
 import Steps from '@components/MDX/Steps/Steps.astro';
@@ -41,6 +42,7 @@ const components = (props: any) => {
     MessageTable: (mdxProp: any) => jsx(MessageTable, { ...props, ...mdxProp }),
     EntityPropertiesTable: (mdxProp: any) => jsx(EntityPropertiesTable, { ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => jsx(NodeGraphPortal, { ...props.data, ...mdxProp, props, mdxProp }),
+    EntityMap,
     OpenAPI,
     ResourceGroupTable: (mdxProp: any) => jsx(ResourceGroupTable, { ...props, ...mdxProp }),
     ResourceLink: (mdxProp: any) => jsx(ResourceLink, { ...props, ...mdxProp }),

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

@@ -485,72 +485,86 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
   );
 
   // Component to render domain content (Overview, Architecture, etc.)
-  const DomainContent = React.memo(({ item, nestingLevel = 0 }: { item: any; nestingLevel?: number }) => {
-    const marginLeft = nestingLevel > 0 ? `ml-${nestingLevel * 4}` : '';
+  const DomainContent = React.memo(
+    ({ item, nestingLevel = 0, className = '' }: { item: any; nestingLevel?: number; className?: string }) => {
+      const marginLeft = nestingLevel > 0 ? `ml-${nestingLevel * 4}` : '';
+      const hasEntities = item.entities && item.entities.length > 0;
 
-    return (
-      <div
-        className={`overflow-hidden transition-[height] duration-150 ease-out ${collapsedGroups[item.href] ? 'h-0' : 'h-auto'}`}
-      >
-        <div className={`space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1 ${marginLeft}`}>
-          <a
-            href={`${item.href}`}
-            data-active={decodedCurrentPath === item.href}
-            className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-              decodedCurrentPath === item.href ? 'bg-purple-100 ' : 'hover:bg-purple-100'
-            }`}
-          >
-            <span className="truncate">Overview</span>
-          </a>
-          {!isVisualizer && (
-            <a
-              href={buildUrlWithParams('/architecture/docs/services', {
-                serviceIds: item.services.map((service: any) => service.data.id).join(','),
-                domainId: item.id,
-                domainName: item.name,
-              })}
-              data-active={window.location.href.includes(`domainId=${item.id}`)}
-              className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-                window.location.href.includes(`domainId=${item.id}`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
-              }`}
-            >
-              <span className="truncate">Architecture</span>
-            </a>
-          )}
-          {!isVisualizer && (
+      return (
+        <div
+          className={`overflow-hidden transition-[height] duration-150 ease-out ${collapsedGroups[item.href] ? 'h-0' : 'h-auto'} ${className}`}
+        >
+          <div className={`space-y-0.5 border-gray-200/80 border-l pl-4  mt-1 ${marginLeft ? marginLeft : 'ml-[9px]'}`}>
             <a
-              href={buildUrl(`/docs/domains/${item.id}/language`)}
-              data-active={decodedCurrentPath.includes(`/docs/domains/${item.id}/language`)}
+              href={`${item.href}`}
+              data-active={decodedCurrentPath === item.href}
               className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
-                decodedCurrentPath.includes(`/docs/domains/${item.id}/language`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                decodedCurrentPath === item.href ? 'bg-purple-100 ' : 'hover:bg-purple-100'
               }`}
             >
-              <span className="truncate">Ubiquitous Language</span>
+              <span className="truncate">Overview</span>
             </a>
-          )}
-          {item.entities.length > 0 && !isVisualizer && (
-            <CollapsibleGroup
-              isCollapsed={collapsedGroups[`${item.href}-entities`]}
-              onToggle={() => toggleGroupCollapse(`${item.href}-entities`)}
-              title={
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    toggleGroupCollapse(`${item.href}-entities`);
-                  }}
-                  className="truncate underline ml-2 text-xs mb-1 py-1"
-                >
-                  Entities ({item.entities.length})
-                </button>
-              }
-            >
-              <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} searchTerm={debouncedSearchTerm} />
-            </CollapsibleGroup>
-          )}
+            {isVisualizer && hasEntities && (
+              <a
+                href={buildUrl(`/${item.href}/entity-map`)}
+                data-active={decodedCurrentPath === `${item.href}/entity-map`}
+                className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                  decodedCurrentPath === `${item.href}/entity-map` ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                }`}
+              >
+                <span className="truncate">Entity Map</span>
+              </a>
+            )}
+            {!isVisualizer && (
+              <a
+                href={buildUrlWithParams('/architecture/docs/services', {
+                  serviceIds: item.services.map((service: any) => service.data.id).join(','),
+                  domainId: item.id,
+                  domainName: item.name,
+                })}
+                data-active={window.location.href.includes(`domainId=${item.id}`)}
+                className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                  window.location.href.includes(`domainId=${item.id}`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                }`}
+              >
+                <span className="truncate">Architecture</span>
+              </a>
+            )}
+            {!isVisualizer && (
+              <a
+                href={buildUrl(`/docs/domains/${item.id}/language`)}
+                data-active={decodedCurrentPath.includes(`/docs/domains/${item.id}/language`)}
+                className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                  decodedCurrentPath.includes(`/docs/domains/${item.id}/language`) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+                }`}
+              >
+                <span className="truncate">Ubiquitous Language</span>
+              </a>
+            )}
+            {item.entities.length > 0 && !isVisualizer && (
+              <CollapsibleGroup
+                isCollapsed={collapsedGroups[`${item.href}-entities`]}
+                onToggle={() => toggleGroupCollapse(`${item.href}-entities`)}
+                title={
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleGroupCollapse(`${item.href}-entities`);
+                    }}
+                    className="truncate underline ml-2 text-xs mb-1 py-1"
+                  >
+                    Entities ({item.entities.length})
+                  </button>
+                }
+              >
+                <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} searchTerm={debouncedSearchTerm} />
+              </CollapsibleGroup>
+            )}
+          </div>
         </div>
-      </div>
-    );
-  });
+      );
+    }
+  );
 
   if (!isInitialized) return null;
 
@@ -661,7 +675,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                                     data-active={decodedCurrentPath === subdomain.href}
                                   >
                                     <DomainItem item={subdomain} isSubdomain={true} nestingLevel={1} />
-                                    <DomainContent item={subdomain} nestingLevel={1} />
+                                    <DomainContent item={subdomain} nestingLevel={3} className="ml-6" />
                                   </div>
                                 ))}
                               </div>

package/eventcatalog/src/content.config.ts

@@ -429,6 +429,9 @@ const entities = defineCollection({
             type: z.string(),
             required: z.boolean().optional(),
             description: z.string().optional(),
+            references: z.string().optional(),
+            referencesIdentifier: z.string().optional(),
+            relationType: z.string().optional(),
           })
         )
         .optional(),

package/eventcatalog/src/hooks/eventcatalog-visualizer.ts

@@ -16,9 +16,16 @@ interface EventCatalogVisualizerProps {
   edges: Edge[];
   setNodes: (nodes: Node[]) => void;
   setEdges: (edges: Edge[]) => void;
+  skipProcessing?: boolean;
 }
 
-export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }: EventCatalogVisualizerProps) => {
+export const useEventCatalogVisualiser = ({
+  nodes,
+  edges,
+  setNodes,
+  setEdges,
+  skipProcessing = false,
+}: EventCatalogVisualizerProps) => {
   const [hideChannels, setHideChannels] = useState(false);
   const [initialNodes] = useState(nodes);
   const [initialEdges] = useState(edges);
@@ -77,6 +84,11 @@ export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }:
   }, [edges, channels]);
 
   useEffect(() => {
+    // Skip processing if there are no channels to manage
+    if (skipProcessing) {
+      return;
+    }
+
     if (hideChannels) {
       const { nodes: newNodes, edges: newEdges } = getNodesAndEdgesFromDagre({ nodes: updatedNodes, edges: updatedEdges });
       setNodes(newNodes);
@@ -85,7 +97,7 @@ export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }:
       setNodes(initialNodes);
       setEdges(initialEdges);
     }
-  }, [hideChannels]);
+  }, [hideChannels, skipProcessing]);
 
   return {
     hideChannels,

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/_index.data.ts

@@ -0,0 +1,78 @@
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { isAuthEnabled } from '@utils/feature';
+import { domainHasEntities, getDomains, type Domain } from '@utils/collections/domains';
+
+export class Page extends HybridPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled()) {
+      return [];
+    }
+
+    const domains = await getDomains();
+    const domainsWithEntities = domains.filter((domain) => domainHasEntities(domain));
+
+    return domainsWithEntities.flatMap((domain) => {
+      return {
+        params: {
+          type: 'domains',
+          id: domain.data.id,
+          version: domain.data.version,
+        },
+        props: {
+          type: 'domains',
+          ...domain,
+        },
+      };
+    });
+  }
+
+  protected static async fetchData(params: any) {
+    const { id, version } = params;
+
+    if (!id || !version) {
+      return null;
+    }
+
+    // Get all items of the specified type
+    const items = await getDomains();
+
+    // Find the specific item by id and version, and only if it has entities
+    const item = items.find((i) => i.data.id === id && i.data.version === version && domainHasEntities(i));
+
+    console.log('ITEM', item);
+
+    if (!item) {
+      return null;
+    }
+
+    return item;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Domain entity map page not found',
+    });
+  }
+
+  static get clientAuthScript(): string {
+    if (!isAuthEnabled()) {
+      return '';
+    }
+
+    return `
+      if (typeof window !== 'undefined' && !import.meta.env.SSR) {
+        fetch('/api/auth/session')
+          .then(res => res.json())
+          .then(session => {
+            if (!session?.user) {
+              window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+            }
+          })
+          .catch(() => {
+            window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+          });
+      }
+    `;
+  }
+}

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/index.astro

@@ -0,0 +1,52 @@
+---
+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';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+// Get data
+const props = await Page.getData(Astro);
+
+const {
+  data: { id },
+  collection,
+} = props;
+---
+
+<VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
+  <div class="bg-gray-100/50 m-4">
+    <div class="h-[calc(100vh-130px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
+    <NodeGraph
+      id={id}
+      collection={`${collection}-entities`}
+      title={`${props.data.name} (v${props.data.version}) - Entity Map`}
+      mode="full"
+      linkTo="visualiser"
+      version={props.data.version}
+      linksToVisualiser={false}
+      href={{
+        label: `Open documentation for ${props.data.name} v${props.data.version}`,
+        url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),
+      }}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>
+
+<script define:vars={{ id }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const embeded = params.embed === 'true' ? true : false;
+    const viewport = document.getElementById(`${id}-portal`);
+
+    if (embeded) {
+      viewport.style.height = 'calc(100vh - 30px)';
+    }
+  });
+</script>

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

@@ -147,3 +147,7 @@ export const getDomainsForService = async (service: Service): Promise<Domain[]>
     return services.some((s) => s.data.id === service.data.id);
   });
 };
+
+export const domainHasEntities = (domain: Domain): boolean => {
+  return (domain.data.entities && domain.data.entities.length > 0) || false;
+};

package/eventcatalog/src/utils/entities.ts

@@ -5,7 +5,7 @@ import { getVersionForCollectionItem, satisfies } from './collections/util';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
-type Entity = CollectionEntry<'entities'> & {
+export type Entity = CollectionEntry<'entities'> & {
   catalog: {
     path: string;
     filePath: string;

package/eventcatalog/src/utils/node-graphs/domain-entity-map.ts

@@ -0,0 +1,218 @@
+import { getCollection, getEntry } from 'astro:content';
+import { generateIdForNode } from './utils/utils';
+import ELK from 'elkjs/lib/elk.bundled.js';
+import { MarkerType } from '@xyflow/react';
+import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import { getVersionFromCollection } from '@utils/collections/versions';
+import { getEntities, type Entity } from '@utils/entities';
+import { getDomains, type Domain } from '@utils/collections/domains';
+
+const elk = new ELK();
+
+interface Props {
+  id: string;
+  version: string;
+}
+
+export const getNodesAndEdges = async ({ id, version }: Props) => {
+  let nodes = [] as any,
+    edges = [] as any;
+
+  const allDomains = await getDomains();
+  const entities = await getEntities();
+
+  const domain = getVersionFromCollection(allDomains, id, version)[0] as Domain;
+  const domainEntities = (domain?.data?.entities ?? []) as any;
+
+  const entitiesWithReferences = domainEntities.filter((entity: Entity) =>
+    entity.data.properties?.some((property: any) => property.references)
+  );
+  // Creates all the entity nodes for the domain
+  for (const entity of domainEntities) {
+    const nodeId = generateIdForNode(entity);
+    nodes.push({
+      id: nodeId,
+      type: 'entities',
+      position: { x: 0, y: 0 },
+      data: { label: entity.data.name, entity, domainName: domain?.data.name, domainId: domain?.data.id },
+    });
+  }
+
+  // Create entities that are referenced but not owned by this domain
+  const listOfReferencedEntities = entitiesWithReferences
+    .map((entity: Entity) => entity.data.properties?.map((property: any) => property.references))
+    .flat()
+    .filter((ref: any) => ref !== undefined);
+
+  const externalToDomain = [...new Set(listOfReferencedEntities)] // Remove duplicates
+    .filter((entityId: any) => !domainEntities.some((domainEntity: any) => domainEntity.id === entityId));
+
+  // Helper function to find which domain an entity belongs to
+  const findEntityDomain = (entityId: string) => {
+    return allDomains.find((domain) => domain.data.entities?.some((domainEntity: any) => domainEntity.data.id === entityId));
+  };
+
+  const addedExternalEntities = [];
+  for (const entityId of externalToDomain) {
+    const externalEntity = getItemsFromCollectionByIdAndSemverOrLatest(entities, entityId as string, 'latest')[0] as Entity;
+
+    if (externalEntity) {
+      const nodeId = generateIdForNode(externalEntity);
+
+      // Find which domain this entity belongs to
+      const entityDomain = findEntityDomain(entityId as string);
+
+      const domainName = entityDomain?.data.name || 'Unknown Domain';
+      const domainId = entityDomain?.data.id || 'unknown';
+
+      // Check if we haven't already added this entity
+      if (!nodes.some((node: any) => node.id === nodeId)) {
+        nodes.push({
+          id: nodeId,
+          type: 'entities',
+          position: { x: 0, y: 0 },
+          data: {
+            label: externalEntity.data.name,
+            entity: externalEntity,
+            externalToDomain: true,
+            domainName: domainName,
+            domainId: domainId,
+          },
+        });
+        addedExternalEntities.push(externalEntity);
+      }
+    } else {
+      console.warn(`Entity "${entityId}" not found in catalog`);
+    }
+  }
+
+  // Add external entities to the references list so edges will be created
+  entitiesWithReferences.push(...addedExternalEntities);
+
+  // Create complete list of entities for edge creation and layout
+  const allEntitiesInGraph = [...domainEntities, ...addedExternalEntities];
+
+  // Go through any entities that are related to other entities
+  for (const entity of entitiesWithReferences) {
+    // Get a list of properties that reference other entities
+    const allReferencesForEntity = entity.data.properties?.filter((property: any) => property.references) ?? [];
+
+    for (const referenceProperty of allReferencesForEntity) {
+      // Find the referenced entity by matching the references field with entity IDs
+      // Look in both domain entities and external entities
+      const referencedEntity = allEntitiesInGraph.find((targetEntity) => targetEntity.data.id === referenceProperty.references);
+
+      if (referencedEntity) {
+        const sourceNodeId = generateIdForNode(entity);
+        const targetNodeId = generateIdForNode(referencedEntity);
+
+        // Use the property name as the source handle
+        const sourceHandle = `${referenceProperty.name}-source`;
+
+        // Use referencesIdentifier if provided, otherwise use identifier or first property
+        let targetHandle = '';
+        if (referenceProperty.referencesIdentifier) {
+          targetHandle = `${referenceProperty.referencesIdentifier}-target`;
+        } else if (referencedEntity.data.identifier) {
+          targetHandle = `${referencedEntity.data.identifier}-target`;
+        } else if (referencedEntity.data.properties && referencedEntity.data.properties.length > 0) {
+          // Default to the first property if no identifier is specified
+          targetHandle = `${referencedEntity.data.properties[0].name}-target`;
+        } else {
+          // Skip this edge if we can't determine the target handle
+          console.warn(
+            `Could not determine target handle for reference from ${entity.data.name}.${referenceProperty.name} to ${referencedEntity.data.name}`
+          );
+          continue;
+        }
+
+        const edgeId = `${sourceNodeId}-${referenceProperty.name}-to-${targetNodeId}-${targetHandle.replace('-target', '')}`;
+
+        edges.push({
+          id: edgeId,
+          source: sourceNodeId,
+          sourceHandle: sourceHandle,
+          target: targetNodeId,
+          targetHandle: targetHandle,
+          type: 'animated',
+          animated: true,
+          label: referenceProperty.relationType || 'references',
+          style: {
+            strokeWidth: 2,
+            stroke: '#000', // gray color for relationship lines
+            strokeDasharray: '5,5', // dashed line
+          },
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            width: 20,
+            height: 20,
+            color: '#000',
+          },
+        });
+      } else {
+        console.warn(
+          `Referenced entity "${referenceProperty.references}" not found for ${entity.data.name}.${referenceProperty.name}`
+        );
+      }
+    }
+  }
+
+  // No virtual edges - only show actual relationships between entities
+
+  // Separate entities with and without relationships (including external entities)
+  const entitiesWithRelationships = allEntitiesInGraph.filter((entity) => {
+    // Has outgoing references
+    const hasOutgoingRefs = entity.data.properties?.some((property: any) => property.references);
+    // Has incoming references (is referenced by others)
+    const hasIncomingRefs = entitiesWithReferences.some((e: any) =>
+      e.data.properties?.some((prop: any) => prop.references === entity.data.id)
+    );
+    return hasOutgoingRefs || hasIncomingRefs;
+  });
+
+  // Prepare ELK graph structure
+  const elkNodes = nodes.map((node: any) => ({
+    id: node.id,
+    width: 280,
+    height: 200,
+  }));
+
+  const elkEdges = edges.map((edge: any) => ({
+    id: edge.id,
+    sources: [edge.source],
+    targets: [edge.target],
+  }));
+
+  const elkGraph = {
+    id: 'root',
+    layoutOptions: {
+      'elk.algorithm': 'force',
+      'elk.force.repulsivePower': '2.0',
+      'elk.force.iterations': '500',
+      'elk.spacing.nodeNode': '150',
+      'elk.spacing.edgeNode': '75',
+      'elk.spacing.edgeEdge': '30',
+      'elk.padding': '[top=50,left=50,bottom=50,right=50]',
+      'elk.separateConnectedComponents': 'true',
+    },
+    children: elkNodes,
+    edges: elkEdges,
+  };
+
+  // Run ELK layout
+  const layoutedGraph = await elk.layout(elkGraph);
+
+  // Apply positions to nodes
+  const positionedNodes = nodes.map((node: any) => {
+    const elkNode = layoutedGraph.children?.find((n: any) => n.id === node.id);
+    return {
+      ...node,
+      position: {
+        x: elkNode?.x || 0,
+        y: elkNode?.y || 0,
+      },
+    };
+  });
+
+  return { nodes: positionedNodes, edges };
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.48.5",
+  "version": "2.49.1",
   "publishConfig": {
     "access": "public"
   },
@@ -71,6 +71,7 @@
     "diff": "^7.0.0",
     "diff2html": "^3.4.48",
     "dotenv": "^16.5.0",
+    "elkjs": "^0.10.0",
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",