@eventcatalog/core 3.10.1 → 3.11.0

package/dist/analytics/analytics.cjs

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-M3NSMBIJ.js";
-import "../chunk-SABEVBE7.js";
+} from "../chunk-JGYH3AAT.js";
+import "../chunk-744TUGLY.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

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

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-2MSR3Y2A.js";
-import "../chunk-M3NSMBIJ.js";
+} from "../chunk-LHPQHOE5.js";
+import "../chunk-JGYH3AAT.js";
 import "../chunk-4UVFXLPI.js";
-import "../chunk-SABEVBE7.js";
+import "../chunk-744TUGLY.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-SABEVBE7.js → chunk-744TUGLY.js}

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

package/dist/{chunk-M3NSMBIJ.js → chunk-JGYH3AAT.js}

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

package/dist/{chunk-2MSR3Y2A.js → chunk-LHPQHOE5.js}

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

package/dist/{chunk-BR3CTGCW.js → chunk-Q6BRAXMP.js}

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

package/dist/{chunk-G7XOCNOX.js → chunk-TE67QRWX.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-SABEVBE7.js";
+} from "./chunk-744TUGLY.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -109,7 +109,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.10.1";
+var version = "3.11.0";
 
 // src/constants.ts
 var VERSION = version;
@@ -812,6 +812,7 @@ program.command("dev").description("Run development server of EventCatalog").opt
             ENABLE_EMBED: canEmbedPages || isEventCatalogScale,
             EVENTCATALOG_STARTER: isEventCatalogStarter,
             EVENTCATALOG_SCALE: isEventCatalogScale,
+            EVENTCATALOG_DEV_MODE: "true",
             NODE_NO_WARNINGS: "1"
           }
         }

package/dist/eventcatalog.config.d.cts

@@ -121,6 +121,11 @@ interface Config {
         sidebar?: (ManualSideBarConfig | AutoGeneratedSideBarConfig)[];
     };
     api?: {
+        /**
+         * Enable or disable the /api/catalog endpoint that dumps the entire catalog as JSON.
+         * Disabling this can significantly reduce memory usage during builds for large catalogs (1000+ files).
+         * @default true
+         */
         fullCatalogAPIEnabled?: boolean;
     };
     changelog?: {

package/dist/eventcatalog.config.d.ts

@@ -121,6 +121,11 @@ interface Config {
         sidebar?: (ManualSideBarConfig | AutoGeneratedSideBarConfig)[];
     };
     api?: {
+        /**
+         * Enable or disable the /api/catalog endpoint that dumps the entire catalog as JSON.
+         * Disabling this can significantly reduce memory usage during builds for large catalogs (1000+ files).
+         * @default true
+         */
         fullCatalogAPIEnabled?: boolean;
     };
     changelog?: {

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-2MSR3Y2A.js";
-import "./chunk-M3NSMBIJ.js";
+} from "./chunk-LHPQHOE5.js";
+import "./chunk-JGYH3AAT.js";
 import "./chunk-4UVFXLPI.js";
 import {
   runMigrations
@@ -22,13 +22,13 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-BR3CTGCW.js";
+} from "./chunk-Q6BRAXMP.js";
 import {
   logger
-} from "./chunk-G7XOCNOX.js";
+} from "./chunk-TE67QRWX.js";
 import {
   VERSION
-} from "./chunk-SABEVBE7.js";
+} from "./chunk-744TUGLY.js";
 import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts
@@ -165,6 +165,7 @@ program.command("dev").description("Run development server of EventCatalog").opt
             ENABLE_EMBED: canEmbedPages || isEventCatalogScale,
             EVENTCATALOG_STARTER: isEventCatalogStarter,
             EVENTCATALOG_SCALE: isEventCatalogScale,
+            EVENTCATALOG_DEV_MODE: "true",
             NODE_NO_WARNINGS: "1"
           }
         }

package/dist/generate.cjs

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

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-BR3CTGCW.js";
-import "./chunk-G7XOCNOX.js";
-import "./chunk-SABEVBE7.js";
+} from "./chunk-Q6BRAXMP.js";
+import "./chunk-TE67QRWX.js";
+import "./chunk-744TUGLY.js";
 import "./chunk-UPONRQSN.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 = "3.10.1";
