@aiderdesk/aiderdesk 0.60.0 → 0.61.0

package/out/renderer/assets/{sequenceDiagram-2WXFIKYE-DhVN2ug2.js → sequenceDiagram-FGHM5R23-b69hQjSp.js}

@@ -1,6 +1,6 @@
-import { _ as __name, n as setConfig2, c as getConfig2, d as select, l as log, j as distExports, e as configureSvgSize, f as assignWithDepth_default, k as common_default, b as setAccTitle, s as setAccDescription, p as setDiagramTitle, a as getAccTitle, g as getAccDescription, q as getDiagramTitle, t as load, J as JSON_SCHEMA, z as clear, i as sanitizeText, u as utils_default, P as hasKatex, Q as calculateMathMLDimensions, R as parseFontSize, Z as ZERO_WIDTH_SPACE, S as getUrl, T as renderKatexSanitized, G as getConfig } from "./index-MDHavDF9.js";
-import { a as drawBackgroundRect, b as getTextObj, g as getNoteRect, d as drawRect, e as drawEmbeddedImage, f as drawImage } from "./chunk-JSJVCQXG-DtjSx6Cj.js";
-import { I as ImperativeState } from "./chunk-QZHKN3VN-8BpGifjS.js";
+import { _ as __name, n as setConfig2, c as getConfig2, d as select, l as log, j as distExports, e as configureSvgSize, f as assignWithDepth_default, k as common_default, b as setAccTitle, s as setAccDescription, p as setDiagramTitle, a as getAccTitle, g as getAccDescription, q as getDiagramTitle, t as load, J as JSON_SCHEMA, z as clear, i as sanitizeText, u as utils_default, P as hasKatex, Q as calculateMathMLDimensions, R as parseFontSize, Z as ZERO_WIDTH_SPACE, D as getConfig, S as getUrl, T as renderKatexSanitized } from "./index-BL-57WPa.js";
+import { a as drawBackgroundRect, b as getTextObj, g as getNoteRect, d as drawRect, e as drawEmbeddedImage, f as drawImage } from "./chunk-YZCP3GAM-OLZV_Sef.js";
+import { I as ImperativeState } from "./chunk-QZHKN3VN-BT8kABWC.js";
 var parser = (function() {
   var o = /* @__PURE__ */ __name(function(k, v, o2, l) {
     for (o2 = o2 || {}, l = k.length; l--; o2[k[l]] = v) ;
@@ -821,195 +821,199 @@ var parser = (function() {
             this.popState();
             return 10;
           case 15:
+            yy_.yytext = yy_.yytext.trim();
+            this.popState();
+            return 10;
+          case 16:
             this.begin("LINE");
             return 15;
-          case 16:
+          case 17:
             this.begin("ID");
             return 51;
-          case 17:
+          case 18:
             this.begin("ID");
             return 53;
-          case 18:
-            return 14;
           case 19:
+            return 14;
+          case 20:
             this.begin("ID");
             return 54;
-          case 20:
+          case 21:
             this.popState();
             this.popState();
             this.begin("LINE");
             return 52;
-          case 21:
+          case 22:
             this.popState();
             this.popState();
             return 5;
-          case 22:
+          case 23:
             this.begin("LINE");
             return 37;
-          case 23:
+          case 24:
             this.begin("LINE");
             return 38;
-          case 24:
+          case 25:
             this.begin("LINE");
             return 39;
-          case 25:
+          case 26:
             this.begin("LINE");
             return 40;
-          case 26:
+          case 27:
             this.begin("LINE");
             return 50;
-          case 27:
+          case 28:
             this.begin("LINE");
             return 42;
-          case 28:
+          case 29:
             this.begin("LINE");
             return 44;
-          case 29:
+          case 30:
             this.begin("LINE");
             return 49;
-          case 30:
+          case 31:
             this.begin("LINE");
             return 45;
-          case 31:
+          case 32:
             this.begin("LINE");
             return 48;
-          case 32:
+          case 33:
             this.begin("LINE");
             return 47;
-          case 33:
+          case 34:
             this.popState();
             return 16;
-          case 34:
-            return 17;
           case 35:
-            return 67;
+            return 17;
           case 36:
-            return 68;
+            return 67;
           case 37:
-            return 61;
+            return 68;
           case 38:
-            return 62;
+            return 61;
           case 39:
-            return 63;
+            return 62;
           case 40:
-            return 64;
+            return 63;
           case 41:
-            return 59;
+            return 64;
           case 42:
-            return 56;
+            return 59;
           case 43:
+            return 56;
+          case 44:
             this.begin("ID");
             return 22;
-          case 44:
+          case 45:
             this.begin("ID");
             return 24;
-          case 45:
-            return 30;
           case 46:
-            return 31;
+            return 30;
           case 47:
+            return 31;
+          case 48:
             this.begin("acc_title");
             return 32;
-          case 48:
+          case 49:
             this.popState();
             return "acc_title_value";
-          case 49:
+          case 50:
             this.begin("acc_descr");
             return 34;
-          case 50:
+          case 51:
             this.popState();
             return "acc_descr_value";
-          case 51:
+          case 52:
             this.begin("acc_descr_multiline");
             break;
-          case 52:
+          case 53:
             this.popState();
             break;
-          case 53:
-            return "acc_descr_multiline_value";
           case 54:
-            return 6;
+            return "acc_descr_multiline_value";
           case 55:
-            return 19;
+            return 6;
           case 56:
-            return 21;
+            return 19;
           case 57:
-            return 66;
+            return 21;
           case 58:
-            return 5;
+            return 66;
           case 59:
+            return 5;
+          case 60:
             yy_.yytext = yy_.yytext.trim();
             return 73;
-          case 60:
-            return 80;
           case 61:
-            return 97;
+            return 80;
           case 62:
-            return 98;
+            return 97;
           case 63:
-            return 99;
+            return 98;
           case 64:
-            return 78;
+            return 99;
           case 65:
-            return 79;
+            return 78;
           case 66:
-            return 100;
+            return 79;
           case 67:
-            return 101;
+            return 100;
           case 68:
-            return 102;
+            return 101;
           case 69:
-            return 103;
+            return 102;
           case 70:
-            return 85;
+            return 103;
           case 71:
-            return 86;
+            return 85;
           case 72:
-            return 87;
+            return 86;
           case 73:
-            return 88;
+            return 87;
           case 74:
-            return 93;
+            return 88;
           case 75:
-            return 94;
+            return 93;
           case 76:
-            return 95;
+            return 94;
           case 77:
-            return 96;
+            return 95;
           case 78:
-            return 81;
+            return 96;
           case 79:
-            return 82;
+            return 81;
           case 80:
-            return 83;
+            return 82;
           case 81:
-            return 84;
+            return 83;
           case 82:
-            return 89;
+            return 84;
           case 83:
-            return 90;
+            return 89;
           case 84:
-            return 91;
+            return 90;
           case 85:
-            return 92;
+            return 91;
           case 86:
-            return 104;
+            return 92;
           case 87:
             return 104;
           case 88:
-            return 70;
+            return 104;
           case 89:
-            return 71;
+            return 70;
           case 90:
-            return 72;
+            return 71;
           case 91:
-            return 5;
+            return 72;
           case 92:
+            return 5;
+          case 93:
             return 10;
         }
       }, "anonymous"),
-      rules: [/^(?:[\n]+)/i, /^(?:\s+)/i, /^(?:((?!\n)\s)+)/i, /^(?:#[^\n]*)/i, /^(?:%(?!\{)[^\n]*)/i, /^(?:[^\}]%%[^\n]*)/i, /^(?:[0-9]+(?=[ \n]+))/i, /^(?:@\{)/i, /^(?:[^\}]+)/i, /^(?:\}(?=\s+as\s))/i, /^(?:\})/i, /^(?:[^\<->\->:\n,;@\s]+(?=@\{))/i, /^(?:[^<>:\n,;@\s]+(?=\s+as\s))/i, /^(?:[^<>:\n,;@]+(?=\s*[\n;#]|$))/i, /^(?:[^<>:\n,;@]*<[^\n]*)/i, /^(?:box\b)/i, /^(?:participant\b)/i, /^(?:actor\b)/i, /^(?:create\b)/i, /^(?:destroy\b)/i, /^(?:as\b)/i, /^(?:(?:))/i, /^(?:loop\b)/i, /^(?:rect\b)/i, /^(?:opt\b)/i, /^(?:alt\b)/i, /^(?:else\b)/i, /^(?:par\b)/i, /^(?:par_over\b)/i, /^(?:and\b)/i, /^(?:critical\b)/i, /^(?:option\b)/i, /^(?:break\b)/i, /^(?:(?:[:]?(?:no)?wrap)?[^#\n;]*)/i, /^(?:end\b)/i, /^(?:left of\b)/i, /^(?:right of\b)/i, /^(?:links\b)/i, /^(?:link\b)/i, /^(?:properties\b)/i, /^(?:details\b)/i, /^(?:over\b)/i, /^(?:note\b)/i, /^(?:activate\b)/i, /^(?:deactivate\b)/i, /^(?:title\s[^#\n;]+)/i, /^(?:title:\s[^#\n;]+)/i, /^(?:accTitle\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*\{\s*)/i, /^(?:[\}])/i, /^(?:[^\}]*)/i, /^(?:sequenceDiagram\b)/i, /^(?:autonumber\b)/i, /^(?:off\b)/i, /^(?:,)/i, /^(?:;)/i, /^(?:[^\/\\\+\()\+<\->\->:\n,;]+((?!(-x|--x|-\)|--\)|-\|\\|-\\|-\/|-\/\/|-\|\/|\/\|-|\\\|-|\/\/-|\\\\-|\/\|-|--\|\\|--|\(\)))[\-]*[^\+<\->\->:\n,;]+)*)/i, /^(?:->>)/i, /^(?:<<->>)/i, /^(?:-->>)/i, /^(?:<<-->>)/i, /^(?:->)/i, /^(?:-->)/i, /^(?:-[x])/i, /^(?:--[x])/i, /^(?:-[\)])/i, /^(?:--[\)])/i, /^(?:--\|\\)/i, /^(?:--\|\/)/i, /^(?:--\\\\)/i, /^(?:--\/\/)/i, /^(?:\/\|--)/i, /^(?:\\\|--)/i, /^(?:\/\/--)/i, /^(?:\\\\--)/i, /^(?:-\|\\)/i, /^(?:-\|\/)/i, /^(?:-\\\\)/i, /^(?:-\/\/)/i, /^(?:\/\|-)/i, /^(?:\\\|-)/i, /^(?:\/\/-)/i, /^(?:\\\\-)/i, /^(?::(?:(?:no)?wrap)?[^#\n;]*)/i, /^(?::)/i, /^(?:\+)/i, /^(?:-)/i, /^(?:\(\))/i, /^(?:$)/i, /^(?:.)/i],
-      conditions: { "acc_descr_multiline": { "rules": [52, 53], "inclusive": false }, "acc_descr": { "rules": [50], "inclusive": false }, "acc_title": { "rules": [48], "inclusive": false }, "ID": { "rules": [2, 3, 7, 11, 12, 13, 14], "inclusive": false }, "ALIAS": { "rules": [2, 3, 20, 21], "inclusive": false }, "LINE": { "rules": [2, 3, 33], "inclusive": false }, "CONFIG": { "rules": [8, 9, 10], "inclusive": false }, "CONFIG_DATA": { "rules": [], "inclusive": false }, "INITIAL": { "rules": [0, 1, 3, 4, 5, 6, 15, 16, 17, 18, 19, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 49, 51, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92], "inclusive": true } }
+      rules: [/^(?:[\n]+)/i, /^(?:\s+)/i, /^(?:((?!\n)\s)+)/i, /^(?:#[^\n]*)/i, /^(?:%(?!\{)[^\n]*)/i, /^(?:[^\}]%%[^\n]*)/i, /^(?:[0-9]+(?=[ \n]+))/i, /^(?:@\{)/i, /^(?:[^\}]+)/i, /^(?:\}(?=\s+as\s))/i, /^(?:\})/i, /^(?:[^\<->\->:\n,;@\s]+(?=@\{))/i, /^(?:[^<>:\n,;@\s]+(?=\s+as\s))/i, /^(?:[^<>:\n,;@]+(?=\s*[\n;#]|$))/i, /^(?:[^<>:\n,;@]*<[^\n]*)/i, /^(?:[^\n]+)/i, /^(?:box\b)/i, /^(?:participant\b)/i, /^(?:actor\b)/i, /^(?:create\b)/i, /^(?:destroy\b)/i, /^(?:as\b)/i, /^(?:(?:))/i, /^(?:loop\b)/i, /^(?:rect\b)/i, /^(?:opt\b)/i, /^(?:alt\b)/i, /^(?:else\b)/i, /^(?:par\b)/i, /^(?:par_over\b)/i, /^(?:and\b)/i, /^(?:critical\b)/i, /^(?:option\b)/i, /^(?:break\b)/i, /^(?:(?:[:]?(?:no)?wrap)?[^#\n;]*)/i, /^(?:end\b)/i, /^(?:left of\b)/i, /^(?:right of\b)/i, /^(?:links\b)/i, /^(?:link\b)/i, /^(?:properties\b)/i, /^(?:details\b)/i, /^(?:over\b)/i, /^(?:note\b)/i, /^(?:activate\b)/i, /^(?:deactivate\b)/i, /^(?:title\s[^#\n;]+)/i, /^(?:title:\s[^#\n;]+)/i, /^(?:accTitle\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*:\s*)/i, /^(?:(?!\n||)*[^\n]*)/i, /^(?:accDescr\s*\{\s*)/i, /^(?:[\}])/i, /^(?:[^\}]*)/i, /^(?:sequenceDiagram\b)/i, /^(?:autonumber\b)/i, /^(?:off\b)/i, /^(?:,)/i, /^(?:;)/i, /^(?:[^\/\\\+\()\+<\->\->:\n,;]+((?!(-x|--x|-\)|--\)|-\|\\|-\\|-\/|-\/\/|-\|\/|\/\|-|\\\|-|\/\/-|\\\\-|\/\|-|--\|\\|--|\(\)))[\-]*[^\+<\->\->:\n,;]+)*)/i, /^(?:->>)/i, /^(?:<<->>)/i, /^(?:-->>)/i, /^(?:<<-->>)/i, /^(?:->)/i, /^(?:-->)/i, /^(?:-[x])/i, /^(?:--[x])/i, /^(?:-[\)])/i, /^(?:--[\)])/i, /^(?:--\|\\)/i, /^(?:--\|\/)/i, /^(?:--\\\\)/i, /^(?:--\/\/)/i, /^(?:\/\|--)/i, /^(?:\\\|--)/i, /^(?:\/\/--)/i, /^(?:\\\\--)/i, /^(?:-\|\\)/i, /^(?:-\|\/)/i, /^(?:-\\\\)/i, /^(?:-\/\/)/i, /^(?:\/\|-)/i, /^(?:\\\|-)/i, /^(?:\/\/-)/i, /^(?:\\\\-)/i, /^(?::(?:(?:no)?wrap)?[^#\n;]*)/i, /^(?::)/i, /^(?:\+)/i, /^(?:-)/i, /^(?:\(\))/i, /^(?:$)/i, /^(?:.)/i],
+      conditions: { "acc_descr_multiline": { "rules": [53, 54], "inclusive": false }, "acc_descr": { "rules": [51], "inclusive": false }, "acc_title": { "rules": [49], "inclusive": false }, "ID": { "rules": [2, 3, 7, 11, 12, 13, 14, 15], "inclusive": false }, "ALIAS": { "rules": [2, 3, 21, 22], "inclusive": false }, "LINE": { "rules": [2, 3, 34], "inclusive": false }, "CONFIG": { "rules": [8, 9, 10], "inclusive": false }, "CONFIG_DATA": { "rules": [], "inclusive": false }, "INITIAL": { "rules": [0, 1, 3, 4, 5, 6, 16, 17, 18, 19, 20, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 50, 52, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93], "inclusive": true } }
     };
     return lexer2;
   })();
@@ -1601,9 +1605,23 @@ var SequenceDB = class {
     return getConfig2().sequence;
   }
 };
-var getStyles = /* @__PURE__ */ __name((options) => `.actor {
+var getStyles = /* @__PURE__ */ __name((options) => {
+  const dropShadow = options.dropShadow ?? "none";
+  const { look } = getConfig2();
+  return `.actor {
     stroke: ${options.actorBorder};
     fill: ${options.actorBkg};
+    stroke-width: ${options.strokeWidth ?? 1};
+  }
+
+  rect.actor.outer-path[data-look="neo"] {
+      filter: ${dropShadow};
+  }
+
+  rect.note[data-look="neo"] {
+      stroke:${options.noteBorderColor};
+      fill:${options.noteBkgColor};
+      filter: ${dropShadow};
   }
 
   text.actor > tspan {
@@ -1614,7 +1632,7 @@ var getStyles = /* @__PURE__ */ __name((options) => `.actor {
   .actor-line {
     stroke: ${options.actorLineColor};
   }
-  
+
   .innerArc {
     stroke-width: 1.5;
     stroke-dasharray: none;
@@ -1632,7 +1650,7 @@ var getStyles = /* @__PURE__ */ __name((options) => `.actor {
     stroke: ${options.signalColor};
   }
 
-  #arrowhead path {
+  [id$="-arrowhead"] path {
     fill: ${options.signalColor};
     stroke: ${options.signalColor};
   }
@@ -1641,11 +1659,11 @@ var getStyles = /* @__PURE__ */ __name((options) => `.actor {
     fill: ${options.sequenceNumberColor};
   }
 
-  #sequencenumber {
+  [id$="-sequencenumber"] {
     fill: ${options.signalColor};
   }
 
-  #crosshead path {
+  [id$="-crosshead"] path {
     fill: ${options.signalColor};
     stroke: ${options.signalColor};
   }
@@ -1658,6 +1676,7 @@ var getStyles = /* @__PURE__ */ __name((options) => `.actor {
   .labelBox {
     stroke: ${options.labelBoxBorderColor};
     fill: ${options.labelBoxBkgColor};
+    filter: ${look === "neo" ? dropShadow : "none"};
   }
 
   .labelText, .labelText > tspan {
@@ -1686,6 +1705,7 @@ var getStyles = /* @__PURE__ */ __name((options) => `.actor {
   .noteText, .noteText > tspan {
     fill: ${options.noteTextColor};
     stroke: none;
+    ${options.noteFontWeight ? `font-weight: ${options.noteFontWeight};` : ""}
   }
 
   .activation0 {
@@ -1713,25 +1733,30 @@ var getStyles = /* @__PURE__ */ __name((options) => `.actor {
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
 }
-  .actor-man line {
-    stroke: ${options.actorBorder};
-    fill: ${options.actorBkg};
-  }
   .actor-man circle, line {
-    stroke: ${options.actorBorder};
     fill: ${options.actorBkg};
     stroke-width: 2px;
   }
 
-`, "getStyles");
+  g rect.rect {
+    filter: ${dropShadow};
+    stroke: ${options.nodeBorder};
+  }
+`;
+}, "getStyles");
 var styles_default = getStyles;
 var ACTOR_TYPE_WIDTH = 18 * 2;
 var TOP_ACTOR_CLASS = "actor-top";
 var BOTTOM_ACTOR_CLASS = "actor-bottom";
 var ACTOR_BOX_CLASS = "actor-box";
 var ACTOR_MAN_FIGURE_CLASS = "actor-man";
+var COLOR_THEMES = /* @__PURE__ */ new Set(["redux-color", "redux-dark-color"]);
 var drawRect2 = /* @__PURE__ */ __name(function(elem, rectData) {
-  return drawRect(elem, rectData);
+  const rectElement = drawRect(elem, rectData);
+  if (getConfig().look === "neo") {
+    rectElement.attr("data-look", "neo");
+  }
+  return rectElement;
 }, "drawRect");
 var drawPopup = /* @__PURE__ */ __name(function(elem, actor, minMenuWidth, textAttrs, forceMenus) {
   if (actor.links === void 0 || actor.links === null || Object.keys(actor.links).length === 0) {
@@ -1943,10 +1968,12 @@ var fixLifeLineHeights = /* @__PURE__ */ __name((diagram2, actors, actorKeys, co
     }
   });
 }, "fixLifeLineHeights");
-var drawActorTypeParticipant = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeParticipant = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + actor.height;
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray } = themeVariables;
   const boxplusLineGroup = elem.append("g").lower();
   var g = boxplusLineGroup;
   if (!isFooter) {
@@ -1954,12 +1981,15 @@ var drawActorTypeParticipant = /* @__PURE__ */ __name(function(elem, actor, conf
     if (Object.keys(actor.links || {}).length && !conf2.forceMenus) {
       g.attr("onclick", popupMenuToggle(`actor${actorCnt}_popup`)).attr("cursor", "pointer");
     }
-    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     g = boxplusLineGroup.append("g");
     actor.actorCnt = actorCnt;
     if (actor.links != null) {
       g.attr("id", "root-" + actorCnt);
     }
+    if (look === "neo") {
+      g.attr("data-look", "neo");
+    }
   }
   const rect = getNoteRect();
   var cssclass = "actor";
@@ -1981,7 +2011,19 @@ var drawActorTypeParticipant = /* @__PURE__ */ __name(function(elem, actor, conf
   rect.rx = 3;
   rect.ry = 3;
   rect.name = actor.name;
+  if (look === "neo") {
+    rect.rx = 6;
+    rect.ry = 6;
+  }
   const rectElem = drawRect2(g, rect);
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    rectElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    rectElem.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  }
+  if (look === "neo") {
+    rectElem.attr("filter", "url(#drop-shadow)");
+  }
   actor.rectData = rect;
   if (actor.properties?.icon) {
     const iconSrc = actor.properties.icon.trim();
@@ -1991,6 +2033,11 @@ var drawActorTypeParticipant = /* @__PURE__ */ __name(function(elem, actor, conf
       drawImage(g, rect.x + rect.width - 20, rect.y + 10, iconSrc);
     }
   }
+  if (!isFooter) {
+    g.attr("data-et", "participant");
+    g.attr("data-type", "participant");
+    g.attr("data-id", actor.name);
+  }
   _drawTextCandidateFunc(conf2, hasKatex(actor.description))(
     actor.description,
     g,
@@ -2009,10 +2056,12 @@ var drawActorTypeParticipant = /* @__PURE__ */ __name(function(elem, actor, conf
   }
   return height;
 }, "drawActorTypeParticipant");
-var drawActorTypeCollections = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeCollections = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + actor.height;
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray } = themeVariables;
   const boxplusLineGroup = elem.append("g").lower();
   var g = boxplusLineGroup;
   if (!isFooter) {
@@ -2020,12 +2069,15 @@ var drawActorTypeCollections = /* @__PURE__ */ __name(function(elem, actor, conf
     if (Object.keys(actor.links || {}).length && !conf2.forceMenus) {
       g.attr("onclick", popupMenuToggle(`actor${actorCnt}_popup`)).attr("cursor", "pointer");
     }
-    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     g = boxplusLineGroup.append("g");
     actor.actorCnt = actorCnt;
     if (actor.links != null) {
       g.attr("id", "root-" + actorCnt);
     }
+    if (look === "neo") {
+      g.attr("data-look", "neo");
+    }
   }
   const rect = getNoteRect();
   var cssclass = "actor";
@@ -2053,8 +2105,18 @@ var drawActorTypeCollections = /* @__PURE__ */ __name(function(elem, actor, conf
     class: "actor"
   };
   const rectElem = drawRect2(g, rect);
-  drawRect2(g, shadowRect);
+  const stackedRect = drawRect2(g, shadowRect);
   actor.rectData = rect;
+  if (look === "neo") {
+    g.attr("filter", "url(#drop-shadow)");
+  }
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    rectElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    rectElem.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+    stackedRect.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    stackedRect.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  }
   if (actor.properties?.icon) {
     const iconSrc = actor.properties.icon.trim();
     if (iconSrc.charAt(0) === "@") {
@@ -2079,12 +2141,19 @@ var drawActorTypeCollections = /* @__PURE__ */ __name(function(elem, actor, conf
     actor.height = bounds2.height;
     height = bounds2.height;
   }
+  if (!isFooter) {
+    g.attr("data-et", "participant");
+    g.attr("data-type", "collections");
+    g.attr("data-id", actor.name);
+  }
   return height;
 }, "drawActorTypeCollections");
-var drawActorTypeQueue = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeQueue = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + actor.height;
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray } = themeVariables;
   const boxplusLineGroup = elem.append("g").lower();
   let g = boxplusLineGroup;
   if (!isFooter) {
@@ -2092,12 +2161,15 @@ var drawActorTypeQueue = /* @__PURE__ */ __name(function(elem, actor, conf2, isF
     if (Object.keys(actor.links || {}).length && !conf2.forceMenus) {
       g.attr("onclick", popupMenuToggle(`actor${actorCnt}_popup`)).attr("cursor", "pointer");
     }
-    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     g = boxplusLineGroup.append("g");
     actor.actorCnt = actorCnt;
     if (actor.links != null) {
       g.attr("id", "root-" + actorCnt);
     }
+    if (look === "neo") {
+      g.attr("data-look", "neo");
+    }
   }
   const rect = getNoteRect();
   let cssclass = "actor";
@@ -2111,33 +2183,41 @@ var drawActorTypeQueue = /* @__PURE__ */ __name(function(elem, actor, conf2, isF
   } else {
     cssclass += ` ${TOP_ACTOR_CLASS}`;
   }
+  g.attr("class", cssclass);
   rect.x = actor.x;
   rect.y = actorY;
   rect.width = actor.width;
   rect.height = actor.height;
-  rect.class = cssclass;
   rect.name = actor.name;
   const ry = rect.height / 2;
   const rx = ry / (2.5 + rect.height / 50);
   const cylinderGroup = g.append("g");
   const cylinderArc = g.append("g");
-  cylinderGroup.append("path").attr(
-    "d",
-    `M ${rect.x},${rect.y + ry}
+  const cylinderPath = `M ${rect.x},${rect.y + ry}
     a ${rx},${ry} 0 0 0 0,${rect.height}
     h ${rect.width - 2 * rx}
     a ${rx},${ry} 0 0 0 0,-${rect.height}
     Z
-  `
-  ).attr("class", cssclass);
+  `;
+  cylinderGroup.append("path").attr("d", cylinderPath);
   cylinderArc.append("path").attr(
     "d",
     `M ${rect.x},${rect.y + ry}
       a ${rx},${ry} 0 0 0 0,${rect.height}`
-  ).attr("stroke", "#666").attr("stroke-width", "1px").attr("class", cssclass);
+  );
   cylinderGroup.attr("transform", `translate(${rx}, ${-(rect.height / 2)})`);
   cylinderArc.attr("transform", `translate(${rect.width - rx}, ${-rect.height / 2})`);
   actor.rectData = rect;
+  if (look === "neo") {
+    cylinderGroup.attr("filter", "url(#drop-shadow)");
+  }
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    cylinderGroup.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    cylinderGroup.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+    cylinderArc.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    cylinderArc.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  }
   if (actor.properties?.icon) {
     const iconSrc = actor.properties.icon.trim();
     const iconX = rect.x + rect.width - 20;
@@ -2165,16 +2245,23 @@ var drawActorTypeQueue = /* @__PURE__ */ __name(function(elem, actor, conf2, isF
     actor.height = bounds2.height;
     height = bounds2.height;
   }
+  if (!isFooter) {
+    g.attr("data-et", "participant");
+    g.attr("data-type", "queue");
+    g.attr("data-id", actor.name);
+  }
   return height;
 }, "drawActorTypeQueue");
-var drawActorTypeControl = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeControl = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, diagramId, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 75;
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray, actorBorder, actorBkg } = themeVariables;
   const line = elem.append("g").lower();
   if (!isFooter) {
     actorCnt++;
-    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     actor.actorCnt = actorCnt;
   }
   const actElem = elem.append("g");
@@ -2196,9 +2283,17 @@ var drawActorTypeControl = /* @__PURE__ */ __name(function(elem, actor, conf2, i
   const cx = actor.x + actor.width / 2;
   const cy = actorY + 32;
   const r = 22;
-  actElem.append("defs").append("marker").attr("id", "filled-head-control").attr("refX", 11).attr("refY", 5.8).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "172.5").append("path").attr("d", "M 14.4 5.6 L 7.2 10.4 L 8.8 5.6 L 7.2 0.8 Z");
-  actElem.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("fill", "#eaeaf7").attr("stroke", "#666").attr("stroke-width", 1.2);
-  actElem.append("line").attr("marker-end", "url(#filled-head-control)").attr("transform", `translate(${cx}, ${cy - r})`);
+  actElem.append("defs").append("marker").attr("id", diagramId + "-filled-head-control").attr("refX", 11).attr("refY", 5.8).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "172.5").attr("stroke-width", 1.2).append("path").attr("d", "M 14.4 5.6 L 7.2 10.4 L 8.8 5.6 L 7.2 0.8 Z");
+  actElem.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("filter", `${look === "neo" ? "url(#drop-shadow)" : ""}`);
+  actElem.append("line").attr("marker-end", "url(#" + diagramId + "-filled-head-control)").attr("transform", `translate(${cx}, ${cy - r})`);
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    actElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    actElem.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  } else {
+    actElem.style("stroke", actorBorder);
+    actElem.style("fill", actorBkg);
+  }
   const bounds2 = actElem.node().getBBox();
   actor.height = bounds2.height + 2 * (conf2?.sequence?.labelBoxHeight ?? 0);
   _drawTextCandidateFunc(conf2, hasKatex(actor.description))(
@@ -2211,12 +2306,19 @@ var drawActorTypeControl = /* @__PURE__ */ __name(function(elem, actor, conf2, i
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
     conf2
   );
+  if (!isFooter) {
+    actElem.attr("data-et", "participant");
+    actElem.attr("data-type", "control");
+    actElem.attr("data-id", actor.name);
+  }
   return actor.height;
 }, "drawActorTypeControl");
-var drawActorTypeEntity = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeEntity = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 75;
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray } = themeVariables;
   const line = elem.append("g").lower();
   const actElem = elem.append("g");
   let cssClass = "actor";
@@ -2239,11 +2341,19 @@ var drawActorTypeEntity = /* @__PURE__ */ __name(function(elem, actor, conf2, is
   const r = 22;
   actElem.append("circle").attr("cx", cx).attr("cy", cy).attr("r", r).attr("width", actor.width).attr("height", actor.height);
   actElem.append("line").attr("x1", cx - r).attr("x2", cx + r).attr("y1", cy + r).attr("y2", cy + r).attr("stroke-width", 2);
+  if (look === "neo") {
+    actElem.attr("filter", "url(#drop-shadow)");
+  }
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    actElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    actElem.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  }
   const bounds2 = actElem.node().getBBox();
   actor.height = bounds2.height + (conf2?.sequence?.labelBoxHeight ?? 0);
   if (!isFooter) {
     actorCnt++;
-    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     actor.actorCnt = actorCnt;
   }
   _drawTextCandidateFunc(conf2, hasKatex(actor.description))(
@@ -2258,15 +2368,20 @@ var drawActorTypeEntity = /* @__PURE__ */ __name(function(elem, actor, conf2, is
   );
   if (!isFooter) {
     actElem.attr("transform", `translate(${0}, ${r / 2 - 5})`);
+    actElem.attr("data-et", "participant");
+    actElem.attr("data-type", "entity");
+    actElem.attr("data-id", actor.name);
   } else {
     actElem.attr("transform", `translate(${0}, ${r})`);
   }
   return actor.height;
 }, "drawActorTypeEntity");
-var drawActorTypeDatabase = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeDatabase = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + actor.height + 2 * conf2.boxTextMargin;
+  const { theme, themeVariables, look } = conf2;
+  const { bkgColorArray, borderColorArray, actorBorder } = themeVariables;
   const boxplusLineGroup = elem.append("g").lower();
   let g = boxplusLineGroup;
   if (!isFooter) {
@@ -2274,12 +2389,15 @@ var drawActorTypeDatabase = /* @__PURE__ */ __name(function(elem, actor, conf2,
     if (Object.keys(actor.links || {}).length && !conf2.forceMenus) {
       g.attr("onclick", popupMenuToggle(`actor${actorCnt}_popup`)).attr("cursor", "pointer");
     }
-    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    g.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     g = boxplusLineGroup.append("g");
     actor.actorCnt = actorCnt;
     if (actor.links != null) {
       g.attr("id", "root-" + actorCnt);
     }
+    if (look === "neo") {
+      g.attr("data-look", "neo");
+    }
   }
   const rect = getNoteRect();
   let cssclass = "actor";
@@ -2306,6 +2424,7 @@ var drawActorTypeDatabase = /* @__PURE__ */ __name(function(elem, actor, conf2,
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
   const cylinderGroup = g.append("g");
+  cylinderGroup.attr("class", cssclass);
   const d = `
   M ${rect.x},${rect.y + ry}
   a ${rx},${ry} 0 0 0 ${w},0
@@ -2314,7 +2433,17 @@ var drawActorTypeDatabase = /* @__PURE__ */ __name(function(elem, actor, conf2,
   a ${rx},${ry} 0 0 0 ${w},0
   l 0,-${h - 2 * ry}
 `;
-  cylinderGroup.append("path").attr("d", d).attr("fill", "#eaeaea").attr("stroke", "#000").attr("stroke-width", 1).attr("class", cssclass);
+  cylinderGroup.append("path").attr("d", d);
+  if (look === "neo") {
+    cylinderGroup.attr("filter", "url(#drop-shadow)");
+  }
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    cylinderGroup.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    cylinderGroup.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  } else {
+    cylinderGroup.style("stroke", actorBorder);
+  }
   cylinderGroup.attr("transform", `translate(${w}, ${ry})`);
   actor.rectData = rect;
   _drawTextCandidateFunc(conf2, hasKatex(actor.description))(
@@ -2332,17 +2461,24 @@ var drawActorTypeDatabase = /* @__PURE__ */ __name(function(elem, actor, conf2,
     const bounds2 = lastPath.node().getBBox();
     actor.height = bounds2.height + (conf2.sequence.labelBoxHeight ?? 0);
   }
+  if (!isFooter) {
+    g.attr("data-et", "participant");
+    g.attr("data-type", "database");
+    g.attr("data-id", actor.name);
+  }
   return actor.height;
 }, "drawActorTypeDatabase");
-var drawActorTypeBoundary = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeBoundary = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 80;
   const radius = 22;
   const line = elem.append("g").lower();
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray, actorBorder } = themeVariables;
   if (!isFooter) {
     actorCnt++;
-    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     actor.actorCnt = actorCnt;
   }
   const actElem = elem.append("g");
@@ -2364,6 +2500,16 @@ var drawActorTypeBoundary = /* @__PURE__ */ __name(function(elem, actor, conf2,
   actElem.append("line").attr("id", "actor-man-torso" + actorCnt).attr("x1", actor.x + actor.width / 2 - radius * 2.5).attr("y1", actorY + 12).attr("x2", actor.x + actor.width / 2 - 15).attr("y2", actorY + 12);
   actElem.append("line").attr("id", "actor-man-arms" + actorCnt).attr("x1", actor.x + actor.width / 2 - radius * 2.5).attr("y1", actorY + 2).attr("x2", actor.x + actor.width / 2 - radius * 2.5).attr("y2", actorY + 22);
   actElem.append("circle").attr("cx", actor.x + actor.width / 2).attr("cy", actorY + 12).attr("r", radius);
+  if (look === "neo") {
+    actElem.attr("filter", "url(#drop-shadow)");
+  }
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    actElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    actElem.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  } else {
+    actElem.style("stroke", actorBorder);
+  }
   const bounds2 = actElem.node().getBBox();
   actor.height = bounds2.height + (conf2.sequence.labelBoxHeight ?? 0);
   _drawTextCandidateFunc(conf2, hasKatex(actor.description))(
@@ -2376,21 +2522,24 @@ var drawActorTypeBoundary = /* @__PURE__ */ __name(function(elem, actor, conf2,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
     conf2
   );
+  actElem.attr("transform", `translate(0,${radius / 2 + 10})`);
   if (!isFooter) {
-    actElem.attr("transform", `translate(0,${radius / 2 + 10})`);
-  } else {
-    actElem.attr("transform", `translate(0,${radius / 2 + 10})`);
+    actElem.attr("data-et", "participant");
+    actElem.attr("data-type", "boundary");
+    actElem.attr("data-id", actor.name);
   }
   return actor.height;
 }, "drawActorTypeBoundary");
-var drawActorTypeActor = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter) {
+var drawActorTypeActor = /* @__PURE__ */ __name(function(elem, actor, conf2, isFooter, actorIndexMap) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 80;
+  const { look, theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray, actorBorder } = themeVariables;
   const line = elem.append("g").lower();
   if (!isFooter) {
     actorCnt++;
-    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name);
+    line.append("line").attr("id", "actor" + actorCnt).attr("x1", center).attr("y1", centerY).attr("x2", center).attr("y2", 2e3).attr("class", "actor-line 200").attr("stroke-width", "0.5px").attr("stroke", "#999").attr("name", actor.name).attr("data-et", "life-line").attr("data-id", actor.name);
     actor.actorCnt = actorCnt;
   }
   const actElem = elem.append("g");
@@ -2402,32 +2551,44 @@ var drawActorTypeActor = /* @__PURE__ */ __name(function(elem, actor, conf2, isF
   }
   actElem.attr("class", cssClass);
   actElem.attr("name", actor.name);
+  if (!isFooter) {
+    actElem.attr("data-et", "participant").attr("data-type", "actor").attr("data-id", actor.name);
+  }
+  const scale = look === "neo" ? 0.5 : 1;
+  const adjustedActorY = look === "neo" ? actorY + (1 - scale) * 30 : actorY;
+  actElem.append("line").attr("id", "actor-man-torso" + actorCnt).attr("x1", center).attr("y1", adjustedActorY + 25 * scale).attr("x2", center).attr("y2", adjustedActorY + 45 * scale);
+  actElem.append("line").attr("id", "actor-man-arms" + actorCnt).attr("x1", center - ACTOR_TYPE_WIDTH / 2 * scale).attr("y1", adjustedActorY + 33 * scale).attr("x2", center + ACTOR_TYPE_WIDTH / 2 * scale).attr("y2", adjustedActorY + 33 * scale);
+  actElem.append("line").attr("x1", center - ACTOR_TYPE_WIDTH / 2 * scale).attr("y1", adjustedActorY + 60 * scale).attr("x2", center).attr("y2", adjustedActorY + 45 * scale);
+  actElem.append("line").attr("x1", center).attr("y1", adjustedActorY + 45 * scale).attr("x2", center + (ACTOR_TYPE_WIDTH / 2 - 2) * scale).attr("y2", adjustedActorY + 60 * scale);
+  const circle = actElem.append("circle");
+  circle.attr("cx", actor.x + actor.width / 2);
+  circle.attr("cy", adjustedActorY + 10 * scale);
+  circle.attr("r", 15 * scale);
+  circle.attr("width", actor.width * scale);
+  circle.attr("height", actor.height * scale);
+  const bounds2 = actElem.node().getBBox();
+  actor.height = bounds2.height;
   const rect = getNoteRect();
   rect.x = actor.x;
-  rect.y = actorY;
+  rect.y = adjustedActorY;
   rect.fill = "#eaeaea";
   rect.width = actor.width;
-  rect.height = actor.height;
+  rect.height = actor.height / scale;
   rect.class = "actor";
   rect.rx = 3;
   rect.ry = 3;
-  actElem.append("line").attr("id", "actor-man-torso" + actorCnt).attr("x1", center).attr("y1", actorY + 25).attr("x2", center).attr("y2", actorY + 45);
-  actElem.append("line").attr("id", "actor-man-arms" + actorCnt).attr("x1", center - ACTOR_TYPE_WIDTH / 2).attr("y1", actorY + 33).attr("x2", center + ACTOR_TYPE_WIDTH / 2).attr("y2", actorY + 33);
-  actElem.append("line").attr("x1", center - ACTOR_TYPE_WIDTH / 2).attr("y1", actorY + 60).attr("x2", center).attr("y2", actorY + 45);
-  actElem.append("line").attr("x1", center).attr("y1", actorY + 45).attr("x2", center + ACTOR_TYPE_WIDTH / 2 - 2).attr("y2", actorY + 60);
-  const circle = actElem.append("circle");
-  circle.attr("cx", actor.x + actor.width / 2);
-  circle.attr("cy", actorY + 10);
-  circle.attr("r", 15);
-  circle.attr("width", actor.width);
-  circle.attr("height", actor.height);
-  const bounds2 = actElem.node().getBBox();
-  actor.height = bounds2.height;
+  const actorCount = actorIndexMap.get(actor.name) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    actElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    actElem.style("fill", bkgColorArray[actorCount % borderColorArray.length]);
+  } else {
+    actElem.style("stroke", actorBorder);
+  }
   _drawTextCandidateFunc(conf2, hasKatex(actor.description))(
     actor.description,
     actElem,
     rect.x,
-    rect.y + 35,
+    adjustedActorY + 35 * scale - (look === "neo" ? 10 : 0),
     rect.width,
     rect.height,
     { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
@@ -2435,24 +2596,34 @@ var drawActorTypeActor = /* @__PURE__ */ __name(function(elem, actor, conf2, isF
   );
   return actor.height;
 }, "drawActorTypeActor");
-var drawActor = /* @__PURE__ */ __name(async function(elem, actor, conf2, isFooter) {
+var drawActor = /* @__PURE__ */ __name(async function(elem, actor, conf2, isFooter, diagramId, diagObj, actorIndexMap) {
+  const resolvedActorIndexMap = actorIndexMap ?? new Map(
+    [...diagObj.db.getActors().values()].map((participant, index) => [participant.name, index])
+  );
   switch (actor.type) {
     case "actor":
-      return await drawActorTypeActor(elem, actor, conf2, isFooter);
+      return await drawActorTypeActor(elem, actor, conf2, isFooter, resolvedActorIndexMap);
     case "participant":
-      return await drawActorTypeParticipant(elem, actor, conf2, isFooter);
+      return await drawActorTypeParticipant(elem, actor, conf2, isFooter, resolvedActorIndexMap);
     case "boundary":
-      return await drawActorTypeBoundary(elem, actor, conf2, isFooter);
+      return await drawActorTypeBoundary(elem, actor, conf2, isFooter, resolvedActorIndexMap);
     case "control":
-      return await drawActorTypeControl(elem, actor, conf2, isFooter);
+      return await drawActorTypeControl(
+        elem,
+        actor,
+        conf2,
+        isFooter,
+        diagramId,
+        resolvedActorIndexMap
+      );
     case "entity":
-      return await drawActorTypeEntity(elem, actor, conf2, isFooter);
+      return await drawActorTypeEntity(elem, actor, conf2, isFooter, resolvedActorIndexMap);
     case "database":
-      return await drawActorTypeDatabase(elem, actor, conf2, isFooter);
+      return await drawActorTypeDatabase(elem, actor, conf2, isFooter, resolvedActorIndexMap);
     case "collections":
-      return await drawActorTypeCollections(elem, actor, conf2, isFooter);
+      return await drawActorTypeCollections(elem, actor, conf2, isFooter, resolvedActorIndexMap);
     case "queue":
-      return await drawActorTypeQueue(elem, actor, conf2, isFooter);
+      return await drawActorTypeQueue(elem, actor, conf2, isFooter, resolvedActorIndexMap);
   }
 }, "drawActor");
 var drawBox = /* @__PURE__ */ __name(function(elem, box, conf2) {
@@ -2476,17 +2647,28 @@ var drawBox = /* @__PURE__ */ __name(function(elem, box, conf2) {
 var anchorElement = /* @__PURE__ */ __name(function(elem) {
   return elem.append("g");
 }, "anchorElement");
-var drawActivation = /* @__PURE__ */ __name(function(elem, bounds2, verticalPos, conf2, actorActivations2) {
+var drawActivation = /* @__PURE__ */ __name(function(_elem, bounds2, verticalPos, conf2, actorActivations2, diagObj, actorIndexMap) {
+  const { theme, themeVariables } = conf2;
+  const { bkgColorArray, borderColorArray, mainBkg } = themeVariables;
   const rect = getNoteRect();
   const g = bounds2.anchored;
+  const actor = bounds2.actor;
   rect.x = bounds2.startx;
   rect.y = bounds2.starty;
   rect.class = "activation" + actorActivations2 % 3;
   rect.width = bounds2.stopx - bounds2.startx;
   rect.height = verticalPos - bounds2.starty;
-  drawRect2(g, rect);
+  const rectElem = drawRect2(g, rect);
+  const resolvedActorIndexMap = actorIndexMap ?? new Map(
+    [...diagObj.db.getActors().values()].map((participant, index) => [participant.name, index])
+  );
+  const actorCount = resolvedActorIndexMap.get(actor) ?? 0;
+  if (COLOR_THEMES.has(theme)) {
+    rectElem.style("stroke", borderColorArray[actorCount % borderColorArray.length]);
+    rectElem.style("fill", bkgColorArray[actorCount % borderColorArray.length] ?? mainBkg);
+  }
 }, "drawActivation");
-var drawLoop = /* @__PURE__ */ __name(async function(elem, loopModel, labelText, conf2) {
+var drawLoop = /* @__PURE__ */ __name(async function(elem, loopModel, labelText, conf2, msg) {
   const {
     boxMargin,
     boxTextMargin,
@@ -2496,7 +2678,7 @@ var drawLoop = /* @__PURE__ */ __name(async function(elem, loopModel, labelText,
     messageFontSize: fontSize,
     messageFontWeight: fontWeight
   } = conf2;
-  const g = elem.append("g");
+  const g = elem.append("g").attr("data-et", "control-structure").attr("data-id", "i" + msg.id);
   const drawLoopLine = /* @__PURE__ */ __name(function(startx, starty, stopx, stopy) {
     return g.append("line").attr("x1", startx).attr("y1", starty).attr("x2", stopx).attr("y2", stopy).attr("class", "loopLine");
   }, "drawLoopLine");
@@ -2522,8 +2704,8 @@ var drawLoop = /* @__PURE__ */ __name(async function(elem, loopModel, labelText,
   txt.anchor = "middle";
   txt.valign = "middle";
   txt.tspan = false;
-  txt.width = labelBoxWidth || 50;
-  txt.height = labelBoxHeight || 20;
+  txt.width = Math.max(labelBoxWidth ?? 0, 50);
+  txt.height = labelBoxHeight + (conf2.look === "neo" ? 15 : 0) || 20;
   txt.textMargin = boxTextMargin;
   txt.class = "labelText";
   drawLabel(g, txt);
@@ -2573,38 +2755,42 @@ var drawLoop = /* @__PURE__ */ __name(async function(elem, loopModel, labelText,
 var drawBackgroundRect2 = /* @__PURE__ */ __name(function(elem, bounds2) {
   drawBackgroundRect(elem, bounds2);
 }, "drawBackgroundRect");
-var insertDatabaseIcon = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("symbol").attr("id", "database").attr("fill-rule", "evenodd").attr("clip-rule", "evenodd").append("path").attr("transform", "scale(.5)").attr(
+var insertDatabaseIcon = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("symbol").attr("id", id + "-database").attr("fill-rule", "evenodd").attr("clip-rule", "evenodd").append("path").attr("transform", "scale(.5)").attr(
     "d",
     "M12.258.001l.256.004.255.005.253.008.251.01.249.012.247.015.246.016.242.019.241.02.239.023.236.024.233.027.231.028.229.031.225.032.223.034.22.036.217.038.214.04.211.041.208.043.205.045.201.046.198.048.194.05.191.051.187.053.183.054.18.056.175.057.172.059.168.06.163.061.16.063.155.064.15.066.074.033.073.033.071.034.07.034.069.035.068.035.067.035.066.035.064.036.064.036.062.036.06.036.06.037.058.037.058.037.055.038.055.038.053.038.052.038.051.039.05.039.048.039.047.039.045.04.044.04.043.04.041.04.04.041.039.041.037.041.036.041.034.041.033.042.032.042.03.042.029.042.027.042.026.043.024.043.023.043.021.043.02.043.018.044.017.043.015.044.013.044.012.044.011.045.009.044.007.045.006.045.004.045.002.045.001.045v17l-.001.045-.002.045-.004.045-.006.045-.007.045-.009.044-.011.045-.012.044-.013.044-.015.044-.017.043-.018.044-.02.043-.021.043-.023.043-.024.043-.026.043-.027.042-.029.042-.03.042-.032.042-.033.042-.034.041-.036.041-.037.041-.039.041-.04.041-.041.04-.043.04-.044.04-.045.04-.047.039-.048.039-.05.039-.051.039-.052.038-.053.038-.055.038-.055.038-.058.037-.058.037-.06.037-.06.036-.062.036-.064.036-.064.036-.066.035-.067.035-.068.035-.069.035-.07.034-.071.034-.073.033-.074.033-.15.066-.155.064-.16.063-.163.061-.168.06-.172.059-.175.057-.18.056-.183.054-.187.053-.191.051-.194.05-.198.048-.201.046-.205.045-.208.043-.211.041-.214.04-.217.038-.22.036-.223.034-.225.032-.229.031-.231.028-.233.027-.236.024-.239.023-.241.02-.242.019-.246.016-.247.015-.249.012-.251.01-.253.008-.255.005-.256.004-.258.001-.258-.001-.256-.004-.255-.005-.253-.008-.251-.01-.249-.012-.247-.015-.245-.016-.243-.019-.241-.02-.238-.023-.236-.024-.234-.027-.231-.028-.228-.031-.226-.032-.223-.034-.22-.036-.217-.038-.214-.04-.211-.041-.208-.043-.204-.045-.201-.046-.198-.048-.195-.05-.19-.051-.187-.053-.184-.054-.179-.056-.176-.057-.172-.059-.167-.06-.164-.061-.159-.063-.155-.064-.151-.066-.074-.033-.072-.033-.072-.034-.07-.034-.069-.035-.068-.035-.067-.035-.066-.035-.064-.036-.063-.036-.062-.036-.061-.036-.06-.037-.058-.037-.057-.037-.056-.038-.055-.038-.053-.038-.052-.038-.051-.039-.049-.039-.049-.039-.046-.039-.046-.04-.044-.04-.043-.04-.041-.04-.04-.041-.039-.041-.037-.041-.036-.041-.034-.041-.033-.042-.032-.042-.03-.042-.029-.042-.027-.042-.026-.043-.024-.043-.023-.043-.021-.043-.02-.043-.018-.044-.017-.043-.015-.044-.013-.044-.012-.044-.011-.045-.009-.044-.007-.045-.006-.045-.004-.045-.002-.045-.001-.045v-17l.001-.045.002-.045.004-.045.006-.045.007-.045.009-.044.011-.045.012-.044.013-.044.015-.044.017-.043.018-.044.02-.043.021-.043.023-.043.024-.043.026-.043.027-.042.029-.042.03-.042.032-.042.033-.042.034-.041.036-.041.037-.041.039-.041.04-.041.041-.04.043-.04.044-.04.046-.04.046-.039.049-.039.049-.039.051-.039.052-.038.053-.038.055-.038.056-.038.057-.037.058-.037.06-.037.061-.036.062-.036.063-.036.064-.036.066-.035.067-.035.068-.035.069-.035.07-.034.072-.034.072-.033.074-.033.151-.066.155-.064.159-.063.164-.061.167-.06.172-.059.176-.057.179-.056.184-.054.187-.053.19-.051.195-.05.198-.048.201-.046.204-.045.208-.043.211-.041.214-.04.217-.038.22-.036.223-.034.226-.032.228-.031.231-.028.234-.027.236-.024.238-.023.241-.02.243-.019.245-.016.247-.015.249-.012.251-.01.253-.008.255-.005.256-.004.258-.001.258.001zm-9.258 20.499v.01l.001.021.003.021.004.022.005.021.006.022.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.023.018.024.019.024.021.024.022.025.023.024.024.025.052.049.056.05.061.051.066.051.07.051.075.051.079.052.084.052.088.052.092.052.097.052.102.051.105.052.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.048.144.049.147.047.152.047.155.047.16.045.163.045.167.043.171.043.176.041.178.041.183.039.187.039.19.037.194.035.197.035.202.033.204.031.209.03.212.029.216.027.219.025.222.024.226.021.23.02.233.018.236.016.24.015.243.012.246.01.249.008.253.005.256.004.259.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.021.224-.024.22-.026.216-.027.212-.028.21-.031.205-.031.202-.034.198-.034.194-.036.191-.037.187-.039.183-.04.179-.04.175-.042.172-.043.168-.044.163-.045.16-.046.155-.046.152-.047.148-.048.143-.049.139-.049.136-.05.131-.05.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.053.083-.051.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.05.023-.024.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.023.01-.022.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.127l-.077.055-.08.053-.083.054-.085.053-.087.052-.09.052-.093.051-.095.05-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.045-.118.044-.12.043-.122.042-.124.042-.126.041-.128.04-.13.04-.132.038-.134.038-.135.037-.138.037-.139.035-.142.035-.143.034-.144.033-.147.032-.148.031-.15.03-.151.03-.153.029-.154.027-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.01-.179.008-.179.008-.181.006-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.006-.179-.008-.179-.008-.178-.01-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.027-.153-.029-.151-.03-.15-.03-.148-.031-.146-.032-.145-.033-.143-.034-.141-.035-.14-.035-.137-.037-.136-.037-.134-.038-.132-.038-.13-.04-.128-.04-.126-.041-.124-.042-.122-.042-.12-.044-.117-.043-.116-.045-.113-.045-.112-.046-.109-.047-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.05-.093-.052-.09-.051-.087-.052-.085-.053-.083-.054-.08-.054-.077-.054v4.127zm0-5.654v.011l.001.021.003.021.004.021.005.022.006.022.007.022.009.022.01.022.011.023.012.023.013.023.015.024.016.023.017.024.018.024.019.024.021.024.022.024.023.025.024.024.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.052.11.051.114.051.119.052.123.05.127.051.131.05.135.049.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.044.171.042.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.022.23.02.233.018.236.016.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.012.241-.015.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.048.139-.05.136-.049.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.051.051-.049.023-.025.023-.024.021-.025.02-.024.019-.024.018-.024.017-.024.015-.023.014-.023.013-.024.012-.022.01-.023.01-.023.008-.022.006-.022.006-.022.004-.021.004-.022.001-.021.001-.021v-4.139l-.077.054-.08.054-.083.054-.085.052-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.049-.105.048-.106.047-.109.047-.111.046-.114.045-.115.044-.118.044-.12.044-.122.042-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.035-.143.033-.144.033-.147.033-.148.031-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.025-.161.024-.162.023-.163.022-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.011-.178.009-.179.009-.179.007-.181.007-.182.005-.182.004-.184.003-.184.002h-.37l-.184-.002-.184-.003-.182-.004-.182-.005-.181-.007-.179-.007-.179-.009-.178-.009-.176-.011-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.022-.162-.023-.161-.024-.159-.025-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.031-.146-.033-.145-.033-.143-.033-.141-.035-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.04-.126-.041-.124-.042-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.047-.105-.048-.102-.049-.1-.049-.097-.05-.095-.051-.093-.051-.09-.051-.087-.053-.085-.052-.083-.054-.08-.054-.077-.054v4.139zm0-5.666v.011l.001.02.003.022.004.021.005.022.006.021.007.022.009.023.01.022.011.023.012.023.013.023.015.023.016.024.017.024.018.023.019.024.021.025.022.024.023.024.024.025.052.05.056.05.061.05.066.051.07.051.075.052.079.051.084.052.088.052.092.052.097.052.102.052.105.051.11.052.114.051.119.051.123.051.127.05.131.05.135.05.139.049.144.048.147.048.152.047.155.046.16.045.163.045.167.043.171.043.176.042.178.04.183.04.187.038.19.037.194.036.197.034.202.033.204.032.209.03.212.028.216.027.219.025.222.024.226.021.23.02.233.018.236.017.24.014.243.012.246.01.249.008.253.006.256.003.259.001.26-.001.257-.003.254-.006.25-.008.247-.01.244-.013.241-.014.237-.016.233-.018.231-.02.226-.022.224-.024.22-.025.216-.027.212-.029.21-.03.205-.032.202-.033.198-.035.194-.036.191-.037.187-.039.183-.039.179-.041.175-.042.172-.043.168-.044.163-.045.16-.045.155-.047.152-.047.148-.048.143-.049.139-.049.136-.049.131-.051.126-.05.123-.051.118-.052.114-.051.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.052.07-.051.065-.051.06-.051.056-.05.051-.049.023-.025.023-.025.021-.024.02-.024.019-.024.018-.024.017-.024.015-.023.014-.024.013-.023.012-.023.01-.022.01-.023.008-.022.006-.022.006-.022.004-.022.004-.021.001-.021.001-.021v-4.153l-.077.054-.08.054-.083.053-.085.053-.087.053-.09.051-.093.051-.095.051-.097.05-.1.049-.102.048-.105.048-.106.048-.109.046-.111.046-.114.046-.115.044-.118.044-.12.043-.122.043-.124.042-.126.041-.128.04-.13.039-.132.039-.134.038-.135.037-.138.036-.139.036-.142.034-.143.034-.144.033-.147.032-.148.032-.15.03-.151.03-.153.028-.154.028-.156.027-.158.026-.159.024-.161.024-.162.023-.163.023-.165.021-.166.02-.167.019-.169.018-.169.017-.171.016-.173.015-.173.014-.175.013-.175.012-.177.01-.178.01-.179.009-.179.007-.181.006-.182.006-.182.004-.184.003-.184.001-.185.001-.185-.001-.184-.001-.184-.003-.182-.004-.182-.006-.181-.006-.179-.007-.179-.009-.178-.01-.176-.01-.176-.012-.175-.013-.173-.014-.172-.015-.171-.016-.17-.017-.169-.018-.167-.019-.166-.02-.165-.021-.163-.023-.162-.023-.161-.024-.159-.024-.157-.026-.156-.027-.155-.028-.153-.028-.151-.03-.15-.03-.148-.032-.146-.032-.145-.033-.143-.034-.141-.034-.14-.036-.137-.036-.136-.037-.134-.038-.132-.039-.13-.039-.128-.041-.126-.041-.124-.041-.122-.043-.12-.043-.117-.044-.116-.044-.113-.046-.112-.046-.109-.046-.106-.048-.105-.048-.102-.048-.1-.05-.097-.049-.095-.051-.093-.051-.09-.052-.087-.052-.085-.053-.083-.053-.08-.054-.077-.054v4.153zm8.74-8.179l-.257.004-.254.005-.25.008-.247.011-.244.012-.241.014-.237.016-.233.018-.231.021-.226.022-.224.023-.22.026-.216.027-.212.028-.21.031-.205.032-.202.033-.198.034-.194.036-.191.038-.187.038-.183.04-.179.041-.175.042-.172.043-.168.043-.163.045-.16.046-.155.046-.152.048-.148.048-.143.048-.139.049-.136.05-.131.05-.126.051-.123.051-.118.051-.114.052-.11.052-.106.052-.101.052-.096.052-.092.052-.088.052-.083.052-.079.052-.074.051-.07.052-.065.051-.06.05-.056.05-.051.05-.023.025-.023.024-.021.024-.02.025-.019.024-.018.024-.017.023-.015.024-.014.023-.013.023-.012.023-.01.023-.01.022-.008.022-.006.023-.006.021-.004.022-.004.021-.001.021-.001.021.001.021.001.021.004.021.004.022.006.021.006.023.008.022.01.022.01.023.012.023.013.023.014.023.015.024.017.023.018.024.019.024.02.025.021.024.023.024.023.025.051.05.056.05.06.05.065.051.07.052.074.051.079.052.083.052.088.052.092.052.096.052.101.052.106.052.11.052.114.052.118.051.123.051.126.051.131.05.136.05.139.049.143.048.148.048.152.048.155.046.16.046.163.045.168.043.172.043.175.042.179.041.183.04.187.038.191.038.194.036.198.034.202.033.205.032.21.031.212.028.216.027.22.026.224.023.226.022.231.021.233.018.237.016.241.014.244.012.247.011.25.008.254.005.257.004.26.001.26-.001.257-.004.254-.005.25-.008.247-.011.244-.012.241-.014.237-.016.233-.018.231-.021.226-.022.224-.023.22-.026.216-.027.212-.028.21-.031.205-.032.202-.033.198-.034.194-.036.191-.038.187-.038.183-.04.179-.041.175-.042.172-.043.168-.043.163-.045.16-.046.155-.046.152-.048.148-.048.143-.048.139-.049.136-.05.131-.05.126-.051.123-.051.118-.051.114-.052.11-.052.106-.052.101-.052.096-.052.092-.052.088-.052.083-.052.079-.052.074-.051.07-.052.065-.051.06-.05.056-.05.051-.05.023-.025.023-.024.021-.024.02-.025.019-.024.018-.024.017-.023.015-.024.014-.023.013-.023.012-.023.01-.023.01-.022.008-.022.006-.023.006-.021.004-.022.004-.021.001-.021.001-.021-.001-.021-.001-.021-.004-.021-.004-.022-.006-.021-.006-.023-.008-.022-.01-.022-.01-.023-.012-.023-.013-.023-.014-.023-.015-.024-.017-.023-.018-.024-.019-.024-.02-.025-.021-.024-.023-.024-.023-.025-.051-.05-.056-.05-.06-.05-.065-.051-.07-.052-.074-.051-.079-.052-.083-.052-.088-.052-.092-.052-.096-.052-.101-.052-.106-.052-.11-.052-.114-.052-.118-.051-.123-.051-.126-.051-.131-.05-.136-.05-.139-.049-.143-.048-.148-.048-.152-.048-.155-.046-.16-.046-.163-.045-.168-.043-.172-.043-.175-.042-.179-.041-.183-.04-.187-.038-.191-.038-.194-.036-.198-.034-.202-.033-.205-.032-.21-.031-.212-.028-.216-.027-.22-.026-.224-.023-.226-.022-.231-.021-.233-.018-.237-.016-.241-.014-.244-.012-.247-.011-.25-.008-.254-.005-.257-.004-.26-.001-.26.001z"
   );
 }, "insertDatabaseIcon");
-var insertComputerIcon = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("symbol").attr("id", "computer").attr("width", "24").attr("height", "24").append("path").attr("transform", "scale(.5)").attr(
+var insertComputerIcon = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("symbol").attr("id", id + "-computer").attr("width", "24").attr("height", "24").append("path").attr("transform", "scale(.5)").attr(
     "d",
     "M2 2v13h20v-13h-20zm18 11h-16v-9h16v9zm-10.228 6l.466-1h3.524l.467 1h-4.457zm14.228 3h-24l2-6h2.104l-1.33 4h18.45l-1.297-4h2.073l2 6zm-5-10h-14v-7h14v7z"
   );
 }, "insertComputerIcon");
-var insertClockIcon = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("symbol").attr("id", "clock").attr("width", "24").attr("height", "24").append("path").attr("transform", "scale(.5)").attr(
+var insertClockIcon = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("symbol").attr("id", id + "-clock").attr("width", "24").attr("height", "24").append("path").attr("transform", "scale(.5)").attr(
     "d",
     "M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.848 12.459c.202.038.202.333.001.372-1.907.361-6.045 1.111-6.547 1.111-.719 0-1.301-.582-1.301-1.301 0-.512.77-5.447 1.125-7.445.034-.192.312-.181.343.014l.985 6.238 5.394 1.011z"
   );
 }, "insertClockIcon");
-var insertArrowHead = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "arrowhead").attr("refX", 7.9).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M -1 0 L 10 5 L 0 10 z");
+var insertArrowHead = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-arrowhead").attr("refX", 7.9).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M -1 0 L 10 5 L 0 10 z");
 }, "insertArrowHead");
-var insertArrowFilledHead = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "filled-head").attr("refX", 15.5).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L14,7 L9,1 Z");
+var insertArrowFilledHead = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-filled-head").attr("refX", 15.5).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L14,7 L9,1 Z");
 }, "insertArrowFilledHead");
-var insertSequenceNumber = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "sequencenumber").attr("refX", 15).attr("refY", 15).attr("markerWidth", 60).attr("markerHeight", 40).attr("orient", "auto").append("circle").attr("cx", 15).attr("cy", 15).attr("r", 6);
+var insertSequenceNumber = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-sequencenumber").attr("refX", 15).attr("refY", 15).attr("markerWidth", 60).attr("markerHeight", 40).attr("orient", "auto").append("circle").attr("cx", 15).attr("cy", 15).attr("r", 6);
 }, "insertSequenceNumber");
-var insertArrowCrossHead = /* @__PURE__ */ __name(function(elem) {
+var insertArrowCrossHead = /* @__PURE__ */ __name(function(elem, id) {
   const defs = elem.append("defs");
-  const marker = defs.append("marker").attr("id", "crosshead").attr("markerWidth", 15).attr("markerHeight", 8).attr("orient", "auto").attr("refX", 4).attr("refY", 4.5);
+  const marker = defs.append("marker").attr("id", id + "-crosshead").attr("markerWidth", 15).attr("markerHeight", 8).attr("orient", "auto").attr("refX", 4).attr("refY", 4.5);
   marker.append("path").attr("fill", "none").attr("stroke", "#000000").style("stroke-dasharray", "0, 0").attr("stroke-width", "1pt").attr("d", "M 1,2 L 6,7 M 6,2 L 1,7");
 }, "insertArrowCrossHead");
+var insertDropShadow = /* @__PURE__ */ __name(function(elem, conf2) {
+  const { theme } = conf2;
+  elem.append("defs").append("filter").attr("id", "drop-shadow").attr("height", "130%").attr("width", "130%").append("feDropShadow").attr("dx", "4").attr("dy", "4").attr("stdDeviation", 0).attr("flood-opacity", "0.06").attr("flood-color", `${theme === "redux" || theme === "redux-color" ? "#000000" : "#FFFFFF"}`);
+}, "insertDropShadow");
 var getTextObj2 = /* @__PURE__ */ __name(function() {
   return {
     x: 0,
@@ -2726,17 +2912,17 @@ var _drawMenuItemTextCandidateFunc = /* @__PURE__ */ (function() {
     return conf2.textPlacement === "fo" ? byFo : conf2.textPlacement === "old" ? byText : byTspan;
   };
 })();
-var insertSolidTopArrowHead = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "solidTopArrowHead").attr("refX", 7.9).attr("refY", 7.25).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 8 L 0 8 z");
+var insertSolidTopArrowHead = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-solidTopArrowHead").attr("refX", 7.9).attr("refY", 7.25).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 8 L 0 8 z");
 }, "insertSolidTopArrowHead");
-var insertSolidBottomArrowHead = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "solidBottomArrowHead").attr("refX", 7.9).attr("refY", 0.75).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 0 L 0 8 z");
+var insertSolidBottomArrowHead = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-solidBottomArrowHead").attr("refX", 7.9).attr("refY", 0.75).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 10 0 L 0 8 z");
 }, "insertSolidBottomArrowHead");
-var insertStickTopArrowHead = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "stickTopArrowHead").attr("refX", 7.5).attr("refY", 7).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 7 7").attr("stroke", "black").attr("stroke-width", 1.5).attr("fill", "none");
+var insertStickTopArrowHead = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-stickTopArrowHead").attr("refX", 7.5).attr("refY", 7).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 0 L 7 7").attr("stroke", "black").attr("stroke-width", 1.5).attr("fill", "none");
 }, "insertStickTopArrowHead");
-var insertStickBottomArrowHead = /* @__PURE__ */ __name(function(elem) {
-  elem.append("defs").append("marker").attr("id", "stickBottomArrowHead").attr("refX", 7.5).attr("refY", 0).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 7 L 7 0").attr("stroke", "black").attr("stroke-width", 1.5).attr("fill", "none");
+var insertStickBottomArrowHead = /* @__PURE__ */ __name(function(elem, id) {
+  elem.append("defs").append("marker").attr("id", id + "-stickBottomArrowHead").attr("refX", 7.5).attr("refY", 0).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto-start-reverse").append("path").attr("d", "M 0 7 L 7 0").attr("stroke", "black").attr("stroke-width", 1.5).attr("fill", "none");
 }, "insertStickBottomArrowHead");
 var svgDraw_default = {
   drawRect: drawRect2,
@@ -2760,6 +2946,7 @@ var svgDraw_default = {
   getNoteRect: getNoteRect2,
   fixLifeLineHeights,
   sanitizeUrl: distExports.sanitizeUrl,
+  insertDropShadow,
   insertSolidTopArrowHead,
   insertSolidBottomArrowHead,
   insertStickTopArrowHead,
@@ -2947,7 +3134,7 @@ var bounds = {
     return { bounds: this.data, models: this.models };
   }, "getBounds")
 };
-var drawNote = /* @__PURE__ */ __name(async function(elem, noteModel) {
+var drawNote = /* @__PURE__ */ __name(async function(elem, noteModel, id) {
   bounds.bumpVerticalPos(conf.boxMargin);
   noteModel.height = conf.boxMargin;
   noteModel.starty = bounds.getVerticalPos();
@@ -2957,6 +3144,8 @@ var drawNote = /* @__PURE__ */ __name(async function(elem, noteModel) {
   rect.width = noteModel.width || conf.width;
   rect.class = "note";
   const g = elem.append("g");
+  g.attr("data-et", "note");
+  g.attr("data-id", "i" + id);
   const rectElem = svgDraw_default.drawRect(g, rect);
   const textObj = getTextObj();
   textObj.x = noteModel.startx;
@@ -3097,7 +3286,7 @@ async function boundMessage(_diagram, msgModel) {
   return lineStartY;
 }
 __name(boundMessage, "boundMessage");
-var drawMessage = /* @__PURE__ */ __name(async function(diagram2, msgModel, lineStartY, diagObj, msg) {
+var drawMessage = /* @__PURE__ */ __name(async function(diagram2, msgModel, lineStartY, diagObj, msg, diagramId) {
   const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
   const textDims = utils_default.calculateTextDimensions(message, messageFont(conf));
   const textObj = getTextObj();
@@ -3137,6 +3326,9 @@ var drawMessage = /* @__PURE__ */ __name(async function(diagram2, msgModel, line
         "M " + lineStartX + "," + lineStartY + " C " + (lineStartX + 60) + "," + (lineStartY - 10) + " " + (startx + 60) + "," + (lineStartY + 30) + " " + startx + "," + (lineStartY + 20)
       );
     }
+    if (hasCentralConnection(msg, diagObj)) {
+      drawCentralConnection(diagram2, msg, msgModel, diagObj, startx, stopx, lineStartY);
+    }
   } else {
     line = diagram2.append("line");
     line.attr("x1", startx);
@@ -3153,6 +3345,10 @@ var drawMessage = /* @__PURE__ */ __name(async function(diagram2, msgModel, line
   } else {
     line.attr("class", "messageLine0");
   }
+  line.attr("data-et", "message");
+  line.attr("data-id", "i" + msgModel.id);
+  line.attr("data-from", msgModel.from);
+  line.attr("data-to", msgModel.to);
   let url = "";
   if (conf.arrowMarkerAbsolute) {
     url = getUrl(true);
@@ -3161,41 +3357,41 @@ var drawMessage = /* @__PURE__ */ __name(async function(diagram2, msgModel, line
   line.attr("stroke", "none");
   line.style("fill", "none");
   if (type === diagObj.db.LINETYPE.SOLID_TOP || type === diagObj.db.LINETYPE.SOLID_TOP_DOTTED) {
-    line.attr("marker-end", "url(" + url + "#solidTopArrowHead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-solidTopArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.SOLID_BOTTOM || type === diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED) {
-    line.attr("marker-end", "url(" + url + "#solidBottomArrowHead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-solidBottomArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.STICK_TOP || type === diagObj.db.LINETYPE.STICK_TOP_DOTTED) {
-    line.attr("marker-end", "url(" + url + "#stickTopArrowHead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-stickTopArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.STICK_BOTTOM || type === diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED) {
-    line.attr("marker-end", "url(" + url + "#stickBottomArrowHead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-stickBottomArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE || type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED) {
-    line.attr("marker-start", "url(" + url + "#solidBottomArrowHead)");
+    line.attr("marker-start", "url(" + url + "#" + diagramId + "-solidBottomArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE || type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED) {
-    line.attr("marker-start", "url(" + url + "#solidTopArrowHead)");
+    line.attr("marker-start", "url(" + url + "#" + diagramId + "-solidTopArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE || type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED) {
-    line.attr("marker-start", "url(" + url + "#stickBottomArrowHead)");
+    line.attr("marker-start", "url(" + url + "#" + diagramId + "-stickBottomArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE || type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED) {
-    line.attr("marker-start", "url(" + url + "#stickTopArrowHead)");
+    line.attr("marker-start", "url(" + url + "#" + diagramId + "-stickTopArrowHead)");
   }
   if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
-    line.attr("marker-end", "url(" + url + "#arrowhead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-arrowhead)");
   }
   if (type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID || type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED) {
-    line.attr("marker-start", "url(" + url + "#arrowhead)");
-    line.attr("marker-end", "url(" + url + "#arrowhead)");
+    line.attr("marker-start", "url(" + url + "#" + diagramId + "-arrowhead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-arrowhead)");
   }
   if (type === diagObj.db.LINETYPE.SOLID_POINT || type === diagObj.db.LINETYPE.DOTTED_POINT) {
-    line.attr("marker-end", "url(" + url + "#filled-head)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-filled-head)");
   }
   if (type === diagObj.db.LINETYPE.SOLID_CROSS || type === diagObj.db.LINETYPE.DOTTED_CROSS) {
-    line.attr("marker-end", "url(" + url + "#crosshead)");
+    line.attr("marker-end", "url(" + url + "#" + diagramId + "-crosshead)");
   }
   if (sequenceVisible || conf.showSequenceNumbers) {
     const isBidirectional = type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID || type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
@@ -3235,7 +3431,7 @@ var drawMessage = /* @__PURE__ */ __name(async function(diagram2, msgModel, line
     } else {
       autonumberX = isLeftToRight ? msgModel.fromBounds + 1 : msgModel.toBounds - 1;
     }
-    diagram2.append("line").attr("x1", autonumberX).attr("y1", lineStartY).attr("x2", autonumberX).attr("y2", lineStartY).attr("stroke-width", 0).attr("marker-start", "url(" + url + "#sequencenumber)");
+    diagram2.append("line").attr("x1", autonumberX).attr("y1", lineStartY).attr("x2", autonumberX).attr("y2", lineStartY).attr("stroke-width", 0).attr("marker-start", "url(" + url + "#" + diagramId + "-sequencenumber)");
     diagram2.append("text").attr("x", autonumberX).attr("y", lineStartY + 4).attr("font-family", "sans-serif").attr("font-size", "12px").attr("text-anchor", "middle").attr("class", "sequenceNumber").text(sequenceIndex);
   }
 }, "drawMessage");
@@ -3260,7 +3456,7 @@ var addActorRenderingData = /* @__PURE__ */ __name(function(diagram2, actors, cr
       }
       prevMargin += box.margin;
     }
-    actor.width = actor.width || conf.width;
+    actor.width = common_default.getMax(actor.width || conf.width, conf.width);
     actor.height = common_default.getMax(actor.height || conf.height, conf.height);
     actor.margin = actor.margin || conf.actorMargin;
     maxHeight = common_default.getMax(maxHeight, actor.height);
@@ -3283,11 +3479,11 @@ var addActorRenderingData = /* @__PURE__ */ __name(function(diagram2, actors, cr
   }
   bounds.bumpVerticalPos(maxHeight);
 }, "addActorRenderingData");
-var drawActors = /* @__PURE__ */ __name(async function(diagram2, actors, actorKeys, isFooter) {
+var drawActors = /* @__PURE__ */ __name(async function(diagram2, actors, actorKeys, isFooter, diagramId, diagObj, actorIndexMap) {
   if (!isFooter) {
     for (const actorKey of actorKeys) {
       const actor = actors.get(actorKey);
-      await svgDraw_default.drawActor(diagram2, actor, conf, false);
+      await svgDraw_default.drawActor(diagram2, actor, conf, false, diagramId, diagObj, actorIndexMap);
     }
   } else {
     let maxHeight = 0;
@@ -3297,7 +3493,15 @@ var drawActors = /* @__PURE__ */ __name(async function(diagram2, actors, actorKe
       if (!actor.stopy) {
         actor.stopy = bounds.getVerticalPos();
       }
-      const height = await svgDraw_default.drawActor(diagram2, actor, conf, true);
+      const height = await svgDraw_default.drawActor(
+        diagram2,
+        actor,
+        conf,
+        true,
+        diagramId,
+        diagObj,
+        actorIndexMap
+      );
       maxHeight = common_default.getMax(maxHeight, height);
     }
     bounds.bumpVerticalPos(maxHeight + conf.boxMargin);
@@ -3451,7 +3655,7 @@ function adjustCreatedDestroyedData(msg, msgModel, lineStartY, index, actors, cr
 }
 __name(adjustCreatedDestroyedData, "adjustCreatedDestroyedData");
 var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
-  const { securityLevel, sequence } = getConfig2();
+  const { securityLevel, sequence, look } = getConfig2();
   conf = sequence;
   let sandboxElement;
   if (securityLevel === "sandbox") {
@@ -3473,9 +3677,9 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
   const hasBoxTitles = diagObj.db.hasAtLeastOneBoxWithTitle();
   const maxMessageWidthPerActor = await getMaxMessageWidthPerActor(actors, messages, diagObj);
   conf.height = await calculateActorMargins(actors, maxMessageWidthPerActor, boxes);
-  svgDraw_default.insertComputerIcon(diagram2);
-  svgDraw_default.insertDatabaseIcon(diagram2);
-  svgDraw_default.insertClockIcon(diagram2);
+  svgDraw_default.insertComputerIcon(diagram2, id);
+  svgDraw_default.insertDatabaseIcon(diagram2, id);
+  svgDraw_default.insertClockIcon(diagram2, id);
   if (hasBoxes) {
     bounds.bumpVerticalPos(conf.boxMargin);
     if (hasBoxTitles) {
@@ -3490,16 +3694,22 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
     });
     actorKeys = actorKeys.filter((actorKey) => newActors.has(actorKey));
   }
+  const actorIndexMap = new Map(
+    actorKeys.map((actorKey, index2) => [actors.get(actorKey)?.name ?? actorKey, index2])
+  );
   addActorRenderingData(diagram2, actors, createdActors, actorKeys, 0, messages, false);
   const loopWidths = await calculateLoopBounds(messages, actors, maxMessageWidthPerActor, diagObj);
-  svgDraw_default.insertArrowHead(diagram2);
-  svgDraw_default.insertArrowCrossHead(diagram2);
-  svgDraw_default.insertArrowFilledHead(diagram2);
-  svgDraw_default.insertSequenceNumber(diagram2);
-  svgDraw_default.insertSolidTopArrowHead(diagram2);
-  svgDraw_default.insertSolidBottomArrowHead(diagram2);
-  svgDraw_default.insertStickTopArrowHead(diagram2);
-  svgDraw_default.insertStickBottomArrowHead(diagram2);
+  svgDraw_default.insertArrowHead(diagram2, id);
+  svgDraw_default.insertArrowCrossHead(diagram2, id);
+  svgDraw_default.insertArrowFilledHead(diagram2, id);
+  svgDraw_default.insertSequenceNumber(diagram2, id);
+  svgDraw_default.insertSolidTopArrowHead(diagram2, id);
+  svgDraw_default.insertSolidBottomArrowHead(diagram2, id);
+  svgDraw_default.insertStickTopArrowHead(diagram2, id);
+  svgDraw_default.insertStickBottomArrowHead(diagram2, id);
+  if (look === "neo") {
+    svgDraw_default.insertDropShadow(diagram2, conf);
+  }
   function activeEnd(msg, verticalPos) {
     const activationData = bounds.endActivation(msg);
     if (activationData.starty + 18 > verticalPos) {
@@ -3511,7 +3721,9 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
       activationData,
       verticalPos,
       conf,
-      actorActivations(msg.from).length
+      actorActivations(msg.from).length,
+      diagObj,
+      actorIndexMap
     );
     bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
   }
@@ -3527,7 +3739,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
       case diagObj.db.LINETYPE.NOTE:
         bounds.resetVerticalPos();
         noteModel = msg.noteModel;
-        await drawNote(diagram2, noteModel);
+        await drawNote(diagram2, noteModel, msg.id);
         break;
       case diagObj.db.LINETYPE.ACTIVE_START:
         bounds.newActivation(msg, diagram2, actors);
@@ -3552,7 +3764,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
         break;
       case diagObj.db.LINETYPE.LOOP_END:
         loopModel = bounds.endLoop();
-        await svgDraw_default.drawLoop(diagram2, loopModel, "loop", conf);
+        await svgDraw_default.drawLoop(diagram2, loopModel, "loop", conf, msg);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
@@ -3582,7 +3794,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
         break;
       case diagObj.db.LINETYPE.OPT_END:
         loopModel = bounds.endLoop();
-        await svgDraw_default.drawLoop(diagram2, loopModel, "opt", conf);
+        await svgDraw_default.drawLoop(diagram2, loopModel, "opt", conf, msg);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
@@ -3606,7 +3818,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
         break;
       case diagObj.db.LINETYPE.ALT_END:
         loopModel = bounds.endLoop();
-        await svgDraw_default.drawLoop(diagram2, loopModel, "alt", conf);
+        await svgDraw_default.drawLoop(diagram2, loopModel, "alt", conf, msg);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
@@ -3632,7 +3844,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
         break;
       case diagObj.db.LINETYPE.PAR_END:
         loopModel = bounds.endLoop();
-        await svgDraw_default.drawLoop(diagram2, loopModel, "par", conf);
+        await svgDraw_default.drawLoop(diagram2, loopModel, "par", conf, msg);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
@@ -3665,7 +3877,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
         break;
       case diagObj.db.LINETYPE.CRITICAL_END:
         loopModel = bounds.endLoop();
-        await svgDraw_default.drawLoop(diagram2, loopModel, "critical", conf);
+        await svgDraw_default.drawLoop(diagram2, loopModel, "critical", conf, msg);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
@@ -3680,7 +3892,7 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
         break;
       case diagObj.db.LINETYPE.BREAK_END:
         loopModel = bounds.endLoop();
-        await svgDraw_default.drawLoop(diagram2, loopModel, "break", conf);
+        await svgDraw_default.drawLoop(diagram2, loopModel, "break", conf, msg);
         bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());
         bounds.models.addLoop(loopModel);
         break;
@@ -3690,6 +3902,9 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
           msgModel.starty = bounds.getVerticalPos();
           msgModel.sequenceIndex = sequenceIndex;
           msgModel.sequenceVisible = diagObj.db.showSequenceNumbers();
+          msgModel.id = msg.id;
+          msgModel.from = msg.from;
+          msgModel.to = msg.to;
           const lineStartY = await boundMessage(diagram2, msgModel);
           adjustCreatedDestroyedData(
             msg,
@@ -3740,12 +3955,12 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
   }
   log.debug("createdActors", createdActors);
   log.debug("destroyedActors", destroyedActors);
-  await drawActors(diagram2, actors, actorKeys, false);
+  await drawActors(diagram2, actors, actorKeys, false, id, diagObj, actorIndexMap);
   for (const e of messagesToDraw) {
-    await drawMessage(diagram2, e.messageModel, e.lineStartY, diagObj, e.msg);
+    await drawMessage(diagram2, e.messageModel, e.lineStartY, diagObj, e.msg, id);
   }
   if (conf.mirrorActors) {
-    await drawActors(diagram2, actors, actorKeys, true);
+    await drawActors(diagram2, actors, actorKeys, true, id, diagObj, actorIndexMap);
   }
   backgrounds.forEach((e) => svgDraw_default.drawBackgroundRect(diagram2, e));
   fixLifeLineHeights(diagram2, actors, actorKeys, conf);
@@ -3795,9 +4010,10 @@ var draw = /* @__PURE__ */ __name(async function(_text, id, _version, diagObj) {
   }
   configureSvgSize(diagram2, height, width, conf.useMaxWidth);
   const extraVertForTitle = title ? 40 : 0;
+  const extraHeightForNeoActors = actors.size && look === "neo" ? 30 : 0;
   diagram2.attr(
     "viewBox",
-    box.startx - conf.diagramMarginX + " -" + (conf.diagramMarginY + extraVertForTitle) + " " + width + " " + (height + extraVertForTitle)
+    box.startx - conf.diagramMarginX + " -" + (conf.diagramMarginY + extraVertForTitle) + " " + width + " " + (height + extraVertForTitle + extraHeightForNeoActors)
   );
   log.debug(`models:`, bounds.models);
 }, "draw");
@@ -4040,6 +4256,7 @@ var isBidirectionalArrowType = /* @__PURE__ */ __name(function(msg, diagObj) {
   return [BIDIRECTIONAL_SOLID, BIDIRECTIONAL_DOTTED].includes(msg.type);
 }, "isBidirectionalArrowType");
 var buildMessageModel = /* @__PURE__ */ __name(function(msg, actors, diagObj) {
+  const { look } = getConfig2();
   if (![
     diagObj.db.LINETYPE.SOLID_OPEN,
     diagObj.db.LINETYPE.DOTTED_OPEN,
@@ -4075,6 +4292,15 @@ var buildMessageModel = /* @__PURE__ */ __name(function(msg, actors, diagObj) {
   const isArrowToRight = fromLeft <= toLeft;
   let startx = isArrowToRight ? fromRight : fromLeft;
   let stopx = isArrowToRight ? toLeft : toRight;
+  if (look === "neo") {
+    const offset = 3;
+    if (msg.type !== diagObj.db.LINETYPE.SOLID_OPEN) {
+      stopx += isArrowToRight ? -offset : offset;
+    }
+    if (msg.type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID || msg.type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED) {
+      startx += isArrowToRight ? offset : -offset;
+    }
+  }
   startx += calculateCentralConnectionOffset(msg, diagObj, isArrowToRight);
   const isArrowToActivation = Math.abs(toLeft - toRight) > 2;
   const adjustValue = /* @__PURE__ */ __name((value) => {