From b134766647a9dea0866a8a704f62071ab0dab0e5 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Fri, 10 Nov 2023 21:22:31 -0300
Subject: [PATCH 01/17] Add subgraph title margin config options to schema.

---
 packages/mermaid/src/config.type.ts             |  8 ++++++++
 packages/mermaid/src/schemas/config.schema.yaml | 15 +++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 82d5e1d008..402d9a4d86 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1411,6 +1411,14 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
    * Margin top for the text over the diagram
    */
   titleTopMargin?: number;
+  /**
+   * Defines a top/bottom margin for subgraph titles
+   *
+   */
+  subGraphTitleMargin?: {
+    top?: number;
+    bottom?: number;
+  };
   arrowMarkerAbsolute?: boolean;
   /**
    * The amount of padding around the diagram as a whole so that embedded
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index ee92b4875f..2791c32d4b 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -1863,6 +1863,7 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
     unevaluatedProperties: false
     required:
       - titleTopMargin
+      - subGraphTitleMargin
       - diagramPadding
       - htmlLabels
       - nodeSpacing
@@ -1875,6 +1876,20 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
       titleTopMargin:
         $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
         default: 25
+      subGraphTitleMargin:
+        description: |
+          Defines a top/bottom margin for subgraph titles
+        type: object
+        properties:
+          top:
+            type: integer
+            minimum: 0
+          bottom:
+            type: integer
+            minimum: 0
+        default:
+          top: 0
+          bottom: 0
       arrowMarkerAbsolute:
         type: boolean # TODO, is this actually used here (it has no default value but was in types)
       diagramPadding:

From 0bcd5d28e80fd26e29402bb048eefa2b65e18109 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Fri, 10 Nov 2023 21:30:09 -0300
Subject: [PATCH 02/17] Create helper function for subgraph title margin
 fetching.

---
 packages/mermaid/src/utils.spec.ts            | 22 +++++++++++++++++++
 .../src/utils/getSubGraphTitleMargins.ts      | 17 ++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 packages/mermaid/src/utils/getSubGraphTitleMargins.ts

diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 8ccf5b2107..ac06f2b430 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -1,5 +1,7 @@
 import { vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
+import { getSubGraphTitleMargins } from './utils/getSubGraphTitleMargins.js';
+import * as configApi from './config.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
@@ -593,4 +595,24 @@ describe('calculatePoint', () => {
       'Could not find a suitable point for the given distance'
     );
   });
+
+  describe('getSubGraphTitleMargins', () => {
+    it('should get subgraph title margins after config has been set', () => {
+      const config_0 = {
+        flowchart: {
+          subGraphTitleMargin: {
+            top: 10,
+            bottom: 5,
+          },
+        },
+      };
+
+      configApi.setSiteConfig(config_0);
+      expect(getSubGraphTitleMargins()).toEqual({
+        subGraphTitleTopMargin: 10,
+        subGraphTitleBottomMargin: 5,
+        subGraphTitleTotalMargin: 15,
+      });
+    });
+  });
 });
diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
new file mode 100644
index 0000000000..35dcaee95a
--- /dev/null
+++ b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
@@ -0,0 +1,17 @@
+import { getConfig } from '../diagram-api/diagramAPI.js';
+
+export const getSubGraphTitleMargins = (): {
+  subGraphTitleTopMargin: number;
+  subGraphTitleBottomMargin: number;
+  subGraphTitleTotalMargin: number;
+} => {
+  const subGraphTitleTopMargin = getConfig().flowchart?.subGraphTitleMargin?.top || 0;
+  const subGraphTitleBottomMargin = getConfig().flowchart?.subGraphTitleMargin?.bottom || 0;
+  const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
+
+  return {
+    subGraphTitleTopMargin,
+    subGraphTitleBottomMargin,
+    subGraphTitleTotalMargin,
+  };
+};

From 52ed38719faa3b452cb8b7978dada4319d87c18d Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Fri, 10 Nov 2023 21:35:58 -0300
Subject: [PATCH 03/17] Fix nesting of getSubGraphTitleMargins test.

---
 packages/mermaid/src/utils.spec.ts | 32 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index ac06f2b430..2442e97b36 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -595,24 +595,24 @@ describe('calculatePoint', () => {
       'Could not find a suitable point for the given distance'
     );
   });
+});
 
-  describe('getSubGraphTitleMargins', () => {
-    it('should get subgraph title margins after config has been set', () => {
-      const config_0 = {
-        flowchart: {
-          subGraphTitleMargin: {
-            top: 10,
-            bottom: 5,
-          },
+describe('getSubGraphTitleMargins', () => {
+  it('should get subgraph title margins after config has been set', () => {
+    const config_0 = {
+      flowchart: {
+        subGraphTitleMargin: {
+          top: 10,
+          bottom: 5,
         },
-      };
-
-      configApi.setSiteConfig(config_0);
-      expect(getSubGraphTitleMargins()).toEqual({
-        subGraphTitleTopMargin: 10,
-        subGraphTitleBottomMargin: 5,
-        subGraphTitleTotalMargin: 15,
-      });
+      },
+    };
+
+    configApi.setSiteConfig(config_0);
+    expect(getSubGraphTitleMargins()).toEqual({
+      subGraphTitleTopMargin: 10,
+      subGraphTitleBottomMargin: 5,
+      subGraphTitleTotalMargin: 15,
     });
   });
 });

From 8b0a5be6d9cca6cbf20dff95d84501bf84dccc79 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Sat, 11 Nov 2023 18:18:51 -0300
Subject: [PATCH 04/17] Include subgraph margin into label positioning

---
 packages/mermaid/src/dagre-wrapper/clusters.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 5c6e5a4e05..0786b35e05 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -5,6 +5,7 @@ import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
@@ -63,17 +64,22 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
   if (useHtmlLabels) {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' + (node.x - bbox.width / 2) + ', ' + (node.y - node.height / 2) + ')'
+      'translate(' +
+        (node.x - bbox.width / 2) +
+        ', ' +
+        (node.y - node.height / 2 + subGraphTitleTopMargin) +
+        ')'
     );
   } else {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' + node.x + ', ' + (node.y - node.height / 2) + ')'
+      'translate(' + node.x + ', ' + (node.y - node.height / 2 + subGraphTitleTopMargin) + ')'
     );
   }
   // Center the label
@@ -175,6 +181,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
   // Center the label
   label.attr(
     'transform',
@@ -185,6 +192,7 @@ const roundedWithTitle = (parent, node) => {
         node.height / 2 -
         node.padding / 3 +
         (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
+      subGraphTitleTopMargin +
       ')'
   );
 

From 56c3809b5724428741f07a9ae627cb940e861510 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Sun, 12 Nov 2023 17:32:58 -0300
Subject: [PATCH 05/17] Add logic to add subgraph title margin on layout

---
 packages/mermaid/src/dagre-wrapper/edges.js |  5 +++++
 packages/mermaid/src/dagre-wrapper/index.js | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index ced9a3bc2c..62a929e37c 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,6 +6,7 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -263,6 +264,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
   // log.warn();
   if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
     // Intersection is top or bottom of rect.
@@ -280,6 +282,9 @@ export const intersection = (node, outsidePoint, insidePoint) => {
     }
     if (R === 0) {
       res.x = outsidePoint.x;
+      if (q && subGraphTitleTotalMargin) {
+        res.y = insidePoint.y < outsidePoint.y ? y + h : y - h;
+      }
     }
     if (Q === 0) {
       res.y = outsidePoint.y;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 9843adb8b0..7ebb9dc494 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -13,6 +13,9 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
 import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+
+const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
@@ -114,13 +117,20 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
     );
     if (node && node.clusterNode) {
       // clusterDb[node.id].node = node;
-
+      node.y += subGraphTitleTotalMargin;
       positionNode(node);
     } else {
       // Non cluster node
       if (graph.children(v).length > 0) {
         // A cluster in the non-recursive way
         // positionCluster(node);
+        node.height += subGraphTitleTotalMargin * 2;
+        graph.children(v).forEach((c) => {
+          if (!clusterDb[c]) return;
+          if (!clusterDb[c].clusterData) {
+            node.height += subGraphTitleTotalMargin * 2;
+          }
+        });
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {

From 453c16d08e2449eb779583bda8afa44b3840c584 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Fri, 17 Nov 2023 20:20:13 -0300
Subject: [PATCH 06/17] Remove unnecessary code

---
 packages/mermaid/src/dagre-wrapper/edges.js | 5 -----
 packages/mermaid/src/dagre-wrapper/index.js | 6 ------
 2 files changed, 11 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index 62a929e37c..ced9a3bc2c 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,7 +6,6 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
-import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -264,7 +263,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
   // log.warn();
   if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
     // Intersection is top or bottom of rect.
@@ -282,9 +280,6 @@ export const intersection = (node, outsidePoint, insidePoint) => {
     }
     if (R === 0) {
       res.x = outsidePoint.x;
-      if (q && subGraphTitleTotalMargin) {
-        res.y = insidePoint.y < outsidePoint.y ? y + h : y - h;
-      }
     }
     if (Q === 0) {
       res.y = outsidePoint.y;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 7ebb9dc494..bb14b91da5 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -125,12 +125,6 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
         // A cluster in the non-recursive way
         // positionCluster(node);
         node.height += subGraphTitleTotalMargin * 2;
-        graph.children(v).forEach((c) => {
-          if (!clusterDb[c]) return;
-          if (!clusterDb[c].clusterData) {
-            node.height += subGraphTitleTotalMargin * 2;
-          }
-        });
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {

From 7e77433ef789670f6791f5e14dc22b54f53abd15 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Fri, 17 Nov 2023 20:49:54 -0300
Subject: [PATCH 07/17] Add tests for subgraph title margin

---
 .../rendering/flowchart-v2.spec.js            | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index aac4a31b17..7006281514 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -874,4 +874,72 @@ end
       });
     });
   });
+  describe('Subgraph title margins', () => {
+    it('Should render subgraphs with title margins set (LR)', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+      );
+    });
+    it('Should render subgraphs with title margins set (TD)', () => {
+      imgSnapshotTest(
+        `flowchart TD
+
+          subgraph TOP
+              direction LR
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 8, bottom: 16 } } }
+      );
+    });
+    it('Should render subgraphs with title margins set (LR) and htmlLabels set to false', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 -->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 -->f2
+              end
+          end
+          A --> TOP --> B
+          B1 --> B2
+        `,
+        {
+          htmlLabels: false,
+          flowchart: { htmlLabels: false, subGraphTitleMargin: { top: 10, bottom: 5 } },
+        }
+      );
+    });
+  });
 });

From ad6c76116dbe4a9a4d40f69bba3a54ce556dfb53 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 20 Nov 2023 19:13:34 -0300
Subject: [PATCH 08/17] Modify getSubGraphTitleMargins to use null coalescing
 operator

---
 packages/mermaid/src/utils/getSubGraphTitleMargins.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
index 35dcaee95a..64d2e18509 100644
--- a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
+++ b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
@@ -5,8 +5,9 @@ export const getSubGraphTitleMargins = (): {
   subGraphTitleBottomMargin: number;
   subGraphTitleTotalMargin: number;
 } => {
-  const subGraphTitleTopMargin = getConfig().flowchart?.subGraphTitleMargin?.top || 0;
-  const subGraphTitleBottomMargin = getConfig().flowchart?.subGraphTitleMargin?.bottom || 0;
+  const { flowchart } = getConfig();
+  const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
+  const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
   const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
 
   return {

From c0a43f5d5a13350b1c2bf20747b6cc5d5920156a Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 20 Nov 2023 20:40:30 -0300
Subject: [PATCH 09/17] Change getSubGraphTitleMargins to accept config object
 as parameter

---
 packages/mermaid/src/dagre-wrapper/clusters.js        | 4 ++--
 packages/mermaid/src/dagre-wrapper/index.js           | 4 ++--
 packages/mermaid/src/utils.spec.ts                    | 2 +-
 packages/mermaid/src/utils/getSubGraphTitleMargins.ts | 9 ++++++---
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 0786b35e05..1095c483bd 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -64,7 +64,7 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
   if (useHtmlLabels) {
     label.attr(
       'transform',
@@ -181,7 +181,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins();
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
   // Center the label
   label.attr(
     'transform',
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index bb14b91da5..24daafe03d 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -14,8 +14,7 @@ import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
 import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
-
-const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
+import { getConfig } from '../diagram-api/diagramAPI.js';
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
@@ -104,6 +103,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
   log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(getConfig());
   sortNodesByHierarchy(graph).forEach(function (v) {
     const node = graph.node(v);
     log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 2442e97b36..854ce2ef1d 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -609,7 +609,7 @@ describe('getSubGraphTitleMargins', () => {
     };
 
     configApi.setSiteConfig(config_0);
-    expect(getSubGraphTitleMargins()).toEqual({
+    expect(getSubGraphTitleMargins(config_0)).toEqual({
       subGraphTitleTopMargin: 10,
       subGraphTitleBottomMargin: 5,
       subGraphTitleTotalMargin: 15,
diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
index 64d2e18509..af07a6c961 100644
--- a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
+++ b/packages/mermaid/src/utils/getSubGraphTitleMargins.ts
@@ -1,11 +1,14 @@
-import { getConfig } from '../diagram-api/diagramAPI.js';
+import { FlowchartDiagramConfig } from '../config.type.js';
 
-export const getSubGraphTitleMargins = (): {
+export const getSubGraphTitleMargins = ({
+  flowchart,
+}: {
+  flowchart: FlowchartDiagramConfig;
+}): {
   subGraphTitleTopMargin: number;
   subGraphTitleBottomMargin: number;
   subGraphTitleTotalMargin: number;
 } => {
-  const { flowchart } = getConfig();
   const subGraphTitleTopMargin = flowchart?.subGraphTitleMargin?.top ?? 0;
   const subGraphTitleBottomMargin = flowchart?.subGraphTitleMargin?.bottom ?? 0;
   const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;

From 63c2d36232f549012a7b7bfa3e4cf5610029e38b Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 20 Nov 2023 20:49:00 -0300
Subject: [PATCH 10/17] Rename file and update imports

---
 packages/mermaid/src/dagre-wrapper/clusters.js                  | 2 +-
 packages/mermaid/src/dagre-wrapper/index.js                     | 2 +-
 packages/mermaid/src/utils.spec.ts                              | 2 +-
 .../{getSubGraphTitleMargins.ts => subGraphTitleMargins.ts}     | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/mermaid/src/utils/{getSubGraphTitleMargins.ts => subGraphTitleMargins.ts} (100%)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 1095c483bd..93c9f93870 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -5,7 +5,7 @@ import { createText } from '../rendering-util/createText.js';
 import { select } from 'd3';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 import { evaluate } from '../diagrams/common/common.js';
-import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 24daafe03d..0ebd9beed4 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -13,7 +13,7 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
 import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
-import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 854ce2ef1d..60055fe44e 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
-import { getSubGraphTitleMargins } from './utils/getSubGraphTitleMargins.js';
+import { getSubGraphTitleMargins } from './utils/subGraphTitleMargins.js';
 import * as configApi from './config.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
diff --git a/packages/mermaid/src/utils/getSubGraphTitleMargins.ts b/packages/mermaid/src/utils/subGraphTitleMargins.ts
similarity index 100%
rename from packages/mermaid/src/utils/getSubGraphTitleMargins.ts
rename to packages/mermaid/src/utils/subGraphTitleMargins.ts

From fc3018e977970788ea6d513b397c503dbf1f1922 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 20 Nov 2023 20:55:43 -0300
Subject: [PATCH 11/17] Move subgraph title margin tests to independent file

---
 packages/mermaid/src/utils.spec.ts            | 22 -------------------
 .../src/utils/subGraphTitleMargins.spec.ts    | 22 +++++++++++++++++++
 2 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100644 packages/mermaid/src/utils/subGraphTitleMargins.spec.ts

diff --git a/packages/mermaid/src/utils.spec.ts b/packages/mermaid/src/utils.spec.ts
index 60055fe44e..8ccf5b2107 100644
--- a/packages/mermaid/src/utils.spec.ts
+++ b/packages/mermaid/src/utils.spec.ts
@@ -1,7 +1,5 @@
 import { vi } from 'vitest';
 import utils, { calculatePoint, cleanAndMerge, detectDirective } from './utils.js';
-import { getSubGraphTitleMargins } from './utils/subGraphTitleMargins.js';
-import * as configApi from './config.js';
 import assignWithDepth from './assignWithDepth.js';
 import { detectType } from './diagram-api/detectType.js';
 import { addDiagrams } from './diagram-api/diagram-orchestration.js';
@@ -596,23 +594,3 @@ describe('calculatePoint', () => {
     );
   });
 });
-
-describe('getSubGraphTitleMargins', () => {
-  it('should get subgraph title margins after config has been set', () => {
-    const config_0 = {
-      flowchart: {
-        subGraphTitleMargin: {
-          top: 10,
-          bottom: 5,
-        },
-      },
-    };
-
-    configApi.setSiteConfig(config_0);
-    expect(getSubGraphTitleMargins(config_0)).toEqual({
-      subGraphTitleTopMargin: 10,
-      subGraphTitleBottomMargin: 5,
-      subGraphTitleTotalMargin: 15,
-    });
-  });
-});
diff --git a/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts b/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
new file mode 100644
index 0000000000..c607f8bce7
--- /dev/null
+++ b/packages/mermaid/src/utils/subGraphTitleMargins.spec.ts
@@ -0,0 +1,22 @@
+import { getSubGraphTitleMargins } from './subGraphTitleMargins.js';
+import * as configApi from '../config.js';
+
+describe('getSubGraphTitleMargins', () => {
+  it('should get subgraph title margins after config has been set', () => {
+    const config_0 = {
+      flowchart: {
+        subGraphTitleMargin: {
+          top: 10,
+          bottom: 5,
+        },
+      },
+    };
+
+    configApi.setSiteConfig(config_0);
+    expect(getSubGraphTitleMargins(config_0)).toEqual({
+      subGraphTitleTopMargin: 10,
+      subGraphTitleBottomMargin: 5,
+      subGraphTitleTotalMargin: 15,
+    });
+  });
+});

From d61bfde16768e0806db24d87347e6807b4fa7109 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 20 Nov 2023 21:06:38 -0300
Subject: [PATCH 12/17] Replace string concat with string templates

---
 packages/mermaid/src/dagre-wrapper/clusters.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 93c9f93870..11fcecfc31 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -69,17 +69,13 @@ const rect = (parent, node) => {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' +
-        (node.x - bbox.width / 2) +
-        ', ' +
-        (node.y - node.height / 2 + subGraphTitleTopMargin) +
-        ')'
+      `translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   } else {
     label.attr(
       'transform',
       // This puts the labal on top of the box instead of inside it
-      'translate(' + node.x + ', ' + (node.y - node.height / 2 + subGraphTitleTopMargin) + ')'
+      `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   }
   // Center the label

From d79671e04a4c9e2703052aff09d0ae5dca00ee88 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 20 Nov 2023 21:16:10 -0300
Subject: [PATCH 13/17] Resolve lint issue

---
 packages/mermaid/src/utils/subGraphTitleMargins.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mermaid/src/utils/subGraphTitleMargins.ts b/packages/mermaid/src/utils/subGraphTitleMargins.ts
index af07a6c961..426f4770d6 100644
--- a/packages/mermaid/src/utils/subGraphTitleMargins.ts
+++ b/packages/mermaid/src/utils/subGraphTitleMargins.ts
@@ -1,4 +1,4 @@
-import { FlowchartDiagramConfig } from '../config.type.js';
+import type { FlowchartDiagramConfig } from '../config.type.js';
 
 export const getSubGraphTitleMargins = ({
   flowchart,

From 3489fc49b932363802d34985053db70adb75d49c Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Sat, 25 Nov 2023 13:51:49 -0300
Subject: [PATCH 14/17] Replace multiple calls of getConfig() for a single at
 top of the scope

---
 packages/mermaid/src/dagre-wrapper/clusters.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/clusters.js b/packages/mermaid/src/dagre-wrapper/clusters.js
index 11fcecfc31..2de3f2489a 100644
--- a/packages/mermaid/src/dagre-wrapper/clusters.js
+++ b/packages/mermaid/src/dagre-wrapper/clusters.js
@@ -9,6 +9,7 @@ import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 const rect = (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
+  const siteConfig = getConfig();
 
   // Add outer g element
   const shapeSvg = parent
@@ -19,7 +20,7 @@ const rect = (parent, node) => {
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
-  const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
+  const useHtmlLabels = evaluate(siteConfig.flowchart.htmlLabels);
 
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
@@ -35,7 +36,7 @@ const rect = (parent, node) => {
   // Get the size of the label
   let bbox = text.getBBox();
 
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -64,7 +65,7 @@ const rect = (parent, node) => {
     .attr('width', width)
     .attr('height', node.height + padding);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   if (useHtmlLabels) {
     label.attr(
       'transform',
@@ -129,6 +130,8 @@ const noteGroup = (parent, node) => {
   return shapeSvg;
 };
 const roundedWithTitle = (parent, node) => {
+  const siteConfig = getConfig();
+
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
 
@@ -145,7 +148,7 @@ const roundedWithTitle = (parent, node) => {
 
   // Get the size of the label
   let bbox = text.getBBox();
-  if (evaluate(getConfig().flowchart.htmlLabels)) {
+  if (evaluate(siteConfig.flowchart.htmlLabels)) {
     const div = text.children[0];
     const dv = select(text);
     bbox = div.getBoundingClientRect();
@@ -177,7 +180,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(getConfig());
+  const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   // Center the label
   label.attr(
     'transform',
@@ -187,7 +190,7 @@ const roundedWithTitle = (parent, node) => {
       (node.y -
         node.height / 2 -
         node.padding / 3 +
-        (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) +
+        (evaluate(siteConfig.flowchart.htmlLabels) ? 5 : 3)) +
       subGraphTitleTopMargin +
       ')'
   );

From ce875c9a3389713a614aae1257ff37e1f8ecb9a8 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Sun, 26 Nov 2023 18:18:31 -0300
Subject: [PATCH 15/17] Move getConfig() call out of recursiveRender to its
 parent caller

---
 packages/mermaid/src/dagre-wrapper/index.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 0ebd9beed4..5bdcfa7212 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -16,7 +16,7 @@ import { log } from '../logger.js';
 import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 import { getConfig } from '../diagram-api/diagramAPI.js';
 
-const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
+const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
   log.trace('Dir in recursive render - dir:', dir);
@@ -54,7 +54,14 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
       if (node && node.clusterNode) {
         // const children = graph.children(v);
         log.info('Cluster identified', v, node.width, graph.node(v));
-        const o = await recursiveRender(nodes, node.graph, diagramtype, id, graph.node(v));
+        const o = await recursiveRender(
+          nodes,
+          node.graph,
+          diagramtype,
+          id,
+          graph.node(v),
+          siteConfig
+        );
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
         node.diff = o.diff || 0;
@@ -103,7 +110,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
   log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
-  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(getConfig());
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   sortNodesByHierarchy(graph).forEach(function (v) {
     const node = graph.node(v);
     log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
@@ -163,7 +170,8 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
   adjustClustersAndEdges(graph);
   log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
   // log.warn('Graph ever  after:', graphlibJson.write(graph.node('A').graph));
-  await recursiveRender(elem, graph, diagramtype, id);
+  const siteConfig = getConfig();
+  await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
 };
 
 // const shapeDefinitions = {};

From a807a58a2956a2285e74f83d5e8a0ee99b9118d0 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 27 Nov 2023 22:10:05 -0300
Subject: [PATCH 16/17] Modify margin logic to avoid creating unnecessary space
 in subgraph

---
 packages/mermaid/src/dagre-wrapper/edges.js | 13 ++++++++-----
 packages/mermaid/src/dagre-wrapper/index.js |  4 +++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index ced9a3bc2c..4465dd3b5e 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,6 +6,7 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -135,6 +136,8 @@ function setTerminalWidth(fo, value) {
 export const positionEdgeLabel = (edge, paths) => {
   log.info('Moving label abc78 ', edge.id, edge.label, edgeLabels[edge.id]);
   let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
+  const siteConfig = getConfig();
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
   if (edge.label) {
     const el = edgeLabels[edge.id];
     let x = edge.x;
@@ -158,7 +161,7 @@ export const positionEdgeLabel = (edge, paths) => {
         y = pos.y;
       }
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
   }
 
   //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
@@ -172,7 +175,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y})`);
   }
   if (edge.startLabelRight) {
     const el = terminalLabels[edge.id].startRight;
@@ -188,7 +191,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y})`);
   }
   if (edge.endLabelLeft) {
     const el = terminalLabels[edge.id].endLeft;
@@ -200,7 +203,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y})`);
   }
   if (edge.endLabelRight) {
     const el = terminalLabels[edge.id].endRight;
@@ -212,7 +215,7 @@ export const positionEdgeLabel = (edge, paths) => {
       x = pos.x;
       y = pos.y;
     }
-    el.attr('transform', 'translate(' + x + ', ' + y + ')');
+    el.attr('transform', `translate(${x}, ${y})`);
   }
 };
 
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 5bdcfa7212..76685dd7b9 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -131,10 +131,11 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
       if (graph.children(v).length > 0) {
         // A cluster in the non-recursive way
         // positionCluster(node);
-        node.height += subGraphTitleTotalMargin * 2;
+        node.height += subGraphTitleTotalMargin;
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {
+        node.y += subGraphTitleTotalMargin / 2;
         positionNode(node);
       }
     }
@@ -145,6 +146,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
     const edge = graph.edge(e);
     log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
+    edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
     const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
     positionEdgeLabel(edge, paths);
   });

From 7979b2830f7196097cb6c5d802b1cbfdaa00fe90 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Mon, 27 Nov 2023 22:12:41 -0300
Subject: [PATCH 17/17] Add test for subgraphs with title margins and edge
 labels

---
 .../rendering/flowchart-v2.spec.js            | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 7006281514..a0143fe08e 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -941,5 +941,26 @@ end
         }
       );
     });
+    it('Should render subgraphs with title margins and edge labels', () => {
+      imgSnapshotTest(
+        `flowchart LR
+
+          subgraph TOP
+              direction TB
+              subgraph B1
+                  direction RL
+                  i1 --lb1-->f1
+              end
+              subgraph B2
+                  direction BT
+                  i2 --lb2-->f2
+              end
+          end
+          A --lb3--> TOP --lb4--> B
+          B1 --lb5--> B2
+        `,
+        { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+      );
+    });
   });
 });