@eventcatalog/core 2.50.2 → 2.51.0

package/dist/analytics/analytics.cjs

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-PRZAFM4L.js";
-import "../chunk-L3RINLLN.js";
+} from "../chunk-2J3EYRYN.js";
+import "../chunk-CXGJYRWV.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.50.2";
+var version = "2.51.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-6DT6JYDR.js";
-import "../chunk-PRZAFM4L.js";
-import "../chunk-L3RINLLN.js";
+} from "../chunk-PRFUGFES.js";
+import "../chunk-2J3EYRYN.js";
+import "../chunk-CXGJYRWV.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-PRZAFM4L.js → chunk-2J3EYRYN.js}

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

package/dist/{chunk-L3RINLLN.js → chunk-CXGJYRWV.js}

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

package/dist/{chunk-6DT6JYDR.js → chunk-PRFUGFES.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-PRZAFM4L.js";
+} from "./chunk-2J3EYRYN.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.50.2";
+var version = "2.51.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-L3RINLLN.js";
+} from "./chunk-CXGJYRWV.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.50.2";
+var version = "2.51.0";
 
 // 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-6DT6JYDR.js";
-import "./chunk-PRZAFM4L.js";
+} from "./chunk-PRFUGFES.js";
+import "./chunk-2J3EYRYN.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-LDBRNJIL.js";
 import {
   VERSION
-} from "./chunk-L3RINLLN.js";
+} from "./chunk-CXGJYRWV.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

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

@@ -1,28 +1,51 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
 import { MinusIcon } from '@heroicons/react/16/solid';
 import { PlusIcon } from '@heroicons/react/24/outline';
+import { useEffect } from 'react';
+
+declare global {
+  interface Window {
+    renderDiagrams?: (graphs: HTMLCollectionOf<Element>) => void;
+    renderPlantUML?: (graphs: HTMLCollectionOf<Element>) => void;
+  }
+}
 
 export default function Example({ title, children }: any) {
   return (
     <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">
-                {open ? (
-                  <MinusIcon className="h-6 w-6" aria-hidden="true" />
-                ) : (
-                  <PlusIcon className="h-6 w-6" aria-hidden="true" />
-                )}
-              </span>
-            </DisclosureButton>
-            <DisclosurePanel as="dd" className="pr-12 not-prose py-4">
-              <p className="text-base leading-7 text-gray-600">{children}</p>
-            </DisclosurePanel>
-          </div>
-        )}
+        {({ open }) => {
+          useEffect(() => {
+            if (open) {
+              const graphs = document.getElementsByClassName('mermaid');
+              const plantUML = document.getElementsByClassName('plantuml');
+              if (graphs.length > 0 && window.renderDiagrams) {
+                window.renderDiagrams(graphs);
+              }
+              if (plantUML.length > 0 && window.renderPlantUML) {
+                window.renderPlantUML(plantUML);
+              }
+            }
+          }, [open]);
+
+          return (
+            <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">
+                  {open ? (
+                    <MinusIcon className="h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <PlusIcon className="h-6 w-6" aria-hidden="true" />
+                  )}
+                </span>
+              </DisclosureButton>
+              <DisclosurePanel as="dd" className="pr-12 py-4 prose prose-sm max-w-none">
+                <div className="text-base leading-7 text-gray-600">{children}</div>
+              </DisclosurePanel>
+            </div>
+          );
+        }}
       </Disclosure>
     </div>
   );

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

@@ -5,7 +5,7 @@ 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;
+const { id, version = 'latest', maxHeight, includeKey = true, mode = 'simple', walkthrough = true, search = true } = Astro.props;
 
 // Find the flow for the given id and version
 const flows = await getFlows();
@@ -17,6 +17,7 @@ const flow = flowCollection[0];
 const { nodes, edges } = await getNodesAndEdges({
   id: id,
   version: flow.data.version,
+  mode: mode,
 });
 ---
 
