@eventcatalog/core 3.8.2 → 3.9.0

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

@@ -0,0 +1,224 @@
+import React, { type RefObject } from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Code, Share2, Search, Grid3x3, Maximize2, Map, Sparkles, Zap, EyeOff, ExternalLink } from 'lucide-react';
+import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
+import type { VisualiserSearchRef } from './VisualiserSearch';
+
+interface VisualizerDropdownContentProps {
+  isMermaidView: boolean;
+  setIsMermaidView: (value: boolean) => void;
+  animateMessages: boolean;
+  toggleAnimateMessages: () => void;
+  hideChannels: boolean;
+  toggleChannelsVisibility: () => void;
+  hasChannels: boolean;
+  showMinimap: boolean;
+  setShowMinimap: (value: boolean) => void;
+  handleFitView: () => void;
+  searchRef: RefObject<VisualiserSearchRef | null>;
+  isChatEnabled: boolean;
+  openChat: () => void;
+  handleCopyArchitectureCode: () => void;
+  handleExportVisual: () => void;
+  setIsShareModalOpen: (value: boolean) => void;
+  toggleFullScreen: () => void;
+  openStudioModal: () => void;
+}
+
+const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
+  isMermaidView,
+  setIsMermaidView,
+  animateMessages,
+  toggleAnimateMessages,
+  hideChannels,
+  toggleChannelsVisibility,
+  hasChannels,
+  showMinimap,
+  setShowMinimap,
+  handleFitView,
+  searchRef,
+  isChatEnabled,
+  openChat,
+  handleCopyArchitectureCode,
+  handleExportVisual,
+  setIsShareModalOpen,
+  toggleFullScreen,
+  openStudioModal,
+}) => {
+  return (
+    <>
+      {/* Canvas Settings Submenu */}
+      <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2 outline-none">
+          <Grid3x3 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+          <span className="flex-1 font-normal">Canvas</span>
+          <svg className="w-3 h-3 text-[rgb(var(--ec-page-text-muted))]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </DropdownMenu.SubTrigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.SubContent
+            className="min-w-[200px] bg-[rgb(var(--ec-card-bg))] rounded-lg shadow-xl border border-[rgb(var(--ec-page-border))] py-1.5 z-[60]"
+            sideOffset={8}
+            alignOffset={-8}
+          >
+            <DropdownMenu.CheckboxItem
+              checked={isMermaidView}
+              onCheckedChange={setIsMermaidView}
+              className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
+            >
+              <Code className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+              <span className="flex-1 font-normal">Render as mermaid</span>
+              <div
+                className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${isMermaidView ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
+              >
+                <div
+                  className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${isMermaidView ? 'left-3.5' : 'left-0.5'}`}
+                />
+              </div>
+            </DropdownMenu.CheckboxItem>
+
+            <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+
+            <DropdownMenu.CheckboxItem
+              checked={animateMessages}
+              onCheckedChange={toggleAnimateMessages}
+              className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
+            >
+              <Zap className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+              <span className="flex-1 font-normal">Simulate Messages</span>
+              <div
+                className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${animateMessages ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
+              >
+                <div
+                  className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${animateMessages ? 'left-3.5' : 'left-0.5'}`}
+                />
+              </div>
+            </DropdownMenu.CheckboxItem>
+
+            {hasChannels && (
+              <DropdownMenu.CheckboxItem
+                checked={hideChannels}
+                onCheckedChange={toggleChannelsVisibility}
+                className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
+              >
+                <EyeOff className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+                <span className="flex-1 font-normal">Hide channels</span>
+                <div
+                  className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${hideChannels ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
+                >
+                  <div
+                    className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${hideChannels ? 'left-3.5' : 'left-0.5'}`}
+                  />
+                </div>
+              </DropdownMenu.CheckboxItem>
+            )}
+
+            <DropdownMenu.CheckboxItem
+              checked={showMinimap}
+              onCheckedChange={setShowMinimap}
+              className="flex items-center px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer transition-colors gap-2"
+            >
+              <Map className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+              <span className="flex-1 font-normal">Show minimap</span>
+              <div
+                className={`w-7 h-4 rounded-full transition-all duration-200 flex-shrink-0 relative ${showMinimap ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-border))]'}`}
+              >
+                <div
+                  className={`absolute top-0.5 w-3 h-3 rounded-full bg-white shadow-sm transition-all duration-200 ${showMinimap ? 'left-3.5' : 'left-0.5'}`}
+                />
+              </div>
+            </DropdownMenu.CheckboxItem>
+
+            <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+
+            <DropdownMenu.Item
+              onClick={handleFitView}
+              className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+            >
+              <Maximize2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+              <span className="flex-1 font-normal">Fit to view</span>
+            </DropdownMenu.Item>
+
+            <DropdownMenu.Item
+              onClick={() => {
+                searchRef.current?.hideSuggestions();
+                setTimeout(() => {
+                  const searchInput = document.querySelector('input[placeholder="Search nodes..."]') as HTMLInputElement;
+                  searchInput?.focus();
+                }, 50);
+              }}
+              className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+            >
+              <Search className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+              <span className="flex-1 font-normal">Find on canvas</span>
+            </DropdownMenu.Item>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Sub>
+
+      {/* Ask AI */}
+      {isChatEnabled && (
+        <>
+          <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+          <DropdownMenu.Item
+            onClick={openChat}
+            className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+          >
+            <Sparkles className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+            <span className="flex-1 font-normal">Ask a question</span>
+          </DropdownMenu.Item>
+        </>
+      )}
+
+      {/* Export Items */}
+      <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+      <DropdownMenu.Item
+        onClick={handleCopyArchitectureCode}
+        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+      >
+        <Code className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+        <span className="flex-1 font-normal">Copy as mermaid</span>
+      </DropdownMenu.Item>
+
+      <DropdownMenu.Item
+        onClick={handleExportVisual}
+        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+      >
+        <DocumentArrowDownIcon className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+        <span className="flex-1 font-normal">Export image</span>
+      </DropdownMenu.Item>
+
+      {/* Share Link */}
+      <DropdownMenu.Item
+        onClick={() => setIsShareModalOpen(true)}
+        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+      >
+        <Share2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+        <span className="flex-1 font-normal">Share Link</span>
+      </DropdownMenu.Item>
+
+      {/* Start Presentation */}
+      <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+      <DropdownMenu.Item
+        onClick={toggleFullScreen}
+        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+      >
+        <PresentationChartLineIcon className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+        <span className="flex-1 font-normal">Start Presentation</span>
+      </DropdownMenu.Item>
+
+      {/* Open in EventCatalog Studio */}
+      <DropdownMenu.Separator className="my-1 h-px bg-[rgb(var(--ec-page-border))]" />
+      <DropdownMenu.Item
+        onClick={openStudioModal}
+        className="px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.3)] cursor-pointer flex items-center gap-2 transition-colors"
+      >
+        <ExternalLink className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+        <span className="flex-1 font-normal">Open in EventCatalog Studio</span>
+      </DropdownMenu.Item>
+    </>
+  );
+};
+
+export default VisualizerDropdownContent;

package/eventcatalog/src/content.config.ts

@@ -453,7 +453,7 @@ const dataClassificationEnum = z.enum(['public', 'internal', 'confidential', 're
 
 const containers = defineCollection({
   loader: glob({
-    pattern: ['**/containers/*/index.(md|mdx)', '**/containers/*/versioned/*/index.(md|mdx)'],
+    pattern: ['**/containers/**/index.(md|mdx)', '**/containers/**/versioned/*/index.(md|mdx)'],
     base: projectDirBase,
     generateId: ({ data }) => {
       return `${data.id}-${data.version}`;

package/eventcatalog/src/enterprise/ai/chat-api.ts

@@ -11,9 +11,11 @@ import {
   getSchemaForResource as getSchemaImpl,
   getDataProductInputs as getDataProductInputsImpl,
   getDataProductOutputs as getDataProductOutputsImpl,
+  getArchitectureDiagramAsMermaid as getArchitectureDiagramImpl,
   collectionSchema,
   resourceCollectionSchema,
   messageCollectionSchema,
+  visualiserCollectionSchema,
   toolDescriptions,
 } from '@enterprise/tools/catalog-tools';
 
@@ -61,6 +63,7 @@ const builtInToolsMetadata = [
   { name: 'getSchemaForResource', description: 'Get the schema or specifications (OpenAPI, AsyncAPI, GraphQL) for a resource' },
   { name: 'getDataProductInputs', description: 'Get the inputs (resources consumed) for a data product' },
   { name: 'getDataProductOutputs', description: 'Get the outputs (resources produced) for a data product with data contracts' },
+  { name: 'getArchitectureDiagramAsMermaid', description: 'Get the architecture diagram for a resource as Mermaid code' },
 ];
 
 // Get extended tools metadata from user configuration
@@ -112,6 +115,11 @@ You may be able to get the resource from the URL
 
 The referer URL is: ${referrer}
 
+IMPORTANT: When the user is on a visualiser page (/visualiser/*) or asks about architecture, dependencies, data flow, or connections:
+- Use the getArchitectureDiagramAsMermaid tool to fetch the architecture diagram
+- The mermaid code shows all the connections between resources (services, events, channels, etc.)
+- Use this to provide accurate, contextual answers about the architecture
+
 Sometimes the user will be on the specification page (openapi, asyncapi, graphql) for a resource too 
 - /docs/services/OrdersService/0.0.3/asyncapi/order-service-asyncapi -> id: OrdersService, version: 0.0.3, collection: services, schema (specification): asyncapi
 - /docs/services/OrdersService/0.0.3/spec/openapi-v2 -> id: OrdersService, version: 0.0.3, collection: services, schema (specification): openapi
@@ -317,6 +325,21 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
             return await getDataProductOutputsImpl({ dataProductId, dataProductVersion });
           },
         }),
+        getArchitectureDiagramAsMermaid: tool({
+          description: toolDescriptions.getArchitectureDiagramAsMermaid,
+          inputSchema: z.object({
+            resourceId: z.string().describe('The id of the resource to get the architecture diagram for'),
+            resourceVersion: z.string().describe('The version of the resource to get the architecture diagram for'),
+            resourceCollection: visualiserCollectionSchema
+              .describe(
+                'The collection of the resource (events, commands, queries, services, domains, flows, containers, data-products)'
+              )
+              .default('services'),
+          }),
+          execute: async ({ resourceId, resourceVersion, resourceCollection }) => {
+            return await getArchitectureDiagramImpl({ resourceId, resourceVersion, resourceCollection });
+          },
+        }),
         suggestFollowUpQuestions: tool({
           description:
             'Use this tool after answering a question to suggest 2-3 relevant follow-up questions the user might want to ask. These will be displayed as clickable suggestions.',

package/eventcatalog/src/enterprise/tools/catalog-tools.ts

@@ -9,6 +9,18 @@ import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/
 import { getUbiquitousLanguageWithSubdomains } from '@utils/collections/domains';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import fs from 'node:fs';
+import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
+import {
+  getNodesAndEdgesForCommands,
+  getNodesAndEdgesForEvents,
+  getNodesAndEdgesForQueries,
+} from '@utils/node-graphs/message-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDataProduct } from '@utils/node-graphs/data-products-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
+import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
+import config from '@config';
 
 // ============================================
 // Pagination utilities
@@ -110,6 +122,17 @@ export const resourceCollectionSchema = z.enum([
   'data-products',
 ]);
 
+export const visualiserCollectionSchema = z.enum([
+  'events',
+  'commands',
+  'queries',
+  'services',
+  'domains',
+  'flows',
+  'containers',
+  'data-products',
+]);
+
 // ============================================
 // Tool implementations (core logic)
 // ============================================
@@ -821,6 +844,77 @@ export async function getDataProductOutputs(params: { dataProductId: string; dat
   };
 }
 
+// ============================================
+// Architecture Diagram (Mermaid) tools
+// ============================================
+
+const getNodesAndEdgesFunctions = {
+  services: getNodesAndEdgesForService,
+  events: getNodesAndEdgesForEvents,
+  commands: getNodesAndEdgesForCommands,
+  queries: getNodesAndEdgesForQueries,
+  domains: getNodesAndEdgesForDomain,
+  flows: getNodesAndEdgesForFlows,
+  containers: getNodesAndEdgesForContainer,
+  'data-products': getNodesAndEdgesForDataProduct,
+};
+
+/**
+ * Get the architecture diagram for a resource as Mermaid code
+ * Returns flowchart syntax that can be rendered or used for understanding architecture
+ */
+export async function getArchitectureDiagramAsMermaid(params: {
+  resourceId: string;
+  resourceVersion: string;
+  resourceCollection: string;
+}) {
+  const { resourceId, resourceVersion, resourceCollection } = params;
+
+  // Validate the collection is supported for visualisation
+  if (!(resourceCollection in getNodesAndEdgesFunctions)) {
+    return {
+      error: `Collection '${resourceCollection}' does not support architecture diagrams. Supported collections: ${Object.keys(getNodesAndEdgesFunctions).join(', ')}`,
+    };
+  }
+
+  try {
+    // Get nodes and edges for this resource
+    const { nodes, edges } = await getNodesAndEdgesFunctions[resourceCollection as keyof typeof getNodesAndEdgesFunctions]({
+      id: resourceId,
+      version: resourceVersion,
+      mode: 'full',
+      channelRenderMode: config.visualiser?.channels?.renderMode === 'single' ? 'single' : 'flat',
+    });
+
+    if (!nodes || nodes.length === 0) {
+      return {
+        error: `No diagram data available for ${resourceCollection}/${resourceId} (v${resourceVersion})`,
+      };
+    }
+
+    // Convert to mermaid
+    const mermaidCode = convertToMermaid(nodes, edges, {
+      includeStyles: true,
+      direction: 'LR',
+    });
+
+    return {
+      resourceId,
+      resourceVersion,
+      resourceCollection,
+      mermaidCode,
+      nodeCount: nodes.length,
+      edgeCount: edges.length,
+      visualiserUrl: `/visualiser/${resourceCollection}/${resourceId}/${resourceVersion}`,
+    };
+  } catch (error) {
+    console.error('Error generating mermaid diagram:', error);
+    return {
+      error: `Failed to generate diagram for ${resourceCollection}/${resourceId} (v${resourceVersion})`,
+    };
+  }
+}
+
 // ============================================
 // Tool metadata (descriptions)
 // ============================================
@@ -854,4 +948,6 @@ export const toolDescriptions = {
     'Use this tool to get the inputs (resources consumed) for a data product. Returns fully hydrated input resources with their id, version, name, summary, and collection type.',
   getDataProductOutputs:
     'Use this tool to get the outputs (resources produced) for a data product. Returns fully hydrated output resources with their id, version, name, summary, collection type, and data contracts (if defined). Data contracts include the contract name, path, format, type, and content.',
+  getArchitectureDiagramAsMermaid:
+    'Use this tool to get the architecture diagram for a resource as Mermaid flowchart code. This shows how the resource connects to other resources (services, events, channels, etc.) in the architecture. The mermaid code can be rendered to visualize the architecture or used to understand relationships. Supported collections: events, commands, queries, services, domains, flows, containers, data-products.',
 };

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version].mermaid.ts

@@ -0,0 +1,128 @@
+/**
+ * API endpoint to return mermaid diagram code for a visualiser page
+ * URL: /visualiser/{type}/{id}/{version}.mermaid
+ *
+ * Returns plain text mermaid flowchart syntax that can be used by LLMs,
+ * documentation tools, or pasted into mermaid-compatible renderers.
+ */
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
+import {
+  getNodesAndEdgesForCommands,
+  getNodesAndEdgesForEvents,
+  getNodesAndEdgesForQueries,
+} from '@utils/node-graphs/message-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDataProduct } from '@utils/node-graphs/data-products-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
+import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
+import config from '@config';
+import type { PageTypes } from '@types';
+
+type PageTypesWithFlows = PageTypes | 'flows';
+
+// Prerender static pages when auth is disabled, use SSR when auth is enabled
+export const prerender = !isAuthEnabled();
+
+const getNodesAndEdgesFunctions = {
+  services: getNodesAndEdgesForService,
+  events: getNodesAndEdgesForEvents,
+  commands: getNodesAndEdgesForCommands,
+  queries: getNodesAndEdgesForQueries,
+  domains: getNodesAndEdgesForDomain,
+  flows: getNodesAndEdgesForFlows,
+  containers: getNodesAndEdgesForContainer,
+  'data-products': getNodesAndEdgesForDataProduct,
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  if (isAuthEnabled() || !isVisualiserEnabled()) {
+    return [];
+  }
+
+  const { getFlows } = await import('@utils/collections/flows');
+
+  const loaders = {
+    ...pageDataLoader,
+    flows: getFlows,
+  };
+
+  const itemTypes: PageTypesWithFlows[] = [
+    'events',
+    'commands',
+    'queries',
+    'services',
+    'domains',
+    'flows',
+    'containers',
+    'data-products',
+  ];
+
+  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
+
+  return allItems.flatMap((items, index) =>
+    items
+      .filter((item) => item.data.visualiser !== false)
+      .map((item) => ({
+        params: {
+          type: itemTypes[index],
+          id: item.data.id,
+          version: item.data.version,
+        },
+      }))
+  );
+};
+
+export const GET: APIRoute = async ({ params }) => {
+  const { type, id, version } = params;
+
+  if (!type || !id || !version || !isVisualiserEnabled()) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  // Validate the type is supported
+  if (!(type in getNodesAndEdgesFunctions)) {
+    return new Response(`Unsupported type: ${type}`, { status: 400 });
+  }
+
+  try {
+    // Get nodes and edges for this resource
+    const { nodes, edges } = await getNodesAndEdgesFunctions[type as keyof typeof getNodesAndEdgesFunctions]({
+      id,
+      version,
+      mode: 'full',
+      channelRenderMode: config.visualiser?.channels?.renderMode === 'single' ? 'single' : 'flat',
+    });
+
+    if (!nodes || nodes.length === 0) {
+      return new Response('No diagram data available', { status: 404 });
+    }
+
+    // Convert to mermaid
+    const mermaidCode = convertToMermaid(nodes, edges, {
+      includeStyles: true,
+      direction: 'LR',
+    });
+
+    // Add header comment with metadata
+    const header = `%% EventCatalog Mermaid Diagram
+%% Resource: ${type}/${id} (v${version})
+%% Generated: ${new Date().toISOString()}
+
+`;
+
+    return new Response(header + mermaidCode, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+        'Cache-Control': 'public, max-age=3600',
+      },
+    });
+  } catch (error) {
+    console.error('Error generating mermaid diagram:', error);
+    return new Response('Failed to generate diagram', { status: 500 });
+  }
+};

package/eventcatalog/src/pages/visualiser/designs/[id]/index.astro

@@ -2,9 +2,12 @@
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph';
 import { ClientRouter } from 'astro:transitions';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { isEventCatalogChatEnabled } from '@utils/feature';
 
 import { Page } from './_index.data';
 
+const isChatEnabled = isEventCatalogChatEnabled();
+
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
@@ -25,6 +28,7 @@ const { data } = props;
       client:only="react"
       mode="full"
       linkTo="visualiser"
+      isChatEnabled={isChatEnabled}
     />
   </div>
   <ClientRouter />

package/eventcatalog/src/utils/clipboard.ts

@@ -0,0 +1,22 @@
+/**
+ * Copy text to clipboard with fallback for older browsers
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves to true if successful
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Fallback for older browsers
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    document.body.removeChild(textarea);
+    return true;
+  }
+}