diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
index a55b23bff..f4566e85e 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts
@@ -1,6 +1,6 @@
 import cytoscape from 'cytoscape';
 import type { Diagram } from '../../Diagram.js';
-import fcose, {FcoseLayoutOptions} from 'cytoscape-fcose';
+import fcose, { FcoseLayoutOptions } from 'cytoscape-fcose';
 import type { MermaidConfig } from '../../config.type.js';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import type { DrawDefinition, SVG } from '../../diagram-api/types.js';
@@ -17,9 +17,9 @@ import {
 } from './architectureTypes.js';
 import { select } from 'd3';
 import { setupGraphViewbox } from '../../setupGraphViewbox.js';
-import defaultConfig  from '../../defaultConfig.js';
+import defaultConfig from '../../defaultConfig.js';
 import type { D3Element } from '../../mermaidAPI.js';
-import { drawEdges, drawService, getEdgeThicknessCallback } from './svgDraw.js';
+import { drawEdges, drawGroups, drawService } from './svgDraw.js';
 
 cytoscape.use(fcose);
 
@@ -28,23 +28,25 @@ function addServices(services: ArchitectureService[], cy: cytoscape.Core) {
     cy.add({
       group: 'nodes',
       data: {
+        type: 'service',
         id: service.id,
         icon: service.icon,
-        title: service.title,
+        label: service.title,
         parent: service.in,
         // TODO: dynamic size
         width: 80,
-        height: 80
+        height: 80,
       },
+      classes: 'node-service'
     });
   });
 }
 
 function drawServices(
-    db: ArchitectureDB,
-    svg: D3Element,
-    services: ArchitectureService[],
-    conf: MermaidConfig
+  db: ArchitectureDB,
+  svg: D3Element,
+  services: ArchitectureService[],
+  conf: MermaidConfig
 ) {
   services.forEach((service) => drawService(db, svg, service, conf));
 }
@@ -54,19 +56,22 @@ function addGroups(groups: ArchitectureGroup[], cy: cytoscape.Core) {
     cy.add({
       group: 'nodes',
       data: {
+        type: 'group',
         id: group.id,
         icon: group.icon,
-        title: group.title,
+        label: group.title,
         parent: group.in
       },
+      classes: 'node-group'
     });
   });
 }
 
 function positionServices(db: ArchitectureDB, cy: cytoscape.Core) {
   cy.nodes().map((node, id) => {
-    
+
     const data = node.data();
+    if (data.type === 'group') return;
     data.x = node.position().x;
     data.y = node.position().y;
 
@@ -104,10 +109,40 @@ function layoutArchitecture(
           selector: 'edge',
           style: {
             'curve-style': 'straight',
-            'source-endpoint': '100% 100%',
-            'target-endpoint': '100% 100%',
+            'source-endpoint': '50% 50%',
+            'target-endpoint': '50% 50%',
           },
         },
+        {
+          selector: 'node',
+          style: {
+            //@ts-ignore
+            'compound-sizing-wrt-labels': 'include',
+          }
+        },
+        {
+          selector: 'node[label]',
+          style: {
+            'text-valign': 'bottom',
+            'text-halign': 'center',
+            'font-size': '16px',
+          }
+        },
+        {
+          selector: '.node-service',
+          style: {
+            'label': 'data(label)',
+            'width': 'data(width)',
+            'height': 'data(height)',
+          }
+        },
+        {
+          selector: '.node-group',
+          style: {
+            //@ts-ignore
+            "padding": '30px'
+          }
+        }
       ],
     });
     // Remove element after layout
