@eventcatalog/visualiser 5.0.1 → 5.1.0

package/dist/index.mjs

@@ -20,6 +20,7 @@ import {
   DataNode_default,
   DataProduct_default,
   DiagramBackground_default,
+  DiagramMiniMap_default,
   DomainCard_default,
   Domain_default,
   ENTITY_TARGET_HANDLE_ID,
@@ -67,21 +68,19 @@ import {
   config_default3,
   config_default4,
   config_default5,
-  convertToMermaid,
   diagramNodeComponents,
   edgeTypes,
   exportNodeGraphForStudio,
   getLegend,
   getNestedEntityProperties,
   getPropertyTypeLabel,
-  isFlowGroupBy,
   layoutGraph,
   memoNode,
   nodeComponents,
   nodeConfigs,
   normalizeOwners,
   pauseEdgeAnimations
-} from "./chunk-KVTGV7VK.mjs";
+} from "./chunk-ZHXUMAPK.mjs";
 import {
   ACTOR,
   AGENT,
@@ -94,6 +93,7 @@ import {
   QUERY,
   SERVICE,
   VIEW,
+  convertToMermaid,
   createEdge,
   createNode,
   generateIdForNode,
@@ -102,8 +102,9 @@ import {
   getColorFromString,
   getEdgeLabelForMessageAsSource,
   getEdgeLabelForServiceAsTarget,
-  getEdgeLabelSize
-} from "./chunk-NOHQEQD7.mjs";
+  getEdgeLabelSize,
+  isFlowGroupBy
+} from "./chunk-P2DH6CFV.mjs";
 export {
   ACTOR,
   AGENT,
@@ -132,6 +133,7 @@ export {
   DataNode_default as Data,
   DataProduct_default as DataProductNode,
   DiagramBackground_default as DiagramBackground,
+  DiagramMiniMap_default as DiagramMiniMap,
   DomainCard_default as DomainCardNode,
   Domain_default as DomainNode,
   ENTITY_TARGET_HANDLE_ID,

package/dist/layout.d.mts

@@ -1,5 +1,6 @@
 export { C as CopiedEdgeRoute, E as EdgeRoute, L as LayoutGraph, a as LayoutSize, g as getNodeSize, l as layoutWithElk } from './elk-layout-CpbZ6hB9.mjs';
 import { Node, Edge } from '@xyflow/react';
+export { M as MermaidExportOptions, c as convertToMermaid } from './export-mermaid-CbER9roE.mjs';
 
 declare const isMessageNode: (node: Node) => boolean;
 /**

package/dist/layout.d.ts

@@ -1,4 +1,4 @@
-export { C as CopiedEdgeRoute, E as EdgeRoute, L as LayoutGraph, a as LayoutSize, g as getNodeSize, l as layoutWithElk } from './elk-layout-CpbZ6hB9.js';
+export { C as CopiedEdgeRoute, E as EdgeRoute, L as LayoutGraph, a as LayoutSize, M as MermaidExportOptions, c as convertToMermaid, g as getNodeSize, l as layoutWithElk } from './export-mermaid-xL98eL1l.js';
 import { Node, Edge } from '@xyflow/react';
 
 declare const isMessageNode: (node: Node) => boolean;

package/dist/layout.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/layout.ts
 var layout_exports = {};
 __export(layout_exports, {
+  convertToMermaid: () => convertToMermaid,
   getMessagesLabel: () => getMessagesLabel,
   getNodeSize: () => getNodeSize,
   hideMessageNodes: () => hideMessageNodes,
@@ -418,8 +419,460 @@ var hideNodes = (nodes, edges, isHidden) => {
   };
 };
 var hideMessageNodes = (nodes, edges) => hideNodes(nodes, edges, isCarrier);
+
+// src/utils/swimlanes.ts
+var SWIMLANE_NODE_TYPE = "swimlane";
+var isSwimlaneNode = (node) => node.type === SWIMLANE_NODE_TYPE;
+
+// src/utils/export-mermaid.ts
+var NODE_SHAPE_MAP = {
+  agents: ["[[", "]]"],
+  agent: ["[[", "]]"],
+  agentTool: ["[", "]"],
+  "agent-tool": ["[", "]"],
+  services: ["[[", "]]"],
+  // stadium shape
+  service: ["[[", "]]"],
+  events: [">", "]"],
+  // flag/asymmetric shape (message-like)
+  event: [">", "]"],
+  commands: [">", "]"],
+  // flag/asymmetric shape (message-like)
+  command: [">", "]"],
+  queries: ["{{", "}}"],
+  // hexagon
+  query: ["{{", "}}"],
+  // Parallelogram: what messages pass through, not a cylinder, which reads as
+  // a database (and is what data stores are drawn as)
+  channels: ["[/", "/]"],
+  channel: ["[/", "/]"],
+  domains: ["[", "]"],
+  // rectangle
+  domain: ["[", "]"],
+  "context-domain": ["[", "]"],
+  // another domain, shown as a single card
+  flows: ["([", "])"],
+  // stadium (rounded)
+  flow: ["([", "])"],
+  flowExpanded: ["([", "])"],
+  systems: ["[[", "]]"],
+  // a system shown as a single node
+  system: ["[[", "]]"],
+  step: ["[", "]"],
+  // rectangle
+  user: ["((", "))"],
+  // circle
+  actor: ["((", "))"],
+  // circle
+  "context-actor": ["((", "))"],
+  // circle
+  externalSystem: ["[[", "]]"],
+  // stadium
+  "external-system": ["[[", "]]"],
+  data: ["[(", ")]"],
+  // cylinder (database)
+  container: ["[(", ")]"],
+  "data-product": ["[[", "]]"],
+  // stadium
+  "data-products": ["[[", "]]"],
+  entities: ["[", "]"],
+  // rectangle
+  entity: ["[", "]"],
+  custom: ["[", "]"],
+  // rectangle
+  view: ["[", "]"],
+  // rectangle
+  note: ["[", "]"],
+  // rectangle
+  field: ["[(", ")]"],
+  // cylinder
+  fields: ["[(", ")]"],
+  // cylinder
+  messageGroup: ["[[", "]]"],
+  messageGroupExpanded: ["[[", "]]"]
+};
+var NODE_STYLE_CLASSES = {
+  agents: "fill:#0ea5e9,stroke:#0369a1,color:#fff",
+  agent: "fill:#0ea5e9,stroke:#0369a1,color:#fff",
+  agentTool: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  "agent-tool": "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  services: "fill:#ec4899,stroke:#be185d,color:#fff",
+  service: "fill:#ec4899,stroke:#be185d,color:#fff",
+  events: "fill:#f97316,stroke:#c2410c,color:#fff",
+  event: "fill:#f97316,stroke:#c2410c,color:#fff",
+  commands: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  command: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  queries: "fill:#22c55e,stroke:#15803d,color:#fff",
+  query: "fill:#22c55e,stroke:#15803d,color:#fff",
+  channels: "fill:#6b7280,stroke:#374151,color:#fff",
+  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",
+  flows: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  flow: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  flowExpanded: "fill:#14b8a6,stroke:#0f766e,color:#fff",
+  systems: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  system: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  step: "fill:#374151,stroke:#1f2937,color:#fff",
+  user: "fill:#8b5cf6,stroke:#6d28d9,color:#fff",
+  actor: "fill:#eab308,stroke:#a16207,color:#000",
+  "context-actor": "fill:#eab308,stroke:#a16207,color:#000",
+  // yellow, as actors are on the diagram
+  externalSystem: "fill:#ec4899,stroke:#be185d,color:#fff",
+  "external-system": "fill:#ec4899,stroke:#be185d,color:#fff",
+  data: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  container: "fill:#3b82f6,stroke:#1d4ed8,color:#fff",
+  "data-product": "fill:#6366f1,stroke:#4338ca,color:#fff",
+  "data-products": "fill:#6366f1,stroke:#4338ca,color:#fff",
+  entities: "fill:#6b7280,stroke:#374151,color:#fff",
+  entity: "fill:#6b7280,stroke:#374151,color:#fff",
+  custom: "fill:#9ca3af,stroke:#6b7280,color:#000",
+  view: "fill:#9ca3af,stroke:#6b7280,color:#000",
+  note: "fill:#fef3c7,stroke:#d97706,color:#000",
+  field: "fill:#06b6d4,stroke:#0891b2,color:#fff",
+  fields: "fill:#06b6d4,stroke:#0891b2,color:#fff",
+  messageGroup: "fill:#7c3aed,stroke:#5b21b6,color:#fff",
+  messageGroupExpanded: "fill:#7c3aed,stroke:#5b21b6,color:#fff"
+};
+var GROUP_NODE_TYPES = /* @__PURE__ */ new Set(["system-group", "domain-group", "group"]);
+var GROUP_STYLE_CLASSES = {
+  domainGroup: "fill:#eab30814,stroke:#ca8a04,stroke-width:2px,stroke-dasharray:6 4,color:#a16207",
+  subdomainGroup: "fill:#eab3080d,stroke:#ca8a04,stroke-dasharray:4 4,color:#a16207",
+  otherDomainGroup: "fill:#9ca3af14,stroke:#9ca3af,stroke-dasharray:4 4,color:#6b7280",
+  systemGroup: "fill:#8b5cf614,stroke:#8b5cf6,stroke-width:2px,color:#7c3aed",
+  laneGroup: "fill:#9ca3af0d,stroke:#9ca3af,stroke-dasharray:4 4,color:#6b7280"
+};
+var FOCUSED_STYLE = "stroke-width:4px";
+var CROSS_DOMAIN_LINK_STYLE = "stroke:#4f46e5,stroke-width:3px";
+var RESERVED_IDS = /* @__PURE__ */ new Set([
+  "end",
+  "subgraph",
+  "graph",
+  "flowchart",
+  "style",
+  "class",
+  "classdef",
+  "click",
+  "linkstyle",
+  "call",
+  "href"
+]);
+function sanitizeMermaidId(id) {
+  const sanitized = id.replace(/[^a-zA-Z0-9_]/g, "_");
+  return RESERVED_IDS.has(sanitized.toLowerCase()) ? `node_${sanitized}` : sanitized;
+}
+function normaliseLines(label) {
+  return label.split("\n").map((line) => line.replace(/\s+/g, " ").trim()).filter(Boolean);
+}
+function escapeMermaidLabel(label) {
+  return label.replace(/#/g, "#35;").replace(/"/g, "#quot;");
+}
+function getMermaidNodeShape(type) {
+  return NODE_SHAPE_MAP[type] || ["[", "]"];
+}
+function formatLabelWithVersion(name, version) {
+  if (version) {
+    return `${name} (${version})`;
+  }
+  return name;
+}
+function resourceLabel(resource, fallback) {
+  const name = resource?.name || resource?.data?.name || resource?.id || resource?.data?.id;
+  const version = resource?.version || resource?.data?.version;
+  return formatLabelWithVersion(name || fallback, version);
+}
+function getNodeLabel(node) {
+  const { type } = node;
+  const data = node.data;
+  if (!data) return node.id;
+  if (type === "agents" || type === "agent") {
+    return resourceLabel(data.agent, node.id);
+  }
+  if (type === "agentTool" || type === "agent-tool") {
+    const agentTool = data.agentTool;
+    return agentTool?.name || agentTool?.id || node.id;
+  }
+  if (type === "services" || type === "service") {
+    return resourceLabel(data.service, node.id);
+  }
+  if (type === "events" || type === "event" || type === "commands" || type === "command" || type === "queries" || type === "query") {
+    return resourceLabel(data.message, node.id);
+  }
+  if (type === "channels" || type === "channel") {
+    return resourceLabel(data.channel, node.id);
+  }
+  if (type === "domains" || type === "domain" || type === "context-domain" || type === "domain-group" || type === "group") {
+    return resourceLabel(data.domain, node.id);
+  }
+  if (type === "systems" || type === "system" || type === "system-group") {
+    return resourceLabel(data.system, node.id);
+  }
+  if (type === "flows" || type === "flow") {
+    return resourceLabel(data.flow, node.id);
+  }
+  if (type === "flowExpanded") {
+    return formatLabelWithVersion(data.flowName || node.id, data.version);
+  }
+  if (type === "step") {
+    const step = data.step;
+    return step?.title || step?.name || step?.id || node.id;
+  }
+  if (type === "custom") {
+    return data.custom?.title || data.step?.title || data.label || node.id;
+  }
+  if (type === "externalSystem" || type === "external-system") {
+    const system = data.externalSystem || data;
+    return system?.name || system?.id || node.id;
+  }
+  if (type === "data" || type === "container") {
+    const dataNode = data.data;
+    return dataNode?.name || dataNode?.id || node.id;
+  }
+  if (type === "data-product" || type === "data-products") {
+    return resourceLabel(data.dataProduct, node.id);
+  }
+  if (type === "entities" || type === "entity") {
+    const entity = data.entity;
+    return entity?.name || entity?.id || node.id;
+  }
+  if (type === "view") {
+    return data.view?.name || data.view?.id || node.id;
+  }
+  if (type === "note") {
+    return data.text || data.label || "Note";
+  }
+  if (type === "field" || type === "fields") {
+    const name = data.name || node.id;
+    return data.type ? `${name} (${data.type})` : name;
+  }
+  if (type === "messageGroup" || type === "messageGroupExpanded") {
+    const groupName = data.groupName || node.id;
+    const count = data.messageCount || 0;
+    return `${groupName} (${count} messages)`;
+  }
+  return data.name || data.label || data.title || data.id || node.id;
+}
+function getEdgeLabel(edge) {
+  if (edge.label && typeof edge.label === "string") {
+    return edge.label;
+  }
+  if (edge.data?.label && typeof edge.data.label === "string") {
+    return edge.data.label;
+  }
+  return void 0;
+}
+function getMermaidIds(nodes) {
+  const mermaidIds = /* @__PURE__ */ new Map();
+  const usedIds = /* @__PURE__ */ new Set();
+  nodes.forEach((node) => {
+    const base = sanitizeMermaidId(node.id);
+    let id = base;
+    for (let n = 2; usedIds.has(id); n++) id = `${base}_${n}`;
+    usedIds.add(id);
+    mermaidIds.set(node.id, id);
+  });
+  return mermaidIds;
+}
+var isEntityNode = (node) => node.type === "entities" || node.type === "entity";
+var CARDINALITY_RELATIONS = /* @__PURE__ */ new Set([
+  "hasOne",
+  "hasMany",
+  "belongsTo",
+  "references"
+]);
+var ENTITY_STYLE_CLASSES = {
+  externalEntity: "fill:#9ca3af1a,stroke:#9ca3af,stroke-dasharray:4 4",
+  aggregateRoot: "stroke-width:3px"
+};
+function sanitizeErToken(value, fallback) {
+  const token = value.trim().replace(/[^A-Za-z0-9_\-[\]().]/g, "_");
+  return /^[A-Za-z_]/.test(token) ? token : `${fallback}_${token}`;
+}
+function getErCardinality(property) {
+  const required = !!property.required;
+  if (property.relationType === "hasMany" || property.type === "array") {
+    return required ? "||--|{" : "||--o{";
+  }
+  if (property.relationType === "hasOne") {
+    return required ? "||--||" : "||--o|";
+  }
+  return required ? "}o--||" : "}o--o|";
+}
+function convertEntitiesToMermaid(nodes, edges, { includeStyles = true } = {}) {
+  const mermaidIds = getMermaidIds(nodes);
+  const lines = ["erDiagram"];
+  const classes = /* @__PURE__ */ new Map();
+  const addClass = (name, id) => classes.set(name, [...classes.get(name) ?? [], id]);
+  nodes.forEach((node) => {
+    const data = node.data;
+    const entity = data?.entity?.data ?? {};
+    const id = mermaidIds.get(node.id);
+    const name = entity.name || data?.label || node.id;
+    const label = data?.externalToDomain && data?.domainName ? `${name} (${data.domainName})` : name;
+    const references = new Set(data?.referencePropertyNames ?? []);
+    const properties = entity.properties ?? [];
+    const attributes = properties.map((property) => {
+      const type = property.type === "array" && property.items?.type ? `${property.items.type}[]` : property.type || "unknown";
+      const keys = [
+        property.name === entity.identifier && "PK",
+        (property.references || references.has(property.name)) && "FK"
+      ].filter(Boolean);
+      return `        ${sanitizeErToken(type, "t")} ${sanitizeErToken(property.name, "p")}${keys.length ? ` ${keys.join(", ")}` : ""}`;
+    });
+    const definition = `    ${id}["${escapeMermaidLabel(label)}"]`;
+    lines.push(
+      ...attributes.length ? [`${definition} {`, ...attributes, "    }"] : [definition]
+    );
+    if (data?.externalToDomain) addClass("externalEntity", id);
+    if (entity.aggregateRoot) addClass("aggregateRoot", id);
+  });
+  const nodesById = new Map(nodes.map((node) => [node.id, node]));
+  const relationships = edges.filter(
+    (edge) => !edge.hidden && mermaidIds.has(edge.source) && mermaidIds.has(edge.target)
+  ).map((edge) => {
+    const propertyName = edge.sourceHandle?.replace(/-source$/, "");
+    const properties = nodesById.get(edge.source)?.data?.entity?.data?.properties ?? [];
+    const property = properties.find((p) => p.name === propertyName);
+    const relation = property?.relationType?.trim();
+    const label = relation && !CARDINALITY_RELATIONS.has(relation) ? relation : propertyName || getEdgeLabel(edge) || "references";
+    const cardinality = property ? getErCardinality(property) : "}o--o|";
+    return `    ${mermaidIds.get(edge.source)} ${cardinality} ${mermaidIds.get(edge.target)} : "${escapeMermaidLabel(label)}"`;
+  });
+  if (relationships.length > 0) lines.push("", ...relationships);
+  if (includeStyles && classes.size > 0) {
+    lines.push("");
+    classes.forEach((ids, name) => {
+      lines.push(`    classDef ${name} ${ENTITY_STYLE_CLASSES[name]}`);
+      lines.push(`    class ${ids.join(",")} ${name}`);
+    });
+  }
+  return lines.join("\n");
+}
+function getGroupClass(node) {
+  const data = node.data;
+  if (isSwimlaneNode(node)) return "laneGroup";
+  if (node.type === "system-group") return "systemGroup";
+  if (data?.otherDomain) return "otherDomainGroup";
+  if (data?.subdomain) return "subdomainGroup";
+  return "domainGroup";
+}
+var isCrossDomain2 = (edge) => !!edge.data?.crossDomain;
+function convertToMermaid(graphNodes, graphEdges, options = {}) {
+  const { includeStyles = true, direction = "LR" } = options;
+  const nodes = graphNodes.filter((node) => !node.hidden);
+  if (nodes.length > 0 && nodes.every(isEntityNode)) {
+    return convertEntitiesToMermaid(nodes, graphEdges, { includeStyles });
+  }
+  const mermaidIds = getMermaidIds(nodes);
+  const lines = [];
+  lines.push(`flowchart ${direction}`);
+  const childrenOf = /* @__PURE__ */ new Map();
+  const topLevelNodes = [];
+  nodes.forEach((node) => {
+    if (node.parentId && mermaidIds.has(node.parentId)) {
+      childrenOf.set(node.parentId, [
+        ...childrenOf.get(node.parentId) ?? [],
+        node
+      ]);
+    } else {
+      topLevelNodes.push(node);
+    }
+  });
+  const isGroup = (node) => childrenOf.has(node.id) || GROUP_NODE_TYPES.has(node.type ?? "") || isSwimlaneNode(node);
+  const usedTypes = /* @__PURE__ */ new Set();
+  const groupsByClass = /* @__PURE__ */ new Map();
+  const focusedIds = [];
+  nodes.forEach((node) => {
+    const id = mermaidIds.get(node.id);
+    if (isGroup(node)) {
+      const groupClass = getGroupClass(node);
+      groupsByClass.set(groupClass, [
+        ...groupsByClass.get(groupClass) ?? [],
+        id
+      ]);
+      return;
+    }
+    if (node.type && NODE_STYLE_CLASSES[node.type]) usedTypes.add(node.type);
+    if (node.data?.isFocused) focusedIds.push(id);
+  });
+  if (includeStyles) {
+    lines.push("");
+    lines.push("    %% Style definitions");
+    usedTypes.forEach((type) => {
+      lines.push(
+        `    classDef ${sanitizeMermaidId(type)} ${NODE_STYLE_CLASSES[type]}`
+      );
+    });
+    groupsByClass.forEach((_, groupClass) => {
+      lines.push(
+        `    classDef ${groupClass} ${GROUP_STYLE_CLASSES[groupClass]}`
+      );
+    });
+    if (focusedIds.length > 0) {
+      lines.push(`    classDef focused ${FOCUSED_STYLE}`);
+    }
+  }
+  lines.push("");
+  lines.push("    %% Nodes");
+  const addNode = (node, depth) => {
+    const indent = "    ".repeat(depth);
+    const id = mermaidIds.get(node.id);
+    const label = escapeMermaidLabel(
+      normaliseLines(getNodeLabel(node)).join("<br/>")
+    );
+    if (isGroup(node)) {
+      lines.push(`${indent}subgraph ${id}["${label}"]`);
+      childrenOf.get(node.id)?.forEach((child) => addNode(child, depth + 1));
+      lines.push(`${indent}end`);
+      return;
+    }
+    const [prefix, suffix] = getMermaidNodeShape(node.type || "custom");
+    let nodeLine = `${indent}${id}${prefix}"${label}"${suffix}`;
+    if (includeStyles && node.type && usedTypes.has(node.type)) {
+      nodeLine += `:::${sanitizeMermaidId(node.type)}`;
+    }
+    lines.push(nodeLine);
+  };
+  topLevelNodes.forEach((node) => addNode(node, 1));
+  lines.push("");
+  lines.push("    %% Edges");
+  const crossDomainLinks = [];
+  graphEdges.filter(
+    (edge) => !edge.hidden && mermaidIds.has(edge.source) && mermaidIds.has(edge.target)
+  ).forEach((edge, index) => {
+    const sourceId = mermaidIds.get(edge.source);
+    const targetId = mermaidIds.get(edge.target);
+    const label = normaliseLines(getEdgeLabel(edge) ?? "").join(" ");
+    lines.push(
+      label ? `    ${sourceId} -->|"${escapeMermaidLabel(label)}"| ${targetId}` : `    ${sourceId} --> ${targetId}`
+    );
+    if (isCrossDomain2(edge)) crossDomainLinks.push(index);
+  });
+  if (includeStyles) {
+    const styleLines = [];
+    groupsByClass.forEach((ids, groupClass) => {
+      styleLines.push(`    class ${ids.join(",")} ${groupClass}`);
+    });
+    if (focusedIds.length > 0) {
+      styleLines.push(`    class ${focusedIds.join(",")} focused`);
+    }
+    if (crossDomainLinks.length > 0) {
+      styleLines.push(
+        `    linkStyle ${crossDomainLinks.join(",")} ${CROSS_DOMAIN_LINK_STYLE}`
+      );
+    }
+    if (styleLines.length > 0) {
+      lines.push("");
+      lines.push("    %% Boundaries and highlights");
+      lines.push(...styleLines);
+    }
+  }
+  return lines.join("\n");
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  convertToMermaid,
   getMessagesLabel,
   getNodeSize,
   hideMessageNodes,