feat(arch): extended parser to control how edges pass through groups

2025-11-17 19:24:10 +01:00 · 2024-05-09 14:33:44 -05:00
parent 48e6901936
commit 5b6c95cea3
6 changed files with 211 additions and 143 deletions
--- a/demos/architecture.html
+++ b/demos/architecture.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en">
-  <head>
+
+<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Architecture Mermaid Quick Test Page</title>
@@ -11,9 +12,9 @@
      font-family: 'Courier New', Courier, monospace !important;
    }
  </style>
-  </head>
+</head>

-  <body>
+<body>
  <h1>Architecture diagram demo</h1>

  <h2>Simple diagram with groups</h2>
@@ -120,6 +121,28 @@
    </pre>
  <hr />

+  <h2>Group Edges</h2>
+  <pre class="mermaid">
+      architecture
+        group left_group(cloud)[Left]
+        group right_group(cloud)[Right]
+        group top_group(cloud)[Top]
+        group bottom_group(cloud)[Bottom]
+        group center_group(cloud)[Center]
+
+        service left_disk(disk)[Disk] in left_group
+        service right_disk(disk)[Disk] in right_group
+        service top_disk(disk)[Disk] in top_group
+        service bottom_disk(disk)[Disk] in bottom_group
+        service center_disk(disk)[Disk] in center_group
+
+        left_disk{group} (R--L) center_disk{group}
+        right_disk{group} (L--R) center_disk{group}
+        top_disk{group} (B--T) center_disk{group}
+        bottom_disk{group} (T--B) center_disk{group}
+  </pre>
+  <hr />
+
  <h2>Edge Label Test</h2>
  <pre class="mermaid">
      architecture
@@ -227,5 +250,6 @@
      console.error(err);
    };
  </script>
-  </body>
+</body>
+
 </html>
