@eventcatalog/core 4.10.0 → 4.10.1

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.10.0";
+var version = "4.10.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-BQXEWQ5J.js";
-import "../chunk-BDFTJVGN.js";
+} from "../chunk-OC2RGFPU.js";
+import "../chunk-T2HLSITU.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.10.0";
+var version = "4.10.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-HFAQXAG3.js";
-import "../chunk-BQXEWQ5J.js";
+} from "../chunk-PHG7KEUH.js";
+import "../chunk-OC2RGFPU.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-BDFTJVGN.js";
+import "../chunk-T2HLSITU.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-BQXEWQ5J.js → chunk-OC2RGFPU.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-BDFTJVGN.js";
+} from "./chunk-T2HLSITU.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-HFAQXAG3.js → chunk-PHG7KEUH.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-BQXEWQ5J.js";
+} from "./chunk-OC2RGFPU.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-IC6XSXJO.js → chunk-QIV7LWVJ.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-BDFTJVGN.js";
+} from "./chunk-T2HLSITU.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-5XURY2JV.js → chunk-SQNVL7PI.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-IC6XSXJO.js";
+} from "./chunk-QIV7LWVJ.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-BDFTJVGN.js → chunk-T2HLSITU.js}

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

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "4.10.0";
+var version = "4.10.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-BDFTJVGN.js";
+} from "./chunk-T2HLSITU.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -144,7 +144,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.10.0";
+var version = "4.10.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -4,8 +4,8 @@ import {
 import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-HFAQXAG3.js";
-import "./chunk-BQXEWQ5J.js";
+} from "./chunk-PHG7KEUH.js";
+import "./chunk-OC2RGFPU.js";
 import "./chunk-K2XIENVT.js";
 import {
   FederationConflictError,
@@ -31,10 +31,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-5XURY2JV.js";
+} from "./chunk-SQNVL7PI.js";
 import {
   logger
-} from "./chunk-IC6XSXJO.js";
+} from "./chunk-QIV7LWVJ.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -54,7 +54,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-BDFTJVGN.js";
+} from "./chunk-T2HLSITU.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

@@ -108,7 +108,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.10.0";
+var version = "4.10.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-5XURY2JV.js";
-import "./chunk-IC6XSXJO.js";
-import "./chunk-BDFTJVGN.js";
+} from "./chunk-SQNVL7PI.js";
+import "./chunk-QIV7LWVJ.js";
+import "./chunk-T2HLSITU.js";
 import "./chunk-6QENHZZP.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.10.0";
+var version = "4.10.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-IC6XSXJO.js";
-import "../chunk-BDFTJVGN.js";
+} from "../chunk-QIV7LWVJ.js";
+import "../chunk-T2HLSITU.js";
 export {
   logger
 };

package/eventcatalog/astro.config.mjs

@@ -190,6 +190,12 @@ export default defineConfig({
         'semver',
         'diff',
         'diff2html',
+        // Used by the ArchitectureGraph embeds — discovering these lazily mid-session
+        // triggers a re-optimize that 504s every already-loaded chunk
+        'd3-force',
+        'd3-selection',
+        'd3-zoom',
+        'd3-drag',
       ],
     },
   },

package/eventcatalog/src/components/CatalogGraph/CatalogForceGraph.tsx

@@ -30,23 +30,40 @@ import { drag } from 'd3-drag';
 import { getColorForCollection, tailwind500RgbByColor } from '@utils/collection-colors';
 import { getIconForCollection } from '@utils/collections/icons';
 import { buildUrl } from '@utils/url-builder';
+import type { CatalogGraphWireLink, CatalogGraphWireNode } from '@utils/node-graphs/catalog-force-graph';
 
