diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index af1f1e808..21806dd2a 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -401,7 +401,7 @@ stateDiagram-v2
   it('v2 should handle different rendering directions in composite states', () => {
     imgSnapshotTest(
       `
-stateDiagram
+stateDiagram-v2
   direction LR
   state A {
     direction BT
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index d5a4a6734..46bf44fa5 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -28,13 +28,26 @@
     <div class="flex">
 
 <div class="mermaid" style="width: 100%; height: 20%;">
+stateDiagram-v2
+  state S1 {
+    sub1 -->sub2
+  }
+
+  state S2 {
+    sub4
+  }
+  S1 --> S2
+  sub1 --> sub4
+
+</div>
+<div class="mermaid3" style="width: 100%; height: 20%;">
 stateDiagram
   state CompositeState {
       YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
     }
 
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid3" style="width: 100%; height: 20%;">
 flowchart
 subgraph CompositeState
   subgraph AnotherCompositeStateCompositeStateCompositeStateCompositeState
@@ -43,7 +56,7 @@ subgraph CompositeState
 
 end
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid3" style="width: 100%; height: 20%;">
 stateDiagram-v2
   state CompositeState {
     state AnotherCompositeState1234567890 {
@@ -52,7 +65,7 @@ stateDiagram-v2
   }
 
 </div>
-<div class="mermaid" style="width: 100%; height: 20%;">
+<div class="mermaid3" style="width: 100%; height: 20%;">
     %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
     flowchart LR
 
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index f39e4fa0a..18059efd7 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -37,7 +37,7 @@ const rect = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
-  const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width + padding;
+  const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
   if (node.width <= bbox.width + padding) {
     node.diff = (bbox.width - node.width) / 2;
   } else {
@@ -143,8 +143,7 @@ const roundedWithTitle = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
-  const width =
-    node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width + node.padding;
+  const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
   if (node.width <= bbox.width + node.padding) {
     node.diff = (bbox.width + node.padding - node.width) / 2;
   }