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] 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 5c6e5a4e0..0786b35e0 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 +
       ')'
   );