@eventcatalog/core 2.16.1 → 2.16.3

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-J5H7ICLD.js";
-import "../chunk-GEPV3ACK.js";
+} from "../chunk-JLXI6Z6O.js";
+import "../chunk-FVZU5WEI.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.16.1";
+var version = "2.16.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-A3QFF66M.js";
-import "../chunk-J5H7ICLD.js";
-import "../chunk-GEPV3ACK.js";
+} from "../chunk-ULFGBIV2.js";
+import "../chunk-JLXI6Z6O.js";
+import "../chunk-FVZU5WEI.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-GEPV3ACK.js → chunk-FVZU5WEI.js}

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

package/dist/{chunk-J5H7ICLD.js → chunk-JLXI6Z6O.js}

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

package/dist/{chunk-A3QFF66M.js → chunk-ULFGBIV2.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -1,13 +1,13 @@
 import {
   log_build_default
-} from "./chunk-A3QFF66M.js";
-import "./chunk-J5H7ICLD.js";
+} from "./chunk-ULFGBIV2.js";
+import "./chunk-JLXI6Z6O.js";
 import {
   catalogToAstro
 } from "./chunk-55YPRY5U.js";
 import {
   VERSION
-} from "./chunk-GEPV3ACK.js";
+} from "./chunk-FVZU5WEI.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";

package/eventcatalog/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "eventcatalog",
+  "homepage": "https://github.com/event-catalog/eventcatalog",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/event-catalog/eventcatalog.git",
+    "directory": "eventcatalog/"
+  },
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "astro": "astro",
+    "build": "astro build",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "dependencies": {
+    "@astrojs/markdown-remark": "^5.3.0",
+    "@astrojs/mdx": "^3.1.8",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.2",
+    "@asyncapi/avro-schema-parser": "^3.0.24",
+    "@asyncapi/parser": "^3.4.0",
+    "@asyncapi/react-component": "^2.4.3",
+    "@headlessui/react": "^2.0.3",
+    "@heroicons/react": "^2.1.3",
+    "@stoplight/json-schema-viewer": "^4.7.0",
+    "@stoplight/mosaic": "^1.53.2",
+    "@tailwindcss/typography": "^0.5.13",
+    "@tanstack/react-table": "^8.17.3",
+    "@xyflow/react": "^12.3.6",
+    "astro": "^4.16.5",
+    "astro-expressive-code": "^0.36.1",
+    "astro-pagefind": "^1.6.0",
+    "astro-seo": "^0.8.4",
+    "dagre": "^0.8.5",
+    "diff": "^7.0.0",
+    "diff2html": "^3.4.48",
+    "html-to-image": "^1.11.11",
+    "js-yaml": "^4.1.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.merge": "4.6.2",
+    "lucide-react": "^0.453.0",
+    "mermaid": "^10.9.1",
+    "prismjs": "^1.29.0",
+    "rapidoc": "^9.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^3.0.1",
+    "semver": "7.6.3",
+    "tailwindcss": "^3.4.3",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/dagre": "^0.7.52",
+    "@types/diff": "^5.2.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.merge": "4.6.9",
+    "@types/node": "^20.14.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/semver": "^7.5.8",
+    "typescript": "^5.4.5"
+  }
+}

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

