@eventcatalog/core 3.2.1 → 3.3.0

package/eventcatalog/src/pages/diagrams/[id]/[version].mdx.ts

@@ -0,0 +1,47 @@
+// This file exposes the markdown for diagrams in the URL
+// For example http://localhost:3000/diagrams/target-architecture/1.0.0 loads the Page
+// and http://localhost:3000/diagrams/target-architecture/1.0.0.mdx loads the markdown
+// This is used for LLMs to load the markdown for diagrams (llms.txt)
+
+import type { APIRoute } from 'astro';
+import { getCollection } from 'astro:content';
+import fs from 'fs';
+import { isLLMSTxtEnabled, isSSR } from '@utils/feature';
+
+const diagrams = await getCollection('diagrams');
+
+export async function getStaticPaths() {
+  // Just return empty array if LLMs are not enabled
+  if (!isLLMSTxtEnabled()) {
+    return [];
+  }
+
+  return diagrams.map((diagram) => ({
+    params: { id: diagram.data.id, version: diagram.data.version },
+    props: { content: diagram },
+  }));
+}
+
+export const GET: APIRoute = async ({ params, props }) => {
+  // Just return empty array if LLMs are not enabled
+  if (!isLLMSTxtEnabled()) {
+    return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
+  }
+
+  if (isSSR()) {
+    // For SSR mode, find the diagram and read its file
+    const diagram = diagrams.find((d) => d.data.id === params.id && d.data.version === params.version);
+    if (!diagram?.filePath) {
+      return new Response('Not found', { status: 404 });
+    }
+    const file = fs.readFileSync(diagram.filePath, 'utf8');
+    return new Response(file, { status: 200 });
+  } else {
+    if (props?.content?.filePath) {
+      const file = fs.readFileSync(props.content.filePath, 'utf8');
+      return new Response(file, { status: 200 });
+    }
+  }
+
+  return new Response('Not found', { status: 404 });
+};

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

