@eventcatalog/visualiser 4.1.4 → 5.0.0-beta.0

package/LICENSE

@@ -19,13 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-
-Note: Source code within the following directories is licensed under the
-EventCatalog Commercial License and is NOT covered by the MIT License above:
-
-- `packages/core/eventcatalog/src/enterprise/`
-- `packages/core/src/federation/`
-
-See the `LICENSE` file in each directory for the full terms.

package/dist/index.d.mts

@@ -3,7 +3,6 @@ import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, NodeProps, Ed
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default from 'react';
-import dagre from 'dagre';
 
 /**
  * EventCatalog resource mode
@@ -324,6 +323,17 @@ interface DslGraph {
     };
 }
 
+/** What a flow's swimlanes group its steps by */
+type SwimlaneGroupBy = "domain" | "system" | "team";
+/** What a flow's steps can be grouped by: one of those, or domains with their systems in them */
+type FlowGroupBy = SwimlaneGroupBy | "domain-system";
+/**
+ * How the groups are shown: full-width lanes stacked top to bottom, or boxes
+ * around their steps (like the pools of a process diagram), placed by the layout
+ */
+type FlowGroupStyle = "lanes" | "boxes";
+declare const isFlowGroupBy: (value: unknown) => value is FlowGroupBy;
+
 interface NodeGraphProps {
     id: string;
     title?: string;
@@ -344,6 +354,12 @@ interface NodeGraphProps {
     portalId?: string;
     showFlowWalkthrough?: boolean;
     showSearch?: boolean;
+    /** Show the settings menu (top left). Defaults to true. */
+    showMenu?: boolean;
+    /** Use a narrower search box, for small spaces. */
+    compactSearch?: boolean;
+    /** Hide the React Flow attribution (bottom right). */
+    hideAttribution?: boolean;
     zoomOnScroll?: boolean;
     designId?: string;
     isChatEnabled?: boolean;
@@ -359,6 +375,29 @@ interface NodeGraphProps {
      * flows, e.g. the System Diagram.
      */
     disableMessageAnimation?: boolean;
+    /**
+     * A simpler graph shown as level 1 in the toolbar (e.g. a system's context
+     * diagram), before this graph's detail levels.
+     */
+    overviewGraph?: {
+        nodes: Node[];
+        edges: Edge[];
+        /** Describes the level, e.g. "system context" */
+        label: string;
+        resourceKey?: string;
+    };
+    /**
+     * This graph laid out with its messages and channels hidden (level 2). Used
+     * instead of hiding them and laying the graph out again in the browser.
+     */
+    hiddenMessagesGraph?: {
+        nodes: Node[];
+        edges: Edge[];
+    };
+    /** The kind of diagram (e.g. "services"), so the level is remembered for each kind */
+    preferenceScope?: string;
+    /** Group a flow's steps to start with (the `group` URL parameter wins) */
+    swimlanes?: FlowGroupBy;
     /** When set, the graph will zoom to this node id. */
     focusNodeId?: string;
     /** Optional token to force repeated focus for the same node id. */
@@ -374,7 +413,7 @@ interface NodeGraphProps {
     }>) => Promise<boolean>;
     onResetLayout?: (resourceKey: string) => Promise<boolean>;
 }
-declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, }: 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, 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, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
 
 interface MermaidViewProps {
     nodes: Node[];
@@ -447,55 +486,48 @@ interface VisualiserSearchRef {
 }
 declare const VisualiserSearch: react.NamedExoticComponent<VisualiserSearchProps & react.RefAttributes<VisualiserSearchRef>>;
 
-interface NodeData {
-    label?: string;
+type Resource = {
     summary?: string;
-    step?: {
-        title?: string;
+    data?: {
         summary?: string;
     };
-    service?: {
-        name?: string;
+};
+type NodeData = {
+    summary?: string;
+    step?: {
+        title?: string;
         summary?: string;
-        data?: {
-            name?: string;
-            summary?: string;
-        };
-    };
-    message?: {
-        name?: string;
-        summary?: string;
-        data?: {
-            name?: string;
-            summary?: string;
-        };
-    };
-    flow?: {
-        data?: {
-            name?: string;
-        };
     };
+    service?: Resource;
+    message?: Resource;
+    agent?: Resource;
+    flow?: Resource;
+    container?: Resource;
+    dataProduct?: Resource;
     custom?: {
-        title?: string;
-        label?: string;
+        type?: string;
         summary?: string;
-    };
-    actor?: {
-        label?: string;
+        url?: string;
     };
     externalSystem?: {
-        label?: string;
+        url?: string;
     };
-}
+};
 interface CustomNode {
     id: string;
+    type?: string;
     data: NodeData;
 }
 interface StepWalkthroughProps {
     nodes: CustomNode[];
     edges: Edge[];
     isFlowVisualization: boolean;
-    onStepChange: (nodeId: string | null, highlightPaths?: string[], shouldZoomOut?: boolean) => void;
+    /**
+     * Called when the step changes: the step (null when the walkthrough ends),
+     * whether to zoom out to the whole flow, and the steps walked so far, in
+     * order (ending with this one)
+     */
+    onStepChange: (nodeId: string | null, shouldZoomOut?: boolean, trail?: string[]) => void;
     mode?: "full" | "simple";
 }
 declare const _default$w: react__default.NamedExoticComponent<StepWalkthroughProps>;
@@ -850,7 +882,7 @@ interface CustomEdgeProps extends Omit<EdgeProps, "data"> {
 }
 declare const _default$1: react.NamedExoticComponent<CustomEdgeProps>;
 
-declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
+declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, source, target, sourceHandleId, targetHandleId, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
 
 declare const _default: react.NamedExoticComponent<EdgeProps>;
 
@@ -859,7 +891,7 @@ declare function LabelledSmoothStepEdge(props: EdgeProps): react_jsx_runtime.JSX
 declare function LabelledStepEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
 
 declare const edgeTypes: {
-    animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
+    animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, source, target, sourceHandleId, targetHandleId, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
     "flow-edge": react.NamedExoticComponent<CustomEdgeProps>;
     multiline: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
     default: typeof LabelledDefaultEdge;
@@ -880,7 +912,7 @@ interface MermaidExportOptions {
 /**
  * Convert React Flow nodes and edges to Mermaid flowchart syntax
  */
-declare function convertToMermaid(nodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
+declare function convertToMermaid(graphNodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
 
 declare const exportNodeGraphForStudio: (data: ReactFlowJsonObject) => ReactFlowJsonObject;
 
@@ -901,39 +933,26 @@ declare const generatedIdForEdge: (source: CollectionItem, target: CollectionIte
 declare const getColorFromString: (id: string) => string;
 declare const getEdgeLabelForServiceAsTarget: (data: MessageCollectionItem) => "invokes" | "publishes \nevent" | "requests" | "sends to";
 declare const getEdgeLabelForMessageAsSource: (data: MessageCollectionItem, throughChannel?: boolean) => "sends to" | "accepts" | "subscribed to" | "subscribed by";
-declare const calculatedNodes: (flow: dagre.graphlib.Graph, nodes: Node[]) => any[];
-declare const createDagreGraph: ({ ranksep, nodesep, ...rest }: any) => dagre.graphlib.Graph<{}>;
 /**
- * network-simplex produces the nicest layered layout but is O(V·E) and hangs on
- * large architecture maps. tight-tree keeps the same LR layering with far less
- * work. Callers can still force a ranker via createDagreGraph({ ranker }).
+ * Rough size of an edge label, so the layout can leave room for it on its edge
  */
-declare const LARGE_GRAPH_NODE_THRESHOLD = 80;
-declare const LARGE_GRAPH_EDGE_THRESHOLD = 200;
-declare const LARGE_GRAPH_RANKER = "tight-tree";
-declare const selectDagreRanker: (nodeCount: number, edgeCount: number, explicitRanker?: string) => string | undefined;
-declare const layoutDagreGraph: (flow: dagre.graphlib.Graph) => void;
+declare const getEdgeLabelSize: (label: unknown) => {
+    width: number;
+    height: number;
+};
 declare const createEdge: (edgeOptions: Edge) => Edge;
 declare const createNode: (values: Node) => Node;
-type DagreGraph = any;
-declare const getNodesAndEdgesFromDagre: ({ nodes, edges, defaultFlow, }: {
-    nodes: Node[];
-    edges: Edge[];
-    defaultFlow?: DagreGraph;
-}) => {
-    nodes: any[];
-    edges: Edge[];
-};
 
 declare function buildNodeData(node: GraphNode, style?: string): Record<string, unknown>;
-declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
-    rankdir?: string;
-    nodesep?: number;
-    ranksep?: number;
-    edgesep?: number;
-}, style?: string): {
+/**
+ * Lays a DSL graph out (left to right), as React Flow nodes and edges. Domains,
+ * and nodes other nodes sit in, become groups sized to fit their children.
+ */
+declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], { style }?: {
+    style?: string;
+}): Promise<{
     nodes: Node[];
     edges: Edge[];
-};
+}>;
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LARGE_GRAPH_EDGE_THRESHOLD, LARGE_GRAPH_NODE_THRESHOLD, LARGE_GRAPH_RANKER, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutDagreGraph, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners, selectDagreRanker };
+export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, NodeProps, Ed
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import react__default from 'react';
-import dagre from 'dagre';
 
 /**
  * EventCatalog resource mode
@@ -324,6 +323,17 @@ interface DslGraph {
     };
 }
 
+/** What a flow's swimlanes group its steps by */
+type SwimlaneGroupBy = "domain" | "system" | "team";
+/** What a flow's steps can be grouped by: one of those, or domains with their systems in them */
+type FlowGroupBy = SwimlaneGroupBy | "domain-system";
+/**
+ * How the groups are shown: full-width lanes stacked top to bottom, or boxes
+ * around their steps (like the pools of a process diagram), placed by the layout
+ */
+type FlowGroupStyle = "lanes" | "boxes";
+declare const isFlowGroupBy: (value: unknown) => value is FlowGroupBy;
+
 interface NodeGraphProps {
     id: string;
     title?: string;
@@ -344,6 +354,12 @@ interface NodeGraphProps {
     portalId?: string;
     showFlowWalkthrough?: boolean;
     showSearch?: boolean;
+    /** Show the settings menu (top left). Defaults to true. */
+    showMenu?: boolean;
+    /** Use a narrower search box, for small spaces. */
+    compactSearch?: boolean;
+    /** Hide the React Flow attribution (bottom right). */
+    hideAttribution?: boolean;
     zoomOnScroll?: boolean;
     designId?: string;
     isChatEnabled?: boolean;
@@ -359,6 +375,29 @@ interface NodeGraphProps {
      * flows, e.g. the System Diagram.
      */
     disableMessageAnimation?: boolean;
+    /**
+     * A simpler graph shown as level 1 in the toolbar (e.g. a system's context
+     * diagram), before this graph's detail levels.
+     */
+    overviewGraph?: {
+        nodes: Node[];
+        edges: Edge[];
+        /** Describes the level, e.g. "system context" */
+        label: string;
+        resourceKey?: string;
+    };
+    /**
+     * This graph laid out with its messages and channels hidden (level 2). Used
+     * instead of hiding them and laying the graph out again in the browser.
+     */
+    hiddenMessagesGraph?: {
+        nodes: Node[];
+        edges: Edge[];
+    };
+    /** The kind of diagram (e.g. "services"), so the level is remembered for each kind */
+    preferenceScope?: string;
+    /** Group a flow's steps to start with (the `group` URL parameter wins) */
+    swimlanes?: FlowGroupBy;
     /** When set, the graph will zoom to this node id. */
     focusNodeId?: string;
     /** Optional token to force repeated focus for the same node id. */
@@ -374,7 +413,7 @@ interface NodeGraphProps {
     }>) => Promise<boolean>;
     onResetLayout?: (resourceKey: string) => Promise<boolean>;
 }
-declare const NodeGraph: ({ id, nodes: nodesProp, edges: edgesProp, graph, title: titleProp, href, linkTo, hrefLabel, includeKey: includeKeyProp, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch: showSearchProp, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, animated: animatedProp, focusNodeId, focusRequestId, fitRequestId, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, }: 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, 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, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
 
 interface MermaidViewProps {
     nodes: Node[];
@@ -447,55 +486,48 @@ interface VisualiserSearchRef {
 }
 declare const VisualiserSearch: react.NamedExoticComponent<VisualiserSearchProps & react.RefAttributes<VisualiserSearchRef>>;
 
-interface NodeData {
-    label?: string;
+type Resource = {
     summary?: string;
-    step?: {
-        title?: string;
+    data?: {
         summary?: string;
     };
-    service?: {
-        name?: string;
+};
+type NodeData = {
+    summary?: string;
+    step?: {
+        title?: string;
         summary?: string;
-        data?: {
-            name?: string;
-            summary?: string;
-        };
-    };
-    message?: {
-        name?: string;
-        summary?: string;
-        data?: {
-            name?: string;
-            summary?: string;
-        };
-    };
-    flow?: {
-        data?: {
-            name?: string;
-        };
     };
+    service?: Resource;
+    message?: Resource;
+    agent?: Resource;
+    flow?: Resource;
+    container?: Resource;
+    dataProduct?: Resource;
     custom?: {
-        title?: string;
-        label?: string;
+        type?: string;
         summary?: string;
-    };
-    actor?: {
-        label?: string;
+        url?: string;
     };
     externalSystem?: {
-        label?: string;
+        url?: string;
     };
-}
+};
 interface CustomNode {
     id: string;
+    type?: string;
     data: NodeData;
 }
 interface StepWalkthroughProps {
     nodes: CustomNode[];
     edges: Edge[];
     isFlowVisualization: boolean;
-    onStepChange: (nodeId: string | null, highlightPaths?: string[], shouldZoomOut?: boolean) => void;
+    /**
+     * Called when the step changes: the step (null when the walkthrough ends),
+     * whether to zoom out to the whole flow, and the steps walked so far, in
+     * order (ending with this one)
+     */
+    onStepChange: (nodeId: string | null, shouldZoomOut?: boolean, trail?: string[]) => void;
     mode?: "full" | "simple";
 }
 declare const _default$w: react__default.NamedExoticComponent<StepWalkthroughProps>;
@@ -850,7 +882,7 @@ interface CustomEdgeProps extends Omit<EdgeProps, "data"> {
 }
 declare const _default$1: react.NamedExoticComponent<CustomEdgeProps>;
 
-declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
+declare const AnimatedMessageEdge: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, source, target, sourceHandleId, targetHandleId, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
 
 declare const _default: react.NamedExoticComponent<EdgeProps>;
 
@@ -859,7 +891,7 @@ declare function LabelledSmoothStepEdge(props: EdgeProps): react_jsx_runtime.JSX
 declare function LabelledStepEdge(props: EdgeProps): react_jsx_runtime.JSX.Element;
 
 declare const edgeTypes: {
-    animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
+    animated: react.MemoExoticComponent<({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, source, target, sourceHandleId, targetHandleId, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element>;
     "flow-edge": react.NamedExoticComponent<CustomEdgeProps>;
     multiline: react.NamedExoticComponent<_xyflow_react.EdgeProps>;
     default: typeof LabelledDefaultEdge;
@@ -880,7 +912,7 @@ interface MermaidExportOptions {
 /**
  * Convert React Flow nodes and edges to Mermaid flowchart syntax
  */
-declare function convertToMermaid(nodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
+declare function convertToMermaid(graphNodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
 
 declare const exportNodeGraphForStudio: (data: ReactFlowJsonObject) => ReactFlowJsonObject;
 
@@ -901,39 +933,26 @@ declare const generatedIdForEdge: (source: CollectionItem, target: CollectionIte
 declare const getColorFromString: (id: string) => string;
 declare const getEdgeLabelForServiceAsTarget: (data: MessageCollectionItem) => "invokes" | "publishes \nevent" | "requests" | "sends to";
 declare const getEdgeLabelForMessageAsSource: (data: MessageCollectionItem, throughChannel?: boolean) => "sends to" | "accepts" | "subscribed to" | "subscribed by";
-declare const calculatedNodes: (flow: dagre.graphlib.Graph, nodes: Node[]) => any[];
-declare const createDagreGraph: ({ ranksep, nodesep, ...rest }: any) => dagre.graphlib.Graph<{}>;
 /**
- * network-simplex produces the nicest layered layout but is O(V·E) and hangs on
- * large architecture maps. tight-tree keeps the same LR layering with far less
- * work. Callers can still force a ranker via createDagreGraph({ ranker }).
+ * Rough size of an edge label, so the layout can leave room for it on its edge
  */
-declare const LARGE_GRAPH_NODE_THRESHOLD = 80;
-declare const LARGE_GRAPH_EDGE_THRESHOLD = 200;
-declare const LARGE_GRAPH_RANKER = "tight-tree";
-declare const selectDagreRanker: (nodeCount: number, edgeCount: number, explicitRanker?: string) => string | undefined;
-declare const layoutDagreGraph: (flow: dagre.graphlib.Graph) => void;
+declare const getEdgeLabelSize: (label: unknown) => {
+    width: number;
+    height: number;
+};
 declare const createEdge: (edgeOptions: Edge) => Edge;
 declare const createNode: (values: Node) => Node;
-type DagreGraph = any;
-declare const getNodesAndEdgesFromDagre: ({ nodes, edges, defaultFlow, }: {
-    nodes: Node[];
-    edges: Edge[];
-    defaultFlow?: DagreGraph;
-}) => {
-    nodes: any[];
-    edges: Edge[];
-};
 
 declare function buildNodeData(node: GraphNode, style?: string): Record<string, unknown>;
-declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], options?: {
-    rankdir?: string;
-    nodesep?: number;
-    ranksep?: number;
-    edgesep?: number;
-}, style?: string): {
+/**
+ * Lays a DSL graph out (left to right), as React Flow nodes and edges. Domains,
+ * and nodes other nodes sit in, become groups sized to fit their children.
+ */
+declare function layoutGraph(nodes: GraphNode[], edges: GraphEdge[], { style }?: {
+    style?: string;
+}): Promise<{
     nodes: Node[];
     edges: Edge[];
-};
+}>;
 
-export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LARGE_GRAPH_EDGE_THRESHOLD, LARGE_GRAPH_NODE_THRESHOLD, LARGE_GRAPH_RANKER, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNestedEntityProperties, getNodesAndEdgesFromDagre, getPropertyTypeLabel, layoutDagreGraph, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners, selectDagreRanker };
+export { ACTOR, AGENT, AGENT_TOOL, _default$o as Actor, type ActorNode, type Agent$1 as Agent, _default$i as AgentNode, type AgentTool$1 as AgentTool, _default$j as AgentToolNode, type AgentToolNode as AgentToolNodeType, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel, type ChannelNode, _default$f as Command, type CommandNode, _default$8 as ContextActorNode, type ContextMenuItem, _default$b as CustomNode, DATA, type Data, type DataNode, _default$s as DataProductNode, _default$a as DomainNode, type DslGraph, ENTITY_TARGET_HANDLE_ID, EVENT, type EdgeType, _default$c as EntityNode, type EntityProperty, _default$e as Event, type EventCatalogResource, type EventNode, type ExternalSystem, _default$2 as ExternalSystem2Node, type ExternalSystemNode, _default$q as Field, type FieldNode as FieldNodeType, _default$1 as FlowEdge, _default$r as FlowExpandedNode, type FlowGroupBy, type FlowGroupStyle, _default$6 as FlowNode, FocusModeModal, type GraphEdge, type GraphEdgeType, type GraphNode, _default$5 as GroupNode, LabelledDefaultEdge, LabelledSmoothStepEdge, LabelledStepEdge, MESSAGE, type MermaidExportOptions, MermaidView, type Message, _default$t as MessageGroupExpandedNode, type MessageGroupExpandedNodeData, _default$u as MessageGroupNode, type MessageGroupNodeData, type MessageGroupNode as MessageGroupNodeType, _default as MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, _default$v as NodeContextMenu, NodeGraph, type NodeGraphProps, type NodeType, _default$k as Note, type NoteNode, NotesIndicator, OwnerIndicator, QUERY, _default$g as Query, type QueryNode, type RegisteredNode, SERVICE, _default$h as Service, type ServiceNode, type Service as ServiceType, _default$4 as StepNode, _default$w as StepWalkthrough, _default$7 as SystemGroupNode, _default$9 as SystemNode, _default$3 as UserNode, VIEW, type View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$n as actorConfig, buildNodeData, convertToMermaid, createEdge, createNode, _default$m as dataNodeConfig, edgeTypes, _default$d as eventConfig, exportNodeGraphForStudio, _default$l as externalSystemConfig, _default$p as fieldConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getEdgeLabelSize, getNestedEntityProperties, getPropertyTypeLabel, isFlowGroupBy, layoutGraph, nodeComponents, nodeConfigs, normalizeOwners };