-/** Compact wire format — expanded client-side to keep the serialised page payload small. */
-export interface CatalogGraphWireNode {
-  /** Resource id, e.g. `InventoryService` */
-  id: string;
-  label: string;
-  collection: string;
-  version?: string;
-}
-
-/** [sourceIndex, targetIndex, labelIndex] into the nodes / linkLabels arrays */
-export type CatalogGraphWireLink = [number, number, number];
+export type { CatalogGraphWireLink, CatalogGraphWireNode };
 
 interface Props {
   nodes: CatalogGraphWireNode[];
   links: CatalogGraphWireLink[];
   linkLabels: string[];
+  /** Seed the initial lens. URL state wins when `syncUrl` is on. */
+  initialLens?: string;
+  /** Seed the initial focused node key, e.g. `domains/Orders`. URL state wins when `syncUrl` is on. */
+  initialFocus?: string;
+  /** Seed the initial focus depth (1–3). URL state wins when `syncUrl` is on. */
+  initialFocusDepth?: number;
+  /**
+   * Read the view state from the URL and mirror changes back into it — the
+   * standalone /visualiser/graph page. Off for graphs embedded in docs pages,
+   * which must not rewrite their host page's query string.
+   */
+  syncUrl?: boolean;
+  /** Show the lens picker / detail slider (hidden on embedded graphs, which pin a lens) */
+  showLensPicker?: boolean;
+  showSearch?: boolean;
+  showLegend?: boolean;
+  /** When off, plain scrolling over the canvas scrolls the page — zooming needs ctrl/cmd+scroll */
+  zoomOnScroll?: boolean;
+  /**
+   * Base URL of the standalone /visualiser/graph page. When set, an "open"
+   * link is rendered whose query string carries the CURRENT view state (focus,
+   * depth, lens, hidden collections), so the full page opens on exactly the
+   * view the embedded graph is showing.
+   */
+  openInGraphUrl?: string;
+  openInGraphLabel?: string;
 }
 
 interface GraphNode extends CatalogGraphWireNode {
@@ -243,7 +260,21 @@ const distanceToHull = (px: number, py: number, hull: [number, number][]) => {
   return min;
 };
 
-const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
+const CatalogForceGraph = ({
+  nodes,
+  links,
+  linkLabels,
+  initialLens,
+  initialFocus,
+  initialFocusDepth,
+  syncUrl = true,
+  showLensPicker = true,
+  openInGraphUrl,
+  openInGraphLabel,
+  showSearch = true,
+  showLegend = true,
+  zoomOnScroll = true,
+}: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -255,37 +286,58 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
   const iconSpritesRef = useRef(new Map<string, HTMLCanvasElement>());
   const drawRef = useRef<() => void>(() => {});
   // View state initialises from the URL so people can share what they're looking
-  // at (?lens=domains&focus=services/OrderService&depth=2&detail=3&hide=teams,entities)
+  // at (?lens=domains&focus=services/OrderService&depth=2&detail=3&hide=teams,entities).
+  // Embedded graphs (syncUrl off) seed from the initial* props instead — their
+  // host page's query string is not theirs to read or write.
+  const urlParam = (key: string) => (syncUrl ? new URLSearchParams(window.location.search).get(key) : null);
   const [hiddenCollections, setHiddenCollections] = useState<Set<string>>(() => {
-    const hide = new URLSearchParams(window.location.search).get('hide');
+    const hide = urlParam('hide');
     return new Set(hide ? hide.split(',').filter(Boolean) : []);
   });
   const [lensKey, setLensKey] = useState(() => {
-    const lens = new URLSearchParams(window.location.search).get('lens');
+    const lens = urlParam('lens') ?? initialLens;
     return lens && lens in LENSES ? lens : 'all';
   });
-  const [focusKey, setFocusKey] = useState<string | null>(() => new URLSearchParams(window.location.search).get('focus'));
+  const [focusKey, setFocusKey] = useState<string | null>(() => urlParam('focus') ?? initialFocus ?? null);
   const [focusDepth, setFocusDepth] = useState(() =>
-    Math.min(3, Math.max(1, Number(new URLSearchParams(window.location.search).get('depth')) || 1))
+    Math.min(3, Math.max(1, Number(urlParam('depth')) || initialFocusDepth || 1))
   );
   // How many hops of detail radiate out from a lens's anchor nodes (4 = everything)
-  const [lensDepth, setLensDepth] = useState(() =>
-    Math.min(MAX_LENS_DEPTH, Math.max(1, Number(new URLSearchParams(window.location.search).get('detail')) || 1))
-  );
+  const [lensDepth, setLensDepth] = useState(() => Math.min(MAX_LENS_DEPTH, Math.max(1, Number(urlParam('detail')) || 1)));
 
-  // Reflect the view state back into the URL (replaceState, so no history spam);
-  // unrelated params — e.g. the stress page's ?nodes — are preserved
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
+  // Serialise the current view state into query params — shared between the
+  // URL sync below and the embedded graphs' "open in graph" link
+  const applyViewParams = (params: URLSearchParams) => {
     const setOrDelete = (key: string, value: string | null) => (value ? params.set(key, value) : params.delete(key));
     setOrDelete('lens', lensKey !== 'all' ? lensKey : null);
     setOrDelete('focus', focusKey);
     setOrDelete('depth', focusKey && focusDepth !== 1 ? String(focusDepth) : null);
     setOrDelete('detail', lensDepth !== 1 ? String(lensDepth) : null);
     setOrDelete('hide', hiddenCollections.size > 0 ? [...hiddenCollections].sort().join(',') : null);
-    const query = params.toString();
+    return params;
+  };
+
+  // Reflect the view state back into the URL (replaceState, so no history spam);
+  // unrelated params — e.g. the stress page's ?nodes — are preserved
+  useEffect(() => {
+    if (!syncUrl) return;
+    const query = applyViewParams(new URLSearchParams(window.location.search)).toString();
     window.history.replaceState(null, '', `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`);
   }, [lensKey, focusKey, focusDepth, lensDepth, hiddenCollections]);
+
+  // The "open in graph" link tracks the live view, so what opens is what's shown
+  const openInGraphHref = (() => {
+    if (!openInGraphUrl) return undefined;
+    const query = applyViewParams(new URLSearchParams()).toString();
+    return `${openInGraphUrl}${query ? `?${query}` : ''}`;
+  })();
+  // The island hydrates client-only, so the graph would otherwise pop in — fade
+  // it in on mount instead (the rAF lets the opacity-0 frame paint first)
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
   const [searchValue, setSearchValue] = useState('');
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
@@ -985,10 +1037,15 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
       .scaleExtent([0.1, 4])
       // Let node drags win over panning: ignore presses that start on a node
       .filter((event) => {
+        // Embedded graphs must not trap touch scrolling — a one-finger swipe over
+        // the canvas scrolls the page; a two-finger gesture pans/zooms the graph
+        if (event.type === 'touchstart' && !zoomOnScroll && event.touches.length < 2) return false;
         if (event.type === 'mousedown' || event.type === 'touchstart') {
           const [x, y] = pointerPosition(event);
           return !findNode(x, y);
         }
+        // Embedded graphs must not hijack page scrolling — zooming needs ctrl/cmd there
+        if (event.type === 'wheel' && !zoomOnScroll && !event.ctrlKey && !event.metaKey) return false;
         return !event.ctrlKey || event.type === 'wheel';
       })
       .on('zoom', (event) => {
@@ -1000,6 +1057,9 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
       });
 
     const dragBehaviour = drag<HTMLCanvasElement, unknown>()
+      // On embeds, touch node-drags would also swallow page swipes that happen to
+      // start on a node — leave touch to the page there (tap-to-focus still works)
+      .filter((event) => (zoomOnScroll || event.type !== 'touchstart') && !event.ctrlKey && !event.button)
       .subject((event) => {
         const [x, y] = pointerPosition(event.sourceEvent);
         const node = findNode(x, y);
@@ -1171,7 +1231,7 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
       resizeObserver.disconnect();
       themeObserver.disconnect();
     };
-  }, [viewNodes, viewLinks, lens, hiddenCollections, clusterAssignments, focusKey, focusAncestors]);
+  }, [viewNodes, viewLinks, lens, hiddenCollections, clusterAssignments, focusKey, focusAncestors, zoomOnScroll]);
 
   const toggleCollection = (collection: string) => {
     setHiddenCollections((current) => {
@@ -1185,7 +1245,10 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
   const focusedNode = focusKey ? graph.nodes.find((n) => n.key === focusKey) : undefined;
 
   return (
-    <div ref={containerRef} className="relative h-full w-full overflow-hidden">
+    <div
+      ref={containerRef}
+      className={`relative h-full w-full overflow-hidden motion-safe:transition-opacity motion-safe:duration-500 ${visible ? 'opacity-100' : 'opacity-0'}`}
+    >
       {/* Hidden icon sources: React renders them once, the sprite effect rasterises
           them for the canvas. Both lucide (color prop) and heroicons (currentColor
           via style) end up with white strokes. */}
@@ -1205,138 +1268,158 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
         className="pointer-events-none absolute z-10 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] shadow-md transition-opacity duration-100"
         style={{ opacity: 0 }}
       />
-      <div className="absolute left-3 top-3 z-10 flex flex-col gap-2 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-3 py-2 text-xs shadow-xs">
-        <div className="flex items-center gap-2">
-          <label htmlFor="catalog-graph-lens" className="font-semibold text-[rgb(var(--ec-page-text))]">
-            Lens
-          </label>
-          <select
-            id="catalog-graph-lens"
-            value={lensKey}
-            onChange={(event) => {
-              // A new lens is a fresh view — drop any focus and legend filters
-              setLensKey(event.target.value);
-              setFocusKey(null);
-              setFocusDepth(1);
-              setHiddenCollections(new Set());
-            }}
-            title={lens.description}
-            className="rounded-sm border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] px-2 py-1 text-[rgb(var(--ec-input-text))]"
-          >
-            {Object.entries(LENSES).map(([key, { label }]) => (
-              <option key={key} value={key}>
-                {label}
-              </option>
-            ))}
-          </select>
-        </div>
-        {lens.hubCollections && !focusedNode && (
-          <label
-            className="flex items-center gap-2 text-[rgb(var(--ec-page-text-muted))]"
-            title="How many relationship hops to show around the anchor nodes"
+      {/* Top-left chrome stacks in one column so the link and lens picker never overlap */}
+      <div className="absolute left-3 top-3 z-10 flex flex-col items-start gap-2">
+        {showLensPicker && (
+          <div className="flex flex-col gap-2 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-3 py-2 text-xs shadow-xs">
+            <div className="flex items-center gap-2">
+              <label htmlFor="catalog-graph-lens" className="font-semibold text-[rgb(var(--ec-page-text))]">
+                Lens
+              </label>
+              <select
+                id="catalog-graph-lens"
+                value={lensKey}
+                onChange={(event) => {
+                  // A new lens is a fresh view — drop any focus and legend filters
+                  setLensKey(event.target.value);
+                  setFocusKey(null);
+                  setFocusDepth(1);
+                  setHiddenCollections(new Set());
+                }}
+                title={lens.description}
+                className="rounded-sm border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] px-2 py-1 text-[rgb(var(--ec-input-text))]"
+              >
+                {Object.entries(LENSES).map(([key, { label }]) => (
+                  <option key={key} value={key}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+            {lens.hubCollections && !focusedNode && (
+              <label
+                className="flex items-center gap-2 text-[rgb(var(--ec-page-text-muted))]"
+                title="How many relationship hops to show around the anchor nodes"
+              >
+                Detail
+                <input
+                  type="range"
+                  min={1}
+                  max={MAX_LENS_DEPTH}
+                  step={1}
+                  value={lensDepth}
+                  onChange={(event) => setLensDepth(Number(event.target.value))}
+                  className="w-24 accent-[rgb(var(--ec-accent))]"
+                />
+                <span className="w-5 text-[rgb(var(--ec-page-text))]">{lensDepth >= MAX_LENS_DEPTH ? 'All' : lensDepth}</span>
+              </label>
+            )}
+          </div>
+        )}
+        {openInGraphHref && (
+          <a
+            href={openInGraphHref}
+            className="rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-3 py-2 text-xs text-[rgb(var(--ec-page-text))] shadow-xs hover:bg-[rgb(var(--ec-accent-subtle))]"
           >
-            Detail
-            <input
-              type="range"
-              min={1}
-              max={MAX_LENS_DEPTH}
-              step={1}
-              value={lensDepth}
-              onChange={(event) => setLensDepth(Number(event.target.value))}
-              className="w-24 accent-[rgb(var(--ec-accent))]"
-            />
-            <span className="w-5 text-[rgb(var(--ec-page-text))]">{lensDepth >= MAX_LENS_DEPTH ? 'All' : lensDepth}</span>
-          </label>
+            {openInGraphLabel ?? 'Open full screen'} →
+          </a>
         )}
       </div>
-      <div className="absolute right-3 top-3 z-10 flex flex-col gap-2 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-3 py-2 text-xs shadow-xs">
-        <div ref={searchContainerRef} className="relative">
-          <input
-            type="text"
-            placeholder="Search &amp; focus…"
-            value={searchValue}
-            onChange={(event) => {
-              setSearchValue(event.target.value);
-              setShowSuggestions(true);
-              setSelectedSuggestionIndex(-1);
-            }}
-            onFocus={() => setShowSuggestions(true)}
-            onKeyDown={handleSearchKeyDown}
-            className="w-56 rounded-sm border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] py-1 pl-2 pr-7 text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
-          />
-          {searchValue && (
-            <button
-              type="button"
-              onClick={() => setSearchValue('')}
-              aria-label="Clear search"
-              className="absolute right-1.5 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
-            >
-              ×
-            </button>
-          )}
-          {showSuggestions && searchSuggestions.length > 0 && (
-            <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] shadow-lg">
-              {searchSuggestions.map((node, index) => {
-                const Icon = getIconForCollection(node.collection);
-                const chipStyle = collectionChipStyle(node.collection);
-                const isSelected = index === selectedSuggestionIndex;
-                return (
-                  <button
-                    key={node.key}
-                    type="button"
-                    onClick={() => selectSuggestion(node)}
-                    onMouseEnter={() => setSelectedSuggestionIndex(index)}
-                    className={`flex w-full items-center gap-2 px-2 py-1.5 text-left ${isSelected ? 'bg-[rgb(var(--ec-accent-subtle))]' : ''}`}
-                  >
-                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md" style={chipStyle}>
-                      <Icon width={13} height={13} />
-                    </span>
-                    <span className="min-w-0 flex-1">
-                      <span className="block truncate font-medium text-[rgb(var(--ec-page-text))]">{node.label}</span>
-                      {node.version && (
-                        <span className="block truncate text-[10px] text-[rgb(var(--ec-page-text-muted))]">v{node.version}</span>
-                      )}
-                    </span>
-                    <span className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium" style={chipStyle}>
-                      {COLLECTION_LABELS[node.collection] ?? node.collection}
-                    </span>
-                  </button>
-                );
-              })}
+      {(showSearch || focusedNode) && (
+        // z-20: the search dropdown must paint over the Resources legend below it
+        <div className="absolute right-3 top-3 z-20 flex flex-col gap-2 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-3 py-2 text-xs shadow-xs">
+          {showSearch && (
+            <div ref={searchContainerRef} className="relative">
+              <input
+                type="text"
+                placeholder="Search &amp; focus…"
+                value={searchValue}
+                onChange={(event) => {
+                  setSearchValue(event.target.value);
+                  setShowSuggestions(true);
+                  setSelectedSuggestionIndex(-1);
+                }}
+                onFocus={() => setShowSuggestions(true)}
+                onKeyDown={handleSearchKeyDown}
+                className="w-56 rounded-sm border border-[rgb(var(--ec-input-border))] bg-[rgb(var(--ec-input-bg))] py-1 pl-2 pr-7 text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
+              />
+              {searchValue && (
+                <button
+                  type="button"
+                  onClick={() => setSearchValue('')}
+                  aria-label="Clear search"
+                  className="absolute right-1.5 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
+                >
+                  ×
+                </button>
+              )}
+              {showSuggestions && searchSuggestions.length > 0 && (
+                <div className="absolute left-0 right-0 top-full z-50 mt-1 max-h-64 overflow-y-auto rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] shadow-lg">
+                  {searchSuggestions.map((node, index) => {
+                    const Icon = getIconForCollection(node.collection);
+                    const chipStyle = collectionChipStyle(node.collection);
+                    const isSelected = index === selectedSuggestionIndex;
+                    return (
+                      <button
+                        key={node.key}
+                        type="button"
+                        onClick={() => selectSuggestion(node)}
+                        onMouseEnter={() => setSelectedSuggestionIndex(index)}
+                        className={`flex w-full items-center gap-2 px-2 py-1.5 text-left ${isSelected ? 'bg-[rgb(var(--ec-accent-subtle))]' : ''}`}
+                      >
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md" style={chipStyle}>
+                          <Icon width={13} height={13} />
+                        </span>
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate font-medium text-[rgb(var(--ec-page-text))]">{node.label}</span>
+                          {node.version && (
+                            <span className="block truncate text-[10px] text-[rgb(var(--ec-page-text-muted))]">
+                              v{node.version}
+                            </span>
+                          )}
+                        </span>
+                        <span className="shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium" style={chipStyle}>
+                          {COLLECTION_LABELS[node.collection] ?? node.collection}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
             </div>
           )}
+          {focusedNode && (
+            <>
+              <button
+                type="button"
+                onClick={() => setFocusKey(null)}
+                className="flex items-center gap-1 self-start rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 text-[rgb(var(--ec-page-text))] hover:opacity-80"
+                title="Clear focus"
+              >
+                <span
+                  className="inline-block h-2 w-2 rounded-full"
+                  style={{ backgroundColor: nodeColor(focusedNode.collection) }}
+                />
+                Focused: {focusedNode.label}
+                <span aria-hidden="true">×</span>
+              </button>
+              <label className="flex items-center gap-2 text-[rgb(var(--ec-page-text-muted))]">
+                Depth
+                <input
+                  type="range"
+                  min={1}
+                  max={3}
+                  step={1}
+                  value={focusDepth}
+                  onChange={(event) => setFocusDepth(Number(event.target.value))}
+                  className="w-24 accent-[rgb(var(--ec-accent))]"
+                />
+                <span className="w-3 text-[rgb(var(--ec-page-text))]">{focusDepth}</span>
+              </label>
+            </>
+          )}
         </div>
-        {focusedNode && (
-          <>
-            <button
-              type="button"
-              onClick={() => setFocusKey(null)}
-              className="flex items-center gap-1 self-start rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-accent-subtle))] px-2 py-0.5 text-[rgb(var(--ec-page-text))] hover:opacity-80"
-              title="Clear focus"
-            >
-              <span
-                className="inline-block h-2 w-2 rounded-full"
-                style={{ backgroundColor: nodeColor(focusedNode.collection) }}
-              />
-              Focused: {focusedNode.label}
-              <span aria-hidden="true">×</span>
-            </button>
-            <label className="flex items-center gap-2 text-[rgb(var(--ec-page-text-muted))]">
-              Depth
-              <input
-                type="range"
-                min={1}
-                max={3}
-                step={1}
-                value={focusDepth}
-                onChange={(event) => setFocusDepth(Number(event.target.value))}
-                className="w-24 accent-[rgb(var(--ec-accent))]"
-              />
-              <span className="w-3 text-[rgb(var(--ec-page-text))]">{focusDepth}</span>
-            </label>
-          </>
-        )}
-      </div>
+      )}
       {focusedNode && (
         <div className="absolute bottom-3 left-3 z-10 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] p-3 text-xs shadow-xs">
           <div className="mb-2 font-semibold text-[rgb(var(--ec-page-text))]">You are here</div>
@@ -1377,28 +1460,30 @@ const CatalogForceGraph = ({ nodes, links, linkLabels }: Props) => {
           </ul>
         </div>
       )}
-      <div className="absolute bottom-3 right-3 z-10 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] p-3 text-xs shadow-xs">
-        <div className="mb-2 font-semibold text-[rgb(var(--ec-page-text))]">Resources</div>
-        <ul className="space-y-1">
-          {collectionsInGraph.map(({ collection, count }) => {
-            const hidden = hiddenCollections.has(collection);
-            return (
-              <li key={collection}>
-                <button
-                  type="button"
-                  onClick={() => toggleCollection(collection)}
-                  className={`flex w-full items-center gap-2 rounded-sm px-1 py-0.5 text-left hover:bg-[rgb(var(--ec-accent-subtle))] ${hidden ? 'opacity-40' : ''}`}
-                >
-                  <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ backgroundColor: nodeColor(collection) }} />
-                  <span className="text-[rgb(var(--ec-page-text))]">
-                    {COLLECTION_LABELS[collection] ?? collection} ({count})
-                  </span>
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
+      {showLegend && (
+        <div className="absolute bottom-3 right-3 z-10 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] p-3 text-xs shadow-xs">
+          <div className="mb-2 font-semibold text-[rgb(var(--ec-page-text))]">Resources</div>
+          <ul className="space-y-1">
+            {collectionsInGraph.map(({ collection, count }) => {
+              const hidden = hiddenCollections.has(collection);
+              return (
+                <li key={collection}>
+                  <button
+                    type="button"
+                    onClick={() => toggleCollection(collection)}
+                    className={`flex w-full items-center gap-2 rounded-sm px-1 py-0.5 text-left hover:bg-[rgb(var(--ec-accent-subtle))] ${hidden ? 'opacity-40' : ''}`}
+                  >
+                    <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ backgroundColor: nodeColor(collection) }} />
+                    <span className="text-[rgb(var(--ec-page-text))]">
+                      {COLLECTION_LABELS[collection] ?? collection} ({count})
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,62 @@
+---
+import AstroArchitectureGraph from './AstroArchitectureGraph';
+import { getCatalogForceGraph, toCatalogForceGraphWire } from '@utils/node-graphs/catalog-force-graph';
+
+interface Props {
+  // Resource to focus the graph on (its neighbourhood fills the view). Omit both
+  // to render the whole catalog graph.
+  id?: string;
+  collection?: string;
+  /** Relationship hops rendered around the focused resource (1–3) */
+  depth?: number;
+  /** Lens to render: all | domains | systems | services | teams | messages */
+  lens?: string;
+  showSearch?: boolean;
+  showLegend?: boolean;
+  /** Off by default — embedded graphs pin a lens rather than offer the picker */
+  showLensPicker?: boolean;
+  // Override the DOM portal the graph mounts into. Defaults to
+  // `${id}-architecture-graph-portal` (or `catalog-architecture-graph-portal`).
+  portalId?: string;
+  href?: {
+    label: string;
+    url: string;
+  };
+}
+
+const {
+  id,
+  collection,
+  depth = 2,
+  lens,
+  showSearch = true,
+  showLegend = true,
+  showLensPicker = false,
+  portalId,
+  href,
+} = Astro.props;
+
+const graph = await getCatalogForceGraph();
+const wire = toCatalogForceGraphWire(graph);
+
+// Only focus a resource that exists in the graph — it holds latest versions
+// only, so e.g. an old-version page falls back to the whole catalog view
+const focusKey =
+  id && collection && graph.nodes.some((node) => node.id === `${collection}/${id}`) ? `${collection}/${id}` : undefined;
+---
+
+<AstroArchitectureGraph
+  client:only="react"
+  portalId={portalId ?? `${id ?? 'catalog'}-architecture-graph-portal`}
+  nodes={wire.nodes}
+  links={wire.links}
+  linkLabels={wire.linkLabels}
+  initialFocus={focusKey}
+  initialFocusDepth={depth}
+  initialLens={lens}
+  showSearch={showSearch}
+  showLegend={showLegend}
+  showLensPicker={showLensPicker}
+  href={href?.url}
+  hrefLabel={href?.label}
+/>

package/eventcatalog/src/components/MDX/ArchitectureGraph/ArchitectureGraphPortal.tsx

@@ -0,0 +1,22 @@
+// The portal id pairs each scanner-rendered island with its MDX placeholder.
+// The occurrence index keeps multiple no-id embeds on one page from colliding
+// (the first occurrence keeps the unsuffixed id).
+export const architectureGraphPortalId = (id: string | undefined, occurrenceIndex: number) =>
+  `${id ?? 'catalog'}-architecture-graph-portal${occurrenceIndex > 0 ? `-${occurrenceIndex}` : ''}`;
+
+// Empty placeholder rendered by the MDX component map. The real graph is
+// rendered by ArchitectureGraph.astro (which builds the data server-side) and
+// portals itself into this div by id — same pattern as NodeGraphPortal.
+const ArchitectureGraphPortal = (props: any) => {
+  return (
+    <div
+      className="not-prose h-[30em] my-6 mb-12 w-full relative border! border-[rgb(var(--ec-page-border))]! rounded-md overflow-hidden"
+      id={architectureGraphPortalId(props.id, props.occurrenceIndex ?? 0)}
+      style={{
+        maxHeight: props.maxHeight ? `${props.maxHeight}em` : `30em`,
+      }}
+    />
+  );
+};
+
+export default ArchitectureGraphPortal;

package/eventcatalog/src/components/MDX/ArchitectureGraph/AstroArchitectureGraph.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import CatalogForceGraph from '@components/CatalogGraph/CatalogForceGraph';
+import type { CatalogGraphWireLink, CatalogGraphWireNode } from '@utils/node-graphs/catalog-force-graph';
+
+interface Props {
+  /** DOM id of the placeholder div ArchitectureGraphPortal rendered into the MDX content */
+  portalId: string;
+  nodes: CatalogGraphWireNode[];
+  links: CatalogGraphWireLink[];
+  linkLabels: string[];
+  initialLens?: string;
+  initialFocus?: string;
+  initialFocusDepth?: number;
+  showSearch?: boolean;
+  showLegend?: boolean;
+  showLensPicker?: boolean;
+  /** Base URL of the standalone /visualiser/graph page — the graph renders an
+   * "open full screen" link carrying its live view state (focus, depth, lens) */
+  href?: string;
+  hrefLabel?: string;
+}
+
+// The island mounts outside the MDX content, finds the placeholder div the MDX
+// component map emitted, and portals the graph into it — same pattern as the
+// visualiser's NodeGraph.
+const AstroArchitectureGraph = ({ portalId, href, hrefLabel, ...graphProps }: Props) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setContainer(document.getElementById(portalId));
+  }, [portalId]);
+
+  if (!container) return null;
+
+  return createPortal(
+    <CatalogForceGraph {...graphProps} syncUrl={false} zoomOnScroll={false} openInGraphUrl={href} openInGraphLabel={hrefLabel} />,
+    container
+  );
+};
+
+export default AstroArchitectureGraph;

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

@@ -35,6 +35,7 @@ import MermaidFileLoader from '@components/MDX/MermaidFileLoader/MermaidFileLoad
 import LikeC4View from '@components/MDX/LikeC4View/LikeC4View.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
+import ArchitectureGraphPortal from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import ContextDiagramPortal from '@components/MDX/ContextDiagram/ContextDiagramPortal';
 import SystemContextMapPortal from '@components/MDX/SystemContextMap/SystemContextMapPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -50,6 +51,10 @@ const getEntityMapCollection = (props: any, mdxProp: any) => {
 };
 
 const components = (props: any) => {
+  // Occurrence counter so multiple <ArchitectureGraph/> tags on one page each get
+  // their own portal — MDX renders in document order, matching the body scan order
+  // the host pages use to render the islands.
+  let architectureGraphOccurrence = 0;
   return {
     Attachments: (mdxProp: any) => jsx(Attachments, { ...props, ...mdxProp }),
     CustomProperties: (mdxProp: any) => jsx(CustomProperties, { ...props, ...mdxProp }),
@@ -69,6 +74,14 @@ const components = (props: any) => {
     ADRTable: (mdxProp: any) => jsx(ADRTable, { ...props, ...mdxProp }),
     EntityPropertiesTable: (mdxProp: any) => jsx(EntityPropertiesTable, { ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => jsx(NodeGraphPortal, { ...props.data, ...mdxProp, props, mdxProp }),
+    ArchitectureGraph: (mdxProp: any) =>
+      jsx(ArchitectureGraphPortal, {
+        ...props.data,
+        ...mdxProp,
+        occurrenceIndex: architectureGraphOccurrence++,
+        props,
+        mdxProp,
+      }),
     ComponentDiagram: (mdxProp: any) => jsx(NodeGraphPortal, { ...props.data, ...mdxProp, props, mdxProp }),
     ContextDiagram: (mdxProp: any) => jsx(ContextDiagramPortal, { ...props.data, ...mdxProp, props, mdxProp }),
     SystemContextMap: (mdxProp: any) => jsx(SystemContextMapPortal, { ...mdxProp }),

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

@@ -14,9 +14,17 @@ import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
 import { getAdjacentPages, getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import ArchitectureGraph from '@components/MDX/ArchitectureGraph/ArchitectureGraph.astro';
+import { architectureGraphPortalId } from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import CopyAsMarkdown from '@components/CopyAsMarkdown';
 
-import { isVisualiserEnabled, isMarkdownDownloadEnabled, isRSSEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import {
+  isVisualiserEnabled,
+  isMarkdownDownloadEnabled,
+  isRSSEnabled,
+  isEventCatalogChatEnabled,
+  isArchitectureGraphEnabled,
+} from '@utils/feature';
 
 const props = Astro.props;
 const doc = props.data;
@@ -48,6 +56,18 @@ const resolvedNodeGraphs = await Promise.all(
   })
 );
 
+// Architecture graphs embedded via <ArchitectureGraph />. Custom docs have no
+// resource of their own, so with no `id` + `type` the whole catalog is rendered.
+const architectureGraphs = (getMDXComponentsByName(props.body, 'ArchitectureGraph') || []).map((graph: any) => ({
+  id: graph.id,
+  collection: graph.type ? resourceToCollectionMap[graph.type as keyof typeof resourceToCollectionMap] : undefined,
+  depth: graph.depth ? Number(graph.depth) : undefined,
+  lens: graph.lens,
+  search: parseMdxBooleanProp(graph.search, true),
+  legend: parseMdxBooleanProp(graph.legend, true),
+  lensPicker: parseMdxBooleanProp(graph.lensPicker, false),
+}));
+
 const { prev, next } = await getAdjacentPages(currentSlug);
 
 const ownersRaw = doc?.owners || [];
@@ -171,6 +191,31 @@ const editUrl =
               })
           }
 
+          {
+            architectureGraphs.length > 0 &&
+              architectureGraphs.map((graph: any, occurrenceIndex: number) => (
+                <ArchitectureGraph
+                  id={graph.id}
+                  collection={graph.collection}
+                  depth={graph.depth}
+                  lens={graph.lens}
+                  showSearch={graph.search}
+                  showLegend={graph.legend}
+                  showLensPicker={graph.lensPicker}
+                  portalId={architectureGraphPortalId(graph.id ?? (doc as any).id, occurrenceIndex)}
+                  href={
+                    isArchitectureGraphEnabled()
+                      ? {
+                          label: 'Open full screen',
+                          // Base URL only — the graph appends its live view state (focus, depth, lens)
+                          url: buildUrl('/visualiser/graph'),
+                        }
+                      : undefined
+                  }
+                />
+              ))
+          }
+
           <!-- Previous / Next Navigation -->
           <div class="py-8 border-t border-[rgb(var(--ec-page-border))] mt-8">
             <div class="flex flex-col sm:flex-row justify-between w-full gap-4">

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

@@ -10,6 +10,8 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import ArchitectureGraph from '@components/MDX/ArchitectureGraph/ArchitectureGraph.astro';
+import { architectureGraphPortalId } from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewerRoot.astro';
 import Admonition from '@components/MDX/Admonition';
 import VersionList from '@components/Lists/VersionList.astro';
@@ -65,6 +67,7 @@ import {
   isVisualiserEnabled,
   isRSSEnabled,
   isEventCatalogMCPEnabled,
+  isArchitectureGraphEnabled,
 } from '@utils/feature';
 import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
 
@@ -361,6 +364,20 @@ const contextDiagrams = contextDiagramSupported
     })
   : [];
 
+// Architecture graphs embedded via <ArchitectureGraph />. Renders the D3
+// catalog-wide force graph focused on the current resource's neighbourhood;
+// `id` + `type` focus another resource instead. Each renders into its own
+// portal, so it never collides with the page's NodeGraph.
+const architectureGraphs = (getMDXComponentsByName(props.body || '', 'ArchitectureGraph') || []).map((graph: any) => ({
+  id: graph.id ?? props.data.id,
+  collection: graph.type ? resourceToCollectionMap[graph.type as keyof typeof resourceToCollectionMap] : props.collection,
+  depth: graph.depth ? Number(graph.depth) : undefined,
+  lens: graph.lens,
+  search: parseMdxBooleanProp(graph.search, true),
+  legend: parseMdxBooleanProp(graph.legend, true),
+  lensPicker: parseMdxBooleanProp(graph.lensPicker, false),
+}));
+
 // Get props for the node graph (when no id is passed, we assume its the current page)
 const hasCurrentFlowEmbed =
   props.collection === 'flows' &&
@@ -653,6 +670,30 @@ if (!isAdrPage && !hasCurrentFlowEmbed && !hasCurrentPageNodeGraph) {
                 />
               ))
           }
+          {
+            architectureGraphs.length > 0 &&
+              architectureGraphs.map((graph: any, occurrenceIndex: number) => (
+                <ArchitectureGraph
+                  id={graph.id}
+                  collection={graph.collection}
+                  depth={graph.depth}
+                  lens={graph.lens}
+                  showSearch={graph.search}
+                  showLegend={graph.legend}
+                  showLensPicker={graph.lensPicker}
+                  portalId={architectureGraphPortalId(graph.id, occurrenceIndex)}
+                  href={
+                    isArchitectureGraphEnabled()
+                      ? {
+                          label: 'Open full screen',
+                          // Base URL only — the graph appends its live view state (focus, depth, lens)
+                          url: buildUrl('/visualiser/graph'),
+                        }
+                      : undefined
+                  }
+                />
+              ))
+          }
         </div>
         <Footer />
         <!-- Add edit this page button  with icon and text-->

package/eventcatalog/src/pages/index.astro

@@ -1,16 +1,19 @@
 ---
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { getMDXComponentsByName } from '@utils/markdown';
+import { getMDXComponentsByName, parseMdxBooleanProp } from '@utils/markdown';
+import { architectureGraphPortalId } from '@components/MDX/ArchitectureGraph/ArchitectureGraphPortal';
 import { resourceToCollectionMap } from '@utils/collections/util';
 import { buildUrl } from '@utils/url-builder';
-import { isCustomLandingPageEnabled, isVisualiserEnabled } from '@utils/feature';
+import { isCustomLandingPageEnabled, isVisualiserEnabled, isArchitectureGraphEnabled } from '@utils/feature';
 import DefaultAstroLandingPage from './_index.astro';
 import config from '@config';
 
 let nodeGraphs: any[] = [];
 let systemContextMaps: any[] = [];
+let architectureGraphs: any[] = [];
 let CustomContent = null;
 let NodeGraph = null;
+let ArchitectureGraph = null;
 let customHomepageComponents: Record<string, any> = {};
 
 import path from 'path';
@@ -37,11 +40,19 @@ if (existsSync(pathToUserDefinedLandingPage) && isCustomLandingPageEnabled()) {
   // The homepage can also embed the global System Context Map via <SystemContextMap />.
   systemContextMaps = getMDXComponentsByName(rawContent, 'SystemContextMap') || [];
 
+  // …and the catalog-wide Architecture Graph via <ArchitectureGraph />. With no
+  // `id` + `type` the whole catalog is rendered.
+  architectureGraphs = getMDXComponentsByName(rawContent, 'ArchitectureGraph') || [];
+
   // Avoid pulling visualizer CSS into the default homepage bundle.
   // Only load the NodeGraph component when the custom homepage actually uses a graph.
   if (nodeGraphs.length > 0 || systemContextMaps.length > 0) {
     NodeGraph = (await import('@components/MDX/NodeGraph/NodeGraph.astro')).default;
   }
+  // Only build the catalog-wide graph data when the homepage actually embeds it.
+  if (architectureGraphs.length > 0) {
+    ArchitectureGraph = (await import('@components/MDX/ArchitectureGraph/ArchitectureGraph.astro')).default;
+  }
 }
 
 if (config.landingPage) {
@@ -104,6 +115,27 @@ if (config.landingPage) {
               }
             />
           ))}
+        {ArchitectureGraph &&
+          architectureGraphs.map((graph: any, occurrenceIndex: number) => (
+            <ArchitectureGraph
+              id={graph.id}
+              collection={graph.type ? resourceToCollectionMap[graph.type as keyof typeof resourceToCollectionMap] : undefined}
+              depth={graph.depth ? Number(graph.depth) : undefined}
+              lens={graph.lens}
+              showSearch={parseMdxBooleanProp(graph.search, true)}
+              showLegend={parseMdxBooleanProp(graph.legend, true)}
+              showLensPicker={parseMdxBooleanProp(graph.lensPicker, false)}
+              portalId={architectureGraphPortalId(graph.id, occurrenceIndex)}
+              href={
+                isArchitectureGraphEnabled()
+                  ? {
+                      label: 'Open full screen',
+                      url: buildUrl('/visualiser/graph'),
+                    }
+                  : undefined
+              }
+            />
+          ))}
       </main>
     </VerticalSideBarLayout>
   ) : (

package/eventcatalog/src/pages/visualiser/graph/index.astro

@@ -1,8 +1,7 @@
 ---
 import VisualiserLayout from '@layouts/VisualiserLayout.astro';
 import CatalogForceGraph from '@components/CatalogGraph/CatalogForceGraph';
-import type { CatalogGraphWireLink } from '@components/CatalogGraph/CatalogForceGraph';
-import { getCatalogForceGraph } from '@utils/node-graphs/catalog-force-graph';
+import { getCatalogForceGraph, toCatalogForceGraphWire } from '@utils/node-graphs/catalog-force-graph';
 import { isArchitectureGraphEnabled } from '@utils/feature';
 
 // Bail before building the graph — on very large catalogs the whole point of
@@ -11,29 +10,9 @@ if (!isArchitectureGraphEnabled()) {
   return new Response(null, { status: 404 });
 }
 
-const { nodes, links } = await getCatalogForceGraph();
-
 // Compact wire format: index-based links and client-derived URLs keep the
 // island props Astro serialises into the page small for large catalogs.
-const nodeIndexById = new Map(nodes.map((node, index) => [node.id, index]));
-const linkLabels = [...new Set(links.map((link) => link.label))];
-const labelIndexByLabel = new Map(linkLabels.map((label, index) => [label, index]));
-
-const wireNodes = nodes.map(({ id, label, collection, version }) => ({
-  // Node ids are `${collection}/${resourceId}` — send only the resource id, the client rebuilds the key
-  id: id.slice(collection.length + 1),
-  label,
-  collection,
-  version,
-}));
-
-const wireLinks = links.map(
-  (link): CatalogGraphWireLink => [
-    nodeIndexById.get(link.source)!,
-    nodeIndexById.get(link.target)!,
-    labelIndexByLabel.get(link.label)!,
-  ]
-);
+const { nodes: wireNodes, links: wireLinks, linkLabels } = toCatalogForceGraphWire(await getCatalogForceGraph());
 ---
 
 <VisualiserLayout title="Visualiser | Architecture Graph" description="Force-directed graph of every resource in the catalog">

package/eventcatalog/src/utils/node-graphs/catalog-force-graph.ts

@@ -35,6 +35,47 @@ export interface CatalogGraphLink {
   label: string;
 }
 
+/** Compact wire format — index-based links keep the payload Astro serialises into the island small. */
+export interface CatalogGraphWireNode {
+  /** Resource id, e.g. `InventoryService` — the client rebuilds the `${collection}/${id}` key */
+  id: string;
+  label: string;
+  collection: string;
+  version?: string;
+}
+
+/** [sourceIndex, targetIndex, labelIndex] into the nodes / linkLabels arrays */
+export type CatalogGraphWireLink = [number, number, number];
+
+/**
+ * Compacts the built graph for serialisation into a client island: node ids are
+ * stripped of their `${collection}/` prefix, link labels are deduped into one
+ * array, and each link becomes an index tuple. URLs are dropped server-side and
+ * rebuilt client-side.
+ */
+export const toCatalogForceGraphWire = ({ nodes, links }: { nodes: CatalogGraphNode[]; links: CatalogGraphLink[] }) => {
+  const nodeIndexById = new Map(nodes.map((node, index) => [node.id, index]));
+  const linkLabels = [...new Set(links.map((link) => link.label))];
+  const labelIndexByLabel = new Map(linkLabels.map((label, index) => [label, index]));
+
+  const wireNodes: CatalogGraphWireNode[] = nodes.map(({ id, label, collection, version }) => ({
+    id: id.slice(collection.length + 1),
+    label,
+    collection,
+    version,
+  }));
+
+  const wireLinks = links.map(
+    (link): CatalogGraphWireLink => [
+      nodeIndexById.get(link.source)!,
+      nodeIndexById.get(link.target)!,
+      labelIndexByLabel.get(link.label)!,
+    ]
+  );
+
+  return { nodes: wireNodes, links: wireLinks, linkLabels };
+};
+
 type AnyEntry = {
   collection?: string;
   data: { id: string; name?: string; version?: string; latestVersion?: string; visualiser?: boolean };

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "publishConfig": {
     "access": "public"
   },
@@ -119,9 +119,9 @@
     "update-notifier": "^7.3.1",
     "uuid": "^11.1.1",
     "zod": "^4.3.6",
+    "@eventcatalog/visualiser": "^4.1.3",
     "@eventcatalog/linter": "1.1.17",
-    "@eventcatalog/sdk": "2.28.1",
-    "@eventcatalog/visualiser": "^4.1.3"
+    "@eventcatalog/sdk": "2.28.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",