@eventcatalog/core 2.16.2 → 2.16.4

package/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx

@@ -3,8 +3,9 @@ import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName, filterByBadge } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
 
@@ -55,6 +56,7 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
+
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -62,7 +64,7 @@ export const columns = () => [
     footer: (info) => info.column.id,
     meta: {
       showFilter: false,
-      className: 'max-w-md',
+      className: 'max-w-[200px]',
     },
   }),
 
@@ -145,6 +147,7 @@ export const columns = () => [
     footer: (info) => info.column.id,
     filterFn: filterCollectionByName('consumers'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForMessageType } from './MessageTableColumns';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
 
@@ -40,14 +41,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const service = info.row.original;
-  //     return <div className="text-left">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -175,6 +168,7 @@ export const columns = () => [
     },
     filterFn: filterCollectionByName('sends'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx

@@ -0,0 +1,44 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { Tag } from 'lucide-react';
+import { filterByBadge } from '../filters/custom-filters';
+export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
+  columnHelper: ReturnType<typeof createColumnHelper<T>>
+) => {
+  return columnHelper.accessor((row) => row.data.badges, {
+    id: 'badges',
+    header: () => <span>Badges</span>,
+    cell: (info) => {
+      const item = info.row.original;
+      const badges = item.data.badges || [];
+
+      if (badges?.length === 0 || !badges)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">No badges documented</div>;
+
+      return (
+        <ul>
+          {badges.map((badge: any, index: number) => {
+            return (
+              <li key={`${badge.id}-${index}`} className="py-1 group font-light ">
+                <div className="group-hover:text-primary flex space-x-1 items-center ">
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className={`bg-${badge.backgroundColor}-500 h-full rounded-tl rounded-bl p-1`}>
+                        {badge.icon && <badge.icon className="h-4 w-4 text-white" />}
+                        {!badge.icon && <Tag className="h-4 w-4 text-white" />}
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline ">{badge.content}</span>
+                    </span>
+                  </div>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    meta: {
+      filterVariant: 'badges',
+    },
+    filterFn: filterByBadge,
+  });
+};

package/eventcatalog/src/components/Tables/filters/custom-filters.ts

@@ -12,3 +12,8 @@ export const filterByName = (row: any, key: string, searchValue: string) => {
   const label = `${row?.original?.data.name} (v${row?.original?.data.version})` || '';
   return label.toLowerCase().includes(searchValue.toLowerCase());
 };
+
+export const filterByBadge = (row: any, key: string, searchValue: string) => {
+  const badges = row?.original?.data?.badges || [];
+  return badges.some((badge: any) => badge.content.toLowerCase().includes(searchValue.toLowerCase()));
+};

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/DiscoverLayout.astro

@@ -100,7 +100,7 @@ const tabs = [
     </div>
 
     <!-- Table -->
-    <div class="pb-20 ml-6">
+    <div class="pb-20 ml-6 md:pr-10">
       <div>
         <div class="sm:flex sm:items-center py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">

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]/[version]/index.astro

@@ -236,10 +236,6 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
     .mermaid svg {
       margin: 1em auto 2em;
     }
-
-    .mermaid tspan {
-      font-size: 8em;
-    }
   </style>
 
   <script define:vars={{ props }}>
@@ -251,13 +247,21 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
   </script>
 
   <script>
+    // Listen for Astro transititions
+    document.addEventListener('astro:page-load', () => {
+      const graphs = document.getElementsByClassName('mermaid');
+      if (document.getElementsByClassName('mermaid').length > 0) {
+        renderDiagrams(graphs);
+      }
+    });
+
     /**
      * @params {HTMLCollectionOf<HTMLElement>} graphs
      */
     async function renderDiagrams(graphs: any) {
       const { default: mermaid } = await import('mermaid');
       mermaid.initialize({
-        fontSize: 2,
+        // fontSize: 2,
         flowchart: {
           curve: 'linear',
           rankSpacing: 0,
@@ -266,7 +270,7 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
         startOnLoad: false,
         fontFamily: 'var(--sans-font)',
         // @ts-ignore This works, but TS expects a enum for some reason
-        theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
+        theme: 'light',
       });
 
       for (const graph of graphs) {

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';