@eventcatalog/visualiser 5.0.0 → 5.1.0

package/dist/{elk-layout-BVUJjv6i.d.mts → elk-layout-CpbZ6hB9.d.mts}

@@ -17,16 +17,29 @@ type EdgeRoute = {
         x: number;
         y: number;
     };
-    /** Where the edge's source and target were laid out (top-left, in the flow) */
+    /**
+     * Where the edge's source and target were laid out (top-left, in the flow),
+     * and how tall: nodes often render shorter than the layout estimated
+     */
     source?: {
         x: number;
         y: number;
+        height?: number;
     };
     target?: {
         x: number;
         y: number;
+        height?: number;
     };
 };
+/**
+ * A route copied to another canvas (e.g. a diagram opened in Studio), which
+ * places the nodes itself: where it goes, and how tall its nodes were laid out
+ */
+type CopiedEdgeRoute = Pick<EdgeRoute, "points" | "label"> & {
+    sourceHeight?: number;
+    targetHeight?: number;
+};
 /** The size a node is laid out at: as rendered, or an estimate for its type */
 declare const getNodeSize: (node: Node) => LayoutSize;
 /**
@@ -44,4 +57,4 @@ declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
     sizeOf?: (node: Node) => LayoutSize;
 }) => Promise<LayoutGraph>;
 
-export { type EdgeRoute as E, type LayoutGraph as L, type LayoutSize as a, getNodeSize as g, layoutWithElk as l };
+export { type CopiedEdgeRoute as C, type EdgeRoute as E, type LayoutGraph as L, type LayoutSize as a, getNodeSize as g, layoutWithElk as l };

package/dist/export-mermaid-CbER9roE.d.mts

@@ -0,0 +1,23 @@
+import { Node, Edge } from '@xyflow/react';
+
+/**
+ * Mermaid Export Utility
+ * Converts React Flow nodes and edges to Mermaid flowchart syntax. Used by the
+ * visualiser's Mermaid view and by EventCatalog (the `.mermaid` routes, AI Chat
+ * and the MCP server), so every level of a diagram exports the same way.
+ */
+interface MermaidExportOptions {
+    /** Include class definitions for styling */
+    includeStyles?: boolean;
+    /** Direction of the flowchart: LR (left-right), TB (top-bottom), etc. */
+    direction?: "LR" | "TB" | "RL" | "BT";
+}
+/**
+ * Convert React Flow nodes and edges to Mermaid flowchart syntax. Domains,
+ * systems and a flow's lanes are subgraphs around what's in them (nested, as
+ * on the diagram), so every level of a domain or system diagram keeps its
+ * boundaries. Edges between domains are highlighted.
+ */
+declare function convertToMermaid(graphNodes: Node[], graphEdges: Edge[], options?: MermaidExportOptions): string;
+
+export { type MermaidExportOptions as M, convertToMermaid as c };

package/dist/export-mermaid-xL98eL1l.d.ts