--- a/packages/mermaid/src/diagrams/architecture/architectureDb.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureDb.ts
@@ -128,6 +128,8 @@ const addEdge = function ({
  rhsDir,
  lhsInto,
  rhsInto,
+  lhsGroup,
+  rhsGroup,
  title,
 }: ArchitectureEdge) {
  if (!isArchitectureDirection(lhsDir)) {
@@ -152,14 +154,29 @@ const addEdge = function ({
    );
  }

+  const lhsGroupId = state.records.services[lhsId].in
+  const rhsGroupId = state.records.services[rhsId].in
+  if (lhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+    throw new Error(
+      `The left-hand id [${lhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+    )
+  }
+  if (rhsGroup && lhsGroupId && rhsGroupId && lhsGroupId == rhsGroupId) {
+    throw new Error(
+      `The right-hand id [${rhsId}] is modified to traverse the group boundary, but the edge does not pass through two groups.`
+    )
+  }
+
  const edge = {
    lhsId,
    lhsDir,
+    lhsInto,
+    lhsGroup,
    rhsId,
    rhsDir,
-    title,
-    lhsInto,
    rhsInto,
+    rhsGroup,
+    title,
  };

  state.records.edges.push(edge);
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -84,7 +84,7 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {

 function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
  edges.forEach((parsedEdge) => {
-    const { lhsId, rhsId, lhsInto, rhsInto, lhsDir, rhsDir, title } = parsedEdge;
+    const { lhsId, rhsId, lhsInto, lhsGroup, rhsInto, lhsDir, rhsDir, rhsGroup, title } = parsedEdge;
    const edgeType = isArchitectureDirectionXY(parsedEdge.lhsDir, parsedEdge.rhsDir)
      ? 'segments'
      : 'straight';
@@ -94,6 +94,7 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
      source: lhsId,
      sourceDir: lhsDir,
      sourceArrow: lhsInto,
+      sourceGroup: lhsGroup,
      sourceEndpoint:
        lhsDir === 'L'
          ? '0 50%'
@@ -105,6 +106,7 @@ function addEdges(edges: ArchitectureEdge[], cy: cytoscape.Core) {
      target: rhsId,
      targetDir: rhsDir,
      targetArrow: rhsInto,
+      targetGroup: rhsGroup,
      targetEndpoint:
        rhsDir === 'L'
          ? '0 50%'
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -199,11 +199,13 @@ export interface ArchitectureGroup {
 export interface ArchitectureEdge {
  lhsId: string;
  lhsDir: ArchitectureDirection;
-  title?: string;
+  lhsInto?: boolean;
+  lhsGroup?: boolean;
  rhsId: string;
  rhsDir: ArchitectureDirection;
-  lhsInto?: boolean;
  rhsInto?: boolean;
+  rhsGroup?: boolean;
+  title?: string;
 }

 export interface ArchitectureDB extends DiagramDB {
@@ -246,9 +248,11 @@ export type EdgeSingularData = {
  source: string;
  sourceDir: ArchitectureDirection;
  sourceArrow?: boolean;
+  sourceGroup?: boolean;
  target: string;
  targetDir: ArchitectureDirection;
  targetArrow?: boolean;
+  targetGroup?: boolean;
  [key: string]: any;
 };

--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -22,17 +22,37 @@ import { getConfigField } from './architectureDb.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';

 export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
+  const padding = getConfigField('padding');
  const iconSize = getConfigField('iconSize');
  const arrowSize = iconSize / 6;
  const halfArrowSize = arrowSize / 2;

  cy.edges().map((edge, id) => {
-    const { sourceDir, sourceArrow, targetDir, targetArrow, label } = edgeData(edge);
-    const { x: startX, y: startY } = edge[0].sourceEndpoint();
+    const { sourceDir, sourceArrow, sourceGroup, targetDir, targetArrow, targetGroup, label } = edgeData(edge);
+    let { x: startX, y: startY } = edge[0].sourceEndpoint();
    const { x: midX, y: midY } = edge[0].midpoint();
-    const { x: endX, y: endY } = edge[0].targetEndpoint();
+    let { x: endX, y: endY } = edge[0].targetEndpoint();
+
+    const groupEdgeShift = padding + 4;
+    // +18 comes from the service label height that extends the padding on the bottom side of each group
+    if (sourceGroup) {
+      if (isArchitectureDirectionX(sourceDir)) {
+        sourceDir === 'L' ? startX -= groupEdgeShift : startX += groupEdgeShift;
+      } else {
+        sourceDir === 'T' ? startY -= groupEdgeShift : startY += (groupEdgeShift + 18);
+      }
+    }
+
+    if (targetGroup) {
+      if (isArchitectureDirectionX(targetDir)) {
+        targetDir === 'L' ? endX -= groupEdgeShift : endX += groupEdgeShift;
+      } else {
+        targetDir === 'T' ? endY -= groupEdgeShift : endY += (groupEdgeShift + 18);
+      }
+    }
+
    if (edge[0]._private.rscratch) {
-      const bounds = edge[0]._private.rscratch;
+      // const bounds = edge[0]._private.rscratch;

      const g = edgesEl.insert('g');

@@ -42,11 +62,11 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {

      if (sourceArrow) {
        const xShift = isArchitectureDirectionX(sourceDir)
-          ? ArchitectureDirectionArrowShift[sourceDir](bounds.startX, arrowSize)
-          : bounds.startX - halfArrowSize;
+          ? ArchitectureDirectionArrowShift[sourceDir](startX, arrowSize)
+          : startX - halfArrowSize;
        const yShift = isArchitectureDirectionY(sourceDir)
-          ? ArchitectureDirectionArrowShift[sourceDir](bounds.startY, arrowSize)
-          : bounds.startY - halfArrowSize;
+          ? ArchitectureDirectionArrowShift[sourceDir](startY, arrowSize)
+          : startY - halfArrowSize;

        g.insert('polygon')
          .attr('points', ArchitectureDirectionArrow[sourceDir](arrowSize))
@@ -55,11 +75,11 @@ export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
      }
      if (targetArrow) {
        const xShift = isArchitectureDirectionX(targetDir)
-          ? ArchitectureDirectionArrowShift[targetDir](bounds.endX, arrowSize)
-          : bounds.endX - halfArrowSize;
+          ? ArchitectureDirectionArrowShift[targetDir](endX, arrowSize)
+          : endX - halfArrowSize;
        const yShift = isArchitectureDirectionY(targetDir)
-          ? ArchitectureDirectionArrowShift[targetDir](bounds.endY, arrowSize)
-          : bounds.endY - halfArrowSize;
+          ? ArchitectureDirectionArrowShift[targetDir](endY, arrowSize)
+          : endY - halfArrowSize;

        g.insert('polygon')
          .attr('points', ArchitectureDirectionArrow[targetDir](arrowSize))
--- a/packages/parser/src/language/architecture/architecture.langium
+++ b/packages/parser/src/language/architecture/architecture.langium
@@ -30,7 +30,7 @@ Service:
 ;

 Edge:
-    lhsId=ARCH_ID Arrow rhsId=ARCH_ID EOL
+    lhsId=ARCH_ID lhsGroup?=ARROW_GROUP? Arrow rhsId=ARCH_ID rhsGroup?=ARROW_GROUP? EOL
 ;

 terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B';
@@ -38,4 +38,5 @@ terminal ARCH_ID: /[\w]+/;
 terminal ARCH_TEXT_ICON: /\("[^"]+"\)/;
 terminal ARCH_ICON: /\([\w]+\)/;
 terminal ARCH_TITLE: /\[[\w ]+\]/;
+terminal ARROW_GROUP: /\{group\}/;
 terminal ARROW_INTO: /\(|\)/;