@@ -115,55 +150,97 @@ function layoutArchitecture(
 
     addGroups(groups, cy);
     addServices(services, cy);
-    addEdges(lines, cy);
+    addEdges(lines, cy);   
 
-    // Make cytoscape care about the dimensions of the nodes
-    cy.nodes().forEach(function (n) {
-      n.layoutDimensions = () => {
-        const data = n.data();
-        return { w: data.width, h: data.height };
-      };
-    });
+    /**
+     * Merge alignment pairs together if they share a common node.
+     * 
+     * Example: [["a", "b"], ["b", "c"], ["d", "e"]] -> [["a", "b", "c"], ["d", "e"]]
+     */
+    const mergeAlignments = (orig: string[][]): string[][] => {
+      console.log('Start: ', orig);
+      // Mapping of discovered ids to their index in the new alignment array
+      const map: Record<string, number> = {};
+      const newAlignments: string[][] = [orig[0]];
+      map[orig[0][0]] = 0;
+      map[orig[0][1]] = 0;
+      orig = orig.slice(1);
+      while (orig.length > 0) {
+        const pair = orig[0];
+        const pairLHSIdx = map[pair[0]];
+        const pairRHSIdx = map[pair[1]];
+        console.log(pair);
+        console.log(map);
+        console.log(newAlignments);
+        // If neither id appears in the new array, add the pair to the new array
+        if (pairLHSIdx === undefined && pairRHSIdx === undefined) {
+          newAlignments.push(pair);
+          map[pair[0]] = newAlignments.length - 1;
+          map[pair[1]] = newAlignments.length - 1;
+          // If the LHS of the pair doesn't appear in the new array, add the LHS to the existing array it shares an id with
+        } else if (pairLHSIdx === undefined) {
+          newAlignments[pairRHSIdx].push(pair[0]);
+          map[pair[0]] = pairRHSIdx;
+          // If the RHS of the pair doesn't appear in the new array, add the RHS to the existing array it shares an id with
+        } else if (pairRHSIdx === undefined) {
+          newAlignments[pairLHSIdx].push(pair[1]);
+          map[pair[1]] = pairLHSIdx;
+          // If both ids already have been added to the new array and their index is different, merge all 3 arrays
+        } else if (pairLHSIdx != pairRHSIdx) {
+          console.log('ELSE');
+          newAlignments.push(pair);
+        }
+        orig = orig.slice(1);
+      }
+
+      console.log('End: ', newAlignments);
+      return newAlignments;
+    }
+
+    const horizontalAlignments = cy
+      .edges()
+      .filter(
+        (edge) =>
+          isArchitectureDirectionX(edge.data('sourceDir')) &&
+          isArchitectureDirectionX(edge.data('targetDir'))
+      )
+      .map((edge) => [edge.data('source'), edge.data('target')]);
+
+    const verticalAlignments = cy
+      .edges()
+      .filter(
+        (edge) =>
+          isArchitectureDirectionY(edge.data('sourceDir')) &&
+          isArchitectureDirectionY(edge.data('targetDir'))
+      )
+      .map((edge) => [edge.data('source'), edge.data('target')]);
 
     cy.layout({
       name: 'fcose',
       quality: 'proof',
       styleEnabled: false,
       animate: false,
+      nodeDimensionsIncludeLabels: true,
       alignmentConstraint: {
-        horizontal: cy
-          .edges()
-          .filter(
-            (edge) =>
-              isArchitectureDirectionX(edge.data('sourceDir')) &&
-              isArchitectureDirectionX(edge.data('targetDir'))
-          )
-          .map((edge) => [edge.data('source'), edge.data('target')]),
-        vertical: cy
-          .edges()
-          .filter(
-            (edge) =>
-              isArchitectureDirectionY(edge.data('sourceDir')) &&
-              isArchitectureDirectionY(edge.data('targetDir'))
-          )
-          .map((edge) => [edge.data('source'), edge.data('target')]),
+        horizontal: mergeAlignments(horizontalAlignments),
+        vertical: mergeAlignments(verticalAlignments)
       },
       relativePlacementConstraint: cy.edges().map((edge) => {
         const sourceDir = edge.data('sourceDir') as ArchitectureDirection;
         const targetDir = edge.data('targetDir') as ArchitectureDirection;
-        const sourceId = edge.data('source') as ArchitectureDirection;
-        const targetId = edge.data('target') as ArchitectureDirection;
+        const sourceId = edge.data('source') as string;
+        const targetId = edge.data('target') as string;
 
         if (
-            isArchitectureDirectionX(sourceDir) &&
-            isArchitectureDirectionX(targetDir)
+          isArchitectureDirectionX(sourceDir) &&
+          isArchitectureDirectionX(targetDir)
         ) {
-            return {left: sourceDir === 'L' ? sourceId : targetId, right: sourceDir === 'R' ? sourceId : targetId, gap: 180}
+          return { left: sourceDir === 'R' ? sourceId : targetId, right: sourceDir === 'L' ? sourceId : targetId, gap: 180 }
         } else if (
-            isArchitectureDirectionY(sourceDir) &&
-            isArchitectureDirectionY(targetDir)
+          isArchitectureDirectionY(sourceDir) &&
+          isArchitectureDirectionY(targetDir)
         ) {
-            return {top: sourceDir === 'T' ? sourceId : targetId, bottom: sourceDir === 'B' ? sourceId : targetId, gap: 180}
+          return { top: sourceDir === 'B' ? sourceId : targetId, bottom: sourceDir === 'T' ? sourceId : targetId, gap: 180 }
         }
         // TODO: fallback case + RB, TL, etc
 
@@ -183,8 +260,9 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
   const services = db.getServices();
   const groups = db.getGroups();
   const lines = db.getLines();
-  log.info('Services: ', services);
-  log.info('Lines: ', lines);
+  console.log('Services: ', services);
+  console.log('Lines: ', lines);
+  console.log('Groups: ', groups);
 
   const svg: SVG = selectSvgElement(id);
 
@@ -194,13 +272,15 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj: Diagram)
   const servicesElem = svg.append('g');
   servicesElem.attr('class', 'architecture-services');
 
+  const groupElem = svg.append('g');
+  groupElem.attr('class', 'architecture-groups');
+
   drawServices(db, servicesElem, services, conf);
-  const getEdgeThickness = getEdgeThicknessCallback(svg);
 
   const cy = await layoutArchitecture(services, groups, lines);
 
-  const edgeThickness = getEdgeThickness();
-  drawEdges(edgesElem, edgeThickness, cy);
+  drawEdges(edgesElem, cy);
+  drawGroups(groupElem, cy);
   positionServices(db, cy);
 
   setupGraphViewbox(
diff --git a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
index b92d227e6..7cdcbf4ae 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureStyles.ts
@@ -68,6 +68,13 @@ const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
   .edge {
     fill: none;
   }
+
+  .node-bkg {
+    fill: none;
+    stroke: #000;
+    stroke-width: 2px;
+    stroke-dasharray: 8;
+  }
 `;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
index dbc663b73..9cf78443a 100644
--- a/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
+++ b/packages/mermaid/src/diagrams/architecture/architectureTypes.ts
@@ -25,6 +25,8 @@ export interface ArchitectureService {
     icon?: string;
     title?: string;
     in?: string;
+    width?: number;
+    height?: number;
 }
 
 export interface ArchitectureGroup {
diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
index 55742ed7f..b78d2d044 100644
--- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts
@@ -1,10 +1,10 @@
 import type { D3Element } from '../../mermaidAPI.js';
 import { createText } from '../../rendering-util/createText.js';
-import type { ArchitectureDB, ArchitectureService } from './architectureTypes.js';
+import type { ArchitectureDB, ArchitectureGroup, ArchitectureService } from './architectureTypes.js';
 import type { MermaidConfig } from '../../config.type.js';
 import type cytoscape from 'cytoscape';
 import { log } from '../../logger.js';
-import {getIcon, isIconNameInUse} from '../../rendering-util/svgRegister.js';
+import { getIcon, isIconNameInUse } from '../../rendering-util/svgRegister.js';
 
 declare module 'cytoscape' {
   interface EdgeSingular {
@@ -20,48 +20,86 @@ declare module 'cytoscape' {
       };
     };
   }
-}
-
-/**
- * Creates a temporary path which can be used to compute the line thickness. 
- * @param root root element to add the temporary path to
- * @returns callback function which gets the bounding box dimensions and removes the path from root
- */
-export const getEdgeThicknessCallback = function (root: D3Element) {
-  const tempPath = root.insert('path')
-  .attr(
-    'd',
-    `M 10,10 L 10,20`
-  )
-  .attr('class', 'edge')
-  .attr('id', 'temp-thickness-edge');
-
-  return () => {
-    const dims = tempPath.node().getBBox();
-    tempPath.remove();
-    return dims.height as number;
+  interface NodeSingular {
+    _private: {
+      bodyBounds: {
+        h: number;
+        w: number;
+        x1: number;
+        x2: number;
+        y1: number;
+        y2: number;
+      };
+      children: cytoscape.NodeSingular[]
+    };
+    data: () => {
+      type: 'service',
+      id: string,
+      icon?: string,
+      label?: string,
+      parent?: string,
+      width: number,
+      height: number,
+      [key: string]: any
+    } | {
+      type: 'group',
+      id: string,
+      icon?: string,
+      label?: string,
+      parent?: string,
+      [key: string]: any
+    }
   }
 }
 
-export const drawEdges = function (edgesEl: D3Element, edgeThickness: number, cy: cytoscape.Core) {
+export const drawEdges = function (edgesEl: D3Element, cy: cytoscape.Core) {
   cy.edges().map((edge, id) => {
     const data = edge.data();
     if (edge[0]._private.bodyBounds) {
       const bounds = edge[0]._private.rscratch;
-      const translateX = bounds.startX === bounds.endX ? ((edgeThickness + 2) / 1.5) : 0;
-      const translateY = bounds.startY === bounds.endY ? ((edgeThickness + 2) / 1.5) : 0;
 
-    log.trace('Edge: ', id, data);
-    edgesEl
-      .insert('path')
-      .attr(
-        'd',
-        `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
-      )
-      .attr('class', 'edge')
-      .attr(
+      log.trace('Edge: ', id, data);
+      edgesEl
+        .insert('path')
+        .attr(
+          'd',
+          `M ${bounds.startX},${bounds.startY} L ${bounds.midX},${bounds.midY} L${bounds.endX},${bounds.endY} `
+        )
+        .attr('class', 'edge')
+    }
+  })
+}
+
+export const drawGroups = function (
+  groupsEl: D3Element,
+  cy: cytoscape.Core
+) {
+  cy.nodes().map((node, id) => {
+    const data = node.data();
+    if (data.type === 'group') {
+      const { h, w, x1, x2, y1, y2 } = node.boundingBox();
+      let bkgElem = groupsEl.append('rect')
+        .attr('x', x1 + 40)
+        .attr('y', y1 + 40)
+        .attr('width', w)
+        .attr('height', h)
+        .attr('class', 'node-bkg');
+
+      const textElem = groupsEl.append('g');
+      createText(textElem, data.title, {
+        useHtmlLabels: false,
+        width: w,
+        classes: 'architecture-service-label',
+      });
+      textElem
+        .attr('dy', '1em')
+        .attr('alignment-baseline', 'middle')
+        .attr('dominant-baseline', 'start')
+        .attr('text-anchor', 'start');
+
+      textElem.attr(
         'transform',
-        'translate(' + translateX + ', ' + translateY + ')'
+        'translate(' + (x1 + 44) + ', ' + (y1 + 42) + ')'
       );
     }
   })
@@ -76,22 +114,23 @@ export const drawService = function (
   const serviceElem = elem.append('g');
 
   if (service.title) {
-      const textElem = serviceElem.append('g');
-      createText(textElem, service.title, {
-        useHtmlLabels: false,
-        width: 80,
-        classes: 'architecture-service-label',
-      });
-      textElem
+    const textElem = serviceElem.append('g');
+    createText(textElem, service.title, {
+      useHtmlLabels: false,
+      width: 110,
+      classes: 'architecture-service-label',
+    });
+    textElem
       .attr('dy', '1em')
       .attr('alignment-baseline', 'middle')
       .attr('dominant-baseline', 'middle')
       .attr('text-anchor', 'middle');
 
-      textElem.attr(
-        'transform',
-        'translate(' + 80 / 2 + ', ' + 80 + ')'
-      );
+    textElem.attr(
+      'transform',
+      // TODO: dynamic size
+      'translate(' + 80 / 2 + ', ' + 80 + ')'
+    );
 
   }
 
@@ -104,16 +143,16 @@ export const drawService = function (
   } else {
     bkgElem.append('path').attr('class', 'node-bkg').attr('id', 'node-' + service.id).attr(
       'd',
-      `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${
-        80 - 2 * 0
+      `M0 ${80 - 0} v${-80 + 2 * 0} q0,-5 5,-5 h${80 - 2 * 0
       } q5,0 5,5 v${80 - 0} H0 Z`
     );
   }
 
   serviceElem.attr('class', 'architecture-service');
 
-  const icon = serviceElem.append('foreignObject').attr('height', '80px').attr('width', '80px');
-  icon.append('div').attr('class', 'icon-container').append('i').attr('class', 'service-icon fa fa-phone')
+  const { width, height } = serviceElem._groups[0][0].getBBox();
+  service.width = width;
+  service.height = height;
 
   db.setElementForId(service.id, serviceElem);
   return 0;