@@ -0,0 +1,80 @@
+import { Node, Edge } from '@xyflow/react';
+
+type LayoutGraph = {
+    nodes: Node[];
+    edges: Edge[];
+};
+type LayoutSize = {
+    width: number;
+    height: number;
+};
+type EdgeRoute = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+    label?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Where the edge's source and target were laid out (top-left, in the flow),
+     * and how tall: nodes often render shorter than the layout estimated
+     */
+    source?: {
+        x: number;
+        y: number;
+        height?: number;
+    };
+    target?: {
+        x: number;
+        y: number;
+        height?: number;
+    };
+};
+/**
+ * A route copied to another canvas (e.g. a diagram opened in Studio), which
+ * places the nodes itself: where it goes, and how tall its nodes were laid out
+ */
+type CopiedEdgeRoute = Pick<EdgeRoute, "points" | "label"> & {
+    sourceHeight?: number;
+    targetHeight?: number;
+};
+/** The size a node is laid out at: as rendered, or an estimate for its type */
+declare const getNodeSize: (node: Node) => LayoutSize;
+/**
+ * Lays a graph out with ELK (left to right). Nested groups (nodes other nodes
+ * have as their `parentId`) are laid out in one pass with their children.
+ * Edges are routed at right angles around nodes, each edge with its own
+ * connection point so edges don't run on top of each other, and labels are
+ * placed on their edge. Each edge keeps its type and gets its route (and label
+ * position) in `data.route`, which the visualiser's edges are drawn along.
+ *
+ * Node positions are top-left corners (nodes get `origin: [0, 0]`), children
+ * relative to their group. Groups are sized to fit their children.
+ */
+declare const layoutWithElk: ({ nodes, edges }: LayoutGraph, { sizeOf }?: {
+    sizeOf?: (node: Node) => LayoutSize;
+}) => Promise<LayoutGraph>;
+
+/**
+ * Mermaid Export Utility
+ * Converts React Flow nodes and edges to Mermaid flowchart syntax. Used by the
+ * visualiser's Mermaid view and by EventCatalog (the `.mermaid` routes, AI Chat
+ * and the MCP server), so every level of a diagram exports the same way.
+ */
+interface MermaidExportOptions {
+    /** Include class definitions for styling */
+    includeStyles?: boolean;
+    /** Direction of the flowchart: LR (left-right), TB (top-bottom), etc. */
+    direction?: "LR" | "TB" | "RL" | "BT";
+}
+/**
+ * Convert React Flow nodes and edges to Mermaid flowchart syntax. Domains,
+ * systems and a flow's lanes are subgraphs around what's in them (nested, as
+ * on the diagram), so every level of a domain or system diagram keeps its
+ * boundaries. Edges between domains are highlighted.
+ */
+declare function convertToMermaid(graphNodes: Node[], graphEdges: Edge[], options?: MermaidExportOptions): string;
+
+export { type CopiedEdgeRoute as C, type EdgeRoute as E, type LayoutGraph as L, type MermaidExportOptions as M, type LayoutSize as a, convertToMermaid as c, getNodeSize as g, layoutWithElk as l };

package/dist/index.d.mts

@@ -1,9 +1,10 @@
 import * as _xyflow_react from '@xyflow/react';
 import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, NodeProps, EdgeProps, ReactFlowJsonObject } from '@xyflow/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EdgeRoute } from './elk-layout-BVUJjv6i.mjs';
+import { C as CopiedEdgeRoute } from './elk-layout-CpbZ6hB9.mjs';
 import * as react from 'react';
 import react__default, { ReactNode, ComponentType } from 'react';
+export { M as MermaidExportOptions, c as convertToMermaid } from './export-mermaid-CbER9roE.mjs';
 
 /**
  * EventCatalog resource mode
@@ -363,8 +364,11 @@ type VisualiserSnapshot = {
         source: string;
         target: string;
         label?: string;
-        /** How it's drawn: the points it goes through on the diagram, and where its label is (from the layout) */
-        route?: Pick<EdgeRoute, "points" | "label">;
+        /**
+         * How it's drawn: the points it goes through on the diagram, where its label is, and how tall its nodes were
+         * (from the layout)
+         */
+        route?: CopiedEdgeRoute;
     }[];
     /**
      * Levels 1 and 2 as the diagram shows them (laid out, positions relative to their parents), for Studio to show
@@ -391,6 +395,17 @@ type OpenInStudioRequest = {
 };
 interface NodeGraphProps {
     id: string;
+    /**
+     * Keeps the Mermaid view in the page's URL (`?render=mermaid`), so links open
+     * in it. Only for the visualiser's own pages: not diagrams embedded in docs
+     * or other apps, which can share a page (or an iframe) with others.
+     */
+    syncRenderModeWithUrl?: boolean;
+    /**
+     * The level of detail to open at (1, 2 or 3), rather than the URL's or the
+     * saved one, e.g. the level an MCP client asked for
+     */
+    initialLevel?: 1 | 2 | 3;
     title?: string;
     href?: string;
     hrefLabel?: string;
@@ -470,14 +485,50 @@ interface NodeGraphProps {
     /** Starts a Studio canvas from what the diagram shows (the menu has "Open in Studio" when set) */
     onOpenInStudio?: (request: OpenInStudioRequest) => void;
 }
-declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, onOpenInStudio, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
+declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, syncRenderModeWithUrl, initialLevel, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, onOpenInStudio, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
+
+type CanvasLevel = {
+    description: string;
+    active: boolean;
+    /** Why the level is greyed out (e.g. the diagram doesn't have it), shown on hover */
+    disabledReason?: string;
+    onSelect: () => void;
+};
+/** A button in a toolbar, with its tooltip (what it does, and why it can't be used when it can't) */
+declare const ToolbarButton: ({ label, hint, active, disabled, onClick, children, }: {
+    label: string;
+    /** Shown under the label on hover */
+    hint?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * How far the canvas is zoomed in, as a percentage. Isolated, so what it's in only re-renders when the zoom changes
+ * (not on every pan). Studio's bar shows it too.
+ */
+declare const ZoomLevel: react.NamedExoticComponent<{
+    className?: string;
+}>;
+declare const ToolbarDivider: () => react_jsx_runtime.JSX.Element;
+/** The frame of a toolbar (e.g. the bar at the bottom of a diagram, or of a Studio canvas), with tooltips */
+declare const Toolbar: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
 
 interface MermaidViewProps {
     nodes: Node[];
     edges: Edge[];
     maxTextSize?: number;
+    /** The diagram's levels of detail, shown in the toolbar as on the diagram */
+    levels?: CanvasLevel[];
+    /** Zoom with the wheel; otherwise only with Ctrl or Cmd held (or a pinch), as on the diagram */
+    zoomOnScroll?: boolean;
+    /** Goes back to the diagram (the toolbar's Mermaid toggle, which is on here) */
+    onShowDiagram?: () => void;
 }
-declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
+declare const MermaidView: ({ nodes, edges, maxTextSize, levels, zoomOnScroll, onShowDiagram, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * A diagram's background: dots on the canvas colour (`.react-flow` in styles-core.css), the same wherever a
@@ -485,6 +536,12 @@ declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) =>
  */
 declare const DiagramBackground: react.NamedExoticComponent<object>;
 
+/**
+ * A diagram's minimap: each node in its resource's colour, and domains and systems as outlined containers with
+ * what's in them inside, as the diagram draws them. The same wherever a diagram is drawn (the visualiser and Studio).
+ */
+declare const DiagramMiniMap: react.NamedExoticComponent<object>;
+
 /**
  * A diagram's legend: how many of each kind of node it shows (and of each domain's, when steps are grouped by
  * domain), with the kind's icon. Clicking an entry hides or shows those nodes. Studio's canvases have the same one.
@@ -505,29 +562,6 @@ declare const LegendPanel: react.NamedExoticComponent<{
     onLegendClick: (key: string) => void;
 }>;
 
-/** A button in a toolbar, with its tooltip (what it does, and why it can't be used when it can't) */
-declare const ToolbarButton: ({ label, hint, active, disabled, onClick, children, }: {
-    label: string;
-    /** Shown under the label on hover */
-    hint?: string;
-    active?: boolean;
-    disabled?: boolean;
-    onClick: () => void;
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-/**
- * How far the canvas is zoomed in, as a percentage. Isolated, so what it's in only re-renders when the zoom changes
- * (not on every pan). Studio's bar shows it too.
- */
-declare const ZoomLevel: react.NamedExoticComponent<{
-    className?: string;
-}>;
-declare const ToolbarDivider: () => react_jsx_runtime.JSX.Element;
-/** The frame of a toolbar (e.g. the bar at the bottom of a diagram, or of a Studio canvas), with tooltips */
-declare const Toolbar: ({ children }: {
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
 /** Tooltips for a group of controls (e.g. a toolbar): shown after a moment, then straight away while moving along */
 declare const TipProvider: ({ children }: {
     children: ReactNode;
@@ -1051,21 +1085,6 @@ declare const edgeTypes: {
     step: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
 };
 
-/**
- * Mermaid Export Utility
- * Converts React Flow nodes and edges to Mermaid flowchart syntax
- */
-interface MermaidExportOptions {
-    /** Include class definitions for styling */
-    includeStyles?: boolean;
-    /** Direction of the flowchart: LR (left-right), TB (top-bottom), etc. */
-    direction?: "LR" | "TB" | "RL" | "BT";
-}
-/**
- * Convert React Flow nodes and edges to Mermaid flowchart syntax
- */
-declare function convertToMermaid(graphNodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
-
 declare const exportNodeGraphForStudio: (data: ReactFlowJsonObject) => ReactFlowJsonObject;
 
 interface BaseCollectionData {
@@ -1132,4 +1151,4 @@ declare const memoNode: <P extends object>(Component: ComponentType<P>) => react
  */
 declare const pauseEdgeAnimations: (canvas: Element | null, paused: boolean) => void | undefined;
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, DIAGRAM_FIT_VIEW_OPTIONS, DIAGRAM_MENU, DIAGRAM_MENU_BUTTON, DIAGRAM_MENU_BUTTON_COMPACT, DIAGRAM_MENU_BUTTON_ICON, DIAGRAM_MENU_BUTTON_ICON_COMPACT, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_ITEM_ICON, DIAGRAM_MENU_SEPARATOR, DIAGRAM_MENU_TITLE, type Data, type DataNode, _default$t as DataProductNode, DiagramBackground, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, type LegendEntry, LegendPanel, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, type OpenInStudioRequest, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, Tip, TipProvider, Toolbar, ToolbarButton, ToolbarDivider, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualiserSnapshot, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, ZoomLevel, _default$o as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$n as dataNodeConfig, diagramNodeComponents, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getLegend, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, memoNode, nodeComponents, nodeConfigs, normalizeOwners, pauseEdgeAnimations };
+export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, DIAGRAM_FIT_VIEW_OPTIONS, DIAGRAM_MENU, DIAGRAM_MENU_BUTTON, DIAGRAM_MENU_BUTTON_COMPACT, DIAGRAM_MENU_BUTTON_ICON, DIAGRAM_MENU_BUTTON_ICON_COMPACT, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_ITEM_ICON, DIAGRAM_MENU_SEPARATOR, DIAGRAM_MENU_TITLE, type Data, type DataNode, _default$t as DataProductNode, DiagramBackground, DiagramMiniMap, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, type LegendEntry, LegendPanel, MESSAGE, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, type OpenInStudioRequest, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, Tip, TipProvider, Toolbar, ToolbarButton, ToolbarDivider, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualiserSnapshot, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, ZoomLevel, _default$o as actorConfig, buildNodeData, createEdge, createNode, _default$n as dataNodeConfig, diagramNodeComponents, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getLegend, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, memoNode, nodeComponents, nodeConfigs, normalizeOwners, pauseEdgeAnimations };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as _xyflow_react from '@xyflow/react';
 import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, NodeProps, EdgeProps, ReactFlowJsonObject } from '@xyflow/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EdgeRoute } from './elk-layout-BVUJjv6i.js';
+import { C as CopiedEdgeRoute } from './export-mermaid-xL98eL1l.js';
+export { M as MermaidExportOptions, c as convertToMermaid } from './export-mermaid-xL98eL1l.js';
 import * as react from 'react';
 import react__default, { ReactNode, ComponentType } from 'react';
 
@@ -363,8 +364,11 @@ type VisualiserSnapshot = {
         source: string;
         target: string;
         label?: string;
-        /** How it's drawn: the points it goes through on the diagram, and where its label is (from the layout) */
-        route?: Pick<EdgeRoute, "points" | "label">;
+        /**
+         * How it's drawn: the points it goes through on the diagram, where its label is, and how tall its nodes were
+         * (from the layout)
+         */
+        route?: CopiedEdgeRoute;
     }[];
     /**
      * Levels 1 and 2 as the diagram shows them (laid out, positions relative to their parents), for Studio to show
@@ -391,6 +395,17 @@ type OpenInStudioRequest = {
 };
 interface NodeGraphProps {
     id: string;
+    /**
+     * Keeps the Mermaid view in the page's URL (`?render=mermaid`), so links open
+     * in it. Only for the visualiser's own pages: not diagrams embedded in docs
+     * or other apps, which can share a page (or an iframe) with others.
+     */
+    syncRenderModeWithUrl?: boolean;
+    /**
+     * The level of detail to open at (1, 2 or 3), rather than the URL's or the
+     * saved one, e.g. the level an MCP client asked for
+     */
+    initialLevel?: 1 | 2 | 3;
     title?: string;
     href?: string;
     hrefLabel?: string;
@@ -470,14 +485,50 @@ interface NodeGraphProps {
     /** Starts a Studio canvas from what the diagram shows (the menu has "Open in Studio" when set) */
     onOpenInStudio?: (request: OpenInStudioRequest) => void;
 }
-declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, onOpenInStudio, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
+declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, syncRenderModeWithUrl, initialLevel, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, showMenu, compactSearch, hideAttribution, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, disableMessageAnimation, overviewGraph, hiddenMessagesGraph, preferenceScope, swimlanes, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, onOpenInStudio, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
+
+type CanvasLevel = {
+    description: string;
+    active: boolean;
+    /** Why the level is greyed out (e.g. the diagram doesn't have it), shown on hover */
+    disabledReason?: string;
+    onSelect: () => void;
+};
+/** A button in a toolbar, with its tooltip (what it does, and why it can't be used when it can't) */
+declare const ToolbarButton: ({ label, hint, active, disabled, onClick, children, }: {
+    label: string;
+    /** Shown under the label on hover */
+    hint?: string;
+    active?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+/**
+ * How far the canvas is zoomed in, as a percentage. Isolated, so what it's in only re-renders when the zoom changes
+ * (not on every pan). Studio's bar shows it too.
+ */
+declare const ZoomLevel: react.NamedExoticComponent<{
+    className?: string;
+}>;
+declare const ToolbarDivider: () => react_jsx_runtime.JSX.Element;
+/** The frame of a toolbar (e.g. the bar at the bottom of a diagram, or of a Studio canvas), with tooltips */
+declare const Toolbar: ({ children }: {
+    children: ReactNode;
+}) => react_jsx_runtime.JSX.Element;
 
 interface MermaidViewProps {
     nodes: Node[];
     edges: Edge[];
     maxTextSize?: number;
+    /** The diagram's levels of detail, shown in the toolbar as on the diagram */
+    levels?: CanvasLevel[];
+    /** Zoom with the wheel; otherwise only with Ctrl or Cmd held (or a pinch), as on the diagram */
+    zoomOnScroll?: boolean;
+    /** Goes back to the diagram (the toolbar's Mermaid toggle, which is on here) */
+    onShowDiagram?: () => void;
 }
-declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
+declare const MermaidView: ({ nodes, edges, maxTextSize, levels, zoomOnScroll, onShowDiagram, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * A diagram's background: dots on the canvas colour (`.react-flow` in styles-core.css), the same wherever a
@@ -485,6 +536,12 @@ declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) =>
  */
 declare const DiagramBackground: react.NamedExoticComponent<object>;
 
+/**
+ * A diagram's minimap: each node in its resource's colour, and domains and systems as outlined containers with
+ * what's in them inside, as the diagram draws them. The same wherever a diagram is drawn (the visualiser and Studio).
+ */
+declare const DiagramMiniMap: react.NamedExoticComponent<object>;
+
 /**
  * A diagram's legend: how many of each kind of node it shows (and of each domain's, when steps are grouped by
  * domain), with the kind's icon. Clicking an entry hides or shows those nodes. Studio's canvases have the same one.
@@ -505,29 +562,6 @@ declare const LegendPanel: react.NamedExoticComponent<{
     onLegendClick: (key: string) => void;
 }>;
 
-/** A button in a toolbar, with its tooltip (what it does, and why it can't be used when it can't) */
-declare const ToolbarButton: ({ label, hint, active, disabled, onClick, children, }: {
-    label: string;
-    /** Shown under the label on hover */
-    hint?: string;
-    active?: boolean;
-    disabled?: boolean;
-    onClick: () => void;
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-/**
- * How far the canvas is zoomed in, as a percentage. Isolated, so what it's in only re-renders when the zoom changes
- * (not on every pan). Studio's bar shows it too.
- */
-declare const ZoomLevel: react.NamedExoticComponent<{
-    className?: string;
-}>;
-declare const ToolbarDivider: () => react_jsx_runtime.JSX.Element;
-/** The frame of a toolbar (e.g. the bar at the bottom of a diagram, or of a Studio canvas), with tooltips */
-declare const Toolbar: ({ children }: {
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
 /** Tooltips for a group of controls (e.g. a toolbar): shown after a moment, then straight away while moving along */
 declare const TipProvider: ({ children }: {
     children: ReactNode;
@@ -1051,21 +1085,6 @@ declare const edgeTypes: {
     step: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
 };
 
-/**
- * Mermaid Export Utility
- * Converts React Flow nodes and edges to Mermaid flowchart syntax
- */
-interface MermaidExportOptions {
-    /** Include class definitions for styling */
-    includeStyles?: boolean;
-    /** Direction of the flowchart: LR (left-right), TB (top-bottom), etc. */
-    direction?: "LR" | "TB" | "RL" | "BT";
-}
-/**
- * Convert React Flow nodes and edges to Mermaid flowchart syntax
- */
-declare function convertToMermaid(graphNodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
-
 declare const exportNodeGraphForStudio: (data: ReactFlowJsonObject) => ReactFlowJsonObject;
 
 interface BaseCollectionData {
@@ -1132,4 +1151,4 @@ declare const memoNode: <P extends object>(Component: ComponentType<P>) => react
  */
 declare const pauseEdgeAnimations: (canvas: Element | null, paused: boolean) => void | undefined;
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, DIAGRAM_FIT_VIEW_OPTIONS, DIAGRAM_MENU, DIAGRAM_MENU_BUTTON, DIAGRAM_MENU_BUTTON_COMPACT, DIAGRAM_MENU_BUTTON_ICON, DIAGRAM_MENU_BUTTON_ICON_COMPACT, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_ITEM_ICON, DIAGRAM_MENU_SEPARATOR, DIAGRAM_MENU_TITLE, type Data, type DataNode, _default$t as DataProductNode, DiagramBackground, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, type LegendEntry, LegendPanel, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, type OpenInStudioRequest, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, Tip, TipProvider, Toolbar, ToolbarButton, ToolbarDivider, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualiserSnapshot, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, ZoomLevel, _default$o as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$n as dataNodeConfig, diagramNodeComponents, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getLegend, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, memoNode, nodeComponents, nodeConfigs, normalizeOwners, pauseEdgeAnimations };
+export { ACTOR, AGENT, AGENT_TOOL, _default$p as Actor, type ActorNode, type Agent$1 as Agent, _default$j as AgentNode, type AgentTool$1 as AgentTool, _default$k as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$g as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$c as CustomNode, DATA, DIAGRAM_FIT_VIEW_OPTIONS, DIAGRAM_MENU, DIAGRAM_MENU_BUTTON, DIAGRAM_MENU_BUTTON_COMPACT, DIAGRAM_MENU_BUTTON_ICON, DIAGRAM_MENU_BUTTON_ICON_COMPACT, DIAGRAM_MENU_ITEM, DIAGRAM_MENU_ITEM_ICON, DIAGRAM_MENU_SEPARATOR, DIAGRAM_MENU_TITLE, type Data, type DataNode, _default$t as DataProductNode, DiagramBackground, DiagramMiniMap, _default$a as DomainCardNode, _default$b as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$d as EntityNode, type EntityProperty, _default$f as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$r as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$s as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, type LegendEntry, LegendPanel, MESSAGE, MermaidView, type Message, _default$u as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$v as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$w as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$l as Note, type NoteNode, NotesIndicator, type OpenInStudioRequest, OwnerIndicator, QUERY, _default$h as Query, type QueryNode, type RegisteredNode, SERVICE, _default$i as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$x as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, Tip, TipProvider, Toolbar, ToolbarButton, ToolbarDivider, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualiserSnapshot, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, ZoomLevel, _default$o as actorConfig, buildNodeData, createEdge, createNode, _default$n as dataNodeConfig, diagramNodeComponents, edgeTypes, _default$e as eventConfig, exportNodeGraphForStudio, _default$m as externalSystemConfig, _default$q as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getLegend, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, memoNode, nodeComponents, nodeConfigs, normalizeOwners, pauseEdgeAnimations };