@@ -53,6 +54,8 @@ const { nodes, edges } = await getNodesAndEdges({
     includeKey={includeKey}
     footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`
     client:only="react"
+    showFlowWalkthrough={walkthrough}
+    showSearch={search}
   />
 </div>
 

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

@@ -30,9 +30,22 @@ interface Props {
     url: string;
   };
   linksToVisualiser?: boolean;
+  showSearch?: boolean;
+  showLegend?: boolean;
 }
 
-const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href, linksToVisualiser } = Astro.props;
+const {
+  id,
+  collection,
+  title,
+  mode = 'simple',
+  linkTo = 'docs',
+  version,
+  href,
+  linksToVisualiser,
+  showSearch = true,
+  showLegend = true,
+} = Astro.props;
 
 let nodes = [],
   edges = [];
@@ -121,6 +134,8 @@ if (collection === 'domains-entities') {
     linksToVisualiser={linksToVisualiser}
     links={links}
     mode={mode}
+    showSearch={showSearch}
+    includeKey={showLegend}
   />
 </div>
 

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

@@ -55,6 +55,8 @@ interface Props {
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
   mode?: 'full' | 'simple';
+  showFlowWalkthrough?: boolean;
+  showSearch?: boolean;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -71,6 +73,8 @@ const NodeGraphBuilder = ({
   linksToVisualiser = false,
   links = [],
   mode = 'full',
+  showFlowWalkthrough = true,
+  showSearch = true,
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -492,7 +496,7 @@ const NodeGraphBuilder = ({
               </span>
             )}
           </div>
-          {mode === 'full' && (
+          {mode === 'full' && showSearch && (
             <div className="flex justify-end space-x-2 w-96">
               <VisualiserSearch ref={searchRef} nodes={nodes} onNodeSelect={handleNodeSelect} onClear={handleSearchClear} />
             </div>
@@ -588,7 +592,7 @@ const NodeGraphBuilder = ({
       )}
       {includeBackground && <Background color="#bbb" gap={16} />}
       {includeBackground && <Controls />}
-      {isFlowVisualization && (
+      {isFlowVisualization && showFlowWalkthrough && (
         <Panel position="bottom-left">
           <StepWalkthrough
             nodes={nodes}
@@ -637,6 +641,8 @@ interface NodeGraphProps {
   links?: { label: string; url: string }[];
   mode?: 'full' | 'simple';
   portalId?: string;
+  showFlowWalkthrough?: boolean;
+  showSearch?: boolean;
 }
 
 const NodeGraph = ({
@@ -653,6 +659,8 @@ const NodeGraph = ({
   links = [],
   mode = 'full',
   portalId,
+  showFlowWalkthrough = true,
+  showSearch = true,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -687,6 +695,8 @@ const NodeGraph = ({
             linksToVisualiser={linksToVisualiser}
             links={links}
             mode={mode}
+            showFlowWalkthrough={showFlowWalkthrough}
+            showSearch={showSearch}
           />
 
           {showFooter && (

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -410,6 +410,9 @@ const badges = doc?.badges || [];
     renderDiagrams(graphs);
   }
 
+  // Make renderDiagrams available globally for accordion component
+  window.renderDiagrams = renderDiagrams;
+
   document.addEventListener('astro:page-load', setupObserver);
 </script>
 
@@ -467,5 +470,9 @@ const badges = doc?.badges || [];
     if (document.getElementsByClassName('plantuml').length > 0) {
       renderPlantUML(graphs, deflate);
     }
+
+    window.renderPlantUML = (graphs: any) => {
+      renderPlantUML(graphs, deflate);
+    };
   });
 </script>

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

@@ -191,10 +191,17 @@ const generatePromptForResource = (props: any) => {
 // Handle node graphs in the markdown
 let nodeGraphs = getMDXComponentsByName(props.body || '', 'NodeGraph') || [];
 
+// Get props for the node graph (when no id is passed, we assume its the current page)
+const nodeGraphPropsForPage = nodeGraphs.find((nodeGraph: any) => nodeGraph.id === undefined) || ({} as any);
+
+// This will render the graph for this page
 nodeGraphs.push({
   id: props.data.id,
   version: props.data.version,
   type: collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap],
+  ...nodeGraphPropsForPage,
+  search: nodeGraphPropsForPage?.search ? nodeGraphPropsForPage.search === 'true' : true,
+  legend: nodeGraphPropsForPage?.legend ? nodeGraphPropsForPage.legend === 'true' : true,
 });
 ---
 
@@ -350,8 +357,10 @@ nodeGraphs.push({
                     version={nodeGraph.version}
                     collection={collection}
                     title={nodeGraph.title}
-                    mode="simple"
+                    mode={nodeGraph.mode || 'simple'}
                     linksToVisualiser={true}
+                    showSearch={nodeGraph.search ?? true}
+                    showLegend={nodeGraph.legend ?? true}
                     href={{
                       label: 'Open in Visualiser',
                       url: buildUrl(`/visualiser/${collection}/${nodeGraph.id}/${nodeGraph.version}`),
@@ -485,6 +494,9 @@ nodeGraphs.push({
     if (document.getElementsByClassName('mermaid').length > 0) {
       renderDiagrams(graphs);
     }
+
+    // Make renderDiagrams available globally for accordion component
+    window.renderDiagrams = renderDiagrams;
   </script>
 
   <script>
@@ -542,6 +554,10 @@ nodeGraphs.push({
       if (document.getElementsByClassName('plantuml').length > 0) {
         renderPlantUML(graphs, deflate);
       }
+
+      window.renderPlantUML = (graphs: any) => {
+        renderPlantUML(graphs, deflate);
+      };
     });
   </script>
 </VerticalSideBarLayout>

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

@@ -5,6 +5,7 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
 import { ClientRouter } from 'astro:transitions';
 import { marked } from 'marked';
+import * as LucideIcons from 'lucide-react';
 
 import { Page } from './_index.data';
 
@@ -37,28 +38,35 @@ const badges = [
   <main class="flex sm:px-8 docs-layout h-full max-w-7xl" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
-        <nav class="flex mb-4" aria-label="Breadcrumb">
-          <ol class="inline-flex items-center space-x-1 md:space-x-3">
-            <li class="inline-flex items-center">
-              <a
-                href={buildUrl(`/docs/${props.type}/${props.domainId}/language`)}
-                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
-              >
-                <svg
-                  class="w-3 h-3 mr-2.5"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
-                </svg>
-                Back to Ubiquitous Language List
-              </a>
-            </li>
-          </ol>
+        {/* Breadcrumb */}
+        <nav class="mb-4 flex items-center space-x-2 text-sm text-gray-500" aria-label="Breadcrumb">
+          <a
+            href={buildUrl(`/docs/${props.type}/${props.domainId}/${props.domain.latestVersion}`)}
+            class="hover:text-gray-700 hover:underline flex items-center gap-2"
+          >
+            <RectangleGroupIcon className="h-4 w-4" />
+            {props.domain.name}
+          </a>
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
+          </svg>
+          <a
+            href={buildUrl(`/docs/${props.type}/${props.domainId}/language`)}
+            class="hover:text-gray-700 hover:underline flex items-center gap-2"
+          >
+            {
+              (() => {
+                const BookOpen = LucideIcons.BookOpen;
+                //@ts-ignore
+                return <BookOpen className="h-4 w-4" />;
+              })()
+            }
+            Ubiquitous Language Explorer
+          </a>
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
+          </svg>
+          <span class="text-gray-900">{ubiquitousLanguage.name}</span>
         </nav>
 
         <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">

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

@@ -1,10 +1,11 @@
 ---
 import Footer from '@layouts/Footer.astro';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { getUbiquitousLanguage } from '@utils/collections/domains';
+import { getUbiquitousLanguageWithSubdomains } from '@utils/collections/domains';
 import { buildUrl } from '@utils/url-builder';
 import { ClientRouter } from 'astro:transitions';
 import * as LucideIcons from 'lucide-react';
+import { RectangleGroupIcon } from '@heroicons/react/24/outline';
 
 import { Page } from './_index.data';
 
@@ -15,47 +16,82 @@ export const getStaticPaths = Page.getStaticPaths;
 const props = await Page.getData(Astro);
 
 const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
-const ubiquitousLanguages = await getUbiquitousLanguage(props);
-const ubiquitousLanguage = ubiquitousLanguages[0];
+const ubiquitousLanguageData = await getUbiquitousLanguageWithSubdomains(props);
+const ubiquitousLanguage = ubiquitousLanguageData.domain;
+const { subdomains, duplicateTerms } = ubiquitousLanguageData;
 ---
 
 <VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
-  <main class="flex sm:px-8 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
+  <main class="flex sm:px-6 docs-layout h-full" data-pagefind-body data-pagefind-meta={`title:${pageTitle}`}>
     <div class="flex docs-layout w-full">
-      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
-        <nav class="flex mb-4" aria-label="Breadcrumb">
-          <ol class="inline-flex items-center space-x-1 md:space-x-3">
-            <li class="inline-flex items-center">
-              <a
-                href={buildUrl(`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`)}
-                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
-              >
-                <svg
-                  class="w-3 h-3 mr-2.5"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                  stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
-                </svg>
-                Back to Documentation
-              </a>
-            </li>
-          </ol>
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto pt-6 pb-8 min-h-[50em]">
+        {/* Breadcrumb */}
+        <nav class="mb-4 flex items-center space-x-2 text-sm text-gray-500" aria-label="Breadcrumb">
+          <a
+            href={buildUrl(`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`)}
+            class="hover:text-gray-700 hover:underline flex items-center gap-2"
+          >
+            <RectangleGroupIcon className="h-4 w-4" />
+            {props.data.name}
+          </a>
+          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
+          </svg>
+          <span class="text-gray-900 flex items-center gap-2">
+            {
+              (() => {
+                const BookOpen = LucideIcons.BookOpen;
+                //@ts-ignore
+                return <BookOpen className="h-4 w-4" />;
+              })()
+            }
+            Ubiquitous Language Explorer
+          </span>
         </nav>
 
-        <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
-          <div>
-            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-black">Domain Language Explorer</h2>
-            <h2 class="text-2xl pt-2 text-gray-500 font-light">{props.data.name} domain</h2>
+        {/* Title Section */}
+        <div class="relative border-b border-gray-200 mb-4 pb-4">
+          <div class="xl:flex xl:items-start xl:justify-between">
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-2">
+                <h1 class="text-xl font-bold leading-7 text-gray-900 sm:text-2xl xl:text-3xl">Ubiquitous Language Explorer</h1>
+              </div>
+              <p class="mt-2 text-sm text-gray-500">
+                Browse and discover ubiquitous language terms in the {props.data.name} domain{
+                  subdomains.length > 0 ? ' and its subdomains' : ''
+                }
+              </p>
+            </div>
+
+            <div class="mt-4 xl:mt-0 xl:ml-4 xl:flex-shrink-0">
+              <div class="relative w-full xl:w-96">
+                <input
+                  type="text"
+                  id="searchInput"
+                  placeholder="Search terms across domains..."
+                  class="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm xl:px-5 xl:py-3.5 xl:pl-12"
+                />
+                <div class="absolute inset-y-0 left-0 pl-3 xl:pl-4 flex items-center pointer-events-none">
+                  <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                  </svg>
+                </div>
+              </div>
+              <div class="mt-2 text-right">
+                <div class="text-sm text-gray-500" id="resultsCount">
+                  {/* This will be updated by JavaScript */}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 
         {
-          !ubiquitousLanguage && (
+          !ubiquitousLanguage && subdomains.length === 0 && (
             <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-4">
               <p class="text-yellow-700">
                 This domain does not have any defined ubiquitous language terms yet. Consider adding some terms to help establish
@@ -67,66 +103,138 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
 
         <div class="py-4 w-full min-h-[calc(100vh-10em)]">
           {
-            ubiquitousLanguage && (
+            (ubiquitousLanguage || subdomains.some((s) => s.ubiquitousLanguage)) && (
               <div>
-                <div class="mb-6">
-                  <input
-                    type="text"
-                    id="searchInput"
-                    placeholder="Search terms..."
-                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
-
-                {!ubiquitousLanguage ? (
-                  <div class="text-center py-12 bg-gray-50 rounded-lg">
-                    <h3 class="text-lg font-medium text-gray-900">No domain language terms</h3>
-                    <p class="mt-2 text-sm text-gray-500">There are no language terms defined for this domain yet.</p>
-                  </div>
-                ) : (
-                  <div id="termsGrid" class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    {ubiquitousLanguage?.data?.dictionary?.map((term) => (
-                      <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]">
-                        <div class="flex flex-col h-full space-y-8">
-                          {term.icon && (
+                {/* Domain Language Section */}
+                {ubiquitousLanguage && (
+                  <div class="mb-8" data-domain-section="main">
+                    <h3 class="text-xl font-semibold text-gray-900 mb-4 border-b border-gray-200 pb-2">
+                      {props.data.name} Domain Language
+                    </h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4" data-terms-grid="main">
+                      {ubiquitousLanguage?.data?.dictionary?.map((term) => (
+                        <div
+                          class={`term-card block bg-white border 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] ${duplicateTerms.has(term.name.toLowerCase()) ? 'border-orange-300 bg-orange-50' : 'border-gray-200'}`}
+                          data-domain="main"
+                        >
+                          <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>
-                              {(() => {
-                                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">
-                              {term.name}
-                            </h3>
-                            <div class="term-content">
-                              <p class="summary-text text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm mb-4">
-                                {term.summary}
-                              </p>
-                              {term.description && (
-                                <div class="prose prose-sm prose-p:my-3">
-                                  <a
-                                    href={buildUrl(`/docs/${props.type}/${props.data.id}/language/${term.id}`)}
-                                    class="show-more-text text-sm text-primary font-medium hover:underline"
-                                  >
-                                    Read more
-                                  </a>
-                                </div>
-                              )}
+                              <h4
+                                class={`text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300 ${duplicateTerms.has(term.name.toLowerCase()) ? 'text-orange-800' : 'text-gray-800'}`}
+                              >
+                                {term.name}
+                                {duplicateTerms.has(term.name.toLowerCase()) && (
+                                  <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800">
+                                    Duplicate
+                                  </span>
+                                )}
+                              </h4>
+                              <div class="term-content">
+                                <p class="summary-text text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm mb-4">
+                                  {term.summary}
+                                </p>
+                                {term.description && (
+                                  <div class="prose prose-sm prose-p:my-3">
+                                    <a
+                                      href={buildUrl(`/docs/${props.type}/${props.data.id}/language/${term.id}`)}
+                                      class="show-more-text text-sm text-primary font-medium hover:underline"
+                                    >
+                                      Read more
+                                    </a>
+                                  </div>
+                                )}
+                              </div>
                             </div>
                           </div>
                         </div>
-                      </div>
-                    ))}
+                      ))}
+                    </div>
+                    <div class="hidden domain-no-results text-center py-8 bg-gray-50 rounded-lg" data-domain-no-results="main">
+                      <h4 class="text-md font-medium text-gray-900">No matching terms in {props.data.name} domain</h4>
+                      <p class="mt-1 text-sm text-gray-500">Try adjusting your search terms.</p>
+                    </div>
                   </div>
                 )}
 
-                <div id="noSearchResults" class="hidden text-center py-12 bg-gray-50 rounded-lg">
-                  <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>
+                {/* Subdomain Language Sections */}
+                {subdomains
+                  .filter((s) => s.ubiquitousLanguage)
+                  .map(({ subdomain, ubiquitousLanguage: subdomainUL }) => (
+                    <div class="mb-8" data-domain-section={subdomain.data.id}>
+                      <div class="flex justify-between items-center mb-4 border-b border-gray-200 pb-2">
+                        <h3 class="text-xl font-semibold text-gray-900">{subdomain.data.name} Subdomain Language</h3>
+                        <a
+                          href={buildUrl(`/docs/domains/${subdomain.data.id}/${subdomain.data.version}`)}
+                          class="text-sm text-primary hover:underline font-medium"
+                        >
+                          View Domain →
+                        </a>
+                      </div>
+                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4" data-terms-grid={subdomain.data.id}>
+                        {subdomainUL?.data?.dictionary?.map((term) => (
+                          <div
+                            class={`term-card block bg-white border 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] ${duplicateTerms.has(term.name.toLowerCase()) ? 'border-orange-300 bg-orange-50' : 'border-gray-200'}`}
+                            data-domain={subdomain.data.id}
+                          >
+                            <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>
+                                <h4
+                                  class={`text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300 ${duplicateTerms.has(term.name.toLowerCase()) ? 'text-orange-800' : 'text-gray-800'}`}
+                                >
+                                  {term.name}
+                                  {duplicateTerms.has(term.name.toLowerCase()) && (
+                                    <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-800">
+                                      Duplicate
+                                    </span>
+                                  )}
+                                </h4>
+                                <div class="term-content">
+                                  <p class="summary-text text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm mb-4">
+                                    {term.summary}
+                                  </p>
+                                  {term.description && (
+                                    <div class="prose prose-sm prose-p:my-3">
+                                      <a
+                                        href={buildUrl(`/docs/${props.type}/${subdomain.data.id}/language/${term.id}`)}
+                                        class="show-more-text text-sm text-primary font-medium hover:underline"
+                                      >
+                                        Read more
+                                      </a>
+                                    </div>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                      <div
+                        class="hidden domain-no-results text-center py-8 bg-gray-50 rounded-lg"
+                        data-domain-no-results={subdomain.data.id}
+                      >
+                        <h4 class="text-md font-medium text-gray-900">No matching terms in {subdomain.data.name} subdomain</h4>
+                        <p class="mt-1 text-sm text-gray-500">Try adjusting your search terms.</p>
+                      </div>
+                    </div>
+                  ))}
               </div>
             )
           }
@@ -141,27 +249,55 @@ const ubiquitousLanguage = ubiquitousLanguages[0];
   <script>
     function initializeSearch() {
       const searchInput = document.getElementById('searchInput');
-      const termCards = document.querySelectorAll('.term-card');
-      const noSearchResults = document.getElementById('noSearchResults');
+      const domainSections = document.querySelectorAll('[data-domain-section]');
+      const resultsCount = document.getElementById('resultsCount');
+
+      function updateResults() {
+        //@ts-ignore
+        const searchTerm = searchInput?.value.toLowerCase() || '';
+        let totalVisibleTerms = 0;
+        let totalTerms = 0;
 
-      searchInput?.addEventListener('input', (e) => {
-        const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
-        let visibleCount = 0;
+        // Handle search for each domain section
+        domainSections.forEach((section) => {
+          const domainId = section.getAttribute('data-domain-section');
+          const domainCards = section.querySelectorAll('.term-card');
+          const domainNoResults = section.querySelector(`[data-domain-no-results="${domainId}"]`);
+          let domainVisibleCount = 0;
 
-        termCards.forEach((card) => {
-          const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
-          const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
-          const matches = title.includes(searchTerm) || description.includes(searchTerm);
+          domainCards.forEach((card) => {
+            totalTerms++;
+            const title = card.querySelector('h4')?.textContent?.toLowerCase() || '';
+            const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
+            const matches = searchTerm === '' || title.includes(searchTerm) || description.includes(searchTerm);
 
-          card.classList.toggle('hidden', !matches);
-          if (matches) visibleCount++;
+            card.classList.toggle('hidden', !matches);
+            if (matches) {
+              domainVisibleCount++;
+              totalVisibleTerms++;
+            }
+          });
+
+          // Show/hide domain-specific no results message
+          if (domainNoResults) {
+            if (searchTerm.trim() === '') {
+              domainNoResults.classList.add('hidden');
+            } else {
+              domainNoResults.classList.toggle('hidden', domainVisibleCount > 0);
+            }
+          }
         });
 
-        // Show/hide no results message
-        if (noSearchResults) {
-          noSearchResults.classList.toggle('hidden', visibleCount > 0);
+        // Update results count
+        if (resultsCount) {
+          resultsCount.textContent = `Showing ${totalVisibleTerms} terms`;
         }
-      });
+      }
+
+      searchInput?.addEventListener('input', updateResults);
+
+      // Initialize results count
+      updateResults();
     }
 
     function initializeShowMore() {

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

@@ -132,6 +132,67 @@ export const getUbiquitousLanguage = async (domain: Domain): Promise<UbiquitousL
   return ubiquitousLanguages;
 };
 
+export const getUbiquitousLanguageWithSubdomains = async (
+  domain: Domain
+): Promise<{
+  domain: UbiquitousLanguage | null;
+  subdomains: Array<{ subdomain: Domain; ubiquitousLanguage: UbiquitousLanguage | null }>;
+  duplicateTerms: Set<string>;
+}> => {
+  // Get domain's own ubiquitous language
+  const domainUbiquitousLanguage = await getUbiquitousLanguage(domain);
+  const domainUL = domainUbiquitousLanguage[0] || null;
+
+  // Get all subdomains
+  const subdomains = (domain.data.domains as unknown as Domain[]) || [];
+
+  // Get ubiquitous language for each subdomain
+  const subdomainULs = await Promise.all(
+    subdomains.map(async (subdomain) => {
+      const subdomainUL = await getUbiquitousLanguage(subdomain);
+      return {
+        subdomain,
+        ubiquitousLanguage: subdomainUL[0] || null,
+      };
+    })
+  );
+
+  // Find duplicate terms across domain and subdomains
+  const duplicateTerms = new Set<string>();
+  const termCounts = new Map<string, number>();
+
+  // Count terms from domain
+  if (domainUL?.data?.dictionary) {
+    domainUL.data.dictionary.forEach((term) => {
+      const termName = term.name.toLowerCase();
+      termCounts.set(termName, (termCounts.get(termName) || 0) + 1);
+    });
+  }
+
+  // Count terms from subdomains
+  subdomainULs.forEach(({ ubiquitousLanguage }) => {
+    if (ubiquitousLanguage?.data?.dictionary) {
+      ubiquitousLanguage.data.dictionary.forEach((term) => {
+        const termName = term.name.toLowerCase();
+        termCounts.set(termName, (termCounts.get(termName) || 0) + 1);
+      });
+    }
+  });
+
+  // Identify duplicates
+  termCounts.forEach((count, termName) => {
+    if (count > 1) {
+      duplicateTerms.add(termName);
+    }
+  });
+
+  return {
+    domain: domainUL,
+    subdomains: subdomainULs,
+    duplicateTerms,
+  };
+};
+
 export const getParentDomains = async (domain: Domain): Promise<Domain[]> => {
   const domains = await getDomains({ getAllVersions: false });
   return domains.filter((d) => {

package/package.json

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