@@ -7,7 +7,7 @@ export default function Example({ title, children }: any) {
     <div className="border border-gray-200 rounded-md px-4 shadow-sm py-2 accordion">
       <Disclosure as="div" key={title} className="">
         {({ open }) => (
-          <>
+          <div>
             <DisclosureButton className="flex w-full items-start justify-between text-left text-gray-900">
               <span className="text-base font-semibold leading-7">{title}</span>
               <span className="ml-6 flex h-7 items-center">
@@ -21,7 +21,7 @@ export default function Example({ title, children }: any) {
             <DisclosurePanel as="dd" className="pr-12 not-prose py-4">
               <p className="text-base leading-7 text-gray-600">{children}</p>
             </DisclosurePanel>
-          </>
+          </div>
         )}
       </Disclosure>
     </div>

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

@@ -4,13 +4,13 @@ import Admonition from '../Admonition';
 
 <div class="mb-4">
   <Admonition type="warning">
-    <>
+    <div>
       <span class="block font-bold">{`<AsyncAPI/>`} component now deprecated</span>
       <span class="block"
         >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
           >Read more here.</a
         ></span
       >
-    </>
+    </div>
   </Admonition>
 </div>

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

@@ -25,9 +25,9 @@ const ChannelParameters = (data: CollectionEntry<'channels'>['data']) => {
       <div>
         <p className="text-md">
           {data.address && (
-            <>
+            <div>
               <span className="font-semibold">Address:</span> <code className="bg-gray-100 p-1 rounded">{data.address}</code>
-            </>
+            </div>
           )}
           {data.protocols && data.protocols.length > 0 && (
             <div className="mt-2 flex items-center space-x-1">

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

@@ -23,12 +23,12 @@ const { nodes, edges } = await getNodesAndEdges({
 {
   !flow && (
     <Admonition type="warning">
-      <>
+      <div>
         <span class="block font-bold">{`<Flow/>`} failed to load</span>
         <span class="block">
           Tried to load flow id: {id} with version {version}. Make sure you have this flow defined in your project.
         </span>
-      </>
+      </div>
     </Admonition>
   )
 }

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

@@ -1,4 +1,4 @@
-import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from 'reactflow';
+import { Panel, useReactFlow, getNodesBounds, getViewportForBounds } from '@xyflow/react';
 import { toPng } from 'html-to-image';
 import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 
@@ -19,7 +19,7 @@ function DownloadButton({ filename, addPadding = true }: { filename?: string; ad
     const nodesBounds = getNodesBounds(getNodes());
     const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
     const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
-    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2);
+    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2, 0);
 
     // Hide the button
     // @ts-ignore

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

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { BaseEdge, getBezierPath } from 'reactflow';
+import { BaseEdge, getBezierPath } from '@xyflow/react';
 
 const AnimatedMessageEdge = ({
   id,
@@ -44,6 +44,7 @@ const AnimatedMessageEdge = ({
   const randomDelay = useMemo(() => Math.random() * 1, []);
 
   return (
+    // @ts-ignore
     <>
       <BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
       {/* Circle Icon */}

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

@@ -6,7 +6,10 @@ import {
   getNodesAndEdgesForEvents,
   getNodesAndEdgesForQueries,
 } from '@utils/node-graphs/message-node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
+import {
+  getNodesAndEdges as getNodesAndEdgesForDomain,
+  getNodesAndEdgesForDomainContextMap,
+} from '@utils/node-graphs/domains-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
 
 interface Props {
@@ -24,8 +27,10 @@ interface Props {
 }
 
 const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
+
 let nodes = [],
   edges = [];
+
 const getNodesAndEdgesFunctions = {
   services: getNodesAndEdgesForService,
   events: getNodesAndEdgesForEvents,
@@ -47,6 +52,12 @@ if (collection in getNodesAndEdgesFunctions) {
   nodes = fetchedNodes;
   edges = fetchedEdges;
 }
+
+if (collection === 'domain-context-map') {
+  const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForDomainContextMap({});
+  nodes = fetchedNodes;
+  edges = fetchedEdges;
+}
 ---
 
 <div>

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import ReactFlow, {
+import {
+  ReactFlow,
   Background,
   ConnectionLineType,
   Controls,
@@ -11,8 +12,8 @@ import ReactFlow, {
   type Edge,
   type Node,
   useReactFlow,
-} from 'reactflow';
-import 'reactflow/dist/style.css';
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
@@ -105,10 +106,10 @@ const NodeGraphBuilder = ({
     (_: any, node: Node) => {
       if (linksToVisualiser) {
         if (node.type === 'events' || node.type === 'commands') {
-          navigate(getVisualiserUrlForCollection(node.data.message));
+          navigate(getVisualiserUrlForCollection(node.data.message as CollectionEntry<CollectionTypes>));
         }
         if (node.type === 'services') {
-          navigate(getVisualiserUrlForCollection(node.data.service));
+          navigate(getVisualiserUrlForCollection(node.data.service as CollectionEntry<'services'>));
         }
         return;
       }

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

@@ -2,7 +2,7 @@ import { BoltIcon } from '@heroicons/react/16/solid';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
 import type { CollectionMessageTypes, CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

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

@@ -1,6 +1,6 @@
 import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

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

@@ -1,6 +1,6 @@
 import { BoltIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

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

@@ -1,7 +1,7 @@
 import { ServerIcon } from '@heroicons/react/16/solid';
 import { GlobeAmericasIcon } from '@heroicons/react/20/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   label: string;

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

@@ -1,6 +1,6 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;

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

@@ -1,6 +1,6 @@
 import { ServerIcon } from '@heroicons/react/16/solid';
 import type { CollectionEntry } from 'astro:content';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   label: string;

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

@@ -1,4 +1,4 @@
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;
@@ -45,7 +45,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
         )}
 
         {summary && (
-          <>
+          <div>
             <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
               <span className="text-xs font-bold block pb-0.5">{title}</span>
             </div>
@@ -56,7 +56,7 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
                 </div>
               </div>
             )}
-          </>
+          </div>
         )}
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 import { UserIcon } from '@heroicons/react/20/solid';
-import { Handle } from 'reactflow';
+import { Handle } from '@xyflow/react';
 
 interface Data {
   title: string;
@@ -57,7 +57,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
         )}
 
         {summary && mode === 'full' && (
-          <>
+          <div>
             <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
               <span className="text-xs font-bold block pb-0.5">{name}</span>
             </div>
@@ -68,7 +68,7 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
                 </div>
               </div>
             )}
-          </>
+          </div>
         )}
       </div>
     </div>

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

@@ -4,13 +4,13 @@ import Admonition from '../Admonition';
 
 <div class="mb-4">
   <Admonition type="warning">
-    <>
+    <div>
       <span class="block font-bold">{`<OpenAPI/>`} component now deprecated</span>
       <span class="block"
         >Use the new specifications frontmatter api. <a href="https://www.eventcatalog.dev/docs/api/service-api"
           >Read more here.</a
         ></span
       >
-    </>
+    </div>
   </Admonition>
 </div>

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

@@ -82,10 +82,10 @@ try {
           {/* User has tried to load the schema, but it was not found on file system */}
           {!schema.exists && (
             <Admonition type="warning">
-              <>
+              <div>
                 <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
                 <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
-              </>
+              </div>
             </Admonition>
           )}
         </div>

package/eventcatalog/src/components/Tables/Table.tsx

@@ -67,7 +67,7 @@ export const Table = ({
   });
 
   return (
-    <>
+    <div>
       {/* <div className='text-right text-gray-400'>{table.getPrePaginationRowModel().rows.length} results</div> */}
       <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
         <table className="min-w-full divide-y divide-gray-200 rounded-md ">
@@ -171,7 +171,7 @@ export const Table = ({
           </select>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 
@@ -225,7 +225,7 @@ function Filter({ column }: { column: Column<any, unknown> }) {
   }, [column.getFacetedUniqueValues(), filterVariant]);
 
   return (
-    <>
+    <div>
       {/* Autocomplete suggestions from faceted values feature */}
       <datalist id={column.id + 'list'}>
         {sortedUniqueValues.map((value: any, index) => (
@@ -241,6 +241,6 @@ function Filter({ column }: { column: Column<any, unknown> }) {
         list={column.id + 'list'}
       />
       <div className="h-1" />
-    </>
+    </div>
   );
 }

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState, useEffect } from 'react';
-import { type Edge, type Node } from 'reactflow';
+import { type Edge, type Node } from '@xyflow/react';
 import {
   createEdge,
   generatedIdForEdge,
@@ -8,6 +8,8 @@ import {
   getEdgeLabelForServiceAsTarget,
   getNodesAndEdgesFromDagre,
 } from '@utils/node-graphs/utils/utils';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionMessageTypes, CollectionTypes } from '@types';
 
 interface EventCatalogVisualizerProps {
   nodes: Node[];
@@ -50,18 +52,21 @@ export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }:
         return [...acc, edge];
       }
 
+      const dataTarget = data?.target as CollectionEntry<CollectionTypes>;
+      const dataSource = data?.source as CollectionEntry<CollectionTypes>;
+
       if (sourceIsChannel) {
         const edgeLabel =
-          data.target.collection === 'services'
-            ? getEdgeLabelForMessageAsSource(data.source)
-            : getEdgeLabelForServiceAsTarget(data.target);
+          dataTarget?.collection === 'services'
+            ? getEdgeLabelForMessageAsSource(dataSource as CollectionEntry<CollectionMessageTypes>)
+            : getEdgeLabelForServiceAsTarget(dataTarget as CollectionEntry<CollectionMessageTypes>);
 
         return [
           ...acc,
           createEdge({
-            id: generatedIdForEdge(data.source, data.target),
-            source: generateIdForNode(data.source),
-            target: generateIdForNode(data.target),
+            id: generatedIdForEdge(dataSource, dataTarget),
+            source: generateIdForNode(dataSource),
+            target: generateIdForNode(dataTarget),
             label: edgeLabel,
           }),
         ];

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -95,7 +95,7 @@ const navigationItems = [
   },
 ];
 
-const sideNav = allData.reduce((acc, item) => {
+const allDataAsSideNav = allData.reduce((acc, item) => {
   const title = item.collection;
   const group = acc[title] || [];
   const currentPath = Astro.url.pathname;
@@ -129,6 +129,15 @@ const sideNav = allData.reduce((acc, item) => {
   };
 }, {} as any);
 
+const sideNav = {
+  ...(currentPath.includes('visualiser')
+    ? {
+        'bounded context map': [{ label: 'Domain map', href: '/visualiser/context-map', collection: 'bounded-context-map' }],
+      }
+    : {}),
+  ...allDataAsSideNav,
+};
+
 const currentNavigationItem = navigationItems.find((item) => item.current);
 const { title, description, sidebar: showSideBarOverride } = Astro.props;
 

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

@@ -81,7 +81,7 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
         <div class="py-4 w-full min-h-[calc(100vh-10em)]">
           {
             ubiquitousLanguage && (
-              <>
+              <div>
                 <div class="mb-6">
                   <input
                     type="text"
@@ -102,13 +102,13 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
                       <div class="term-card block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white min-h-[12em] cursor-pointer">
                         <div class="flex flex-col h-full space-y-8">
                           {term.icon && (
-                            <>
+                            <div>
                               {(() => {
                                 const Icon = LucideIcons[term.icon as keyof typeof LucideIcons];
                                 //@ts-ignore
                                 return Icon ? <Icon className="w-6 h-6 text-primary" /> : null;
                               })()}
-                            </>
+                            </div>
                           )}
                           <div>
                             <h3 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
@@ -119,12 +119,12 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
                                 {term.summary}
                               </p>
                               {term.description && (
-                                <>
+                                <div>
                                   <p class="description-text hidden text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm whitespace-pre-line">
                                     {term.description}
                                   </p>
                                   <span class="show-more-text text-sm text-primary font-medium">Show more</span>
-                                </>
+                                </div>
                               )}
                             </div>
                           </div>
@@ -138,7 +138,7 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
                   <h3 class="text-lg font-medium text-gray-900">No matching terms</h3>
                   <p class="mt-2 text-sm text-gray-500">Try adjusting your search terms.</p>
                 </div>
-              </>
+              </div>
             )
           }
         </div>

package/eventcatalog/src/pages/visualiser/context-map/index.astro

@@ -0,0 +1,30 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import { ViewTransitions } from 'astro:transitions';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+---
+
+<VerticalSideBarLayout title={`Visualiser | Bounded context map`}>
+  <div class="bg-gray-100/50 m-4">
+    <div
+      class="h-[calc(100vh-110px)] w-full relative border border-gray-200"
+      id={`domain-context-map-portal`}
+      transition:animate="fade"
+    >
+    </div>
+    <NodeGraph
+      id="domain-context-map"
+      collection="domain-context-map"
+      title="Bounded context map"
+      mode="full"
+      linkTo="visualiser"
+      version="1.0.0"
+      linksToVisualiser={false}
+      href={{
+        label: ``,
+        url: '/',
+      }}
+    />
+  </div>
+  <ViewTransitions />
+</VerticalSideBarLayout>

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

@@ -9,6 +9,7 @@ import {
   UserIcon,
   ArrowsRightLeftIcon,
   VariableIcon,
+  MapIcon,
 } from '@heroicons/react/24/outline';
 import { BookText } from 'lucide-react';
 
@@ -36,6 +37,8 @@ export const getIconForCollection = (collection: string) => {
       return VariableIcon;
     case 'ubiquitousLanguages':
       return BookText;
+    case 'bounded-context-map':
+      return MapIcon;
     default:
       return ServerIcon;
   }

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

@@ -2,6 +2,7 @@ import { getItemsFromCollectionByIdAndSemverOrLatest, getVersionForCollectionIte
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
+import semver from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
@@ -65,3 +66,37 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
     };
   });
 };
+
+export const getProducersOfMessage = (services: Service[], message: CollectionEntry<'events' | 'commands' | 'queries'>) => {
+  return services.filter((service) => {
+    return service.data.sends?.some((send) => {
+      const idMatch = send.id === message.data.id;
+
+      // If no version specified in send, treat as 'latest'
+      if (!send.version) return idMatch;
+
+      // If version is 'latest', match any version
+      if (send.version === 'latest') return idMatch;
+
+      // Use semver to compare versions
+      return idMatch && semver.satisfies(message.data.version, send.version);
+    });
+  });
+};
+
+export const getConsumersOfMessage = (services: Service[], message: CollectionEntry<'events' | 'commands' | 'queries'>) => {
+  return services.filter((service) => {
+    return service.data.receives?.some((receive) => {
+      const idMatch = receive.id === message.data.id;
+
+      // If no version specified in send, treat as 'latest'
+      if (!receive.version) return idMatch;
+
+      // If version is 'latest', match any version
+      if (receive.version === 'latest') return idMatch;
+
+      // Use semver to compare versions
+      return idMatch && semver.satisfies(message.data.version, receive.version);
+    });
+  });
+};

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

@@ -1,19 +1,222 @@
 import { getCollection } from 'astro:content';
-import { createDagreGraph, calculatedNodes } from '@utils/node-graphs/utils/utils';
+import {
+  createDagreGraph,
+  calculatedNodes,
+  generateIdForNode,
+  createNode,
+  getEdgeLabelForServiceAsTarget,
+  generatedIdForEdge,
+  createEdge,
+} from '@utils/node-graphs/utils/utils';
 import { getNodesAndEdges as getServicesNodeAndEdges } from './services-node-graph';
 import merge from 'lodash.merge';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import type { Node } from '@xyflow/react';
+import { getProducersOfMessage } from '@utils/collections/services';
 
 type DagreGraph = any;
 
 interface Props {
+  defaultFlow?: DagreGraph;
+}
+
+export const getNodesAndEdgesForDomainContextMap = async ({ defaultFlow = null }: Props) => {
+  const flow = defaultFlow ?? createDagreGraph({ ranksep: 360, nodesep: 50, edgesep: 50 });
+  let nodes = [] as any,
+    edges = [] as any;
+
+  const allDomains = await getCollection('domains');
+  const domains = allDomains.filter((domain) => !domain.id.includes('/versioned'));
+  const services = await getCollection('services');
+
+  const events = await getCollection('events');
+  const commands = await getCollection('commands');
+  const queries = await getCollection('queries');
+
+  const messages = [...events, ...commands, ...queries];
+
+  domains.forEach((domain, index) => {
+    const nodeId = generateIdForNode(domain);
+    const rawServices = domain.data.services ?? [];
+    const domainServices = rawServices
+      .map((service) => getItemsFromCollectionByIdAndSemverOrLatest(services, service.id, service.version))
+      .flat()
+      .filter((e) => e !== undefined);
+
+    // Calculate domain node size based on services
+    const servicesCount = domainServices.length;
+    const SERVICES_PER_ROW = 1;
+    const SERVICE_WIDTH = 330;
+    const SERVICE_HEIGHT = 100;
+    const PADDING = 40;
+    const TITLE_HEIGHT = 20;
+
+    const rows = Math.ceil(servicesCount / SERVICES_PER_ROW);
+    const domainWidth = SERVICE_WIDTH * SERVICES_PER_ROW;
+    const domainHeight = SERVICE_HEIGHT * rows + PADDING * 4;
+
+    // Position domains in a grid layout
+    const DOMAINS_PER_ROW = 2;
+    const rowIndex = Math.floor(index / DOMAINS_PER_ROW);
+    const colIndex = index % DOMAINS_PER_ROW;
+
+    const test = servicesCount * SERVICE_HEIGHT + PADDING * 2;
+
+    nodes.push({
+      id: nodeId,
+      type: 'group',
+      position: {
+        x: colIndex * (domainWidth + 400), // Increased from 100 to 400px gap between domains
+        y: rowIndex * (domainHeight + 300), // Increased from 100 to 300px gap between rows
+      },
+      style: {
+        width: domainWidth,
+        height: domainHeight,
+        backgroundColor: 'transparent',
+        borderRadius: '8px',
+        border: '1px solid #ddd',
+        'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.1)',
+      },
+      data: {
+        label: domain.data.name,
+        domain,
+      },
+    });
+
+    nodes.push({
+      id: `domain-context-map-title-${domain.data.name}`,
+      data: { label: `Bounded Context: ${domain.data.name}` },
+      position: { x: 0, y: 0 },
+      style: {
+        height: 40,
+        backgroundColor: 'transparent',
+        border: 'none',
+        color: 'black',
+        width: domainWidth,
+      },
+      extent: 'parent',
+      parentId: nodeId,
+      connectable: false,
+      sourcePosition: 'left',
+      targetPosition: 'right',
+      draggable: false,
+    } as Node);
+
+    // Position services in a grid within the domain
+    if (domainServices) {
+      domainServices.forEach((service, serviceIndex) => {
+        const row = Math.floor(serviceIndex / SERVICES_PER_ROW);
+        const col = serviceIndex % SERVICES_PER_ROW;
+        const serviceNodeId = `service-${domain.id}-${service.id}`;
+
+        // Add spacing between services
+        const SERVICE_MARGIN = 25;
+        const xPosition = PADDING + col * (SERVICE_WIDTH + SERVICE_MARGIN) + 20;
+        const yPosition = PADDING + row * (SERVICE_HEIGHT + SERVICE_MARGIN) + TITLE_HEIGHT;
+
+        nodes.push({
+          id: generateIdForNode(service),
+          sourcePosition: 'right',
+          targetPosition: 'left',
+          type: 'services',
+          position: {
+            x: xPosition,
+            y: yPosition,
+          },
+          parentId: nodeId,
+          extent: 'parent',
+          draggable: false,
+          data: {
+            mode: 'full',
+            service,
+          },
+        });
+
+        // Edges
+        const rawReceives = service.data.receives ?? [];
+        const rawSends = service.data.sends ?? [];
+
+        const receives = rawReceives
+          .map((receive) => getItemsFromCollectionByIdAndSemverOrLatest(messages, receive.id, receive.version))
+          .flat();
+        const sends = rawSends.map((send) => getItemsFromCollectionByIdAndSemverOrLatest(messages, send.id, send.version)).flat();
+
+        for (const receive of receives) {
+          const producers = getProducersOfMessage(services, receive);
+
+          for (const producer of producers) {
+            const isSameDomain = domainServices.some((domainService) => domainService.data.id === producer.data.id);
+
+            if (!isSameDomain) {
+              // WIP... adding messages?
+              // edges.push(createEdge({
+              //   id: generatedIdForEdge(receive, service),
+              //   source: generateIdForNode(receive),
+              //   target: generateIdForNode(service),
+              //   label: getEdgeLabelForServiceAsTarget(receive),
+              //   zIndex: 1000,
+              // }));
+
+              // Find the producer and consumer nodes to get their positions
+              // const producerNode = nodes.find(n => n.id === generateIdForNode(producer));
+              // const consumerNode = nodes.find(n => n.id === generateIdForNode(service));
+
+              edges.push(
+                createEdge({
+                  id: generatedIdForEdge(producer, service),
+                  source: generateIdForNode(producer),
+                  target: generateIdForNode(service),
+                  label: getEdgeLabelForServiceAsTarget(receive),
+                  zIndex: 1000,
+                })
+              );
+
+              // // Calculate middle position between producer and consumer
+              // const messageX = (producerNode?.position?.x ?? 0) +
+              //   ((consumerNode?.position?.x ?? 0) - (producerNode?.position?.x ?? 0)) / 2;
+              // const messageY = (producerNode?.position?.y ?? 0) +
+              //   ((consumerNode?.position?.y ?? 0) - (producerNode?.position?.y ?? 0)) / 2;
+
+              // nodes.push({
+              //   id: generateIdForNode(receive),
+              //   type: receive.collection,
+              //   sourcePosition: 'right',
+              //   targetPosition: 'left',
+              //   data: {
+              //     message: receive,
+              //     mode: 'full',
+              //   },
+              //   position: { x: messageX, y: messageY },
+              // });
+
+              // edges.push(createEdge({
+              //   id: generatedIdForEdge(producer, receive),
+              //   source: generateIdForNode(producer),
+              //   target: generateIdForNode(receive),
+              //   label: getEdgeLabelForServiceAsTarget(receive),
+              //   zIndex: 1000,
+              // }));
+            }
+          }
+        }
+      });
+    }
+  });
+
+  return {
+    nodes,
+    edges,
+  };
+};
+
+interface NodesAndEdgesProps {
   id: string;
   version: string;
   defaultFlow?: DagreGraph;
-  mode?: 'simple' | 'full';
+  mode: 'simple' | 'full';
 }
 
-export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: Props) => {
+export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simple' }: NodesAndEdgesProps) => {
   const flow = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 50, edgesep: 50 });
   let nodes = new Map(),
     edges = new Map();

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

@@ -1,8 +1,8 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { createDagreGraph, calculatedNodes } from '@utils/node-graphs/utils/utils';
-import { MarkerType } from 'reactflow';
-import type { Node as NodeType } from 'reactflow';
+import { MarkerType } from '@xyflow/react';
+import type { Node as NodeType } from '@xyflow/react';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 
 type DagreGraph = any;

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

@@ -12,7 +12,7 @@ import {
   getEdgeLabelForMessageAsSource,
   getEdgeLabelForServiceAsTarget,
 } from './utils/utils';
-import { MarkerType } from 'reactflow';
+import { MarkerType } from '@xyflow/react';
 import { findMatchingNodes } from '@utils/collections/util';
 import type { CollectionMessageTypes } from '@types';
 import { getCommands } from '@utils/commands';

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

@@ -9,7 +9,7 @@ import {
   getChannelNodesAndEdges,
 } from '@utils/node-graphs/utils/utils';
 import { findMatchingNodes, getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
-import { MarkerType } from 'reactflow';
+import { MarkerType } from '@xyflow/react';
 import type { CollectionMessageTypes } from '@types';
 
 type DagreGraph = any;

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

@@ -1,5 +1,5 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
-import { MarkerType, Position, type Edge, type Node } from 'reactflow';
+import { MarkerType, Position, type Edge, type Node } from '@xyflow/react';
 import dagre from 'dagre';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 import type { CollectionMessageTypes, CollectionTypes } from '@types';

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.16.1",
+  "version": "2.16.3",
   "publishConfig": {
     "access": "public"
   },
@@ -54,6 +54,7 @@
     "@stoplight/mosaic": "^1.53.2",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
+    "@xyflow/react": "^12.3.6",
     "astro": "^4.16.5",
     "astro-expressive-code": "^0.36.1",
     "astro-pagefind": "^1.6.0",
@@ -76,7 +77,6 @@
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "reactflow": "^11.11.4",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "rimraf": "^5.0.7",