@@ -73,31 +73,25 @@ const logList = await Promise.all(logListPromise);
 
 const getBadge = () => {
   if (props.collection === 'services') {
-    return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-600' };
+    return { badgeType: 'service', content: 'Service', icon: ServerIcon };
   }
   if (props.collection === 'events') {
-    return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-600' };
+    return { badgeType: 'event', content: 'Event', icon: BoltIcon };
   }
   if (props.collection === 'commands') {
-    return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-600' };
+    return { badgeType: 'command', content: 'Command', icon: ChatBubbleLeftIcon };
   }
   if (props.collection === 'queries') {
-    return { backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-green-600' };
+    return { badgeType: 'query', content: 'Query', icon: MagnifyingGlassIcon };
   }
   if (props.collection === 'domains') {
-    return {
-      backgroundColor: 'yellow',
-      textColor: 'yellow',
-      content: 'Domain',
-      icon: RectangleGroupIcon,
-      class: 'text-yellow-600',
-    };
+    return { badgeType: 'domain', content: 'Domain', icon: RectangleGroupIcon };
   }
   if (props.collection === 'containers') {
-    return { backgroundColor: 'blue', textColor: 'blue', content: 'Container', icon: DatabaseIcon, class: 'text-blue-600' };
+    return { badgeType: 'default', content: 'Container', icon: DatabaseIcon };
   }
   if (props.collection === 'flows') {
-    return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-teal-600' };
+    return { badgeType: 'design', content: 'Flow', icon: QueueListIcon };
   }
 };
 
@@ -112,7 +106,7 @@ const badges = [getBadge()];
           <div>
             <a
               href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-              class="text-sm font-medium text-gray-500 hover:text-gray-700"
+              class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
             >
               {props.data.name}
             </a>
@@ -120,12 +114,17 @@ const badges = [getBadge()];
         </li>
         <li>
           <div class="flex items-center">
-            <svg fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-gray-300">
+            <svg
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+              class="h-5 w-5 flex-shrink-0 text-[rgb(var(--ec-page-border))]"
+            >
               <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path>
             </svg>
             <a
               href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-              class="text-sm font-medium text-gray-500 hover:text-gray-700"
+              class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
             >
               Changelog
             </a>
@@ -133,18 +132,19 @@ const badges = [getBadge()];
         </li>
       </ol>
     </nav>
-    <div class="border-b border-gray-200 flex justify-between items-start py-4 w-full">
+    <div class="border-b border-[rgb(var(--ec-page-border))] flex justify-between items-start py-4 w-full">
       <div>
-        <h2 class="text-2xl md:text-4xl font-bold">{props.data.name} (Changelog)</h2>
-        <h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
+        <h2 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{props.data.name} (Changelog)</h2>
+        <h2 class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
         {
           badges && (
             <div class="flex flex-wrap py-2 pt-4">
               {badges.map((badge: any) => (
                 <span
-                  class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
+                  class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center"
+                  style={`background-color: rgb(var(--ec-badge-${badge.badgeType}-bg)); color: rgb(var(--ec-badge-${badge.badgeType}-text));`}
                 >
-                  {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                  {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
                   <span>{badge.content}</span>
                 </span>
               ))}
@@ -155,7 +155,7 @@ const badges = [getBadge()];
     </div>
     {
       logList.length === 0 && (
-        <div class="py-4 text-gray-400 prose prose-md">
+        <div class="py-4 text-[rgb(var(--ec-page-text-muted))] prose prose-md">
           <p>No changelogs found.</p>
         </div>
       )
@@ -167,25 +167,22 @@ const badges = [getBadge()];
             <li>
               <div class="relative pb-8">
                 {index !== logList.length - 1 ? (
-                  <span aria-hidden="true" class="absolute left-6 top-4 -ml-px h-full w-0.5 bg-gray-200" />
+                  <span aria-hidden="true" class="absolute left-6 top-4 -ml-px h-full w-0.5 bg-[rgb(var(--ec-page-border))]" />
                 ) : null}
                 <div class="relative flex space-x-3">
                   <div>
                     <a
                       href={buildUrl(`${log.url}/${log.version}`)}
-                      class={
-                        'bg-primary hover:bg-primary/80 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-white'
-                      }
+                      class="bg-primary hover:bg-primary/80 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-[rgb(var(--ec-page-bg))]"
                     >
                       {log.version}
-                      {/* <DocumentTextIcon aria-hidden="true" className="h-5 w-5 text-white" /> */}
                     </a>
                   </div>
                 </div>
                 <div class="pl-[70px] py-2 -mt-10">
                   {log.createdAt && (
                     <div class="pb-2">
-                      <h3 class="text-2xl text-gray-800 font-bold">
+                      <h3 class="text-2xl text-[rgb(var(--ec-page-text))] font-bold">
                         <span>
                           {log.createdAt.toISOString().split('T')[0]} {`${log.isLatest ? '(latest)' : ''}`}
                         </span>
@@ -195,10 +192,8 @@ const badges = [getBadge()];
                   {log.badges && (
                     <div class="flex flex-wrap">
                       {log.badges.map((badge: any) => (
-                        <span
-                          class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
-                        >
-                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                        <span class="text-sm font-medium px-2 py-1 rounded-md mr-2 space-x-1 flex items-center bg-[rgb(var(--ec-badge-default-bg))] text-[rgb(var(--ec-badge-default-text))]">
+                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1" />}
                           <span>{badge.content}</span>
                         </span>
                       ))}
@@ -207,7 +202,7 @@ const badges = [getBadge()];
                   <div class="prose prose-md !max-w-none py-2">
                     <log.Content components={mdxComponents(props)} />
                   </div>
-                  {log.diffs && log.diffs.map((diff) => <div id="diff-container" set:html={diff} />)}
+                  {log.diffs && log.diffs.map((diff) => <div class="bg-white rounded-lg p-2 my-2" set:html={diff} />)}
                 </div>
               </div>
             </li>

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

@@ -305,6 +305,7 @@ nodeGraphs.push({
                   markdownDownloadEnabled={isMarkdownDownloadEnabled()}
                   rssFeedEnabled={isRSSEnabled()}
                   editUrl={editUrl}
+                  preferChatAsDefault={isEventCatalogChatEnabled()}
                 />
               </div>
             </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version].md.ts

@@ -7,6 +7,7 @@ import { getCollection } from 'astro:content';
 import { getEntities } from '@utils/collections/entities';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 const events = await getCollection('events');
 const commands = await getCollection('commands');
@@ -19,7 +20,7 @@ const containers = await getCollection('containers');
 const entities = await getEntities();
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -46,7 +47,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/[type]/[id]/[version].mdx.ts

@@ -21,7 +21,7 @@ import utils from '@eventcatalog/sdk';
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
   const collections = {
@@ -45,11 +45,15 @@ export async function getStaticPaths() {
 }
 
 export const GET: APIRoute = async ({ params, props }) => {
+  console.log('props', props);
+
   // Just return empty array if LLMs are not enabled
   if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 
+  console.log('params', params);
+
   if (isSSR()) {
     const { getResourcePath } = utils(process.env.PROJECT_DIR ?? '');
     const filePath = await getResourcePath(process.env.PROJECT_DIR ?? '', params.id ?? '', params.version ?? '');

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

@@ -3,6 +3,7 @@ import type { CollectionEntry } from 'astro:content';
 import type { APIRoute } from 'astro';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 export async function getStaticPaths() {
   const domains = await getDomains({ getAllVersions: false });
@@ -25,7 +26,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/custom/[...path].mdx.ts

@@ -4,8 +4,8 @@
 
 import type { APIRoute, GetStaticPaths } from 'astro';
 import { getCollection } from 'astro:content';
-import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 export const getStaticPaths = (async () => {
   const docs = await getCollection('customPages');
@@ -19,7 +19,7 @@ export const getStaticPaths = (async () => {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/teams/[id].md.ts

@@ -6,12 +6,13 @@ import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 const teams = await getCollection('teams');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +24,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/teams/[id].mdx.ts

@@ -4,14 +4,14 @@
 
 import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
-import config from '@config';
+import { isLLMSTxtEnabled } from '@utils/feature';
 import fs from 'fs';
 
 const teams = await getCollection('teams');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/users/[id].md.ts

@@ -6,12 +6,13 @@ import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
 import config from '@config';
 import fs from 'fs';
+import { isLLMSTxtEnabled } from '@utils/feature';
 
 const users = await getCollection('users');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +24,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/pages/docs/users/[id].mdx.ts

@@ -4,14 +4,14 @@
 
 import type { APIRoute } from 'astro';
 import { getCollection } from 'astro:content';
-import config from '@config';
+import { isLLMSTxtEnabled } from '@utils/feature';
 import fs from 'fs';
 
 const users = await getCollection('users');
 
 export async function getStaticPaths() {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return [];
   }
 
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
 
 export const GET: APIRoute = async ({ params, props }) => {
   // Just return empty array if LLMs are not enabled
-  if (!config.llmsTxt?.enabled) {
+  if (!isLLMSTxtEnabled()) {
     return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
   }
 

package/eventcatalog/src/stores/sidebar-store/builders/container.ts

@@ -1,16 +1,21 @@
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
-import type { NavNode, ChildRef } from './shared';
+import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
 import {
   buildQuickReferenceSection,
   buildOwnersSection,
   shouldRenderSideBarSection,
   buildRepositorySection,
   buildAttachmentsSection,
+  buildDiagramNavItems,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
-export const buildContainerNode = (container: CollectionEntry<'containers'>, owners: any[]): NavNode => {
+export const buildContainerNode = (
+  container: CollectionEntry<'containers'>,
+  owners: any[],
+  context: ResourceGroupContext
+): NavNode => {
   const servicesWritingToContainer = container.data.servicesThatWriteToContainer || [];
   const servicesReadingFromContainer = container.data.servicesThatReadFromContainer || [];
 
@@ -27,6 +32,11 @@ export const buildContainerNode = (container: CollectionEntry<'containers'>, own
 
   const renderRepository = container.data.repository && shouldRenderSideBarSection(container, 'repository');
 
+  // Diagrams
+  const containerDiagrams = container.data.diagrams || [];
+  const diagramNavItems = buildDiagramNavItems(containerDiagrams, context.diagrams);
+  const hasDiagrams = diagramNavItems.length > 0;
+
   return {
     type: 'item',
     title: container.data.name,
@@ -41,16 +51,22 @@ export const buildContainerNode = (container: CollectionEntry<'containers'>, own
       ]),
       renderVisualiser && {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {
             type: 'item',
-            title: 'Interaction Map',
+            title: 'Map',
             href: buildUrl(`/visualiser/containers/${container.data.id}/${container.data.version}`),
           },
         ],
       },
+      hasDiagrams && {
+        type: 'group',
+        title: 'Diagrams',
+        icon: 'FileImage',
+        pages: diagramNavItems,
+      },
       renderServicesWritingToContainer && {
         type: 'group',
         title: 'Services (Writes)',

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -8,6 +8,7 @@ import {
   shouldRenderSideBarSection,
   buildRepositorySection,
   buildAttachmentsSection,
+  buildDiagramNavItems,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
@@ -35,6 +36,12 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
   const hasAttachments = domain.data.attachments && domain.data.attachments.length > 0;
 
   const renderRepository = domain.data.repository && shouldRenderSideBarSection(domain, 'repository');
+
+  // Diagrams
+  const domainDiagrams = domain.data.diagrams || [];
+  const diagramNavItems = buildDiagramNavItems(domainDiagrams, context.diagrams);
+  const hasDiagrams = diagramNavItems.length > 0;
+
   return {
     type: 'item',
     title: domain.data.name,
@@ -47,32 +54,33 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
       ]),
       {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {
             type: 'item',
-            title: 'Architecture Overview',
+            title: 'Overview',
             href: buildUrl(`/architecture/domains/${domain.data.id}/${domain.data.version}`),
           },
+          renderVisualiser && {
+            type: 'item',
+            title: 'Map',
+            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
+          },
           renderEntities &&
             renderVisualiser && {
               type: 'item',
               title: 'Entity Map',
               href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/entity-map`),
             },
-          renderVisualiser && {
-            type: 'item',
-            title: 'Interaction Map',
-            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
-          },
-          renderVisualiser && {
-            type: 'item',
-            title: 'Global Domain Map',
-            href: buildUrl(`/visualiser/domain-integrations`),
-          },
         ].filter(Boolean) as ChildRef[],
       },
+      hasDiagrams && {
+        type: 'group',
+        title: 'Diagrams',
+        icon: 'FileImage',
+        pages: diagramNavItems,
+      },
       renderSubDomains && {
         type: 'group',
         title: 'Subdomains',

package/eventcatalog/src/stores/sidebar-store/builders/flow.ts

@@ -14,7 +14,7 @@ export const buildFlowNode = (flow: CollectionEntry<'flows'>): NavNode => {
       buildQuickReferenceSection([{ title: 'Overview', href: buildUrl(`/docs/flows/${flow.data.id}/${flow.data.version}`) }]),
       {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {

package/eventcatalog/src/stores/sidebar-store/builders/message.ts

@@ -1,17 +1,22 @@
 import type { CollectionEntry } from 'astro:content';
 import { buildUrl } from '@utils/url-builder';
 import { getSchemaFormatFromURL } from '@utils/collections/schemas';
-import type { NavNode, ChildRef } from './shared';
+import type { NavNode, ChildRef, ResourceGroupContext } from './shared';
 import {
   buildQuickReferenceSection,
   buildOwnersSection,
   shouldRenderSideBarSection,
   buildRepositorySection,
   buildAttachmentsSection,
+  buildDiagramNavItems,
 } from './shared';
 import { isVisualiserEnabled } from '@utils/feature';
 
-export const buildMessageNode = (message: CollectionEntry<'events' | 'commands' | 'queries'>, owners: any[]): NavNode => {
+export const buildMessageNode = (
+  message: CollectionEntry<'events' | 'commands' | 'queries'>,
+  owners: any[],
+  context: ResourceGroupContext
+): NavNode => {
   const producers = message.data.producers || [];
   const consumers = message.data.consumers || [];
   const collection = message.collection;
@@ -35,6 +40,11 @@ export const buildMessageNode = (message: CollectionEntry<'events' | 'commands'
 
   const renderOwners = owners.length > 0 && shouldRenderSideBarSection(message, 'owners');
 
+  // Diagrams
+  const messageDiagrams = message.data.diagrams || [];
+  const diagramNavItems = buildDiagramNavItems(messageDiagrams, context.diagrams);
+  const hasDiagrams = diagramNavItems.length > 0;
+
   return {
     type: 'item',
     title: message.data.name,
@@ -49,16 +59,22 @@ export const buildMessageNode = (message: CollectionEntry<'events' | 'commands'
       ]),
       renderVisualiser && {
         type: 'group',
-        title: 'Architecture & Design',
+        title: 'Architecture',
         icon: 'Workflow',
         pages: [
           {
             type: 'item',
-            title: 'Interaction Map',
+            title: 'Map',
             href: buildUrl(`/visualiser/${collection}/${message.data.id}/${message.data.version}`),
           },
         ],
       },
+      hasDiagrams && {
+        type: 'group',
+        title: 'Diagrams',
+        icon: 'FileImage',
+        pages: diagramNavItems,
+      },
       hasSchema && {
         type: 'group',
         title: `API & Contracts`,