+var version = "3.11.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-G7XOCNOX.js";
-import "../chunk-SABEVBE7.js";
+} from "../chunk-TE67QRWX.js";
+import "../chunk-744TUGLY.js";
 export {
   logger
 };

package/eventcatalog/integrations/eventcatalog-features.ts

@@ -6,6 +6,7 @@ import {
   isEventCatalogScaleEnabled,
   isEventCatalogStarterEnabled,
   isEventCatalogMCPEnabled,
+  isDevMode,
 } from '../src/utils/feature';
 
 const catalogDirectory = process.env.CATALOG_DIR || process.cwd();
@@ -72,6 +73,18 @@ export default function eventCatalogIntegration(): AstroIntegration {
             entrypoint: path.join(catalogDirectory, 'src/enterprise/plans/index.astro'),
           });
         }
+
+        // Dev-only routes for visualizer layout persistence
+        if (isDevMode()) {
+          params.injectRoute({
+            pattern: '/api/dev/visualizer-layout/save',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/visualizer-layout/save.ts'),
+          });
+          params.injectRoute({
+            pattern: '/api/dev/visualizer-layout/reset',
+            entrypoint: path.join(catalogDirectory, 'src/enterprise/visualizer-layout/reset.ts'),
+          });
+        }
       },
     },
   };

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

