Merge pull request #1642 from Mogztter/issue/1490-svg-height-width

resolves #1490 consistent SVG height and width between diagrams

cypress/helpers/util.js

@@ -1,4 +1,5 @@
 /* eslint-env jest */
+/* global cy */
 import { Base64 } from 'js-base64';
 
 export const mermaidUrl = (graphStr, options, api) => {

cypress/integration/rendering/classDiagram.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {
@@ -65,7 +65,7 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render a simple class diagram with different visibilities', () => {
+  it('3: should render a simple class diagram with different visibilities', () => {
     imgSnapshotTest(
       `
     classDiagram
@@ -83,59 +83,6 @@ describe('Class diagram', () => {
     cy.get('svg');
   });
 
-  it('should render multiple class diagrams', () => {
-    imgSnapshotTest(
-      [
-      `
-    classDiagram
-      Class01 "1" <|--|> "*" AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 "1" *-- "*" Class04
-      Class05 "1" o-- "many" Class06
-      Class07 "1" .. "*" Class08
-      Class09 "1" --> "*" C2 : Where am i?
-      Class09 "*" --* "*" C3
-      Class09 "1" --|> "1" Class07
-      Class07  : equals()
-      Class07  : Object[] elementData
-      Class01  : size()
-      Class01  : int chimp
-      Class01  : int gorilla
-      Class08 "1" <--> "*" C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      `
-    classDiagram
-      Class01 "1" <|--|> "*" AveryLongClass : Cool
-      &lt;&lt;interface&gt;&gt; Class01
-      Class03 "1" *-- "*" Class04
-      Class05 "1" o-- "many" Class06
-      Class07 "1" .. "*" Class08
-      Class09 "1" --> "*" C2 : Where am i?
-      Class09 "*" --* "*" C3
-      Class09 "1" --|> "1" Class07
-      Class07  : equals()
-      Class07  : Object[] elementData
-      Class01  : size()
-      Class01  : int chimp
-      Class01  : int gorilla
-      Class08 "1" <--> "*" C2: Cool label
-      class Class10 {
-        &lt;&lt;service&gt;&gt;
-        int id
-        test()
-      }
-      `,
-      ],
-      {}
-    );
-    cy.get('svg');
-  });
-
   it('4: should render a simple class diagram with comments', () => {
     imgSnapshotTest(
       `
@@ -353,4 +300,107 @@ describe('Class diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('16: should render multiple class diagrams', () => {
+    imgSnapshotTest(
+      [
+        `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+        `
+    classDiagram
+      Class01 "1" <|--|> "*" AveryLongClass : Cool
+      &lt;&lt;interface&gt;&gt; Class01
+      Class03 "1" *-- "*" Class04
+      Class05 "1" o-- "many" Class06
+      Class07 "1" .. "*" Class08
+      Class09 "1" --> "*" C2 : Where am i?
+      Class09 "*" --* "*" C3
+      Class09 "1" --|> "1" Class07
+      Class07  : equals()
+      Class07  : Object[] elementData
+      Class01  : size()
+      Class01  : int chimp
+      Class01  : int gorilla
+      Class08 "1" <--> "*" C2: Cool label
+      class Class10 {
+        &lt;&lt;service&gt;&gt;
+        int id
+        test()
+      }
+      `,
+      ],
+      {}
+    );
+    cy.get('svg');
+  });
+
+  it('17: should render a class diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+      { class: { useMaxWidth: true } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        expect(svg).to.have.attr('height', '218');
+        const style = svg.attr('style');
+        expect(style).to.match(/^max-width: [\d.]+px;$/);
+        const maxWidthValue = parseInt(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(160 * .95, 160 * 1.05);
+      });
+  });
+
+  it('18: should render a class diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `
+    classDiagram
+      Class01 <|-- AveryLongClass : Cool
+      Class01 : size()
+      Class01 : int chimp
+      Class01 : int gorilla
+      Class01 : -int privateChimp
+      Class01 : +int publicGorilla
+      Class01 : #int protectedMarmoset
+      `,
+      { class: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        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(160 * .95, 160 * 1.05);
+        expect(svg).to.have.attr('height', '218');
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/erDiagram.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {
@@ -101,4 +101,44 @@ describe('Entity Relationship Diagram', () => {
     );
     cy.get('svg');
   });
+
+  it('should render an ER diagrams when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { er: { useMaxWidth: true } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        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(''));
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        expect(maxWidthValue).to.be.within(140 * .95, 140 * 1.05);
+      });
+  });
+
+  it('should render an ER when useMaxWidth is false', () => {
+    renderGraph(
+      `
+    erDiagram
+        CUSTOMER ||--o{ ORDER : places
+        ORDER ||--|{ LINE-ITEM : contains
+      `,
+      { er: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        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 * .95, 140 * 1.05);
+        expect(svg).to.have.attr('height', '465');
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {
@@ -47,7 +47,7 @@ describe('Flowchart v2', () => {
     );
   });
 
-  it('Length of edges', () => {
+  it('4: Length of edges', () => {
     imgSnapshotTest(
       `flowchart TD
       L1 --- L2
@@ -64,7 +64,7 @@ describe('Flowchart v2', () => {
       { flowchart: { diagramPadding: 0 } }
     );
   });
-  it('36: should render escaped without html labels', () => {
+  it('5: should render escaped without html labels', () => {
     imgSnapshotTest(
       `flowchart TD
         a["<strong>Haiya</strong>"]---->b
@@ -72,13 +72,57 @@ describe('Flowchart v2', () => {
       {htmlLabels: false, flowchart: {htmlLabels: false}}
     );
   });
-  it('37: should render non-escaped with html labels', () => {
+  it('6: should render non-escaped with html labels', () => {
     imgSnapshotTest(
       `flowchart TD
         a["<strong>Haiya</strong>"]===>b
       `,
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
-
     );
   });
+  it('7: should render a flowchart when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: true } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        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 * .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(''));
+        expect(maxWidthValue).to.be.within(300 * .95, 300 * 1.05);
+      });
+  });
+  it('8: should render a flowchart when useMaxWidth is false', () => {
+    renderGraph(
+      `flowchart TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        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 * .95, 446 * 1.05);
+        expect(width).to.be.within(300 * .95, 300 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/flowchart.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('Flowchart', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {
@@ -731,4 +731,49 @@ describe('Flowchart', () => {
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('38: should render a flowchart when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: true } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        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 * .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(''));
+        expect(maxWidthValue).to.be.within(300 * .95, 300 * 1.05);
+      });
+  });
+  it('39: should render a flowchart when useMaxWidth is false', () => {
+    renderGraph(
+      `graph TD
+      A[Christmas] -->|Get money| B(Go shopping)
+      B --> C{Let me think}
+      C -->|One| D[Laptop]
+      C -->|Two| E[iPhone]
+      C -->|Three| F[fa:fa-car Car]
+      `,
+      { flowchart: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        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 * .95, 446 * 1.05);
+        expect(width).to.be.within(300 * .95, 300 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/gantt.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Gantt diagram', () => {
   beforeEach(()=>{
@@ -163,4 +163,99 @@ describe('Gantt diagram', () => {
       {}
     );
   });
+
+  it('should render a gantt diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title Adding GANTT diagram to mermaid
+      excludes weekdays 2014-01-10
+
+      section A section
+      Completed task            :done,    des1, 2014-01-06,2014-01-08
+      Active task               :active,  des2, 2014-01-09, 3d
+      Future task               :         des3, after des2, 5d
+      Future task2               :         des4, after des3, 5d
+
+      section Critical tasks
+      Completed task in the critical line :crit, done, 2014-01-06,24h
+      Implement parser and jison :crit, done, after des1, 2d
+      Create tests for parser             :crit, active, 3d
+      Future task in critical line        :crit, 5d
+      Create tests for renderer           :2d
+      Add to mermaid                      :1d
+
+      section Documentation
+      Describe gantt syntax               :active, a1, after des1, 3d
+      Add gantt diagram to demo page      :after a1  , 20h
+      Add another diagram to demo page    :doc1, after a1  , 48h
+
+      section Last section
+      Describe gantt syntax               :after doc1, 3d
+      Add gantt diagram to demo page      : 20h
+      Add another diagram to demo page    : 48h
+      `,
+      { gantt: { useMaxWidth: true } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        expect(svg).to.have.attr('width', '100%');
+        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 * .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(''));
+        expect(maxWidthValue).to.be.within(984 * .95, 984 * 1.05);
+      });
+  });
+
+  it('should render a gantt diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      axisFormat  %d/%m
+      title Adding GANTT diagram to mermaid
+      excludes weekdays 2014-01-10
+
+      section A section
+      Completed task            :done,    des1, 2014-01-06,2014-01-08
+      Active task               :active,  des2, 2014-01-09, 3d
+      Future task               :         des3, after des2, 5d
+      Future task2               :         des4, after des3, 5d
+
+      section Critical tasks
+      Completed task in the critical line :crit, done, 2014-01-06,24h
+      Implement parser and jison :crit, done, after des1, 2d
+      Create tests for parser             :crit, active, 3d
+      Future task in critical line        :crit, 5d
+      Create tests for renderer           :2d
+      Add to mermaid                      :1d
+
+      section Documentation
+      Describe gantt syntax               :active, a1, after des1, 3d
+      Add gantt diagram to demo page      :after a1  , 20h
+      Add another diagram to demo page    :doc1, after a1  , 48h
+
+      section Last section
+      Describe gantt syntax               :after doc1, 3d
+      Add gantt diagram to demo page      : 20h
+      Add another diagram to demo page    : 48h
+      `,
+      { gantt: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        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 * .95, 484 * 1.05);
+        expect(width).to.be.within(984 * .95, 984 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/journey.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('User journey diagram', () => {
   it('Simple test', () => {
@@ -28,4 +28,43 @@ section Order from website
       {}
     );
   });
+
+  it('should render a user journey diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `journey
+title Adding journey diagram functionality to mermaid
+section Order from website
+    `,
+      { journey: { useMaxWidth: true } }
+    );
+    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(20);
+        const style = svg.attr('style');
+        expect(style).to.match(/^max-width: [\d.]+px;$/);
+        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+        expect(maxWidthValue).to.eq(400);
+      });
+  });
+
+  it('should render a user journey diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `journey
+title Adding journey diagram functionality to mermaid
+section Order from website
+    `,
+      { journey: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        const height = parseFloat(svg.attr('height'));
+        const width = parseFloat(svg.attr('width'));
+        expect(height).to.eq(20);
+        expect(width).to.eq(400);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/pie.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util.js';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Pie Chart', () => {
   it('should render a simple pie diagram', () => {
@@ -37,4 +37,45 @@ describe('Pie Chart', () => {
     );
     cy.get('svg');
   });
+  it('should render a pie diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+      { pie: { useMaxWidth: true } }
+    );
+    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);
+        const style = svg.attr('style');
+        expect(style).to.match(/^max-width: [\d.]+px;$/);
+        const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+        expect(maxWidthValue).to.eq(984);
+      });
+  });
+  it('should render a pie diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `
+    pie title Sports in Sweden
+       "Bandy" : 40
+       "Ice-Hockey" : 80
+       "Football" : 90
+      `,
+      { pie: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        const height = parseFloat(svg.attr('height'));
+        const width = parseFloat(svg.attr('width'));
+        expect(height).to.eq(450);
+        expect(width).to.eq(984);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 context('Sequence diagram', () => {
   it('should render a simple sequence diagram', () => {
@@ -505,7 +505,7 @@ context('Sequence diagram', () => {
     });
   });
   context('directives', () => {
-      it('should overide config with directive settings', () => {
+      it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": true }}}%%
@@ -517,7 +517,7 @@ context('Sequence diagram', () => {
         { logLevel:0,  sequence: { mirrorActors: false, noteFontSize: 18, noteFontFamily: 'Arial' } }
       );
     });
-      it('should overide config with directive settings', () => {
+      it('should override config with directive settings', () => {
       imgSnapshotTest(
         `
         %%{init: { "config": { "mirrorActors": false, "wrap": true }}}%%
@@ -530,4 +530,85 @@ context('Sequence diagram', () => {
       );
     });
   });
+  context('svg size', () => {
+    it('should render a sequence diagram when useMaxWidth is true (default)', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John as John<br/>Second Line
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+        Bob-->Alice: Checking with John...
+        alt either this
+          Alice->>John: Yes
+          else or this
+          Alice->>John: No
+          else or this will happen
+          Alice->John: Maybe
+        end
+        par this happens in parallel
+        Alice -->> Bob: Parallel message 1
+        and
+        Alice -->> John: Parallel message 2
+        end
+      `,
+        { sequence: { useMaxWidth: true } }
+      );
+      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(920);
+          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(820 * .95, 820 * 1.05);
+        });
+    });
+    it('should render a sequence diagram when useMaxWidth is false', () => {
+      renderGraph(
+        `
+      sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John as John<br/>Second Line
+        Alice ->> Bob: Hello Bob, how are you?
+        Bob-->>John: How about you John?
+        Bob--x Alice: I am good thanks!
+        Bob-x John: I am good thanks!
+        Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
+        Bob-->Alice: Checking with John...
+        alt either this
+          Alice->>John: Yes
+          else or this
+          Alice->>John: No
+          else or this will happen
+          Alice->John: Maybe
+        end
+        par this happens in parallel
+        Alice -->> Bob: Parallel message 1
+        and
+        Alice -->> John: Parallel message 2
+        end
+      `,
+        { sequence: { useMaxWidth: false } }
+      );
+      cy.get('svg')
+        .should((svg) => {
+          const height = parseFloat(svg.attr('height'));
+          const width = parseFloat(svg.attr('width'));
+          expect(height).to.eq(920);
+          // use within because the absolute value can be slightly different depending on the environment ±5%
+          expect(width).to.be.within(820 * .95, 820 * 1.05);
+          expect(svg).to.not.have.attr('style');
+        });
+    });
+  });
 });

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {
@@ -47,7 +47,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('v2 should render a single state with short descr', () => {
+  it('v2 should render a single state with short descriptions', () => {
     imgSnapshotTest(
       `
     stateDiagram-v2
@@ -58,7 +58,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('v2 should render a transition descrions with new lines', () => {
+  it('v2 should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
       `
       stateDiagram-v2
@@ -201,7 +201,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('v2 should render composit states', () => {
+  it('v2 should render composite states', () => {
     imgSnapshotTest(
       `
       stateDiagram-v2
@@ -220,7 +220,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('v2 should render multiple composit states', () => {
+  it('v2 should render multiple composite states', () => {
     imgSnapshotTest(
       `
       stateDiagram-v2
@@ -249,7 +249,7 @@ describe('State diagram', () => {
       { logLevel: 0, fontFamily: 'courier' }
     );
   });
-  it('v2 should render forks in composit states', () => {
+  it('v2 should render forks in composite states', () => {
     imgSnapshotTest(
       `
       stateDiagram-v2
@@ -329,7 +329,7 @@ describe('State diagram', () => {
       }
     );
   });
-  it('v2 Simplest composit state', () => {
+  it('v2 Simplest composite state', () => {
     imgSnapshotTest(
       `
       stateDiagram-v2
@@ -354,5 +354,47 @@ describe('State diagram', () => {
       }
     );
   });
+  it('v2 should render a state diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `
+    stateDiagram-v2
 
+    [*] --> State1
+    State1 --> [*]
+      `,
+      { state: { useMaxWidth: true } }
+    );
+    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(177);
+        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 * .95, 135 * 1.05);
+      });
+  });
+  it('v2 should render a state diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `
+    stateDiagram-v2
+
+    [*] --> State1
+    State1 --> [*]
+      `,
+      { state: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        const height = parseFloat(svg.attr('height'));
+        const width = parseFloat(svg.attr('width'));
+        expect(height).to.eq(177);
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        expect(width).to.be.within(135 * .95, 135 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,5 +1,5 @@
 /* eslint-env jest */
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {
@@ -37,7 +37,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('should render a single state with short descr', () => {
+  it('should render a single state with short descriptions', () => {
     imgSnapshotTest(
       `
     stateDiagram
@@ -48,7 +48,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('should render a transition descrions with new lines', () => {
+  it('should render a transition descriptions with new lines', () => {
     imgSnapshotTest(
       `
       stateDiagram
@@ -191,7 +191,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('should render composit states', () => {
+  it('should render composite states', () => {
     imgSnapshotTest(
       `
       stateDiagram
@@ -280,7 +280,7 @@ describe('State diagram', () => {
     );
     cy.get('svg');
   });
-  it('should render conurrency states', () => {
+  it('should render concurrency states', () => {
     imgSnapshotTest(
       `
     stateDiagram
@@ -319,7 +319,7 @@ describe('State diagram', () => {
       }
     );
   });
-  it('Simplest composit state', () => {
+  it('Simplest composite state', () => {
     imgSnapshotTest(
       `
       stateDiagram
@@ -344,5 +344,45 @@ describe('State diagram', () => {
       }
     );
   });
-
+  it('should render a state diagram when useMaxWidth is true (default)', () => {
+    renderGraph(
+      `
+    stateDiagram
+    [*] --> State1
+    State1 --> [*]
+      `,
+      { state: { useMaxWidth: true } }
+    );
+    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(139);
+        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(112 * .95, 112 * 1.05);
+      });
+  });
+  it('should render a state diagram when useMaxWidth is false', () => {
+    renderGraph(
+      `
+    stateDiagram
+    [*] --> State1
+    State1 --> [*]
+      `,
+      { state: { useMaxWidth: false } }
+    );
+    cy.get('svg')
+      .should((svg) => {
+        const height = parseFloat(svg.attr('height'));
+        const width = parseFloat(svg.attr('width'));
+        expect(height).to.eq(139);
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        expect(width).to.be.within(112 * .95, 112 * 1.05);
+        expect(svg).to.not.have.attr('style');
+      });
+  });
 });

src/defaultConfig.js

@@ -173,8 +173,20 @@ const config = {
      */
     curve: 'linear',
     // Only used in new experimental rendering
-    // repreesents the padding between the labels and the shape
+    // represents the padding between the labels and the shape
-    padding: 15
+    padding: 15,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See notes | Boolean | 4 | True, False |
+     *
+     ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
+     *available space if not the absolute space required is used.
+     *
+     ***Default value true**.
+     */
+    useMaxWidth: true
   },
 
   /**
@@ -572,8 +584,23 @@ const config = {
      * This might need adjustment to match your locale and preferences
      ***Default value '%Y-%m-%d'**.
      */
-    axisFormat: '%Y-%m-%d'
+    axisFormat: '%Y-%m-%d',
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See notes | Boolean | 4 | True, False |
+     *
+     ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
+     *available space if not the absolute space required is used.
+     *
+     ***Default value true**.
+     */
+    useMaxWidth: true,
+
+    useWidth: undefined
   },
+
   /**
    * The object containing configurations specific for journey diagrams
    */
@@ -711,10 +738,35 @@ const config = {
     rightAngles: false
   },
   class: {
-    arrowMarkerAbsolute: false
+    arrowMarkerAbsolute: false,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See notes | Boolean | 4 | True, False |
+     *
+     ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
+     *available space if not the absolute space required is used.
+     *
+     ***Default value true**.
+     */
+    useMaxWidth: true
   },
   git: {
-    arrowMarkerAbsolute: false
+    arrowMarkerAbsolute: false,
+
+    useWidth: undefined,
+
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See notes | Boolean | 4 | True, False |
+     *
+     ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
+     *available space if not the absolute space required is used.
+     *
+     ***Default value true**.
+     */
+    useMaxWidth: true
   },
   state: {
     dividerMargin: 10,
@@ -734,7 +786,18 @@ const config = {
     labelHeight: 16,
     edgeLengthFactor: '20',
     compositTitleSize: 35,
-    radius: 5
+    radius: 5,
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See notes | Boolean | 4 | True, False |
+     *
+     ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the
+     *available space if not the absolute space required is used.
+     *
+     ***Default value true**.
+     */
+    useMaxWidth: true
   },
 
   /**
@@ -821,6 +884,26 @@ const config = {
      */
     fontSize: 12,
 
+    /**
+     *| Parameter | Description |Type | Required | Values|
+     *| --- | --- | --- | --- | --- |
+     *| useMaxWidth | See Notes | Boolean | Required | true, false |
+     *
+     ***Notes:**
+     *When this flag is set to true, the diagram width is locked to 100% and
+     *scaled based on available space. If set to false, the diagram reserves its
+     *absolute width.
+     ***Default value: true**.
+     */
+    useMaxWidth: true
+  },
+
+  /**
+   * The object containing configurations specific for pie diagrams
+   */
+  pie: {
+    useWidth: undefined,
+
     /**
      *| Parameter | Description |Type | Required | Values|
      *| --- | --- | --- | --- | --- |

src/diagrams/class/classRenderer-v2.js

@@ -9,7 +9,7 @@ import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
 // import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { curveLinear } from 'd3';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import common from '../common/common';
 
 parser.yy = classDb;
@@ -325,13 +325,7 @@ export const drawOld = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
-    diagram.attr('width', '100%');
-    diagram.attr('style', `max-width: ${width}px;`);
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
@@ -427,13 +421,7 @@ export const draw = function(text, id) {
     `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
   );
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
 
   svg.attr('viewBox', `0 0 ${width} ${height}`);
   svg

src/diagrams/class/classRenderer.js

@@ -5,6 +5,7 @@ import { logger } from '../../logger';
 import classDb, { lookUpDomId } from './classDb';
 import { parser } from './parser/classDiagram';
 import svgDraw from './svgDraw';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = classDb;
 
@@ -232,13 +233,7 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
-    diagram.attr('width', '100%');
-    diagram.attr('style', `max-width: ${width}px;`);
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

src/diagrams/er/erRenderer.js

@@ -6,6 +6,7 @@ import dagre from 'dagre';
 import { getConfig } from '../../config';
 import { logger } from '../../logger';
 import erMarkers from './erMarkers';
+import { configureSvgSize } from '../../utils';
 
 const conf = {};
 
@@ -344,13 +345,7 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
 
   svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
 }; // draw

src/diagrams/flowchart/flowRenderer-v2.js

@@ -9,7 +9,7 @@ import { render } from '../../dagre-wrapper/index.js';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import common from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 
 const conf = {};
 export const setConf = function(cnf) {
@@ -418,13 +418,7 @@ export const draw = function(text, id) {
     `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`
   );
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
 
   svg.attr('viewBox', `0 0 ${width} ${height}`);
   svg

src/diagrams/flowchart/flowRenderer.js

@@ -9,7 +9,7 @@ import dagreD3 from 'dagre-d3';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { logger } from '../../logger';
 import common from '../common/common';
-import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';
 import flowChartShapes from './flowChartShapes';
 
 const conf = {};
@@ -401,13 +401,7 @@ export const draw = function(text, id) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(svg, height, width, conf.useMaxWidth);
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

src/diagrams/gantt/ganttRenderer.js

@@ -11,6 +11,7 @@ import {
 import { parser } from './parser/gantt';
 import common from '../common/common';
 import ganttDb from './ganttDb';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = ganttDb;
 
@@ -53,7 +54,6 @@ export const draw = function(text, id) {
   // Set height based on number of tasks
   const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-  elem.setAttribute('height', '100%');
   // Set viewBox
   elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
   const svg = select(`[id="${id}"]`);
@@ -97,9 +97,8 @@ export const draw = function(text, id) {
   taskArray.sort(taskCompare);
 
   makeGant(taskArray, w, h);
-  if (typeof conf.useWidth !== 'undefined') {
+
-    elem.setAttribute('width', w);
+  configureSvgSize(svg, h, w, conf.useMaxWidth);
-  }
 
   svg
     .append('text')

src/diagrams/pie/pieRenderer.js

@@ -5,6 +5,7 @@ import { select, scaleOrdinal, schemeSet2, pie as d3pie, entries, arc } from 'd3
 import pieData from './pieDb';
 import pieParser from './parser/pie';
 import { logger } from '../../logger';
+import { configureSvgSize } from '../../utils';
 
 const conf = {};
 export const setConf = function(cnf) {
@@ -20,7 +21,8 @@ export const setConf = function(cnf) {
  * @param text
  * @param id
  */
-let w;
+let width;
+const height = 450;
 export const draw = (txt, id) => {
   try {
     const parser = pieParser.parser;
@@ -31,34 +33,31 @@ export const draw = (txt, id) => {
     parser.parse(txt);
     logger.debug('Parsed info diagram');
     const elem = document.getElementById(id);
-    w = elem.parentElement.offsetWidth;
+    width = elem.parentElement.offsetWidth;
 
-    if (typeof w === 'undefined') {
+    if (typeof width === 'undefined') {
-      w = 1200;
+      width = 1200;
     }
 
     if (typeof conf.useWidth !== 'undefined') {
-      w = conf.useWidth;
+      width = conf.useWidth;
     }
-    const h = 450;
+
-    elem.setAttribute('height', '100%');
+    const diagram = select('#' + id);
+    console.log('conf', conf);
+    configureSvgSize(diagram, height, width, conf.useMaxWidth);
+
     // Set viewBox
-    elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);
+    elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
 
     // Fetch the default direction, use TD if none was found
-
-    var width = w; // 450
-    var height = 450;
     var margin = 40;
     var legendRectSize = 18;
     var legendSpacing = 4;
 
     var radius = Math.min(width, height) / 2 - margin;
 
-    var svg = select('#' + id)
+    var svg = diagram
-      .append('svg')
-      .attr('width', width)
-      .attr('height', height)
       .append('g')
       .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
 
@@ -67,9 +66,8 @@ export const draw = (txt, id) => {
     Object.keys(data).forEach(function(key) {
       sum += data[key];
     });
-    logger.info(data);
 
-    // set the color scale
+    // Set the color scale
     var color = scaleOrdinal()
       .domain(data)
       .range(schemeSet2);
@@ -80,12 +78,12 @@ export const draw = (txt, id) => {
     });
     var dataReady = pie(entries(data));
 
-    // shape helper to build arcs:
+    // Shape helper to build arcs:
     var arcGenerator = arc()
       .innerRadius(0)
       .outerRadius(radius);
 
-    // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
+    // Build the pie chart: each part of the pie is a path that we build using the arc function.
     svg
       .selectAll('mySlices')
       .data(dataReady)
@@ -99,7 +97,8 @@ export const draw = (txt, id) => {
       .style('stroke-width', '2px')
       .style('opacity', 0.7);
 
-    // Now add the Percentage. Use the centroid method to get the best coordinates
+    // Now add the percentage.
+    // Use the centroid method to get the best coordinates.
     svg
       .selectAll('mySlices')
       .data(dataReady)
@@ -119,10 +118,10 @@ export const draw = (txt, id) => {
       .append('text')
       .text(parser.yy.getTitle())
       .attr('x', 0)
-      .attr('y', -(h - 50) / 2)
+      .attr('y', -(height - 50) / 2)
       .attr('class', 'pieTitleText');
 
-    //Add the slegend/annotations for each section
+    // Add the legends/annotations for each section
     var legend = svg
       .selectAll('.legend')
       .data(color.domain())

src/diagrams/sequence/sequenceRenderer.js

@@ -5,7 +5,7 @@ import { parser } from './parser/sequenceDiagram';
 import common from '../common/common';
 import sequenceDb from './sequenceDb';
 import * as configApi from '../../config';
-import utils, { assignWithDepth } from '../../utils';
+import utils, { assignWithDepth, configureSvgSize } from '../../utils';
 
 parser.yy = sequenceDb;
 
@@ -706,15 +706,8 @@ export const draw = function(text, id) {
       .attr('y', -25);
   }
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
-    diagram.attr('height', '100%');
+
-    diagram.attr('width', '100%');
-    diagram.attr('style', 'max-width:' + width + 'px;');
-    // diagram.attr('style', 'max-width:100%;');
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
   const extraVertForTitle = title ? 40 : 0;
   diagram.attr(
     'viewBox',

src/diagrams/state/stateRenderer-v2.js

@@ -6,6 +6,7 @@ import { getConfig } from '../../config';
 
 import { render } from '../../dagre-wrapper/index.js';
 import { logger } from '../../logger';
+import { configureSvgSize } from '../../utils';
 
 const conf = {};
 export const setConf = function(cnf) {
@@ -211,11 +212,7 @@ export const draw = function(text, id) {
   parser.yy = stateDb;
 
   // Parse the graph definition
-  // try {
   parser.parse(text);
-  // } catch (err) {
-  //   logger.error('Parsing failed', err);
-  // }
 
   // Fetch the default direction, use TD if none was found
   let dir = stateDb.getDirection();
@@ -256,54 +253,18 @@ export const draw = function(text, id) {
   render(element, g, ['barb'], 'statediagram', id);
 
   const padding = 8;
-  // const svgBounds = svg.node().getBBox();
-  // const width = svgBounds.width + padding * 2;
-  // const height = svgBounds.height + padding * 2;
-  // logger.debug(
-  //   `new ViewBox 0 0 ${width} ${height}`,
-  //   `translate(${padding + g._label.marginx}, ${padding + g._label.marginy})`
-  // );
-
-  // if (conf.useMaxWidth) {
-  //   svg.attr('width', '100%');
-  //   svg.attr('style', `max-width: ${width}px;`);
-  // } else {
-  //   svg.attr('height', height);
-  //   svg.attr('width', width);
-  // }
-
-  // svg.attr('viewBox', `0 0 ${width} ${height}`);
-  // svg
-  //   .select('g')
-  //   .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);
 
   const bounds = svg.node().getBBox();
 
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
-  // diagram.attr('height', '100%');
-  // diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
-  // diagram.attr('height', height);
-
   // Zoom in a bit
-  svg.attr('width', width * 1.75);
   svg.attr('class', 'statediagram');
-  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
-  // svg.attr(
-  //   'viewBox',
-  //   `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
-  // );
 
   const svgBounds = svg.node().getBBox();
 
-  if (conf.useMaxWidth) {
+  configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth);
-    svg.attr('width', '100%');
-    svg.attr('style', `max-width: ${width}px;`);
-  } else {
-    svg.attr('height', height);
-    svg.attr('width', width);
-  }
 
   // Ensure the viewBox includes the whole svgBounds area with extra space for padding
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;

src/diagrams/state/stateRenderer.js

@@ -8,6 +8,7 @@ import { parser } from './parser/stateDiagram';
 // import idCache from './id-cache';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = stateDb;
 
@@ -75,14 +76,10 @@ export const draw = function(text, id) {
   const width = bounds.width + padding * 2;
   const height = bounds.height + padding * 2;
 
-  if (conf.useMaxWidth) {
+  // zoom in a bit
-    diagram.attr('width', '100%');
+  const svgWidth = width * 1.75;
-    diagram.attr('style', `max-width: ${width * 1.75}px;`);
+  configureSvgSize(diagram, height, svgWidth, conf.useMaxWidth);
-  } else {
+
-    // Zoom in a bit
-    diagram.attr('width', width * 1.75);
-  }
-  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',
     `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height

src/diagrams/user-journey/journeyRenderer.js

@@ -2,6 +2,7 @@ import { select } from 'd3';
 import { parser } from './parser/journey';
 import journeyDb from './journeyDb';
 import svgDraw from './svgDraw';
+import { configureSvgSize } from '../../utils';
 
 parser.yy = journeyDb;
 
@@ -118,14 +119,8 @@ export const draw = function(text, id) {
   }
   const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
   const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;
-  if (conf.useMaxWidth) {
+
-    diagram.attr('height', '100%');
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
-    diagram.attr('width', '100%');
-    diagram.attr('style', 'max-width:' + width + 'px;');
-  } else {
-    diagram.attr('height', height);
-    diagram.attr('width', width);
-  }
 
   // Draw activity line
   diagram

src/mermaidAPI.js

@@ -385,7 +385,7 @@ const render = function(id, _txt, cb, container) {
         break;
       case 'pie':
         cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-        pieRenderer.setConf(cnf.class);
+        pieRenderer.setConf(cnf.pie);
         pieRenderer.draw(txt, id, pkg.version);
         break;
       case 'er':

src/utils.js

@@ -695,12 +695,38 @@ export const calculateTextDimensions = memoize(
   (text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`
 );
 
+const d3Attrs = function(d3Elem, attrs) {
+  for (let attr of attrs) {
+    d3Elem.attr(attr[0], attr[1]);
+  }
+};
+
+export const calculateSvgSizeAttrs = function(height, width, useMaxWidth) {
+  let attrs = new Map();
+  attrs.set('height', height);
+  if (useMaxWidth) {
+    attrs.set('width', '100%');
+    attrs.set('style', `max-width: ${width}px;`);
+  } else {
+    attrs.set('width', width);
+  }
+  return attrs;
+};
+
+export const configureSvgSize = function(svgElem, height, width, useMaxWidth) {
+  const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
+  console.log('svgElem', svgElem);
+  d3Attrs(svgElem, attrs);
+};
+
 export default {
   assignWithDepth,
   wrapLabel,
   calculateTextHeight,
   calculateTextWidth,
   calculateTextDimensions,
+  calculateSvgSizeAttrs,
+  configureSvgSize,
   detectInit,
   detectDirective,
   detectType,

src/utils.spec.js

@@ -171,7 +171,6 @@ Alice->Bob: hi`;
     expect(type).toBe('git');
   });
 });
-
 describe('when finding substring in array ', function() {
   it('should return the array index that contains the substring', function() {
     const arr = ['stroke:val1', 'fill:val2'];
@@ -184,7 +183,6 @@ describe('when finding substring in array ', function() {
     expect(result).toEqual(-1);
   });
 });
-
 describe('when formatting urls', function() {
   it('should handle links', function() {
     const url = 'https://mermaid-js.github.io/mermaid/#/';
@@ -242,3 +240,16 @@ describe('when formatting urls', function() {
     expect(result).toEqual('about:blank');
   });
 });
+describe('when calculating SVG size', function() {
+  it('should return width 100% when useMaxWidth is true', function () {
+    const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
+    expect(attrs.get('height')).toEqual(100);
+    expect(attrs.get('style')).toEqual('max-width: 200px;');
+    expect(attrs.get('width')).toEqual('100%');
+  });
+  it('should return absolute width when useMaxWidth is false', function () {
+    const attrs = utils.calculateSvgSizeAttrs(100, 200, false);
+    expect(attrs.get('height')).toEqual(100);
+    expect(attrs.get('width')).toEqual(200);
+  });
+});