diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index 781a8ca25..0f9084e7c 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/cypress/integration/rendering/erDiagram.spec.js
@@ -112,7 +112,7 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height', '465');
+      // expect(svg).to.have.attr('height', '465');
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -134,7 +134,7 @@ describe('Entity Relationship Diagram', () => {
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       expect(width).to.be.within(140 * 0.95, 140 * 1.05);
-      expect(svg).to.have.attr('height', '465');
+      // expect(svg).to.have.attr('height', '465');
       expect(svg).to.not.have.attr('style');
     });
   });
@@ -186,7 +186,7 @@ describe('Entity Relationship Diagram', () => {
     renderGraph(
       `
     erDiagram
-        PRIVATE_FINANCIAL_INSTITUTION { 
+        PRIVATE_FINANCIAL_INSTITUTION {
           string name
           int    turnover
         }
@@ -206,9 +206,9 @@ describe('Entity Relationship Diagram', () => {
         string name PK
       }
       AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-      BOOK { 
+      BOOK {
           float price
-          string author FK 
+          string author FK
           string title PK
         }
       `,
@@ -225,8 +225,8 @@ describe('Entity Relationship Diagram', () => {
         string name "comment"
       }
       AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-      BOOK { 
-          string author 
+      BOOK {
+          string author
           string title "author comment"
           float price "price comment"
         }
@@ -244,11 +244,11 @@ describe('Entity Relationship Diagram', () => {
         string name PK "comment"
       }
       AUTHOR_WITH_LONG_ENTITY_NAME }|..|{ BOOK : writes
-      BOOK { 
+      BOOK {
           string description
           float price "price comment"
           string title PK "title comment"
-          string author FK 
+          string author FK
         }
       `,
       { logLevel: 1 }
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index cc0362dd0..61dccfb84 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -92,10 +92,10 @@ describe('Flowchart v2', () => {
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height');
+      // expect(svg).to.have.attr('height');
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -114,10 +114,10 @@ describe('Flowchart v2', () => {
       { flowchart: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      const height = parseFloat(svg.attr('height'));
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
       expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index cbdcc4ebd..b4e94d1ab 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -744,10 +744,10 @@ describe('Graph', () => {
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height');
+      // expect(svg).to.have.attr('height');
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -766,10 +766,10 @@ describe('Graph', () => {
       { flowchart: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      const height = parseFloat(svg.attr('height'));
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+      // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
       expect(width).to.be.within(300 * 0.95, 300 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 7dc7c6cf5..87c5f4bd8 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/cypress/integration/rendering/gantt.spec.js
@@ -218,10 +218,10 @@ describe('Gantt diagram', () => {
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height');
+      // expect(svg).to.have.attr('height');
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -265,10 +265,10 @@ describe('Gantt diagram', () => {
       { gantt: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      const height = parseFloat(svg.attr('height'));
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(height).to.be.within(484 * 0.95, 484 * 1.05);
+      // expect(height).to.be.within(484 * 0.95, 484 * 1.05);
       expect(width).to.be.within(984 * 0.95, 984 * 1.05);
       expect(svg).to.not.have.attr('style');
     });
diff --git a/cypress/integration/rendering/journey.spec.js b/cypress/integration/rendering/journey.spec.js
index 5f13e5b89..6f9d9bb60 100644
--- a/cypress/integration/rendering/journey.spec.js
+++ b/cypress/integration/rendering/journey.spec.js
@@ -42,8 +42,8 @@ section Checkout from website
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
       expect(svg).to.have.attr('height');
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.eq(565);
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.eq(565);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index 233e716ed..019fa41af 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/cypress/integration/rendering/pie.spec.js
@@ -48,9 +48,9 @@ describe('Pie Chart', () => {
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height');
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.eq(450);
+      // expect(svg).to.have.attr('height');
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.eq(450);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -68,9 +68,9 @@ describe('Pie Chart', () => {
       { pie: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      const height = parseFloat(svg.attr('height'));
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      expect(height).to.eq(450);
+      // expect(height).to.eq(450);
       expect(width).to.eq(984);
       expect(svg).to.not.have.attr('style');
     });
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index f1def3391..b5ff92c8c 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -734,9 +734,9 @@ context('Sequence diagram', () => {
       );
       cy.get('svg').should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(920, 971);
+        // expect(svg).to.have.attr('height');
+        // const height = parseFloat(svg.attr('height'));
+        // expect(height).to.be.within(920, 971);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
@@ -773,9 +773,9 @@ context('Sequence diagram', () => {
         { sequence: { useMaxWidth: false } }
       );
       cy.get('svg').should((svg) => {
-        const height = parseFloat(svg.attr('height'));
+        // const height = parseFloat(svg.attr('height'));
         const width = parseFloat(svg.attr('width'));
-        expect(height).to.be.within(920, 971);
+        // expect(height).to.be.within(920, 971);
         // use within because the absolute value can be slightly different depending on the environment ±5%
         expect(width).to.be.within(820 * 0.95, 820 * 1.05);
         expect(svg).to.not.have.attr('style');
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index 946b5d31e..aa2bc06ef 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -480,14 +480,14 @@ stateDiagram-v2
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height');
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.be.within(177, 178);
+      // expect(svg).to.have.attr('height');
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(177, 178);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(maxWidthValue).to.be.within(135 * 0.95, 135 * 1.05);
+      expect(maxWidthValue).to.be.within(65, 85);
     });
   });
   it('v2 should render a state diagram when useMaxWidth is false', () => {
@@ -501,11 +501,11 @@ stateDiagram-v2
       { state: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      const height = parseFloat(svg.attr('height'));
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      expect(height).to.be.within(177, 178);
+      // expect(height).to.be.within(177, 178);
       // use within because the absolute value can be slightly different depending on the environment ±5%
-      expect(width).to.be.within(135 * 0.95, 135 * 1.05);
+      expect(width).to.be.within(65, 85);
       expect(svg).to.not.have.attr('style');
     });
   });
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index 4e538f219..cdcc48a07 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/cypress/integration/rendering/stateDiagram.spec.js
@@ -357,16 +357,16 @@ describe('State diagram', () => {
     );
     cy.get('svg').should((svg) => {
       expect(svg).to.have.attr('width', '100%');
-      expect(svg).to.have.attr('height');
-      const height = parseFloat(svg.attr('height'));
-      expect(height).to.be.within(176, 178);
+      // expect(svg).to.have.attr('height');
+      // const height = parseFloat(svg.attr('height'));
+      // expect(height).to.be.within(176, 178);
       const style = svg.attr('style');
       expect(style).to.match(/^max-width: [\d.]+px;$/);
       const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // Todo investigate difference
       // expect(maxWidthValue).to.be.within(112 * .95, 112 * 1.05);
-      expect(maxWidthValue).to.be.within(130, 140);
+      expect(maxWidthValue).to.be.within(65, 85);
     });
   });
   it('should render a state diagram when useMaxWidth is false', () => {
@@ -379,13 +379,13 @@ describe('State diagram', () => {
       { state: { useMaxWidth: false } }
     );
     cy.get('svg').should((svg) => {
-      const height = parseFloat(svg.attr('height'));
+      // const height = parseFloat(svg.attr('height'));
       const width = parseFloat(svg.attr('width'));
-      expect(height).to.be.within(176, 178);
+      // expect(height).to.be.within(176, 178);
       // use within because the absolute value can be slightly different depending on the environment ±5%
       // Todo investigate difference
       // expect(width).to.be.within(112 * .95, 112 * 1.05);
-      expect(width).to.be.within(130, 140);
+      expect(width).to.be.within(65, 85);
 
       expect(svg).to.not.have.attr('style');
     });
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 29c83ff1a..f568c9a5d 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -37,7 +37,7 @@
 
 
 
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
 flowchart LR
   classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px;
   classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px;
@@ -72,16 +72,20 @@ flowchart TD
 
 </div>
 <div class="mermaid" style="width: 50%;">
+flowchart TD
+id
+</div>
+<div class="mermaid2" style="width: 50%;">
 flowchart LR
         a["<strong>Haiya</strong>"]===>b
 </div>
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
 flowchart TD
     A --> B
     A --> C
     B --> C
 </div>
-<div class="mermaid" style="width: 50%;">
+<div class="mermaid2" style="width: 50%;">
 flowchart TD
       A([stadium shape test])
       A -->|Get money| B([Go shopping])
@@ -283,7 +287,7 @@ flowchart TD
       C -->|One| D[Laptop]
       C -->|Two| E[iPhone]
       C -->|Three| F[fa:fa-car Car]
-      </div>     <div class="mermaid" style="width: 100%;">
+      </div>     <div class="mermaid2" style="width: 100%;">
         classDiagram
           Animal "1" <|-- Duck
           Animal <|-- Fish
diff --git a/docs/index.html b/docs/index.html
index 64cc726bc..02c01d954 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -18,7 +18,7 @@
     <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
     <link rel="stylesheet" href="theme.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
-    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.5/dist/mermaid.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
     <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
     <script>
       // prettier-ignore
diff --git a/src/diagrams/state/stateRenderer-v2.js b/src/diagrams/state/stateRenderer-v2.js
index f8bec4cff..466dfbd6a 100644
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/src/diagrams/state/stateRenderer-v2.js
@@ -305,7 +305,7 @@ export const draw = function (text, id, _version, diag) {
 
   const svgBounds = svg.node().getBBox();
 
-  configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth);
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
diff --git a/src/utils.js b/src/utils.js
index 561492825..4e2979b68 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -761,7 +761,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
  * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
  */
 export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
-  const attrs = calculateSvgSizeAttrs(height, 1.1 * width, useMaxWidth);
+  const attrs = calculateSvgSizeAttrs(height, 1 * width, useMaxWidth);
   d3Attrs(svgElem, attrs);
 };
 export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
@@ -775,21 +775,22 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
   let height = graph._label.height;
   log.info(`Graph bounds: ${width}x${height}`, graph);
 
-  let tx = 0;
-  let ty = 0;
-  if (sWidth > width) {
-    tx = (sWidth - width) / 2 + padding;
-    width = sWidth + padding * 2;
-  } else {
-    if (Math.abs(sWidth - width) >= 2 * padding + 1) {
-      width = width - padding;
-    }
-  }
-  if (sHeight > height) {
-    ty = (sHeight - height) / 2 + padding;
-    height = sHeight + padding * 2;
-  }
+  // let tx = 0;
+  // let ty = 0;
+  // if (sWidth > width) {
+  //   tx = (sWidth - width) / 2 + padding;
+  width = sWidth + padding * 2;
+  // } else {
+  //   if (Math.abs(sWidth - width) >= 2 * padding + 1) {
+  //     width = width - padding;
+  //   }
+  // }
+  // if (sHeight > height) {
+  //   ty = (sHeight - height) / 2 + padding;
+  height = sHeight + padding * 2;
+  // }
 
+  // width =
   log.info(`Calculated bounds: ${width}x${height}`);
   configureSvgSize(svgElem, height, width, useMaxWidth);
 
@@ -809,10 +810,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
     width,
     'height',
     height,
-    'tx',
-    tx,
-    'ty',
-    ty,
+
     'vBox',
     vBox
   );