d5-mermaid 0.3.1 → 0.3.2

package/dist/index.cjs

@@ -12,6 +12,20 @@ function normalizeDirection(value) {
   return normalized === "LR" || normalized === "RL" || normalized === "TB" || normalized === "BT" ? normalized : null;
 }
 var DIRECTION_RE = /^\s*direction\s+(LR|RL|TB|TD|BT)\s*$/i;
+function isAgainstFlow(direction, src, tgt) {
+  switch (direction) {
+    case "TB":
+      return tgt.y < src.y - 1;
+    case "BT":
+      return tgt.y > src.y + 1;
+    case "LR":
+      return tgt.x < src.x - 1;
+    case "RL":
+      return tgt.x > src.x + 1;
+    default:
+      return false;
+  }
+}
 
 // src/d5-domain/db.ts
 var DEFAULT_DIRECTION = "TB";
@@ -1931,6 +1945,7 @@ function gridDimensions(count, cellWidth, gap, targetWidth) {
 }
 
 // src/d5-domain/renderer.ts
+var BACK_EDGE_TITLE = "Runs against the dominant flow \u2014 likely part of a dependency cycle among these subdomains.";
 var REL_LABEL_MAX_WIDTH = 150;
 var SVG_NS2 = "http://www.w3.org/2000/svg";
 var SUBDOMAIN_MIN_WIDTH = 180;
@@ -2118,6 +2133,7 @@ function render(db, container) {
     group.appendChild(typeText);
     container.appendChild(group);
   });
+  let hasBackEdge = false;
   relationships.forEach((rel) => {
     const edge = g.edge(rel.source, rel.target);
     if (!edge || !edge.points || edge.points.length === 0) return;
@@ -2127,9 +2143,15 @@ function render(db, container) {
     }));
     const srcNode = g.node(rel.source);
     const tgtNode = g.node(rel.target);
-    const isBackEdge = !!srcNode && !!tgtNode && tgtNode.y < srcNode.y - 1;
+    const isBackEdge = !!srcNode && !!tgtNode && isAgainstFlow(direction, srcNode, tgtNode);
+    if (isBackEdge) hasBackEdge = true;
     const group = document.createElementNS(SVG_NS2, "g");
     group.setAttribute("class", isBackEdge ? "d5-rel d5-rel-back" : "d5-rel");
+    if (isBackEdge) {
+      const titleEl = document.createElementNS(SVG_NS2, "title");
+      titleEl.textContent = BACK_EDGE_TITLE;
+      group.appendChild(titleEl);
+    }
     const pathString = generateCurvePath(shiftedPoints);
     const path = document.createElementNS(SVG_NS2, "path");
     path.setAttribute("d", pathString);
@@ -2181,6 +2203,26 @@ function render(db, container) {
     legendGroup.appendChild(label);
     legendX += 90;
   });
+  if (hasBackEdge) {
+    const swatchY = legendY + 7;
+    const line = document.createElementNS(SVG_NS2, "line");
+    line.setAttribute("x1", String(legendX));
+    line.setAttribute("y1", String(swatchY));
+    line.setAttribute("x2", String(legendX + 14));
+    line.setAttribute("y2", String(swatchY));
+    line.setAttribute("stroke", "#94a3b8");
+    line.setAttribute("stroke-width", "1.5");
+    line.setAttribute("stroke-dasharray", "6 4");
+    legendGroup.appendChild(line);
+    const label = document.createElementNS(SVG_NS2, "text");
+    label.setAttribute("x", String(legendX + 20));
+    label.setAttribute("y", String(legendY + 11));
+    label.setAttribute("font-size", "11");
+    label.setAttribute("fill", "#64748b");
+    label.textContent = "Reverse dependency (cycle)";
+    legendGroup.appendChild(label);
+    legendX += 170;
+  }
   container.appendChild(legendGroup);
 }
 

package/dist/index.js

