@marimo-team/islands 0.23.17-dev9 → 0.24.1-dev0

package/dist/{architectureDiagram-VXUJARFQ-DXwkyAaM.js → architectureDiagram-T3A2C74G-BBlBK1Oh.js}

@@ -1,24 +1,33 @@
 var _a;
-import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
-import "./chunk-TCCFYFTB-DPWJa9zL.js";
-import "./main-B1Jo_8pC.js";
-import "./purify.es-EnR5yhgI.js";
-import { c as getEdgeId, i as cleanAndMerge } from "./chunk-S3R3BYOJ-BdgLc8AM.js";
-import { i as log, r as __name, t as select_default } from "./src-DV3ha_nA.js";
-import { B as setAccTitle, C as getDiagramTitle, G as setupGraphViewbox, I as sanitizeText, U as setDiagramTitle, _ as getAccDescription, a as clear, b as getConfig2, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-BxBDji1u.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-BQPBhApE.js";
-import "./dist-DsoKosxi.js";
-import { i as registerIconPacks, n as createText, o as unknownIcon, r as getIconSVG } from "./chunk-JA3XYJ7Z-CY4CRbV5.js";
-import "./chunk-UMXZTB3W-D1uHz8MN.js";
-import "./chunk-4F5CHEZ2-VlodlEGo.js";
-import "./chunk-FRFDVMJY-BHBqN-vD.js";
-import "./chunk-SJTYNZTY-DnXoKWpW.js";
-import "./chunk-PL6DKKU2-CAHKc95s.js";
-import "./chunk-TQ3KTPDO-CsDx6v37.js";
-import "./chunk-B2363JML-zL3VngtH.js";
-import { t as populateCommonDb } from "./chunk-4BX2VUAB-iU5lQTDI.js";
-import { t as parse } from "./mermaid-parser.core-DoivvxPd.js";
-import { t as cytoscape$1 } from "./cytoscape.esm-Dr8XzXWK.js";
+import { o as __toESM, t as __commonJSMin } from "./chunk-Bfp04NdC.js";
+import "./purify.es-DR5PNXwx.js";
+import { a as cleanAndMerge, l as getEdgeId } from "./chunk-NSK5VX7P-BmmoJBbx.js";
+import { n as log, t as select_default } from "./src-BwVZVGyf.js";
+import { n as __name } from "./chunk-Y2CYZVJY-DX3DSigL.js";
+import { H as setAccDescription, J as setupGraphViewbox, K as setDiagramTitle, U as setAccTitle, a as clear, b as getConfig, f as defaultConfig_default, v as getAccDescription, w as getDiagramTitle, x as getConfig2, y as getAccTitle, z as sanitizeText } from "./chunk-I66GZJ75-9xAsFrdW.js";
+import { t as selectSvgElement } from "./chunk-3NCLNEKW-BPlp8K7N.js";
+import "./dist-HaLHv0k5.js";
+import { i as unknownIcon, r as registerIconPacks, t as getIconSVG } from "./chunk-4I5QYGJK-CYJC3pkC.js";
+import { n as createText } from "./chunk-WRU74C26-DLgw-V0j.js";
+import "./chunk-KEIR6QF5-aP6TmWQ-.js";
+import "./chunk-MOZMSUNE-BQi-ggQx.js";
+import "./chunk-OSBZ3O6U-BcrmpSY_.js";
+import "./chunk-5JV3BV7I-B7tzprBU.js";
+import "./chunk-CYSBUYHQ-Cv-vKQV-.js";
+import "./chunk-BIQX33UG-B-BYk6sM.js";
+import "./chunk-EMLP6XTP-DCtMkXLF.js";
+import "./chunk-YOTPTUD7-C8qfgaz5.js";
+import "./chunk-QBLGF6JB-BACuPUWb.js";
+import "./chunk-5TONJI2A-LRqbgPte.js";
+import "./chunk-5HE753X5-D2jFCVXb.js";
+import "./chunk-U6XO7XAA-I8tCjTeT.js";
+import "./chunk-JG7HCLWE-CZIm6axg.js";
+import "./chunk-CQNSW5MT-DBXDKSOU.js";
+import "./chunk-R7FJI6CG-BYAXJpIb.js";
+import "./chunk-5FCAYU7R-C3cMIeyz.js";
+import { t as populateCommonDb } from "./chunk-JWPE2WC7-C_Daz-Oc.js";
+import { n as parse } from "./mermaid-parser.core-BQzz3_BI.js";
+import { t as cytoscape$1 } from "./cytoscape.esm-BPa26Dup.js";
 var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
   (function(n, r) {
     typeof e == "object" && typeof t == "object" ? t.exports = r() : typeof define == "function" && define.amd ? define([], r) : typeof e == "object" ? e.layoutBase = r() : n.layoutBase = r();
@@ -3448,21 +3457,30 @@ var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
   return e.type === "service";
 }, "isArchitectureService"), isArchitectureJunction = /* @__PURE__ */ __name(function(e) {
   return e.type === "junction";
-}, "isArchitectureJunction"), edgeData = /* @__PURE__ */ __name((e) => e.data(), "edgeData"), nodeData = /* @__PURE__ */ __name((e) => e.data(), "nodeData"), DEFAULT_ARCHITECTURE_CONFIG = defaultConfig_default.architecture, ArchitectureDB = (_a = class {
+}, "isArchitectureJunction"), architectureGroupAlignmentKey = /* @__PURE__ */ __name((e, t) => {
+  let [n, r] = [e, t].sort();
+  return `${JSON.stringify(n)}-${JSON.stringify(r)}`;
+}, "architectureGroupAlignmentKey"), edgeData = /* @__PURE__ */ __name((e) => e.data(), "edgeData"), nodeData = /* @__PURE__ */ __name((e) => e.data(), "nodeData"), DEFAULT_ARCHITECTURE_CONFIG = defaultConfig_default.architecture, ArchitectureDB = (_a = class {
   constructor() {
-    this.nodes = {}, this.groups = {}, this.edges = [], this.registeredIds = {}, this.elements = {}, this.setAccTitle = setAccTitle, this.getAccTitle = getAccTitle, this.setDiagramTitle = setDiagramTitle, this.getDiagramTitle = getDiagramTitle, this.getAccDescription = getAccDescription, this.setAccDescription = setAccDescription, this.clear();
+    this.nodes = /* @__PURE__ */ new Map(), this.groups = /* @__PURE__ */ new Map(), this.edges = [], this.layoutHints = [], this.registeredIds = /* @__PURE__ */ new Map(), this.elements = /* @__PURE__ */ new Map(), this.diagramId = "", this.setAccTitle = setAccTitle, this.getAccTitle = getAccTitle, this.setDiagramTitle = setDiagramTitle, this.getDiagramTitle = getDiagramTitle, this.getAccDescription = getAccDescription, this.setAccDescription = setAccDescription, this.clear();
+  }
+  setDiagramId(e) {
+    this.diagramId = e;
+  }
+  getDiagramId() {
+    return this.diagramId;
   }
   clear() {
-    this.nodes = {}, this.groups = {}, this.edges = [], this.registeredIds = {}, this.dataStructures = void 0, this.elements = {}, clear();
+    this.nodes = /* @__PURE__ */ new Map(), this.groups = /* @__PURE__ */ new Map(), this.edges = [], this.layoutHints = [], this.registeredIds = /* @__PURE__ */ new Map(), this.dataStructures = void 0, this.elements = /* @__PURE__ */ new Map(), this.diagramId = "", clear();
   }
   addService({ id: e, icon: t, in: n, title: r, iconText: i }) {
-    if (this.registeredIds[e] !== void 0) throw Error(`The service id [${e}] is already in use by another ${this.registeredIds[e]}`);
+    if (this.registeredIds.has(e)) throw Error(`The service id [${e}] is already in use by another ${this.registeredIds.get(e)}`);
     if (n !== void 0) {
       if (e === n) throw Error(`The service [${e}] cannot be placed within itself`);
-      if (this.registeredIds[n] === void 0) throw Error(`The service [${e}]'s parent does not exist. Please make sure the parent is created before this service`);
-      if (this.registeredIds[n] === "node") throw Error(`The service [${e}]'s parent is not a group`);
+      if (!this.registeredIds.has(n)) throw Error(`The service [${e}]'s parent does not exist. Please make sure the parent is created before this service`);
+      if (this.registeredIds.get(n) === "node") throw Error(`The service [${e}]'s parent is not a group`);
     }
-    this.registeredIds[e] = "node", this.nodes[e] = {
+    this.registeredIds.set(e, "node"), this.nodes.set(e, {
       id: e,
       type: "service",
       icon: t,
@@ -3470,52 +3488,57 @@ var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
       title: r,
       edges: [],
       in: n
-    };
+    });
   }
   getServices() {
-    return Object.values(this.nodes).filter(isArchitectureService);
+    return [...this.nodes.values()].filter(isArchitectureService);
   }
   addJunction({ id: e, in: t }) {
-    this.registeredIds[e] = "node", this.nodes[e] = {
+    if (this.registeredIds.has(e)) throw Error(`The junction id [${e}] is already in use by another ${this.registeredIds.get(e)}`);
+    if (t !== void 0) {
+      if (e === t) throw Error(`The junction [${e}] cannot be placed within itself`);
+      if (!this.registeredIds.has(t)) throw Error(`The junction [${e}]'s parent does not exist. Please make sure the parent is created before this junction`);
+      if (this.registeredIds.get(t) === "node") throw Error(`The junction [${e}]'s parent is not a group`);
+    }
+    this.registeredIds.set(e, "node"), this.nodes.set(e, {
       id: e,
       type: "junction",
       edges: [],
       in: t
-    };
+    });
   }
   getJunctions() {
-    return Object.values(this.nodes).filter(isArchitectureJunction);
+    return [...this.nodes.values()].filter(isArchitectureJunction);
   }
   getNodes() {
-    return Object.values(this.nodes);
+    return [...this.nodes.values()];
   }
   getNode(e) {
-    return this.nodes[e] ?? null;
+    return this.nodes.get(e) ?? null;
   }
   addGroup({ id: e, icon: t, in: n, title: r }) {
-    var _a2, _b, _c;
-    if (((_a2 = this.registeredIds) == null ? void 0 : _a2[e]) !== void 0) throw Error(`The group id [${e}] is already in use by another ${this.registeredIds[e]}`);
+    if (this.registeredIds.has(e)) throw Error(`The group id [${e}] is already in use by another ${this.registeredIds.get(e)}`);
     if (n !== void 0) {
       if (e === n) throw Error(`The group [${e}] cannot be placed within itself`);
-      if (((_b = this.registeredIds) == null ? void 0 : _b[n]) === void 0) throw Error(`The group [${e}]'s parent does not exist. Please make sure the parent is created before this group`);
-      if (((_c = this.registeredIds) == null ? void 0 : _c[n]) === "node") throw Error(`The group [${e}]'s parent is not a group`);
+      if (!this.registeredIds.has(n)) throw Error(`The group [${e}]'s parent does not exist. Please make sure the parent is created before this group`);
+      if (this.registeredIds.get(n) === "node") throw Error(`The group [${e}]'s parent is not a group`);
     }
-    this.registeredIds[e] = "group", this.groups[e] = {
+    this.registeredIds.set(e, "group"), this.groups.set(e, {
       id: e,
       icon: t,
       title: r,
       in: n
-    };
+    });
   }
   getGroups() {
-    return Object.values(this.groups);
+    return [...this.groups.values()];
   }
   addEdge({ lhsId: e, rhsId: t, lhsDir: n, rhsDir: r, lhsInto: i, rhsInto: a, lhsGroup: o, rhsGroup: s, title: c }) {
     if (!isArchitectureDirection(n)) throw Error(`Invalid direction given for left hand side of edge ${e}--${t}. Expected (L,R,T,B) got ${String(n)}`);
     if (!isArchitectureDirection(r)) throw Error(`Invalid direction given for right hand side of edge ${e}--${t}. Expected (L,R,T,B) got ${String(r)}`);
-    if (this.nodes[e] === void 0 && this.groups[e] === void 0) throw Error(`The left-hand id [${e}] does not yet exist. Please create the service/group before declaring an edge to it.`);
-    if (this.nodes[t] === void 0 && this.groups[t] === void 0) throw Error(`The right-hand id [${t}] does not yet exist. Please create the service/group before declaring an edge to it.`);
-    let l = this.nodes[e].in, u = this.nodes[t].in;
+    if (!this.nodes.has(e) && !this.groups.has(e)) throw Error(`The left-hand id [${e}] does not yet exist. Please create the service/group before declaring an edge to it.`);
+    if (!this.nodes.has(t) && !this.groups.has(t)) throw Error(`The right-hand id [${t}] does not yet exist. Please create the service/group before declaring an edge to it.`);
+    let l = this.nodes.get(e).in, u = this.nodes.get(t).in;
     if (o && l && u && l == u) throw Error(`The left-hand id [${e}] is modified to traverse the group boundary, but the edge does not pass through two groups.`);
     if (s && l && u && l == u) throw Error(`The right-hand id [${t}] is modified to traverse the group boundary, but the edge does not pass through two groups.`);
     let d = {
@@ -3529,59 +3552,82 @@ var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
       rhsGroup: s,
       title: c
     };
-    this.edges.push(d), this.nodes[e] && this.nodes[t] && (this.nodes[e].edges.push(this.edges[this.edges.length - 1]), this.nodes[t].edges.push(this.edges[this.edges.length - 1]));
+    this.edges.push(d);
+    let f = this.nodes.get(e), p = this.nodes.get(t);
+    f && p && (f.edges.push(this.edges[this.edges.length - 1]), p.edges.push(this.edges[this.edges.length - 1]));
   }
   getEdges() {
     return this.edges;
   }
+  addLayoutHint(e) {
+    if (e.members.length < 2) throw Error(`An align directive requires at least two members; got ${e.members.length}`);
+    let t = /* @__PURE__ */ new Set();
+    e.members.forEach((n) => {
+      if (this.registeredIds.get(n) !== "node") throw Error(`align ${e.direction} references [${n}], which is not a service or junction`);
+      if (t.has(n)) throw Error(`align ${e.direction} lists [${n}] more than once`);
+      t.add(n);
+    }), this.layoutHints.push(e);
+  }
+  getLayoutHints() {
+    return this.layoutHints;
+  }
   getDataStructures() {
+    var _a2, _b;
     if (this.dataStructures === void 0) {
-      let e = {}, t = Object.entries(this.nodes).reduce((t2, [n2, r2]) => (t2[n2] = r2.edges.reduce((t3, r3) => {
-        var _a2, _b;
-        let i2 = (_a2 = this.getNode(r3.lhsId)) == null ? void 0 : _a2.in, a = (_b = this.getNode(r3.rhsId)) == null ? void 0 : _b.in;
-        if (i2 && a && i2 !== a) {
-          let t4 = getArchitectureDirectionAlignment(r3.lhsDir, r3.rhsDir);
-          t4 !== "bend" && (e[i2] ?? (e[i2] = {}), e[i2][a] = t4, e[a] ?? (e[a] = {}), e[a][i2] = t4);
-        }
-        if (r3.lhsId === n2) {
-          let e2 = getArchitectureDirectionPair(r3.lhsDir, r3.rhsDir);
-          e2 && (t3[e2] = r3.rhsId);
-        } else {
-          let e2 = getArchitectureDirectionPair(r3.rhsDir, r3.lhsDir);
-          e2 && (t3[e2] = r3.lhsId);
+      let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+      for (let [n2, r2] of this.nodes.entries()) {
+        let i2 = /* @__PURE__ */ new Map();
+        for (let t2 of r2.edges) {
+          let r3 = (_a2 = this.getNode(t2.lhsId)) == null ? void 0 : _a2.in, a2 = (_b = this.getNode(t2.rhsId)) == null ? void 0 : _b.in;
+          if (r3 && a2 && r3 !== a2) {
+            let n3 = getArchitectureDirectionAlignment(t2.lhsDir, t2.rhsDir);
+            n3 !== "bend" && e.set(architectureGroupAlignmentKey(r3, a2), n3);
+          }
+          if (t2.lhsId === n2) {
+            let e2 = getArchitectureDirectionPair(t2.lhsDir, t2.rhsDir);
+            e2 && i2.set(e2, t2.rhsId);
+          } else {
+            let e2 = getArchitectureDirectionPair(t2.rhsDir, t2.lhsDir);
+            e2 && i2.set(e2, t2.lhsId);
+          }
         }
-        return t3;
-      }, {}), t2), {}), n = Object.keys(t)[0], r = { [n]: 1 }, i = Object.keys(t).reduce((e2, t2) => t2 === n ? e2 : {
-        ...e2,
-        [t2]: 1
-      }, {}), o = /* @__PURE__ */ __name((e2) => {
-        let n2 = { [e2]: [0, 0] }, a = [e2];
-        for (; a.length > 0; ) {
-          let e3 = a.shift();
+        t.set(n2, i2);
+      }
+      let n = /* @__PURE__ */ new Set(), r = new Set(t.keys()), i = /* @__PURE__ */ __name((e2) => {
+        let i2 = /* @__PURE__ */ new Map([[e2, [0, 0]]]), a2 = [e2];
+        for (; a2.length > 0; ) {
+          let e3 = a2.shift();
           if (e3) {
-            r[e3] = 1, delete i[e3];
-            let o2 = t[e3], [s2, c] = n2[e3];
-            Object.entries(o2).forEach(([e4, t2]) => {
-              r[t2] || (n2[t2] = shiftPositionByArchitectureDirectionPair([s2, c], e4), a.push(t2));
+            n.add(e3), r.delete(e3);
+            let o = t.get(e3);
+            if (!o) throw Error(`BFS error: adjacency list for id ${e3} not found. Please report this as a bug.`);
+            let s = i2.get(e3);
+            if (!s) throw Error(`BFS error: position for id ${e3} not found in spatial map. Please report this as a bug.`);
+            let [c, l] = s;
+            o.forEach((e4, t2) => {
+              n.has(e4) || (i2.set(e4, shiftPositionByArchitectureDirectionPair([c, l], t2)), a2.push(e4));
             });
           }
         }
-        return n2;
-      }, "BFS"), s = [o(n)];
-      for (; Object.keys(i).length > 0; ) s.push(o(Object.keys(i)[0]));
+        return i2;
+      }, "BFS"), a = [];
+      for (; r.size > 0; ) {
+        let e2 = r.values().next().value;
+        a.push(i(e2));
+      }
       this.dataStructures = {
         adjList: t,
-        spatialMaps: s,
+        spatialMaps: a,
         groupAlignments: e
       };
     }
     return this.dataStructures;
   }
   setElementForId(e, t) {
-    this.elements[e] = t;
+    this.elements.set(e, t);
   }
   getElementById(e) {
-    return this.elements[e];
+    return this.elements.get(e);
   }
   getConfig() {
     return cleanAndMerge({
@@ -3593,13 +3639,17 @@ var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
     return this.getConfig()[e];
   }
 }, __name(_a, "ArchitectureDB"), _a), populateDb = /* @__PURE__ */ __name((e, t) => {
+  var _a2;
   populateCommonDb(e, t), e.groups.map((e2) => t.addGroup(e2)), e.services.map((e2) => t.addService({
     ...e2,
     type: "service"
   })), e.junctions.map((e2) => t.addJunction({
     ...e2,
     type: "junction"
-  })), e.edges.map((e2) => t.addEdge(e2));
+  })), e.edges.map((e2) => t.addEdge(e2)), (_a2 = e.alignments) == null ? void 0 : _a2.map((e2) => t.addLayoutHint({
+    direction: e2.direction,
+    members: [...e2.members]
+  }));
 }, "populateDb"), parser = {
   parser: { yy: void 0 },
   parse: /* @__PURE__ */ __name(async (e) => {
@@ -3641,7 +3691,23 @@ var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
     display: -webkit-box;
     -webkit-box-orient: vertical;
   }
-`, "getStyles"), wrapIcon = /* @__PURE__ */ __name((e) => `<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>${e}</g>`, "wrapIcon"), architectureIcons = {
+`, "getStyles");
+function withSeededRandom(e, t) {
+  if (e === 0) return t();
+  let n = Math.random, r = e >>> 0;
+  Math.random = function() {
+    r = r + 1831565813 >>> 0;
+    let e2 = r;
+    return e2 = Math.imul(e2 ^ e2 >>> 15, e2 | 1), e2 ^= e2 + Math.imul(e2 ^ e2 >>> 7, e2 | 61), ((e2 ^ e2 >>> 14) >>> 0) / 4294967296;
+  };
+  try {
+    return t();
+  } finally {
+    Math.random = n;
+  }
+}
+__name(withSeededRandom, "withSeededRandom");
+var wrapIcon = /* @__PURE__ */ __name((e) => `<g><rect width="80" height="80" style="fill: #087ebf; stroke-width: 0px;"/>${e}</g>`, "wrapIcon"), architectureIcons = {
   prefix: "mermaid-architecture",
   height: 80,
   width: 80,
@@ -3654,112 +3720,112 @@ var require_layout_base = /* @__PURE__ */ __commonJSMin(((e, t) => {
     unknown: unknownIcon,
     blank: { body: wrapIcon("") }
   }
-}, drawEdges = /* @__PURE__ */ __name(async function(e, t, r) {
-  let i = r.getConfigField("padding"), a = r.getConfigField("iconSize"), o = a / 2, s = a / 6, c = s / 2;
+}, drawEdges = /* @__PURE__ */ __name(async function(e, t, n, i) {
+  let a = n.getConfigField("padding"), o = n.getConfigField("iconSize"), s = o / 2, c = o / 6, l = c / 2;
   await Promise.all(t.edges().map(async (t2) => {
     var _a2, _b;
-    let { source: a2, sourceDir: l, sourceArrow: u, sourceGroup: d, target: f, targetDir: p, targetArrow: h, targetGroup: g, label: _ } = edgeData(t2), { x: v, y } = t2[0].sourceEndpoint(), { x: b, y: S } = t2[0].midpoint(), { x: C, y: w } = t2[0].targetEndpoint(), T = i + 4;
-    if (d && (isArchitectureDirectionX(l) ? v += l === "L" ? -T : T : y += l === "T" ? -T : T + 18), g && (isArchitectureDirectionX(p) ? C += p === "L" ? -T : T : w += p === "T" ? -T : T + 18), !d && ((_a2 = r.getNode(a2)) == null ? void 0 : _a2.type) === "junction" && (isArchitectureDirectionX(l) ? v += l === "L" ? o : -o : y += l === "T" ? o : -o), !g && ((_b = r.getNode(f)) == null ? void 0 : _b.type) === "junction" && (isArchitectureDirectionX(p) ? C += p === "L" ? o : -o : w += p === "T" ? o : -o), t2[0]._private.rscratch) {
+    let { source: o2, sourceDir: u, sourceArrow: d, sourceGroup: f, target: p, targetDir: m, targetArrow: h, targetGroup: _, label: v } = edgeData(t2), { x: y, y: b } = t2[0].sourceEndpoint(), { x, y: S } = t2[0].midpoint(), { x: w, y: T } = t2[0].targetEndpoint(), E = a + 4;
+    if (f && (isArchitectureDirectionX(u) ? y += u === "L" ? -E : E : b += u === "T" ? -E : E + 18), _ && (isArchitectureDirectionX(m) ? w += m === "L" ? -E : E : T += m === "T" ? -E : E + 18), !f && ((_a2 = n.getNode(o2)) == null ? void 0 : _a2.type) === "junction" && (isArchitectureDirectionX(u) ? y += u === "L" ? s : -s : b += u === "T" ? s : -s), !_ && ((_b = n.getNode(p)) == null ? void 0 : _b.type) === "junction" && (isArchitectureDirectionX(m) ? w += m === "L" ? s : -s : T += m === "T" ? s : -s), t2[0]._private.rscratch) {
       let t3 = e.insert("g");
-      if (t3.insert("path").attr("d", `M ${v},${y} L ${b},${S} L${C},${w} `).attr("class", "edge").attr("id", getEdgeId(a2, f, { prefix: "L" })), u) {
-        let e2 = isArchitectureDirectionX(l) ? ArchitectureDirectionArrowShift[l](v, s) : v - c, n = isArchitectureDirectionY(l) ? ArchitectureDirectionArrowShift[l](y, s) : y - c;
-        t3.insert("polygon").attr("points", ArchitectureDirectionArrow[l](s)).attr("transform", `translate(${e2},${n})`).attr("class", "arrow");
+      if (t3.insert("path").attr("d", `M ${y},${b} L ${x},${S} L${w},${T} `).attr("class", "edge").attr("id", `${i}-${getEdgeId(o2, p, { prefix: "L" })}`), d) {
+        let e2 = isArchitectureDirectionX(u) ? ArchitectureDirectionArrowShift[u](y, c) : y - l, n2 = isArchitectureDirectionY(u) ? ArchitectureDirectionArrowShift[u](b, c) : b - l;
+        t3.insert("polygon").attr("points", ArchitectureDirectionArrow[u](c)).attr("transform", `translate(${e2},${n2})`).attr("class", "arrow");
       }
       if (h) {
-        let e2 = isArchitectureDirectionX(p) ? ArchitectureDirectionArrowShift[p](C, s) : C - c, n = isArchitectureDirectionY(p) ? ArchitectureDirectionArrowShift[p](w, s) : w - c;
-        t3.insert("polygon").attr("points", ArchitectureDirectionArrow[p](s)).attr("transform", `translate(${e2},${n})`).attr("class", "arrow");
+        let e2 = isArchitectureDirectionX(m) ? ArchitectureDirectionArrowShift[m](w, c) : w - l, n2 = isArchitectureDirectionY(m) ? ArchitectureDirectionArrowShift[m](T, c) : T - l;
+        t3.insert("polygon").attr("points", ArchitectureDirectionArrow[m](c)).attr("transform", `translate(${e2},${n2})`).attr("class", "arrow");
       }
-      if (_) {
-        let e2 = isArchitectureDirectionXY(l, p) ? "XY" : isArchitectureDirectionX(l) ? "X" : "Y", n = 0;
-        n = e2 === "X" ? Math.abs(v - C) : e2 === "Y" ? Math.abs(y - w) / 1.5 : Math.abs(v - C) / 2;
-        let r2 = t3.append("g");
-        if (await createText(r2, _, {
+      if (v) {
+        let e2 = isArchitectureDirectionXY(u, m) ? "XY" : isArchitectureDirectionX(u) ? "X" : "Y", n2 = 0;
+        n2 = e2 === "X" ? Math.abs(y - w) : e2 === "Y" ? Math.abs(b - T) / 1.5 : Math.abs(y - w) / 2;
+        let r = t3.append("g");
+        if (await createText(r, v, {
           useHtmlLabels: false,
-          width: n,
+          width: n2,
           classes: "architecture-service-label"
-        }, getConfig2()), r2.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "middle").attr("text-anchor", "middle"), e2 === "X") r2.attr("transform", "translate(" + b + ", " + S + ")");
-        else if (e2 === "Y") r2.attr("transform", "translate(" + b + ", " + S + ") rotate(-90)");
+        }, getConfig2()), r.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "middle").attr("text-anchor", "middle"), e2 === "X") r.attr("transform", "translate(" + x + ", " + S + ")");
+        else if (e2 === "Y") r.attr("transform", "translate(" + x + ", " + S + ") rotate(-90)");
         else if (e2 === "XY") {
-          let e3 = getArchitectureDirectionPair(l, p);
+          let e3 = getArchitectureDirectionPair(u, m);
           if (e3 && isArchitecturePairXY(e3)) {
-            let t4 = r2.node().getBoundingClientRect(), [n2, i2] = getArchitectureDirectionXYFactors(e3);
-            r2.attr("dominant-baseline", "auto").attr("transform", `rotate(${-1 * n2 * i2 * 45})`);
-            let a3 = r2.node().getBoundingClientRect();
-            r2.attr("transform", `
-                translate(${b}, ${S - t4.height / 2})
-                translate(${n2 * a3.width / 2}, ${i2 * a3.height / 2})
-                rotate(${-1 * n2 * i2 * 45}, 0, ${t4.height / 2})
+            let t4 = r.node().getBoundingClientRect(), [n3, i2] = getArchitectureDirectionXYFactors(e3);
+            r.attr("dominant-baseline", "auto").attr("transform", `rotate(${-1 * n3 * i2 * 45})`);
+            let a2 = r.node().getBoundingClientRect();
+            r.attr("transform", `
+                translate(${x}, ${S - t4.height / 2})
+                translate(${n3 * a2.width / 2}, ${i2 * a2.height / 2})
+                rotate(${-1 * n3 * i2 * 45}, 0, ${t4.height / 2})
               `);
           }
         }
       }
     }
   }));
-}, "drawEdges"), drawGroups = /* @__PURE__ */ __name(async function(e, t, n) {
-  let r = n.getConfigField("padding") * 0.75, i = n.getConfigField("fontSize"), a = n.getConfigField("iconSize") / 2;
+}, "drawEdges"), drawGroups = /* @__PURE__ */ __name(async function(e, t, n, r) {
+  let i = n.getConfigField("padding") * 0.75, a = n.getConfigField("fontSize"), o = n.getConfigField("iconSize") / 2;
   await Promise.all(t.nodes().map(async (t2) => {
-    let o = nodeData(t2);
-    if (o.type === "group") {
-      let { h: s, w: c, x1: l, y1: u } = t2.boundingBox(), d = e.append("rect");
-      d.attr("id", `group-${o.id}`).attr("x", l + a).attr("y", u + a).attr("width", c).attr("height", s).attr("class", "node-bkg");
-      let f = e.append("g"), p = l, h = u;
-      if (o.icon) {
-        let e2 = f.append("g");
-        e2.html(`<g>${await getIconSVG(o.icon, {
-          height: r,
-          width: r,
+    let s = nodeData(t2);
+    if (s.type === "group") {
+      let { h: c, w: l, x1: u, y1: d } = t2.boundingBox(), f = e.append("rect");
+      f.attr("id", `${r}-group-${s.id}`).attr("x", u + o).attr("y", d + o).attr("width", l).attr("height", c).attr("class", "node-bkg");
+      let p = e.append("g"), m = u, h = d;
+      if (s.icon) {
+        let e2 = p.append("g");
+        e2.html(`<g>${await getIconSVG(s.icon, {
+          height: i,
+          width: i,
           fallbackPrefix: architectureIcons.prefix
-        })}</g>`), e2.attr("transform", "translate(" + (p + a + 1) + ", " + (h + a + 1) + ")"), p += r, h += i / 2 - 1 - 2;
+        })}</g>`), e2.attr("transform", "translate(" + (m + o + 1) + ", " + (h + o + 1) + ")"), m += i, h += a / 2 - 1 - 2;
       }
-      if (o.label) {
-        let e2 = f.append("g");
-        await createText(e2, o.label, {
+      if (s.label) {
+        let e2 = p.append("g");
+        await createText(e2, s.label, {
           useHtmlLabels: false,
-          width: c,
+          width: l,
           classes: "architecture-service-label"
-        }, getConfig2()), e2.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "start").attr("text-anchor", "start"), e2.attr("transform", "translate(" + (p + a + 4) + ", " + (h + a + 2) + ")");
+        }, getConfig2()), e2.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "start").attr("text-anchor", "start"), e2.attr("transform", "translate(" + (m + o + 4) + ", " + (h + o + 2) + ")");
       }
-      n.setElementForId(o.id, d);
+      n.setElementForId(s.id, f);
     }
   }));
-}, "drawGroups"), drawServices = /* @__PURE__ */ __name(async function(e, t, n) {
-  let r = getConfig2();
-  for (let i of n) {
-    let n2 = t.append("g"), a = e.getConfigField("iconSize");
-    if (i.title) {
+}, "drawGroups"), drawServices = /* @__PURE__ */ __name(async function(e, t, n, r) {
+  let i = getConfig2();
+  for (let a of n) {
+    let n2 = t.append("g"), o = e.getConfigField("iconSize");
+    if (a.title) {
       let e2 = n2.append("g");
-      await createText(e2, i.title, {
+      await createText(e2, a.title, {
         useHtmlLabels: false,
-        width: a * 1.5,
+        width: o * 1.5,
         classes: "architecture-service-label"
-      }, r), e2.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "middle").attr("text-anchor", "middle"), e2.attr("transform", "translate(" + a / 2 + ", " + a + ")");
+      }, i), e2.attr("dy", "1em").attr("alignment-baseline", "middle").attr("dominant-baseline", "middle").attr("text-anchor", "middle"), e2.attr("transform", "translate(" + o / 2 + ", " + o + ")");
     }
-    let o = n2.append("g");
-    if (i.icon) o.html(`<g>${await getIconSVG(i.icon, {
-      height: a,
-      width: a,
+    let s = n2.append("g");
+    if (a.icon) s.html(`<g>${await getIconSVG(a.icon, {
+      height: o,
+      width: o,
       fallbackPrefix: architectureIcons.prefix
     })}</g>`);
-    else if (i.iconText) {
-      o.html(`<g>${await getIconSVG("blank", {
-        height: a,
-        width: a,
+    else if (a.iconText) {
+      s.html(`<g>${await getIconSVG("blank", {
+        height: o,
+        width: o,
         fallbackPrefix: architectureIcons.prefix
       })}</g>`);
-      let e2 = o.append("g").append("foreignObject").attr("width", a).attr("height", a).append("div").attr("class", "node-icon-text").attr("style", `height: ${a}px;`).append("div").html(sanitizeText(i.iconText, r)), t2 = parseInt(window.getComputedStyle(e2.node(), null).getPropertyValue("font-size").replace(/\D/g, "")) ?? 16;
-      e2.attr("style", `-webkit-line-clamp: ${Math.floor((a - 2) / t2)};`);
-    } else o.append("path").attr("class", "node-bkg").attr("id", "node-" + i.id).attr("d", `M0 ${a} v${-a} q0,-5 5,-5 h${a} q5,0 5,5 v${a} H0 Z`);
-    n2.attr("id", `service-${i.id}`).attr("class", "architecture-service");
-    let { width: s, height: c } = n2.node().getBBox();
-    i.width = s, i.height = c, e.setElementForId(i.id, n2);
+      let e2 = s.append("g").append("foreignObject").attr("width", o).attr("height", o).append("div").attr("class", "node-icon-text").attr("style", `height: ${o}px;`).append("div").html(sanitizeText(a.iconText, i)), t2 = parseInt(window.getComputedStyle(e2.node(), null).getPropertyValue("font-size").replace(/\D/g, "")) ?? 16;
+      e2.attr("style", `-webkit-line-clamp: ${Math.floor((o - 2) / t2)};`);
+    } else s.append("path").attr("class", "node-bkg").attr("id", `${r}-node-${a.id}`).attr("d", `M0,${o} V5 Q0,0 5,0 H${o - 5} Q${o},0 ${o},5 V${o} Z`);
+    n2.attr("id", `${r}-service-${a.id}`).attr("class", "architecture-service");
+    let { width: c, height: l } = n2.node().getBBox();
+    a.width = c, a.height = l, e.setElementForId(a.id, n2);
   }
   return 0;
-}, "drawServices"), drawJunctions = /* @__PURE__ */ __name(function(e, t, n) {
+}, "drawServices"), drawJunctions = /* @__PURE__ */ __name(function(e, t, n, r) {
   n.forEach((n2) => {
-    let r = t.append("g"), i = e.getConfigField("iconSize");
-    r.append("g").append("rect").attr("id", "node-" + n2.id).attr("fill-opacity", "0").attr("width", i).attr("height", i), r.attr("class", "architecture-junction");
-    let { width: a, height: o } = r._groups[0][0].getBBox();
-    r.width = a, r.height = o, e.setElementForId(n2.id, r);
+    let i = t.append("g"), a = e.getConfigField("iconSize");
+    i.append("g").append("rect").attr("id", `${r}-node-${n2.id}`).attr("fill-opacity", "0").attr("width", a).attr("height", a), i.attr("class", "architecture-junction");
+    let { width: o, height: s } = i._groups[0][0].getBBox();
+    i.width = o, i.height = s, e.setElementForId(n2.id, i);
   });
 }, "drawJunctions");
 registerIconPacks([{
@@ -3847,76 +3913,109 @@ function addEdges(e, t) {
   });
 }
 __name(addEdges, "addEdges");
-function getAlignments(e, t, n) {
-  let r = /* @__PURE__ */ __name((e2, t2) => Object.entries(e2).reduce((e3, [r2, i2]) => {
-    var _a2;
-    let a = 0, o2 = Object.entries(i2);
-    if (o2.length === 1) return e3[r2] = o2[0][1], e3;
-    for (let i3 = 0; i3 < o2.length - 1; i3++) for (let s = i3 + 1; s < o2.length; s++) {
-      let [c, l] = o2[i3], [u, d] = o2[s];
-      if (((_a2 = n[c]) == null ? void 0 : _a2[u]) === t2) e3[r2] ?? (e3[r2] = []), e3[r2] = [
-        ...e3[r2],
-        ...l,
-        ...d
-      ];
-      else if (c === "default" || u === "default") e3[r2] ?? (e3[r2] = []), e3[r2] = [
-        ...e3[r2],
-        ...l,
-        ...d
-      ];
-      else {
-        let t3 = `${r2}-${a++}`;
-        e3[t3] = l;
-        let n2 = `${r2}-${a++}`;
-        e3[n2] = d;
+function getAlignments(e, t, n, r = []) {
+  let i = /* @__PURE__ */ __name((e2, t2) => {
+    let r2 = /* @__PURE__ */ new Map();
+    for (let [i2, a2] of e2.entries()) {
+      let e3 = `${i2}`, o = 0, s2 = [...a2.entries()];
+      if (s2.length === 1) {
+        r2.set(e3, s2[0][1]);
+        continue;
+      }
+      for (let i3 = 0; i3 < s2.length - 1; i3++) for (let a3 = i3 + 1; a3 < s2.length; a3++) {
+        let [c2, l2] = s2[i3], [u2, d2] = s2[a3];
+        if (n.get(architectureGroupAlignmentKey(c2, u2)) === t2) r2.set(e3, [
+          ...r2.get(e3) ?? [],
+          ...l2,
+          ...d2
+        ]);
+        else if (c2 === "default" || u2 === "default") r2.set(e3, [
+          ...r2.get(e3) ?? [],
+          ...l2,
+          ...d2
+        ]);
+        else {
+          let t3 = `${e3}-${o++}`;
+          r2.set(t3, l2);
+          let n2 = `${e3}-${o++}`;
+          r2.set(n2, d2);
+        }
       }
     }
-    return e3;
-  }, {}), "flattenAlignments"), [i, o] = t.map((t2) => {
-    let n2 = {}, i2 = {};
-    return Object.entries(t2).forEach(([t3, [r2, a]]) => {
-      var _a2, _b, _c;
-      let o2 = ((_a2 = e.getNode(t3)) == null ? void 0 : _a2.in) ?? "default";
-      n2[a] ?? (n2[a] = {}), (_b = n2[a])[o2] ?? (_b[o2] = []), n2[a][o2].push(t3), i2[r2] ?? (i2[r2] = {}), (_c = i2[r2])[o2] ?? (_c[o2] = []), i2[r2][o2].push(t3);
+    return r2;
+  }, "flattenAlignments"), [a, s] = t.map((t2) => {
+    let n2 = /* @__PURE__ */ new Map(), r2 = /* @__PURE__ */ new Map();
+    return t2.forEach(([t3, i2], a2) => {
+      var _a2;
+      let o = ((_a2 = e.getNode(a2)) == null ? void 0 : _a2.in) ?? "default", s2 = n2.get(i2) ?? /* @__PURE__ */ new Map();
+      n2.has(i2) || n2.set(i2, s2);
+      let c2 = r2.get(t3) ?? /* @__PURE__ */ new Map();
+      r2.has(t3) || r2.set(t3, c2);
+      for (let e2 of [s2, c2]) {
+        let t4 = e2.get(o) ?? [];
+        e2.has(o) || e2.set(o, t4), t4.push(a2);
+      }
     }), {
-      horiz: Object.values(r(n2, "horizontal")).filter((e2) => e2.length > 1),
-      vert: Object.values(r(i2, "vertical")).filter((e2) => e2.length > 1)
+      horiz: [...i(n2, "horizontal").values()].filter((e2) => e2.length > 1),
+      vert: [...i(r2, "vertical").values()].filter((e2) => e2.length > 1)
     };
-  }).reduce(([e2, t2], { horiz: n2, vert: r2 }) => [[...e2, ...n2], [...t2, ...r2]], [[], []]);
-  return {
-    horizontal: i,
-    vertical: o
+  }).reduce(([e2, t2], { horiz: n2, vert: r2 }) => [[...e2, ...n2], [...t2, ...r2]], [[], []]), c = /* @__PURE__ */ new Set();
+  r.forEach((e2) => e2.members.forEach((e3) => c.add(e3)));
+  let l = /* @__PURE__ */ __name((e2) => e2.filter((e3) => !e3.some((e4) => c.has(e4))), "dropOverlapping"), u = l(a), d = l(s);
+  return r.forEach((e2) => {
+    e2.members.length < 2 || (e2.direction === "row" ? u.push([...e2.members]) : d.push([...e2.members]));
+  }), {
+    horizontal: u,
+    vertical: d
   };
 }
 __name(getAlignments, "getAlignments");
-function getRelativeConstraints(e, t) {
-  let n = [], r = /* @__PURE__ */ __name((e2) => `${e2[0]},${e2[1]}`, "posToStr"), i = /* @__PURE__ */ __name((e2) => e2.split(",").map((e3) => parseInt(e3)), "strToPos");
+function getRelativeConstraints(e, t, n = []) {
+  let r = [], i = t.getConfigField("iconSize"), a = t.getConfigField("idealEdgeLengthMultiplier"), s = a * i, c = /* @__PURE__ */ new Set();
+  n.forEach((e2) => {
+    for (let t2 = 0; t2 < e2.members.length - 1; t2++) {
+      let n2 = e2.members[t2], i2 = e2.members[t2 + 1];
+      c.add(`${n2}|${i2}`), c.add(`${i2}|${n2}`), e2.direction === "row" ? r.push({
+        left: n2,
+        right: i2,
+        gap: s
+      }) : r.push({
+        top: n2,
+        bottom: i2,
+        gap: s
+      });
+    }
+  });
+  let l = /* @__PURE__ */ __name((e2) => `${e2[0]},${e2[1]}`, "posToStr"), u = /* @__PURE__ */ __name((e2) => e2.split(",").map((e3) => parseInt(e3)), "strToPos");
   return e.forEach((e2) => {
-    let a = Object.fromEntries(Object.entries(e2).map(([e3, t2]) => [r(t2), e3])), o = [r([0, 0])], s = {}, c = {
+    let t2 = new Map([...e2.entries()].map(([e3, t3]) => [l(t3), e3])), n2 = [l([0, 0])], o = {}, s2 = {
       L: [-1, 0],
       R: [1, 0],
       T: [0, 1],
       B: [0, -1]
     };
-    for (; o.length > 0; ) {
-      let e3 = o.shift();
+    for (; n2.length > 0; ) {
+      let e3 = n2.shift();
       if (e3) {
-        s[e3] = 1;
-        let l = a[e3];
-        if (l) {
-          let u = i(e3);
-          Object.entries(c).forEach(([e4, i2]) => {
-            let c2 = r([u[0] + i2[0], u[1] + i2[1]]), d = a[c2];
-            d && !s[c2] && (o.push(c2), n.push({
-              [ArchitectureDirectionName[e4]]: d,
-              [ArchitectureDirectionName[getOppositeArchitectureDirection(e4)]]: l,
-              gap: 1.5 * t.getConfigField("iconSize")
-            }));
+        o[e3] = 1;
+        let d = t2.get(e3);
+        if (d) {
+          let f = u(e3);
+          Object.entries(s2).forEach(([e4, s3]) => {
+            let u2 = l([f[0] + s3[0], f[1] + s3[1]]), p = t2.get(u2);
+            if (p && !o[u2]) {
+              if (n2.push(u2), c.has(`${d}|${p}`)) return;
+              r.push({
+                [ArchitectureDirectionName[e4]]: p,
+                [ArchitectureDirectionName[getOppositeArchitectureDirection(e4)]]: d,
+                gap: a * i
+              });
+            }
           });
         }
       }
     }
-  }), n;
+  }), r;
 }
 __name(getRelativeConstraints, "getRelativeConstraints");
 function layoutArchitecture(e, t, n, r, s, { spatialMaps: c, groupAlignments: l }) {
@@ -3928,11 +4027,14 @@ function layoutArchitecture(e, t, n, r, s, { spatialMaps: c, groupAlignments: l
           selector: "edge",
           style: {
             "curve-style": "straight",
-            label: "data(label)",
             "source-endpoint": "data(sourceEndpoint)",
             "target-endpoint": "data(targetEndpoint)"
           }
         },
+        {
+          selector: "edge[label]",
+          style: { label: "data(label)" }
+        },
         {
           selector: "edge.segments",
           style: {
@@ -3987,24 +4089,27 @@ function layoutArchitecture(e, t, n, r, s, { spatialMaps: c, groupAlignments: l
       }
     });
     d.remove(), addGroups(n, f), addServices(e, f, s), addJunctions(t, f, s), addEdges(r, f);
-    let p = getAlignments(s, c, l), m = getRelativeConstraints(c, s), h = f.layout({
+    let p = s.getLayoutHints(), m = getAlignments(s, c, l, p), h = getRelativeConstraints(c, s, p), g = s.getConfigField("iconSize"), _ = s.getConfigField("idealEdgeLengthMultiplier") * g, v = 0.5 * g, y = s.getConfigField("edgeElasticity"), b = s.getConfigField("seed"), x = f.layout({
       name: "fcose",
       quality: "proof",
+      randomize: s.getConfigField("randomize"),
+      nodeSeparation: s.getConfigField("nodeSeparation"),
+      numIter: s.getConfigField("numIter"),
       styleEnabled: false,
       animate: false,
       nodeDimensionsIncludeLabels: false,
       idealEdgeLength(e2) {
         let [t2, n2] = e2.connectedNodes(), { parent: r2 } = nodeData(t2), { parent: i } = nodeData(n2);
-        return r2 === i ? 1.5 * s.getConfigField("iconSize") : 0.5 * s.getConfigField("iconSize");
+        return r2 === i ? _ : v;
       },
       edgeElasticity(e2) {
         let [t2, n2] = e2.connectedNodes(), { parent: r2 } = nodeData(t2), { parent: i } = nodeData(n2);
-        return r2 === i ? 0.45 : 1e-3;
+        return r2 === i ? y : 1e-3;
       },
-      alignmentConstraint: p,
-      relativePlacementConstraint: m
+      alignmentConstraint: m,
+      relativePlacementConstraint: h
     });
-    h.one("layoutstop", () => {
+    x.one("layoutstop", () => {
       var _a2;
       function e2(e3, t2, n2, r2) {
         let i, a, { x: o, y: s2 } = e3, { x: c2, y: l2 } = t2;
@@ -4042,8 +4147,14 @@ function layoutArchitecture(e, t, n, r, s, { spatialMaps: c, groupAlignments: l
           t2.style("segment-distances", c2), t2.style("segment-weights", s2);
         }
       }
-      f.endBatch(), h.run();
-    }), h.run(), f.ready((e2) => {
+      f.endBatch(), withSeededRandom(b, () => x.run());
+    });
+    try {
+      withSeededRandom(b, () => x.run());
+    } catch (e2) {
+      throw e2 instanceof RangeError && e2.message.includes("Invalid array length") ? Error("Architecture layout failed: a declared `align row|column` directive likely contradicts the edge directions, or two declared alignments overlap on a shared node. Check that the order of members in each `align` chain is consistent with the edges between them, and that no node appears in two `align` directives along the same axis.") : e2;
+    }
+    f.ready((e2) => {
       log.info("Ready", e2), u(f);
     });
   });
@@ -4055,14 +4166,16 @@ var diagram = {
     return new ArchitectureDB();
   },
   renderer: { draw: /* @__PURE__ */ __name(async (e, t, n, r) => {
-    let i = r.db, a = i.getServices(), o = i.getJunctions(), s = i.getGroups(), c = i.getEdges(), u = i.getDataStructures(), d = selectSvgElement(t), f = d.append("g");
+    let i = r.db;
+    i.setDiagramId(t);
+    let a = i.getServices(), o = i.getJunctions(), s = i.getGroups(), l = i.getEdges(), u = i.getDataStructures(), d = selectSvgElement(t), f = d.append("g");
     f.attr("class", "architecture-edges");
     let p = d.append("g");
     p.attr("class", "architecture-services");
     let m = d.append("g");
-    m.attr("class", "architecture-groups"), await drawServices(i, p, a), drawJunctions(i, p, o);
-    let h = await layoutArchitecture(a, o, s, c, i, u);
-    await drawEdges(f, h, i), await drawGroups(m, h, i), positionNodes(i, h), setupGraphViewbox(void 0, d, i.getConfigField("padding"), i.getConfigField("useMaxWidth"));
+    m.attr("class", "architecture-groups"), await drawServices(i, p, a, t), drawJunctions(i, p, o, t);
+    let h = await layoutArchitecture(a, o, s, l, i, u);
+    await drawEdges(f, h, i, t), await drawGroups(m, h, i, t), positionNodes(i, h), setupGraphViewbox(void 0, d, i.getConfigField("padding"), i.getConfigField("useMaxWidth"));
   }, "draw") },
   styles: architectureStyles_default
 };