@@ -5,7 +5,8 @@ import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 
-import { isVisualiserEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -21,6 +22,11 @@ try {
 } catch (error) {
   console.error(`Error reading design file: ${error}`);
 }
+
+// Load and apply saved layout if it exists
+const resourceKey = design ? buildResourceKey('designs', design.id || id) : '';
+const savedLayout = resourceKey ? await loadSavedLayout(resourceKey) : null;
+const nodesWithLayout = design ? applyLayoutToNodes(design.nodes || [], savedLayout) : ([] as any[]);
 ---
 
 {
@@ -51,7 +57,7 @@ try {
         <NodeGraph
           id={id}
           title={title ?? design.name}
-          nodes={design.nodes || []}
+          nodes={nodesWithLayout}
           edges={design.edges || []}
           hrefLabel={isVisualiserEnabled() ? 'View in visualizer' : undefined}
           href={isVisualiserEnabled() ? `/visualiser/designs/${design.id}` : undefined}
@@ -60,6 +66,8 @@ try {
           client:only="react"
           showSearch={search}
           isChatEnabled={isChatEnabled}
+          isDevMode={isDevMode()}
+          resourceKey={resourceKey}
         />
       </div>
     </div>

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

@@ -5,7 +5,8 @@ import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { getServices } from '@utils/collections/services';
-import { isEventCatalogChatEnabled } from '@utils/feature';
+import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -38,6 +39,11 @@ const { nodes, edges } = await getNodesAndEdges({
   ...(entities ? { entities } : {}), // Pass entities if provided
   type: collection,
 });
+
+// Load and apply saved layout if it exists
+const resourceKey = buildResourceKey(collection, resourceId, resource?.data?.version);
+const savedLayout = await loadSavedLayout(resourceKey);
+const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 ---
 
 {
@@ -66,7 +72,7 @@ const { nodes, edges } = await getNodesAndEdges({
 <div>
   <NodeGraph
     id={id}
-    nodes={nodes}
+    nodes={nodesWithLayout}
     edges={edges}
     linkTo={'visualiser'}
     mode="simple"
@@ -75,6 +81,8 @@ const { nodes, edges } = await getNodesAndEdges({
     client:only="react"
     portalId={`${id}-entity-map-portal`}
     isChatEnabled={isChatEnabled}
+    isDevMode={isDevMode()}
+    resourceKey={resourceKey}
   />
 </div>
 

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

@@ -4,7 +4,8 @@ import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 import NodeGraph from '../NodeGraph/NodeGraph';
 import { getVersionFromCollection } from '@utils/collections/versions';
-import { isVisualiserEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -22,6 +23,11 @@ const { nodes, edges } = await getNodesAndEdges({
   version: flow.data.version,
   mode: mode,
 });
+
+// Load and apply saved layout if it exists
+const resourceKey = buildResourceKey('flows', id, flow.data.version);
+const savedLayout = await loadSavedLayout(resourceKey);
+const nodesWithLayout = applyLayoutToNodes(nodes, savedLayout);
 ---
 
 {
@@ -49,7 +55,7 @@ const { nodes, edges } = await getNodesAndEdges({
 <div>
   <NodeGraph
     id={id}
-    nodes={nodes}
+    nodes={nodesWithLayout}
     edges={edges}
     hrefLabel={'View in visualizer'}
     href={isVisualiserEnabled() ? `/visualiser/flows/${id}/${version}` : undefined}
@@ -60,6 +66,8 @@ const { nodes, edges } = await getNodesAndEdges({
     showFlowWalkthrough={walkthrough}
     showSearch={search}
     isChatEnabled={isChatEnabled}
+    isDevMode={isDevMode()}
+    resourceKey={resourceKey}
   />
 </div>
 

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

@@ -19,7 +19,8 @@ import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import config from '@config';
-import { isEventCatalogChatEnabled } from '@utils/feature';
+import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
 const isChatEnabled = isEventCatalogChatEnabled();
 
@@ -139,12 +140,17 @@ if (collection === 'services-containers') {
   nodes = fetchedNodes;
   edges = fetchedEdges;
 }
+
+// Load and apply saved layout if it exists (dev mode feature)
+const resourceKey = buildResourceKey(collection, id, version);
+const savedLayout = await loadSavedLayout(resourceKey);
+const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 ---
 
 <div>
   <NodeGraphNew
     id={id}
-    nodes={nodes}
+    nodes={nodesWithLayout}
     edges={edges}
     title={title}
     hrefLabel={href?.label}
@@ -159,6 +165,8 @@ if (collection === 'services-containers') {
     zoomOnScroll={zoomOnScroll}
     isChatEnabled={isChatEnabled}
     maxTextSize={config.mermaid?.maxTextSize}
+    isDevMode={isDevMode()}
+    resourceKey={resourceKey}
   />
 </div>
 

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

@@ -12,6 +12,7 @@ import {
   useEdgesState,
   type Edge,
   type Node,
+  type NodeChange,
   useReactFlow,
   getNodesBounds,
   getViewportForBounds,
@@ -58,6 +59,9 @@ import VisualizerDropdownContent from './VisualizerDropdownContent';
 import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
 import { copyToClipboard } from '@utils/clipboard';
 
+// Minimum pixel change to detect layout modifications (avoids floating point comparison issues)
+const POSITION_CHANGE_THRESHOLD = 1;
+
 interface Props {
   nodes: any;
   edges: any;
@@ -78,6 +82,8 @@ interface Props {
   setIsStudioModalOpen?: (isOpen: boolean) => void;
   isChatEnabled?: boolean;
   maxTextSize?: number;
+  isDevMode?: boolean;
+  resourceKey?: string;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -101,6 +107,8 @@ const NodeGraphBuilder = ({
   setIsStudioModalOpen = () => {},
   isChatEnabled = false,
   maxTextSize,
+  isDevMode = false,
+  resourceKey,
 }: Props) => {
   const nodeTypes = useMemo(
     () =>
@@ -153,6 +161,9 @@ const NodeGraphBuilder = ({
   const [shareUrlCopySuccess, setShareUrlCopySuccess] = useState(false);
   const [isMermaidView, setIsMermaidView] = useState(false);
   const [showMinimap, setShowMinimap] = useState(false);
+  const [hasLayoutChanges, setHasLayoutChanges] = useState(false);
+  const [isSavingLayout, setIsSavingLayout] = useState(false);
+  const initialPositionsRef = useRef<Record<string, { x: number; y: number }>>({});
   // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
 
   // Check if there are channels to determine if we need the visualizer functionality
@@ -169,6 +180,49 @@ const NodeGraphBuilder = ({
   const reactFlowWrapperRef = useRef<HTMLDivElement>(null);
   const scrollableContainerRef = useRef<HTMLElement | null>(null);
 
+  // Store initial node positions for change detection (dev mode only)
+  useEffect(() => {
+    if (isDevMode && initialNodes.length > 0) {
+      const positions: Record<string, { x: number; y: number }> = {};
+      initialNodes.forEach((node: Node) => {
+        positions[node.id] = { x: node.position.x, y: node.position.y };
+      });
+      initialPositionsRef.current = positions;
+    }
+  }, [isDevMode, initialNodes]);
+
+  // Detect layout changes by comparing current positions to initial positions
+  const checkForLayoutChanges = useCallback(() => {
+    if (!isDevMode) return;
+    const initial = initialPositionsRef.current;
+    if (Object.keys(initial).length === 0) return;
+
+    const hasChanges = nodes.some((node) => {
+      const initialPos = initial[node.id];
+      return (
+        initialPos &&
+        (Math.abs(node.position.x - initialPos.x) > POSITION_CHANGE_THRESHOLD ||
+          Math.abs(node.position.y - initialPos.y) > POSITION_CHANGE_THRESHOLD)
+      );
+    });
+
+    setHasLayoutChanges(hasChanges);
+  }, [isDevMode, nodes]);
+
+  // Wrap onNodesChange to detect layout changes after node drag
+  const handleNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      onNodesChange(changes);
+      // Check for position changes after drag ends
+      const hasDragEnd = changes.some((change) => change.type === 'position' && !change.dragging);
+      if (hasDragEnd) {
+        // Use setTimeout to ensure state is updated
+        setTimeout(checkForLayoutChanges, 0);
+      }
+    },
+    [onNodesChange, checkForLayoutChanges]
+  );
+
   const resetNodesAndEdges = useCallback(() => {
     setNodes((nds) =>
       nds.map((node) => {
@@ -397,6 +451,63 @@ const NodeGraphBuilder = ({
     window.dispatchEvent(new CustomEvent('eventcatalog:open-chat'));
   }, []);
 
+  // Layout persistence handlers (dev mode only)
+  const handleSaveLayout = useCallback(async (): Promise<boolean> => {
+    if (!resourceKey) return false;
+
+    const positions: Record<string, { x: number; y: number }> = {};
+    nodes.forEach((node) => {
+      positions[node.id] = {
+        x: node.position.x,
+        y: node.position.y,
+      };
+    });
+
+    try {
+      const response = await fetch('/api/dev/visualizer-layout/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ resourceKey, positions }),
+      });
+      const result = await response.json();
+      return result.success === true;
+    } catch {
+      return false;
+    }
+  }, [nodes, resourceKey]);
+
+  const handleResetLayout = useCallback(async (): Promise<boolean> => {
+    if (!resourceKey) return false;
+
+    try {
+      const response = await fetch('/api/dev/visualizer-layout/reset', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ resourceKey }),
+      });
+      const result = await response.json();
+      return result.success === true;
+    } catch {
+      return false;
+    }
+  }, [resourceKey]);
+
+  // Quick save handler for the change detection UI
+  const handleQuickSaveLayout = useCallback(async () => {
+    setIsSavingLayout(true);
+    const success = await handleSaveLayout();
+    setIsSavingLayout(false);
+    if (success) {
+      // Update initial positions to current positions after save
+      const positions: Record<string, { x: number; y: number }> = {};
+      nodes.forEach((node) => {
+        positions[node.id] = { x: node.position.x, y: node.position.y };
+      });
+      initialPositionsRef.current = positions;
+      setHasLayoutChanges(false);
+    }
+  }, [handleSaveLayout, nodes]);
+
   const handleCopyArchitectureCode = useCallback(async () => {
     await copyToClipboard(mermaidCode);
   }, [mermaidCode]);
@@ -692,6 +803,9 @@ const NodeGraphBuilder = ({
                       setIsShareModalOpen={setIsShareModalOpen}
                       toggleFullScreen={toggleFullScreen}
                       openStudioModal={openStudioModal}
+                      isDevMode={isDevMode}
+                      onSaveLayout={handleSaveLayout}
+                      onResetLayout={handleResetLayout}
                     />
                   </DropdownMenu.Content>
                 </DropdownMenu.Portal>
@@ -720,7 +834,7 @@ const NodeGraphBuilder = ({
           nodes={nodes}
           edges={edges}
           fitView
-          onNodesChange={onNodesChange}
+          onNodesChange={handleNodesChange}
           onEdgesChange={onEdgesChange}
           connectionLineType={ConnectionLineType.SmoothStep}
           nodeOrigin={[0.1, 0.1]}
@@ -772,6 +886,9 @@ const NodeGraphBuilder = ({
                         setIsShareModalOpen={setIsShareModalOpen}
                         toggleFullScreen={toggleFullScreen}
                         openStudioModal={openStudioModal}
+                        isDevMode={isDevMode}
+                        onSaveLayout={handleSaveLayout}
+                        onResetLayout={handleResetLayout}
                       />
                     </DropdownMenu.Content>
                   </DropdownMenu.Portal>
@@ -845,6 +962,28 @@ const NodeGraphBuilder = ({
               />
             </Panel>
           )}
+          {/* Dev Mode: Layout change indicator */}
+          {isDevMode && hasLayoutChanges && (
+            <Panel
+              position="bottom-left"
+              style={
+                isFlowVisualization && showFlowWalkthrough
+                  ? { marginBottom: '20px', marginLeft: '410px' }
+                  : { marginLeft: '60px' }
+              }
+            >
+              <div className="bg-[rgb(var(--ec-card-bg))] border border-[rgb(var(--ec-page-border))] rounded-lg shadow-md px-3 py-2 flex items-center gap-3">
+                <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Layout changed</span>
+                <button
+                  onClick={handleQuickSaveLayout}
+                  disabled={isSavingLayout}
+                  className="text-xs font-medium text-[rgb(var(--ec-accent-text))] bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle)/0.7)] px-2 py-1 rounded transition-colors disabled:opacity-50"
+                >
+                  {isSavingLayout ? 'Saving...' : 'Save'}
+                </button>
+              </div>
+            </Panel>
+          )}
           {includeKey && (
             <Panel position="bottom-right" style={showMinimap ? { marginRight: '230px' } : undefined}>
               <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">
@@ -952,6 +1091,8 @@ interface NodeGraphProps {
   designId?: string;
   isChatEnabled?: boolean;
   maxTextSize?: number;
+  isDevMode?: boolean;
+  resourceKey?: string;
 }
 
 const NodeGraph = ({
@@ -974,6 +1115,8 @@ const NodeGraph = ({
   designId,
   isChatEnabled = false,
   maxTextSize,
+  isDevMode = false,
+  resourceKey,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -1021,6 +1164,8 @@ const NodeGraph = ({
             setIsStudioModalOpen={setIsStudioModalOpen}
             isChatEnabled={isChatEnabled}
             maxTextSize={maxTextSize}
+            isDevMode={isDevMode}
+            resourceKey={resourceKey}
           />
 
           {showFooter && (

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

@@ -1,6 +1,20 @@
-import React, { type RefObject } from 'react';
+import React, { type RefObject, useState } 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 {
+  Code,
+  Share2,
+  Search,
+  Grid3x3,
+  Maximize2,
+  Map,
+  Sparkles,
+  Zap,
+  EyeOff,
+  ExternalLink,
+  Save,
+  RotateCcw,
+  Loader2,
+} from 'lucide-react';
 import { DocumentArrowDownIcon, PresentationChartLineIcon } from '@heroicons/react/24/outline';
 import type { VisualiserSearchRef } from './VisualiserSearch';
 
@@ -23,6 +37,9 @@ interface VisualizerDropdownContentProps {
   setIsShareModalOpen: (value: boolean) => void;
   toggleFullScreen: () => void;
   openStudioModal: () => void;
+  isDevMode?: boolean;
+  onSaveLayout?: () => Promise<boolean>;
+  onResetLayout?: () => Promise<boolean>;
 }
 
 const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
@@ -44,7 +61,33 @@ const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
   setIsShareModalOpen,
   toggleFullScreen,
   openStudioModal,
+  isDevMode = false,
+  onSaveLayout,
+  onResetLayout,
 }) => {
+  const [layoutStatus, setLayoutStatus] = useState<'idle' | 'saving' | 'resetting'>('idle');
+
+  const handleSaveLayout = async () => {
+    if (!onSaveLayout) return;
+    setLayoutStatus('saving');
+    await onSaveLayout();
+    setLayoutStatus('idle');
+  };
+
+  const handleResetLayout = async () => {
+    if (!onResetLayout) return;
+    if (!window.confirm('Reset layout to auto-positioning? This will delete your saved layout.')) {
+      return;
+    }
+    setLayoutStatus('resetting');
+    const success = await onResetLayout();
+    if (success) {
+      window.location.reload();
+    } else {
+      setLayoutStatus('idle');
+    }
+  };
+
   return (
     <>
       {/* Canvas Settings Submenu */}
@@ -157,6 +200,52 @@ const VisualizerDropdownContent: React.FC<VisualizerDropdownContentProps> = ({
         </DropdownMenu.Portal>
       </DropdownMenu.Sub>
 
+      {/* Dev Mode: Layout Submenu */}
+      {isDevMode && onSaveLayout && (
+        <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">
+            <Save className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+            <span className="flex-1 font-normal">Layout</span>
+            <span className="text-[10px] text-amber-600 font-medium">DEV</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-[180px] 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.Item
+                onClick={handleSaveLayout}
+                disabled={layoutStatus !== 'idle'}
+                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 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {layoutStatus === 'saving' ? (
+                  <Loader2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" />
+                ) : (
+                  <Save className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+                )}
+                <span className="flex-1 font-normal">{layoutStatus === 'saving' ? 'Saving...' : 'Save Layout'}</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onClick={handleResetLayout}
+                disabled={layoutStatus !== 'idle'}
+                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 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {layoutStatus === 'resetting' ? (
+                  <Loader2 className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0 animate-spin" />
+                ) : (
+                  <RotateCcw className="w-3.5 h-3.5 text-[rgb(var(--ec-page-text-muted))] flex-shrink-0" />
+                )}
+                <span className="flex-1 font-normal">{layoutStatus === 'resetting' ? 'Resetting...' : 'Reset Layout'}</span>
+              </DropdownMenu.Item>
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Sub>
+      )}
+
       {/* Ask AI */}
       {isChatEnabled && (
         <>

package/eventcatalog/src/enterprise/visualizer-layout/reset.ts

@@ -0,0 +1,45 @@
+import type { APIRoute } from 'astro';
+import fs from 'node:fs';
+import { getLayoutFilePath } from '@utils/node-graphs/layout-persistence';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const body = await request.json();
+    const { resourceKey } = body;
+
+    // Validate input
+    if (!resourceKey) {
+      return new Response(JSON.stringify({ error: 'Missing required field: resourceKey' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    const filePath = getLayoutFilePath(resourceKey);
+
+    // Check if file exists
+    try {
+      await fs.promises.access(filePath);
+    } catch {
+      // File doesn't exist, nothing to delete
+      return new Response(JSON.stringify({ success: true, message: 'No saved layout to reset' }), {
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Delete the layout file
+    await fs.promises.unlink(filePath);
+
+    return new Response(JSON.stringify({ success: true, message: 'Layout reset successfully' }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return new Response(JSON.stringify({ error: `Failed to reset layout: ${message}` }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};
+
+export const prerender = false;

package/eventcatalog/src/enterprise/visualizer-layout/save.ts

@@ -0,0 +1,57 @@
+import type { APIRoute } from 'astro';
+import fs from 'node:fs';
+import path from 'node:path';
+import { getLayoutFilePath, type SavedLayout } from '@utils/node-graphs/layout-persistence';
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const body = await request.json();
+    const { resourceKey, positions } = body;
+
+    // Validate input
+    if (!resourceKey || !positions) {
+      return new Response(JSON.stringify({ error: 'Missing required fields: resourceKey and positions' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Validate resourceKey doesn't contain path traversal
+    if (resourceKey.includes('..') || resourceKey.includes('~')) {
+      return new Response(JSON.stringify({ error: 'Invalid resourceKey' }), {
+        status: 400,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Build file path from resource key using shared utility
+    const filePath = getLayoutFilePath(resourceKey);
+
+    // Create directory structure if needed
+    const fileDir = path.dirname(filePath);
+    await fs.promises.mkdir(fileDir, { recursive: true });
+
+    // Build layout data
+    const layoutData: SavedLayout = {
+      version: 1,
+      savedAt: new Date().toISOString(),
+      resourceKey,
+      positions,
+    };
+
+    // Write file with pretty formatting
+    await fs.promises.writeFile(filePath, JSON.stringify(layoutData, null, 2));
+
+    return new Response(JSON.stringify({ success: true, filePath }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    return new Response(JSON.stringify({ error: `Failed to save layout: ${message}` }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};
+
+export const prerender = false;

package/eventcatalog/src/pages/api/catalog.ts

@@ -2,18 +2,20 @@ import type { APIRoute } from 'astro';
 import utils from '@eventcatalog/sdk';
 import config from '@config';
 
+const isFullCatalogAPIEnabled = config.api?.fullCatalogAPIEnabled ?? true;
+
 /**
- * Route the will dump the whole catalog as JSON (without markdown)
+ * Route that dumps the whole catalog as JSON (without markdown)
  * Experimental API
- * @param param0
- * @returns
+ *
+ * Can be disabled via eventcatalog.config.js:
+ * api: { fullCatalogAPIEnabled: false }
  */
-export const GET: APIRoute = async ({ params, request }) => {
-  const isFullCatalogAPIEnabled = config.api?.fullCatalogAPIEnabled ?? true;
-
+export const GET: APIRoute = async () => {
   if (!isFullCatalogAPIEnabled) {
     return new Response(JSON.stringify({ error: 'Full catalog API is not enabled' }), {
       status: 404,
+      headers: { 'Content-Type': 'application/json' },
     });
   }
 
@@ -26,3 +28,7 @@ export const GET: APIRoute = async ({ params, request }) => {
     },
   });
 };
+
+// Only prerender if the API is enabled - this avoids loading all catalog data during build
+// when the feature is disabled, saving memory for large catalogs
+export const prerender = isFullCatalogAPIEnabled;

package/eventcatalog/src/utils/feature.ts

@@ -71,3 +71,5 @@ export const isCustomStylesEnabled = () => {
 export const isDiagramComparisonEnabled = () => isEventCatalogScaleEnabled();
 
 export const isEventCatalogMCPEnabled = () => isEventCatalogScaleEnabled() && isSSR();
+
+export const isDevMode = () => process.env.EVENTCATALOG_DEV_MODE === 'true';

package/eventcatalog/src/utils/node-graphs/layout-persistence.ts

@@ -0,0 +1,81 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export interface SavedPosition {
+  x: number;
+  y: number;
+}
+
+export interface SavedLayout {
+  version: number;
+  savedAt: string;
+  resourceKey: string;
+  positions: Record<string, SavedPosition>;
+}
+
+/**
+ * Builds a resource key for layout persistence from collection, id, and version.
+ * e.g., buildResourceKey('services', 'OrderService', '1.0.0') -> 'services/OrderService/1.0.0'
+ */
+export function buildResourceKey(collection: string, id: string, version?: string): string {
+  if (version) {
+    return `${collection}/${id}/${version}`;
+  }
+  return `${collection}/${id}`;
+}
+
+/**
+ * Converts a resource key to a file path for the saved layout
+ * e.g., services/OrderService/1.0.0 -> _data/visualizer-layouts/services/OrderService/1.0.0.json
+ * Uses path.join with spread segments for cross-platform compatibility (Windows/Mac/Linux)
+ */
+export function getLayoutFilePath(resourceKey: string): string {
+  const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
+  const cleanKey = resourceKey.replace(/^\//, '').replace(/\/$/, '');
+  // Split path segments and rejoin with platform-specific separator
+  const segments = cleanKey.split('/').filter(Boolean);
+  const fileName = `${segments.pop()}.json`;
+  return path.join(PROJECT_DIR, '_data', 'visualizer-layouts', ...segments, fileName);
+}
+
+/**
+ * Loads saved layout from disk if it exists
+ */
+export async function loadSavedLayout(resourceKey: string): Promise<SavedLayout | null> {
+  const filePath = getLayoutFilePath(resourceKey);
+
+  try {
+    const content = await fs.promises.readFile(filePath, 'utf-8');
+    return JSON.parse(content) as SavedLayout;
+  } catch {
+    // File doesn't exist or parse error - return null
+    return null;
+  }
+}
+
+/**
+ * Applies saved positions to nodes. Nodes with saved positions get them applied,
+ * nodes without saved positions keep their Dagre-calculated positions.
+ */
+export function applyLayoutToNodes<T extends { id: string; position: { x: number; y: number } }>(
+  nodes: T[],
+  savedLayout: SavedLayout | null
+): T[];
+export function applyLayoutToNodes(nodes: any[], savedLayout: SavedLayout | null): any[] {
+  if (!savedLayout) {
+    return nodes; // No saved layout, use original Dagre positions
+  }
+
+  return nodes.map((node) => {
+    const savedPosition = savedLayout.positions[node.id];
+    if (savedPosition) {
+      // Use saved position
+      return {
+        ...node,
+        position: { x: savedPosition.x, y: savedPosition.y },
+      };
+    }
+    // Keep Dagre-calculated position for new/unmatched nodes
+    return node;
+  });
+}

package/package.json

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