@@ -10,6 +10,20 @@ function normalizeDirection(value) {
   return normalized === "LR" || normalized === "RL" || normalized === "TB" || normalized === "BT" ? normalized : null;
 }
 var DIRECTION_RE = /^\s*direction\s+(LR|RL|TB|TD|BT)\s*$/i;
+function isAgainstFlow(direction, src, tgt) {
+  switch (direction) {
+    case "TB":
+      return tgt.y < src.y - 1;
+    case "BT":
+      return tgt.y > src.y + 1;
+    case "LR":
+      return tgt.x < src.x - 1;
+    case "RL":
+      return tgt.x > src.x + 1;
+    default:
+      return false;
+  }
+}
 
 // src/d5-domain/db.ts
 var DEFAULT_DIRECTION = "TB";
@@ -1929,6 +1943,7 @@ function gridDimensions(count, cellWidth, gap, targetWidth) {
 }
 
 // src/d5-domain/renderer.ts
+var BACK_EDGE_TITLE = "Runs against the dominant flow \u2014 likely part of a dependency cycle among these subdomains.";
 var REL_LABEL_MAX_WIDTH = 150;
 var SVG_NS2 = "http://www.w3.org/2000/svg";
 var SUBDOMAIN_MIN_WIDTH = 180;
@@ -2116,6 +2131,7 @@ function render(db, container) {
     group.appendChild(typeText);
     container.appendChild(group);
   });
+  let hasBackEdge = false;
   relationships.forEach((rel) => {
     const edge = g.edge(rel.source, rel.target);
     if (!edge || !edge.points || edge.points.length === 0) return;
@@ -2125,9 +2141,15 @@ function render(db, container) {
     }));
     const srcNode = g.node(rel.source);
     const tgtNode = g.node(rel.target);
-    const isBackEdge = !!srcNode && !!tgtNode && tgtNode.y < srcNode.y - 1;
+    const isBackEdge = !!srcNode && !!tgtNode && isAgainstFlow(direction, srcNode, tgtNode);
+    if (isBackEdge) hasBackEdge = true;
     const group = document.createElementNS(SVG_NS2, "g");
     group.setAttribute("class", isBackEdge ? "d5-rel d5-rel-back" : "d5-rel");
+    if (isBackEdge) {
+      const titleEl = document.createElementNS(SVG_NS2, "title");
+      titleEl.textContent = BACK_EDGE_TITLE;
+      group.appendChild(titleEl);
+    }
     const pathString = generateCurvePath(shiftedPoints);
     const path = document.createElementNS(SVG_NS2, "path");
     path.setAttribute("d", pathString);
@@ -2179,6 +2201,26 @@ function render(db, container) {
     legendGroup.appendChild(label);
     legendX += 90;
   });
+  if (hasBackEdge) {
+    const swatchY = legendY + 7;
+    const line = document.createElementNS(SVG_NS2, "line");
+    line.setAttribute("x1", String(legendX));
+    line.setAttribute("y1", String(swatchY));
+    line.setAttribute("x2", String(legendX + 14));
+    line.setAttribute("y2", String(swatchY));
+    line.setAttribute("stroke", "#94a3b8");
+    line.setAttribute("stroke-width", "1.5");
+    line.setAttribute("stroke-dasharray", "6 4");
+    legendGroup.appendChild(line);
+    const label = document.createElementNS(SVG_NS2, "text");
+    label.setAttribute("x", String(legendX + 20));
+    label.setAttribute("y", String(legendY + 11));
+    label.setAttribute("font-size", "11");
+    label.setAttribute("fill", "#64748b");
+    label.textContent = "Reverse dependency (cycle)";
+    legendGroup.appendChild(label);
+    legendX += 170;
+  }
   container.appendChild(legendGroup);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d5-mermaid",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Mermaid.js extension for D5 (Domain Driven Design Definitive Diagrams) — visualize DDD strategic and tactical patterns",
   "type": "module",
   "repository": {