@eventcatalog/core 4.12.3 → 5.0.0-beta.0

package/eventcatalog/src/utils/node-graphs/domains-node-graph.ts

@@ -1,13 +1,11 @@
 import { getCollection } from 'astro:content';
 import {
-  createDagreGraph,
-  calculatedNodes,
   generateIdForNode,
   getEdgeLabelForServiceAsTarget,
   generatedIdForEdge,
   createEdge,
-  layoutDagreGraph,
 } from '@utils/node-graphs/utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 import { getNodesAndEdges as getServicesNodeAndEdges } from './services-node-graph';
 import { getNodesAndEdges as getAgentsNodeAndEdges } from './agents-node-graph';
 import { getNodesAndEdges as getDataProductsNodeAndEdges } from './data-products-node-graph';
@@ -16,12 +14,9 @@ import { createVersionedMap, findInMap } from '@utils/collections/util';
 import { getProducersOfMessage } from '@utils/collections/services';
 import { getProducersOfMessage as getAgentProducersOfMessage } from '@utils/collections/agents';
 
-type DagreGraph = any;
-
 interface NodesAndEdgesProps {
   id: string;
   version: string;
-  defaultFlow?: DagreGraph;
   mode: 'simple' | 'full';
   group?: boolean;
   channelRenderMode?: 'single' | 'flat';
@@ -31,13 +26,11 @@ interface NodesAndEdgesProps {
 export const getNodesAndEdges = async ({
   id,
   version,
-  defaultFlow,
   mode = 'simple',
   group = false,
   channelRenderMode = 'flat',
   layout = true,
 }: NodesAndEdgesProps) => {
-  const flow = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 50, edgesep: 50 });
   let nodes = new Map(),
     edges = new Map();
 
@@ -97,7 +90,6 @@ export const getNodesAndEdges = async ({
     const { nodes: serviceNodes, edges: serviceEdges } = await getServicesNodeAndEdges({
       id: service.id,
       version: service.version,
-      defaultFlow: flow,
       mode,
       renderAllEdges: true,
       channelRenderMode,
@@ -122,7 +114,6 @@ export const getNodesAndEdges = async ({
     const { nodes: agentNodes, edges: agentEdges } = await getAgentsNodeAndEdges({
       id: agent.id,
       version: agent.version,
-      defaultFlow: flow,
       mode,
       renderAllEdges: true,
       channelRenderMode,
@@ -139,7 +130,6 @@ export const getNodesAndEdges = async ({
     const { nodes: dataProductNodes, edges: dataProductEdges } = await getDataProductsNodeAndEdges({
       id: dataProduct.id,
       version: dataProduct.version,
-      defaultFlow: flow,
       mode,
       layout: false,
     });
@@ -154,7 +144,6 @@ export const getNodesAndEdges = async ({
     const { nodes: subDomainNodes, edges: subDomainEdges } = await getNodesAndEdges({
       id: subDomain.id,
       version: subDomain.version,
-      defaultFlow: flow,
       mode,
       group: true,
       channelRenderMode,
@@ -175,12 +164,6 @@ export const getNodesAndEdges = async ({
     });
   }
 
-  if (layout) {
-    layoutDagreGraph(flow);
-  }
-
-  return {
-    nodes: calculatedNodes(flow, Array.from(nodes.values())),
-    edges: [...edges.values()],
-  };
+  const graph = { nodes: [...nodes.values()], edges: [...edges.values()] };
+  return layout ? layoutNodeGraph(graph) : graph;
 };

package/eventcatalog/src/utils/node-graphs/export-mermaid.ts

@@ -33,6 +33,9 @@ const NODE_SHAPE_MAP: Record<string, [string, string]> = {
   channel: ['[(', ')]'],
   domains: ['[', ']'], // rectangle
   domain: ['[', ']'],
+  'context-domain': ['[', ']'], // another domain, shown as a single card
+  systems: ['[[', ']]'], // a system shown as a single node
+  'context-actor': ['((', '))'], // circle
   flows: ['([', '])'], // stadium (rounded)
   flow: ['([', '])'],
   systems: ['[[', ']]'],
@@ -52,6 +55,9 @@ const NODE_SHAPE_MAP: Record<string, [string, string]> = {
   note: ['[', ']'], // rectangle
 };
 
+/** Node types that are boundaries around other nodes, rendered as subgraphs */
+const GROUP_NODE_TYPES = new Set(['system-group', 'domain-group']);
+
 /**
  * Mermaid class definitions for styling different node types
  */
@@ -72,6 +78,9 @@ const NODE_STYLE_CLASSES: Record<string, string> = {
   channel: 'fill:#6b7280,stroke:#374151,color:#fff',
   domains: 'fill:#eab308,stroke:#a16207,color:#000',
   domain: 'fill:#eab308,stroke:#a16207,color:#000',
+  'context-domain': 'fill:#eab308,stroke:#a16207,color:#000',
+  systems: 'fill:#7c3aed,stroke:#5b21b6,color:#fff',
+  'context-actor': 'fill:#8b5cf6,stroke:#6d28d9,color:#fff',
   flows: 'fill:#14b8a6,stroke:#0f766e,color:#fff',
   flow: 'fill:#14b8a6,stroke:#0f766e,color:#fff',
   systems: 'fill:#8b5cf6,stroke:#6d28d9,color:#fff',
@@ -176,6 +185,16 @@ export function getNodeLabel(node: Node): string {
     return formatLabelWithVersion(name, version);
   }
 
+  if (type === 'systems' || type === 'system-group') {
+    const system = (data as any).system;
+    return formatLabelWithVersion(system?.name || system?.id || node.id, system?.version);
+  }
+
+  if (type === 'context-domain' || type === 'domain-group') {
+    const domain = (data as any).domain;
+    return formatLabelWithVersion(domain?.name || domain?.id || node.id, domain?.version);
+  }
+
   if (type === 'domains' || type === 'domain') {
     const domain = (data as any).domain;
     // Domain data can be nested in .data
@@ -230,6 +249,11 @@ export function getNodeLabel(node: Node): string {
     return entity?.name || entity?.id || node.id;
   }
 
+  if (type === 'custom') {
+    const custom = (data as any).custom ?? {};
+    return custom.title || (data as any).step?.title || node.id;
+  }
+
   if (type === 'note') {
     return (data as any).text || (data as any).label || 'Note';
   }
@@ -286,16 +310,37 @@ export function convertToMermaid(nodes: Node[], edges: Edge[], options: MermaidE
     });
   }
 
-  // Add node definitions
+  // Add node definitions. Nodes inside a group (a system or domain boundary)
+  // are nested in a subgraph for that group, so containment is kept
   lines.push('');
   lines.push('    %% Nodes');
 
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const childrenOf = new Map<string, Node[]>();
+  const topLevelNodes: Node[] = [];
   nodes.forEach((node) => {
+    if (node.parentId && nodeIds.has(node.parentId)) {
+      childrenOf.set(node.parentId, [...(childrenOf.get(node.parentId) ?? []), node]);
+    } else {
+      topLevelNodes.push(node);
+    }
+  });
+
+  const addNode = (node: Node, depth: number) => {
+    const indent = '    '.repeat(depth);
     const sanitizedId = sanitizeMermaidId(node.id);
     const label = escapeMermaidLabel(getNodeLabel(node));
-    const [prefix, suffix] = getMermaidNodeShape(node.type || 'custom');
+    const children = childrenOf.get(node.id);
 
-    let nodeLine = `    ${sanitizedId}${prefix}"${label}"${suffix}`;
+    if (children || GROUP_NODE_TYPES.has(node.type ?? '')) {
+      lines.push(`${indent}subgraph ${sanitizedId}["${label}"]`);
+      children?.forEach((child) => addNode(child, depth + 1));
+      lines.push(`${indent}end`);
+      return;
+    }
+
+    const [prefix, suffix] = getMermaidNodeShape(node.type || 'custom');
+    let nodeLine = `${indent}${sanitizedId}${prefix}"${label}"${suffix}`;
 
     // Add class reference if styles are enabled
     if (includeStyles && node.type && usedTypes.has(node.type)) {
@@ -303,7 +348,9 @@ export function convertToMermaid(nodes: Node[], edges: Edge[], options: MermaidE
     }
 
     lines.push(nodeLine);
-  });
+  };
+
+  topLevelNodes.forEach((node) => addNode(node, 1));
 
   // Add edge definitions
   lines.push('');

package/eventcatalog/src/utils/node-graphs/field-node-graph.ts

@@ -1,15 +1,6 @@
 import type { Node, Edge } from '@xyflow/react';
-import dagre from 'dagre';
-import {
-  createDagreGraph,
-  calculatedNodes,
-  createEdge,
-  createNode,
-  buildContextMenuForMessage,
-  buildContextMenuForService,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
-} from './utils/utils';
+import { createEdge, createNode, buildContextMenuForMessage, buildContextMenuForService } from './utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 
 export interface FieldOccurrence {
   messageId: string;
@@ -28,15 +19,16 @@ interface Props {
   fieldType: string;
   occurrences: FieldOccurrence[];
   mode?: 'simple' | 'full';
+  layout?: boolean;
 }
 
-export const getNodesAndEdges = ({
+export const getNodesAndEdges = async ({
   fieldPath,
   fieldType,
   occurrences,
   mode = 'full',
-}: Props): { nodes: Node[]; edges: Edge[] } => {
-  const flow = createDagreGraph({ ranksep: 200, nodesep: 50 });
+  layout = true,
+}: Props): Promise<{ nodes: Node[]; edges: Edge[] }> => {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
   const addedNodes = new Set<string>();
@@ -179,14 +171,7 @@ export const getNodesAndEdges = ({
     }
   }
 
-  // Apply layout
-  for (const node of nodes) {
-    flow.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
-  }
-  for (const edge of edges) {
-    flow.setEdge(edge.source, edge.target);
-  }
-  dagre.layout(flow);
+  if (!layout) return { nodes, edges };
 
-  return { nodes: calculatedNodes(flow, nodes), edges };
+  return layoutNodeGraph({ nodes, edges });
 };

package/eventcatalog/src/utils/node-graphs/flow-lanes.ts

@@ -0,0 +1,119 @@
+import type { CollectionEntry } from 'astro:content';
+
+export type Lane = { id: string; name: string };
+
+/**
+ * The lanes a flow step's resource belongs to, for grouping a flow into
+ * swimlanes by domain, system or owning team. Only set for resources that
+ * belong somewhere themselves (services, agents, data stores, data products,
+ * systems);
+ * the visualiser puts other steps (messages, custom steps, sub-flows) in the
+ * lane of the step that leads to them. `external` steps (actors and external
+ * systems) get a lane of their own.
+ */
+export type StepLanes = {
+  domain?: Lane;
+  system?: Lane;
+  team?: Lane;
+  external?: boolean;
+};
+
+type LaneCollections = {
+  domains: CollectionEntry<'domains'>[];
+  systems: CollectionEntry<'systems'>[];
+  teams: CollectionEntry<'teams'>[];
+  users: CollectionEntry<'users'>[];
+};
+
+/** A resource a step points at (a service, agent, data store, data product or system) */
+type Resource = { data: { id: string; name?: string; owners?: (string | { id: string })[] } };
+
+// Lanes use the latest version of each domain and system (as the collection
+// utils do when they don't ask for every version)
+const isLatest = (entry: { filePath?: string }) => !entry.filePath?.includes('versioned');
+const toLane = (entry: Resource): Lane => ({ id: entry.data.id, name: entry.data.name || entry.data.id });
+const pointerIds = (pointers?: { id: string }[]) => (pointers || []).map((pointer) => pointer.id);
+
+/**
+ * Indexes which domain, system and team each resource belongs to (by id).
+ * A resource listed by a domain directly belongs to that domain, otherwise to
+ * the domain of the system it's in. Built once per flow from the collections,
+ * rather than asking `getDomainsForService`, `getOwner` and so on for each step,
+ * so it follows their rules: latest versions only, and hidden teams and users
+ * are left out.
+ */
+export const createLaneIndex = ({ domains, systems, teams, users }: LaneCollections) => {
+  const systemOf = new Map<string, Lane>();
+  const domainOf = new Map<string, Lane>();
+
+  const latestSystems = systems.filter(isLatest);
+  for (const system of latestSystems) {
+    for (const id of [...pointerIds(system.data.services), ...pointerIds(system.data.containers)]) {
+      if (!systemOf.has(id)) systemOf.set(id, toLane(system));
+    }
+  }
+
+  const latestDomains = domains.filter(isLatest);
+  // Resources a domain lists directly win over ones it gets through its systems
+  for (const domain of latestDomains) {
+    const direct = [
+      ...pointerIds(domain.data.services),
+      ...pointerIds(domain.data.agents),
+      ...pointerIds(domain.data['data-products']),
+      ...pointerIds(domain.data.systems),
+    ];
+    for (const id of direct) {
+      if (!domainOf.has(id)) domainOf.set(id, toLane(domain));
+    }
+  }
+  for (const system of latestSystems) {
+    const domain = domainOf.get(system.data.id);
+    if (!domain) continue;
+    for (const id of [...pointerIds(system.data.services), ...pointerIds(system.data.containers)]) {
+      if (!domainOf.has(id)) domainOf.set(id, domain);
+    }
+  }
+
+  const owners = new Map<string, { lane: Lane; isTeam: boolean }>();
+  const hiddenOwners = new Set<string>();
+  for (const [entries, isTeam] of [
+    [users, false],
+    [teams, true],
+  ] as const) {
+    for (const owner of entries) {
+      if (owner.data.hidden) hiddenOwners.add(owner.data.id);
+      else owners.set(owner.data.id, { lane: toLane(owner), isTeam });
+    }
+  }
+
+  // A team owner wins over a user owner
+  const teamOf = (resource: Resource): Lane | undefined => {
+    const resolved = (resource.data.owners || [])
+      .map((owner) => (typeof owner === 'string' ? owner : owner.id))
+      .filter((id) => !hiddenOwners.has(id))
+      .map((id) => owners.get(id) ?? { lane: { id, name: id }, isTeam: false })
+      .sort((a, b) => Number(b.isTeam) - Number(a.isTeam));
+    return resolved[0]?.lane;
+  };
+
+  const lanesFor = (resource: Resource): StepLanes | undefined => {
+    const id = resource.data.id;
+    const team = teamOf(resource);
+    const lanes: StepLanes = {
+      ...(domainOf.has(id) && { domain: domainOf.get(id) }),
+      ...(systemOf.has(id) && { system: systemOf.get(id) }),
+      ...(team && { team }),
+    };
+    return Object.keys(lanes).length > 0 ? lanes : undefined;
+  };
+
+  /** A system is in its own system lane (and the domain that lists it) */
+  const lanesForSystem = (system: Resource): StepLanes => ({
+    ...lanesFor(system),
+    system: toLane(system),
+  });
+
+  return { lanesFor, lanesForSystem };
+};
+
+export type LaneIndex = ReturnType<typeof createLaneIndex>;

package/eventcatalog/src/utils/node-graphs/flows-node-graph.ts

@@ -1,26 +1,20 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import {
-  createDagreGraph,
-  calculatedNodes,
-  DEFAULT_NODE_WIDTH,
-  DEFAULT_NODE_HEIGHT,
   buildContextMenuForResource,
   buildContextMenuForService,
   buildContextMenuForSystem,
-  layoutDagreGraph,
 } from '@utils/node-graphs/utils/utils';
+import { layoutNodeGraph } from '@utils/node-graphs/layout-node-graph';
 import { MarkerType } from '@xyflow/react';
 import type { Node as NodeType } from '@xyflow/react';
 import { createVersionedMap, findInMap } from '@utils/collections/util';
-
-type DagreGraph = any;
+import { createLaneIndex, type LaneIndex } from '@utils/node-graphs/flow-lanes';
 
 interface Props {
   id: string;
   version: string;
-  defaultFlow?: DagreGraph;
   mode?: 'simple' | 'full';
-  renderAllEdges?: boolean;
+  layout?: boolean;
 }
 
 interface Maps {
@@ -31,6 +25,8 @@ interface Maps {
   containerMap: Map<string, any[]>;
   dataProductMap: Map<string, any[]>;
   systemMap: Map<string, any[]>;
+  channelMap: Map<string, any[]>;
+  laneIndex: LaneIndex;
 }
 
 const getServiceNode = (step: any, serviceMap: Map<string, any[]>) => {
@@ -90,6 +86,15 @@ const getSystemNode = (step: any, systemMap: Map<string, any[]>) => {
   };
 };
 
+const getChannelNode = (step: any, channelMap: Map<string, any[]>) => {
+  const channel = findInMap(channelMap, step.channel.id, step.channel.version);
+  return {
+    ...step,
+    type: channel ? 'channels' : 'step',
+    channel,
+  };
+};
+
 const getMessageNode = (step: any, messageMap: Map<string, any[]>) => {
   const message = findInMap(messageMap, step.message.id, step.message.version);
   return {
@@ -99,6 +104,68 @@ const getMessageNode = (step: any, messageMap: Map<string, any[]>) => {
   };
 };
 
+// The whole graph is sent to the browser, so a step's resource is in its node's
+// data once (e.g. `data.service`), without what's only needed to build the
+// catalog (its markdown body, file path, ...), and the step is just the step
+const RESOURCE_KEYS = ['message', 'agent', 'service', 'flow', 'container', 'dataProduct', 'system', 'channel'];
+const resourceForNode = (entry: any) => {
+  // Only what the nodes read: its id, collection and frontmatter (nested, as
+  // e.g. the sub-flow node reads `flow.data`, and spread on top)
+  const { id, collection, data } = entry;
+  return { id, collection, data, ...data };
+};
+const stepForNode = (step: any) => {
+  const own = { ...step, ...step.data };
+  RESOURCE_KEYS.forEach((key) => delete own[key]);
+  return { ...own, title: titleOf(step) };
+};
+
+// A step without a title is named after what it points at (or its id). A
+// custom step is labelled with its own title first, as its node is.
+const titleOf = (step: any): string => {
+  if (step.custom?.title) return step.custom.title;
+  if (step.title) return step.title;
+  const resource = RESOURCE_KEYS.map((key) => step[key]).find((entry) => entry?.data);
+  return resource?.data.name || resource?.data.id || step.actor?.name || step.externalSystem?.name || String(step.id);
+};
+
+// Mistakes in a flow (a typo in a next step, a resource that was renamed)
+// would otherwise just drop an arrow or draw a plain box, so they're logged,
+// once each (a flow is drawn on several pages). Once per process on purpose:
+// in `astro dev` a problem that's fixed and then made again isn't logged again
+// until the server restarts, which is fine for a warning.
+const warned = new Set<string>();
+const warnOnce = (flow: any, problem: string) => {
+  const message = `[flows] Flow "${flow.data.id}" (${flow.data.version}): ${problem}`;
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(message);
+};
+
+// The keys a step points at a resource with, as authors write them
+const POINTER_KEYS: Record<string, string> = {
+  message: 'message',
+  agent: 'agent',
+  service: 'service',
+  systems: 'system',
+  system: 'system',
+  channel: 'channel',
+  flow: 'flow',
+  container: 'container',
+  dataProduct: 'data product',
+};
+const warnAboutMissingResource = (flow: any, step: any, hydrated: any) => {
+  for (const [key, kind] of Object.entries(POINTER_KEYS)) {
+    const pointer = step[key];
+    const resourceKey = key === 'systems' ? 'system' : key;
+    if (!pointer || hydrated[resourceKey]) continue;
+    warnOnce(
+      flow,
+      `step "${step.id}" points at ${kind} "${pointer.id}" (${pointer.version ?? 'latest'}), which is not in the catalog, so it is shown as a plain step.`
+    );
+  }
+};
+
 // Rewrite every id/source/target in a precomputed sub-flow graph with a
 // namespace prefix so inlined copies don't collide with the parent. Nested
 // `data.expandedNodes` / `data.expandedEdges` payloads are rewritten too so
@@ -145,6 +212,7 @@ const buildFlowGraphInternal = (
     if (step.flow) return getFlowNode(step, maps.flowMap);
     if (step.container) return getContainerNode(step, maps.containerMap);
     if (step.dataProduct) return getDataProductNode(step, maps.dataProductMap);
+    if (step.channel) return getChannelNode(step, maps.channelMap);
     if (step.message) return getMessageNode(step, maps.messageMap);
     if (step.actor) return { ...step, type: 'actor', actor: step.actor };
     if (step.custom) return { ...step, type: 'custom', custom: step.custom };
@@ -152,23 +220,26 @@ const buildFlowGraphInternal = (
     return { ...step, type: 'step' };
   });
 
-  hydratedSteps.forEach((step: any, index: number) => {
+  steps.forEach((step: any, index: number) => warnAboutMissingResource(flow, step, hydratedSteps[index]));
+  const stepIds = new Set(steps.map((step: any) => String(step.id)));
+
+  hydratedSteps.forEach((step: any) => {
     const node: NodeType = {
       id: stepNodeId(step.id),
       sourcePosition: 'right',
       targetPosition: 'left',
       data: {
         mode,
-        step: { ...step, ...step.data },
+        step: stepForNode(step),
         showTarget: true,
         showSource: true,
       },
-      position: { x: 250, y: index * 150 },
+      position: { x: 0, y: 0 },
       type: step.type,
     } as NodeType;
 
     if (step.agent) {
-      node.data.agent = { ...step.agent, ...step.agent.data };
+      node.data.agent = resourceForNode(step.agent);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'agents',
         id: step.agent.data.id,
@@ -176,7 +247,7 @@ const buildFlowGraphInternal = (
       });
     }
     if (step.service) {
-      node.data.service = { ...step.service, ...step.service.data };
+      node.data.service = resourceForNode(step.service);
       node.data.contextMenu = buildContextMenuForService({
         id: step.service.data.id,
         version: step.service.data.version,
@@ -185,14 +256,14 @@ const buildFlowGraphInternal = (
       });
     }
     if (step.system?.data) {
-      node.data.system = { ...step.system.data };
+      node.data.system = resourceForNode(step.system);
       node.data.contextMenu = buildContextMenuForSystem({
         id: step.system.data.id,
         version: step.system.data.version,
       });
     }
     if (step.flow) {
-      node.data.flow = { ...step.flow, ...step.flow.data };
+      node.data.flow = resourceForNode(step.flow);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'flows',
         id: step.flow.data.id,
@@ -215,7 +286,7 @@ const buildFlowGraphInternal = (
       }
     }
     if (step.message) {
-      node.data.message = { ...step.message, ...step.message.data };
+      node.data.message = resourceForNode(step.message);
       node.data.contextMenu = buildContextMenuForResource({
         collection: step.message.collection,
         id: step.message.data.id,
@@ -224,15 +295,23 @@ const buildFlowGraphInternal = (
     }
     if (step.container?.data) {
       node.data.data = { ...step.container.data };
-      node.data.container = { ...step.container, ...step.container.data };
+      node.data.container = resourceForNode(step.container);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'containers',
         id: step.container.data.id,
         version: step.container.data.version,
       });
     }
+    if (step.channel?.data) {
+      node.data.channel = resourceForNode(step.channel);
+      node.data.contextMenu = buildContextMenuForResource({
+        collection: 'channels',
+        id: step.channel.data.id,
+        version: step.channel.data.version,
+      });
+    }
     if (step.dataProduct?.data) {
-      node.data.dataProduct = { ...step.dataProduct, ...step.dataProduct.data };
+      node.data.dataProduct = resourceForNode(step.dataProduct);
       node.data.contextMenu = buildContextMenuForResource({
         collection: 'data-products',
         id: step.dataProduct.data.id,
@@ -245,6 +324,17 @@ const buildFlowGraphInternal = (
     }
     if (step.externalSystem) node.data.externalSystem = { ...step.externalSystem, ...step.externalSystem.data };
     if (step.custom) node.data.custom = { ...step.custom, ...step.custom.data };
+
+    // Which domain, system and team the step belongs to, for swimlanes
+    const resource = step.agent || step.service || step.container || step.dataProduct;
+    const lanes =
+      step.actor || step.externalSystem
+        ? { external: true }
+        : step.system?.data
+          ? maps.laneIndex.lanesForSystem(step.system)
+          : resource && maps.laneIndex.lanesFor(resource);
+    if (lanes) node.data.lanes = lanes;
+
     nodes.push(node);
   });
 
@@ -267,6 +357,10 @@ const buildFlowGraphInternal = (
     });
 
     paths.forEach((path: any) => {
+      if (!stepIds.has(String(path.id))) {
+        warnOnce(flow, `step "${step.id}" leads to step "${path.id}", but the flow has no step with that id.`);
+        return;
+      }
       edges.push({
         id: `step-${step.id}-step-${path.id}`,
         source: stepNodeId(step.id),
@@ -291,20 +385,23 @@ const buildFlowGraphInternal = (
   return { nodes, edges };
 };
 
-export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simple', renderAllEdges = false }: Props) => {
-  const graph = defaultFlow || createDagreGraph({ ranksep: 360, nodesep: 200 });
-
-  const [flows, events, commands, queries, agents, services, containers, dataProducts, systems] = await Promise.all([
-    getCollection('flows'),
-    getCollection('events'),
-    getCollection('commands'),
-    getCollection('queries'),
-    getCollection('agents'),
-    getCollection('services'),
-    getCollection('containers'),
-    getCollection('data-products'),
-    getCollection('systems'),
-  ]);
+export const getNodesAndEdges = async ({ id, version, mode = 'simple', layout = true }: Props) => {
+  const [flows, events, commands, queries, agents, services, containers, dataProducts, domains, systems, channels, teams, users] =
+    await Promise.all([
+      getCollection('flows'),
+      getCollection('events'),
+      getCollection('commands'),
+      getCollection('queries'),
+      getCollection('agents'),
+      getCollection('services'),
+      getCollection('containers'),
+      getCollection('data-products'),
+      getCollection('domains'),
+      getCollection('systems'),
+      getCollection('channels'),
+      getCollection('teams'),
+      getCollection('users'),
+    ]);
 
   const flow = flows.find((flow) => flow.data.id === id && flow.data.version === version);
 
@@ -324,6 +421,8 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     containerMap: createVersionedMap(containers),
     dataProductMap: createVersionedMap(dataProducts),
     systemMap: createVersionedMap(systems),
+    channelMap: createVersionedMap(channels),
+    laneIndex: createLaneIndex({ domains, systems, teams, users }),
   };
 
   const subFlowCache = new Map<string, { nodes: any[]; edges: any[] }>();
@@ -335,18 +434,5 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
     new Set([`${flow.data.id}@${flow.data.version}`])
   );
 
-  nodes.forEach((node: any) => {
-    graph.setNode(node.id, { width: DEFAULT_NODE_WIDTH, height: DEFAULT_NODE_HEIGHT });
-  });
-
-  edges.forEach((edge: any) => {
-    graph.setEdge(edge.source, edge.target);
-  });
-
-  layoutDagreGraph(graph);
-
-  return {
-    nodes: calculatedNodes(graph, nodes),
-    edges: edges,
-  };
+  return layout ? await layoutNodeGraph({ nodes, edges }) : { nodes, edges };
 };