@eventcatalog/core 2.11.7 → 2.12.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @eventcatalog/core
 
+## 2.12.1
+
+### Patch Changes
+
+- a57282e: fix(core): new property for AsyncAPI rendering
+- d739d7b: fix(core): changelog buttons now render the correct changelog
+
+## 2.12.0
+
+### Minor Changes
+
+- a136d50: feat(core): services can now send and receive the same messages in vis…
+
 ## 2.11.7
 
 ### Patch Changes

package/bin/dist/eventcatalog.config.d.cts

@@ -16,6 +16,9 @@ interface Config {
         src: string;
         text?: string;
     };
+    asyncAPI?: {
+        renderParsedSchemas?: boolean;
+    };
     mdxOptimize?: boolean;
     docs: {
         sidebar: {

package/bin/dist/eventcatalog.config.d.ts

@@ -16,6 +16,9 @@ interface Config {
         src: string;
         text?: string;
     };
+    asyncAPI?: {
+        renderParsedSchemas?: boolean;
+    };
     mdxOptimize?: boolean;
     docs: {
         sidebar: {

package/bin/eventcatalog.config.ts

@@ -17,6 +17,9 @@ export interface Config {
     src: string;
     text?: string;
   };
+  asyncAPI?: {
+    renderParsedSchemas?: boolean;
+  };
   mdxOptimize?: boolean;
   docs: {
     sidebar: {

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.11.7",
+  "version": "2.12.1",
   "publishConfig": {
     "access": "public"
   },
@@ -41,7 +41,7 @@
     "@astrojs/mdx": "^3.1.8",
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.2",
-    "@asyncapi/react-component": "^2.2.2",
+    "@asyncapi/react-component": "^2.4.3",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
     "@parcel/watcher": "^2.4.1",

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

@@ -81,6 +81,7 @@ const NodeGraphBuilder = ({
     setEdges((eds) =>
       eds.map((edge) => {
         edge.style = { ...edge.style, opacity: 1 };
+        edge.labelStyle = { ...edge.labelStyle, opacity: 1 };
         return { ...edge, animated: false };
       })
     );
@@ -107,9 +108,19 @@ const NodeGraphBuilder = ({
         if (edge.source === node.id || edge.target === node.id) {
           connectedNodeIds.add(edge.source);
           connectedNodeIds.add(edge.target);
-          return { ...edge, style: { ...edge.style, opacity: 1 }, animated: true };
+          return {
+            ...edge,
+            style: { ...edge.style, opacity: 1 },
+            labelStyle: { ...edge.labelStyle, opacity: 1 },
+            animated: true,
+          };
         }
-        return { ...edge, style: { ...edge.style, opacity: 0.1 }, animated: false };
+        return {
+          ...edge,
+          style: { ...edge.style, opacity: 0.1 },
+          labelStyle: { ...edge.labelStyle, opacity: 0.1 },
+          animated: false,
+        };
       });
 
       const updatedNodes = nodes.map((n) => {

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

@@ -18,13 +18,10 @@ function classNames(...classes: any) {
 }
 
 export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message, showSource = true, showTarget = true } = data as Data;
+  const { mode, message } = data as Data;
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = showTarget || (targetPosition && producers.length > 0);
-  const renderSource = showSource || (sourcePosition && consumers.length > 0);
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400')}>
       <div
@@ -41,8 +38,8 @@ export default function CommandNode({ data, sourcePosition, targetPosition }: an
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pb-0.5">{name}</span>
           <div className="flex justify-between">

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

@@ -18,13 +18,10 @@ function classNames(...classes: any) {
 }
 
 export default function EventNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message, showTarget = true, showSource = true } = data as Data;
+  const { mode, message } = data as Data;
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = showTarget || (targetPosition && producers.length > 0);
-  const renderSource = showSource || (sourcePosition && consumers.length > 0);
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-orange-400')}>
       <div
@@ -41,8 +38,8 @@ export default function EventNode({ data, sourcePosition, targetPosition }: any)
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pb-0.5">{name}</span>
           <div className="flex justify-between">

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

@@ -18,7 +18,7 @@ function classNames(...classes: any) {
 }
 
 export default function ExternalSystemNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, step, showTarget = true, showSource = true } = data as Data;
+  const { mode, step } = data as Data;
   const { externalSystem } = step;
   const { name, summary, url } = externalSystem;
 
@@ -43,8 +43,8 @@ export default function ExternalSystemNode({ data, sourcePosition, targetPositio
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {showTarget && <Handle type="target" position={targetPosition} />}
-        {showSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <div className="h-full ">
             <span className="text-sm font-bold pb-0.5 block w-full">{name}</span>

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

@@ -22,8 +22,8 @@ export default function QueryNode({ data, sourcePosition, targetPosition }: any)
 
   const { name, version, summary, owners = [], producers = [], consumers = [] } = message.data;
 
-  const renderTarget = showTarget || (targetPosition && producers.length > 0);
-  const renderSource = showSource || (sourcePosition && consumers.length > 0);
+  const renderTarget = true; //showTarget || (targetPosition && producers.length > 0);
+  const renderSource = true; // showSource || (sourcePosition && consumers.length > 0);
 
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-green-400')}>

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

@@ -17,7 +17,7 @@ function classNames(...classes: any) {
 }
 
 export default function ServiceNode({ data, sourcePosition, targetPosition }: any) {
-  const { label, bgColor = 'bg-blue-500', mode, service, showTarget = true, showSource = true } = data as Data;
+  const { label, bgColor = 'bg-blue-500', mode, service } = data as Data;
 
   const { version, owners = [], sends = [], receives = [], name } = service.data;
 
@@ -37,8 +37,8 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {showTarget && <Handle type="target" position={targetPosition} />}
-        {showSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
           <div className="flex justify-between">

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

@@ -16,13 +16,10 @@ function classNames(...classes: any) {
 }
 
 export default function StepNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, step, showTarget = true, showSource = true } = data as Data;
+  const { mode, step } = data as Data;
 
   const { title, summary } = step;
 
-  const renderTarget = showTarget || true;
-  const renderSource = showSource || true;
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-blue-400 min-h-[3em]')}>
       <div
@@ -38,8 +35,8 @@ export default function StepNode({ data, sourcePosition, targetPosition }: any)
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
 
         {!summary && (
           <div className="h-full flex items-center">

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

@@ -21,9 +21,6 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
 
   const { summary, actor: { name } = {} } = step;
 
-  const renderTarget = showTarget || true;
-  const renderSource = showSource || true;
-
   return (
     <div
       className={classNames(
@@ -45,8 +42,8 @@ export default function UserNode({ data, sourcePosition, targetPosition }: any)
         )}
       </div>
       <div className="p-1 min-w-60 max-w-[min-content]">
-        {renderTarget && <Handle type="target" position={targetPosition} />}
-        {renderSource && <Handle type="source" position={sourcePosition} />}
+        {targetPosition && <Handle type="target" position={targetPosition} />}
+        {sourcePosition && <Handle type="source" position={sourcePosition} />}
 
         {(!summary || mode !== 'full') && (
           <div className="h-full ">

package/src/components/SideBars/DomainSideBar.astro

@@ -66,7 +66,7 @@ const ownersList = owners.map((o) => ({
         <span class="block">View in visualiser</span>
       </a>
       <a
-        href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.version}/changelog`)}
+        href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.latestVersion}/changelog`)}
         class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
         <ScrollText strokeWidth={2} size={16} />

package/src/components/SideBars/MessageSideBar.astro

@@ -151,7 +151,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       </a>
 
       <a
-        href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.version}/changelog`)}
+        href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.latestVersion}/changelog`)}
         class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
         <ScrollText strokeWidth={2} size={16} />

package/src/components/SideBars/ServiceSideBar.astro

@@ -107,7 +107,7 @@ const schemaURL = join(publicPath, schemaFilePath || '');
         <span class="block">View in visualiser</span>
       </a>
       <a
-        href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/changelog`)}
+        href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.latestVersion}/changelog`)}
         class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"
       >
         <ScrollText strokeWidth={2} size={16} />

package/src/components/Tables/Table.tsx

@@ -40,10 +40,6 @@ export const Table = ({
   const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
-  useEffect(() => {
-    console.log(window.location.pathname);
-  }, []);
-
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const id = urlParams.get('id');

package/src/layouts/VerticalSideBarLayout.astro

@@ -268,8 +268,6 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
 
         const navItem = navigationItems.find((navItem) => navItem.id === id);
 
-        console.log(navItem);
-
         if (!navItem.sidebar || !currentPath.includes(navItem.id)) {
           window.location.href = navItem.href;
           return;

package/src/pages/docs/[type]/[id]/[version]/asyncapi/index.astro

@@ -7,14 +7,13 @@ import { Parser } from '@asyncapi/parser';
 
 import type { CollectionTypes, PageTypes } from '@types';
 
-import PlainPage from '@layouts/PlainPage.astro';
-
 import '@asyncapi/react-component/styles/default.min.css';
 import js from '@asyncapi/react-component/browser/standalone/without-parser.js?url';
 import { AsyncApiComponentWP, type ConfigInterface } from '@asyncapi/react-component';
 import { pageDataLoader } from '@utils/pages/pages';
 import type { CollectionEntry } from 'astro:content';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import Config from '@eventcatalog';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
@@ -45,7 +44,9 @@ const pathToSpec = path.join(catalog.publicPath, fileName);
 const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
 const fileContent = readFileSync(pathOnDisk, 'utf-8');
 
-const parsed = await new Parser().parse(fileContent);
+// AsyncAPI parser will parser schemas for users, they can turn this off.
+const parseSchemas = Config?.asyncAPI?.renderParsedSchemas ?? true;
+const parsed = await new Parser().parse(fileContent, { parseSchemas });
 const stringified = parsed.document?.json();
 const config: ConfigInterface = { show: { sidebar: true, errors: true } };
 

package/src/utils/collections/util.ts

@@ -57,3 +57,15 @@ export const getItemsFromCollectionByIdAndSemverOrLatest = <T extends { data: {
   // latest version
   return sorted.length > 0 ? [sorted[sorted.length - 1]] : [];
 };
+
+export const findMatchingNodes = (
+  nodesA: CollectionEntry<'events' | 'commands' | 'queries' | 'services'>[],
+  nodesB: CollectionEntry<'events' | 'commands' | 'queries' | 'services'>[]
+) => {
+  // Track messages that are both sent and received
+  return nodesA.filter((nodeA) => {
+    return nodesB.some((nodeB) => {
+      return nodeB.data.id === nodeA.data.id && nodeB.data.version === nodeA.data.version;
+    });
+  });
+};

package/src/utils/commands/node-graph.ts

@@ -1,3 +1,4 @@
+import { findMatchingNodes } from '@utils/collections/util';
 import { getCommands } from '@utils/commands';
 import { calculatedNodes, createDagreGraph, generateIdForNode, generatedIdForEdge } from '@utils/node-graph-utils/utils';
 import { type CollectionEntry } from 'astro:content';
@@ -33,6 +34,9 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   const producers = (command.data.producers as CollectionEntry<'services'>[]) || [];
   const consumers = (command.data.consumers as CollectionEntry<'services'>[]) || [];
 
+  // Track nodes that are both sent and received
+  const bothSentAndReceived = findMatchingNodes(producers, consumers);
+
   if (producers && producers.length > 0) {
     producers.forEach((producer, index) => {
       nodes.push({
@@ -40,7 +44,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         type: producer?.collection,
         sourcePosition: 'right',
         targetPosition: 'left',
-        data: { mode, service: producer, showTarget: false },
+        data: { mode, service: producer },
         position: { x: 250, y: 0 },
       });
       edges.push({
@@ -67,7 +71,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     id: generateIdForNode(command),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, message: command, showTarget: producers.length > 0, showSource: consumers.length > 0 },
+    data: { mode, message: command },
     position: { x: 0, y: 0 },
     type: command.collection,
   });
@@ -78,7 +82,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       id: generateIdForNode(consumer),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
+      data: { title: consumer?.data.id, mode, service: consumer },
       position: { x: 0, y: 0 },
       type: consumer?.collection,
     });
@@ -100,6 +104,28 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     });
   });
 
+  // Handle nodes that are both sent and received
+  bothSentAndReceived.forEach((message) => {
+    if (message) {
+      edges.push({
+        id: generatedIdForEdge(command, message) + '-both',
+        source: generateIdForNode(command),
+        target: generateIdForNode(message),
+        type: 'smoothstep',
+        label: `publishes and subscribes`,
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
+        },
+      });
+    }
+  });
+
   nodes.forEach((node: any) => {
     flow.setNode(node.id, { width: 150, height: 100 });
   });

package/src/utils/events/node-graph.ts

@@ -4,6 +4,7 @@ import type { CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { calculatedNodes, createDagreGraph, generatedIdForEdge, generateIdForNode } from '../node-graph-utils/utils';
 import { MarkerType } from 'reactflow';
+import { findMatchingNodes } from '@utils/collections/util';
 
 type DagreGraph = any;
 
@@ -34,6 +35,9 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   const producers = (event.data.producers as CollectionEntry<'services'>[]) || [];
   const consumers = (event.data.consumers as CollectionEntry<'services'>[]) || [];
 
+  // Track nodes that are both sent and received
+  const bothSentAndReceived = findMatchingNodes(producers, consumers);
+
   if (producers && producers.length > 0) {
     producers.forEach((producer) => {
       nodes.push({
@@ -101,6 +105,28 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     });
   });
 
+  // Handle messages that are both sent and received
+  bothSentAndReceived.forEach((message) => {
+    if (message) {
+      edges.push({
+        id: generatedIdForEdge(event, message) + '-both',
+        source: generateIdForNode(event),
+        target: generateIdForNode(message),
+        type: 'smoothstep',
+        label: `publishes and subscribes`,
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
+        },
+      });
+    }
+  });
+
   nodes.forEach((node: any) => {
     flow.setNode(node.id, { width: 150, height: 100 });
   });

package/src/utils/queries/node-graph.ts

@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { calculatedNodes, createDagreGraph, generatedIdForEdge, generateIdForNode } from '../node-graph-utils/utils';
 import { MarkerType } from 'reactflow';
+import { findMatchingNodes } from '@utils/collections/util';
 
 type DagreGraph = any;
 
@@ -33,6 +34,9 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
   const producers = (query.data.producers as CollectionEntry<'services'>[]) || [];
   const consumers = (query.data.consumers as CollectionEntry<'services'>[]) || [];
 
+  // Track nodes that are both sent and received
+  const bothSentAndReceived = findMatchingNodes(producers, consumers);
+
   if (producers && producers.length > 0) {
     producers.forEach((producer) => {
       nodes.push({
@@ -40,7 +44,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
         type: producer?.collection,
         sourcePosition: 'right',
         targetPosition: 'left',
-        data: { mode, service: producer, showTarget: false },
+        data: { mode, service: producer },
         position: { x: 250, y: 0 },
       });
       edges.push({
@@ -67,7 +71,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     id: generateIdForNode(query),
     sourcePosition: 'right',
     targetPosition: 'left',
-    data: { mode, message: query, showTarget: producers.length > 0, showSource: consumers.length > 0 },
+    data: { mode, message: query },
     position: { x: 0, y: 0 },
     type: query.collection,
   });
@@ -78,7 +82,7 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
       id: generateIdForNode(consumer),
       sourcePosition: 'right',
       targetPosition: 'left',
-      data: { title: consumer?.data.id, mode, service: consumer, showSource: false },
+      data: { title: consumer?.data.id, mode, service: consumer },
       position: { x: 0, y: 0 },
       type: consumer?.collection,
     });
@@ -100,6 +104,28 @@ export const getNodesAndEdges = async ({ id, version, defaultFlow, mode = 'simpl
     });
   });
 
+  // Handle nodes that are both sent and received
+  bothSentAndReceived.forEach((message) => {
+    if (message) {
+      edges.push({
+        id: generatedIdForEdge(query, message) + '-both',
+        source: generateIdForNode(query),
+        target: generateIdForNode(message),
+        type: 'smoothstep',
+        label: `publishes and subscribes`,
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
+        },
+      });
+    }
+  });
+
   nodes.forEach((node: any) => {
     flow.setNode(node.id, { width: 150, height: 100 });
   });

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

@@ -1,7 +1,7 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import { createDagreGraph, generateIdForNode, generatedIdForEdge, calculatedNodes } from '@utils/node-graph-utils/utils';
-import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import { findMatchingNodes, getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 import { MarkerType } from 'reactflow';
 
 type DagreGraph = any;
@@ -78,10 +78,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   const receives = (receivesHydrated as CollectionEntry<'events' | 'commands' | 'queries'>[]) || [];
   const sends = (sendsHydrated as CollectionEntry<'events' | 'commands' | 'queries'>[]) || [];
 
-  // Get all the data from them
+  // Track messages that are both sent and received
+  const bothSentAndReceived = findMatchingNodes(receives, sends);
 
+  // Get all the data from them
   if (receives && receives.length > 0) {
-    //All the messages the service receives
+    // All the messages the service receives
     receives.forEach((receive, index) => {
       nodes.push({
         id: generateIdForNode(receive),
@@ -89,7 +91,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
         sourcePosition: 'right',
         targetPosition: 'left',
         data: { mode, message: receive, showTarget: renderAllEdges },
-        position: { x: 250, y: 0 },
+        position: { x: 250, y: index * 100 },
       });
       edges.push({
         id: generatedIdForEdge(receive, service),
@@ -121,13 +123,13 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   });
 
   // The messages the service sends
-  sends.forEach((send) => {
+  sends.forEach((send, index) => {
     nodes.push({
       id: generateIdForNode(send),
       sourcePosition: 'right',
       targetPosition: 'left',
       data: { mode, message: send, showSource: renderAllEdges },
-      position: { x: 0, y: 0 },
+      position: { x: 500, y: index * 100 },
       type: send?.collection,
     });
     edges.push({
@@ -148,6 +150,28 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     });
   });
 
+  // Handle messages that are both sent and received
+  bothSentAndReceived.forEach((message) => {
+    if (message) {
+      edges.push({
+        id: generatedIdForEdge(service, message) + '-both',
+        source: generateIdForNode(service),
+        target: generateIdForNode(message),
+        type: 'smoothstep',
+        label: `${getSendsMessageByMessageType(message?.collection)} & ${getReceivesMessageByMessageType(message?.collection)}`,
+        animated: false,
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          width: 40,
+          height: 40,
+        },
+        style: {
+          strokeWidth: 1,
+        },
+      });
+    }
+  });
+
   nodes.forEach((node: any) => {
     flow.setNode(node.id, { width: 150, height: 100 });
   });
@@ -156,7 +180,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     flow.setEdge(edge.source, edge.target);
   });
 
-  // Render the diagram in memory getting hte X and Y
+  // Render the diagram in memory getting the X and Y
   dagre.layout(flow);
 
   return {