diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index ac13f484d..b63dab75b 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -1,6 +1,8 @@
 import intersectRect from './intersect/intersect-rect';
 import { logger as log } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
+import { select } from 'd3';
+import { getConfig } from '../config';
 
 const rect = (parent, node) => {
   log.trace('Creating subgraph rect for ', node.id, node);
@@ -17,10 +19,20 @@ const rect = (parent, node) => {
   // Create the label and insert it after the rect
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
 
-  const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
+  const text = label
+    .node()
+    .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
 
   // Get the size of the label
-  const bbox = text.getBBox();
+  let bbox = text.getBBox();
+
+  if (getConfig().flowchart.htmlLabels) {
+    const div = text.children[0];
+    const dv = select(text);
+    bbox = div.getBoundingClientRect();
+    dv.attr('width', bbox.width);
+    dv.attr('height', bbox.height);
+  }
 
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
@@ -106,11 +118,21 @@ const roundedWithTitle = (parent, node) => {
   const label = shapeSvg.insert('g').attr('class', 'cluster-label');
   const innerRect = shapeSvg.append('rect');
 
-  const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle));
+  const text = label
+    .node()
+    .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));
 
   // Get the size of the label
-  const bbox = text.getBBox();
-
+  let bbox = text.getBBox();
+  let labelHeight = bbox.height;
+  if (getConfig().flowchart.htmlLabels) {
+    const div = text.children[0];
+    const dv = select(text);
+    bbox = div.getBoundingClientRect();
+    dv.attr('width', bbox.width);
+    dv.attr('height', bbox.height);
+  }
+  bbox = text.getBBox();
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
@@ -134,7 +156,7 @@ const roundedWithTitle = (parent, node) => {
     'translate(' +
       (node.x - bbox.width / 2) +
       ', ' +
-      (node.y - node.height / 2 - node.padding / 3 + 3) +
+      (node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) +
       ')'
   );
 
@@ -191,7 +213,7 @@ export const insertCluster = (elem, node) => {
   clusterElems[node.id] = shapes[shape](elem, node);
 };
 export const getClusterTitleWidth = (elem, node) => {
-  const label = createLabel(node.labelText, node.labelStyle);
+  const label = createLabel(node.labelText, node.labelStyle, undefined, true);
   elem.node().appendChild(label);
   const width = label.getBBox().width;
   elem.node().removeChild(label);