diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index 5a0501583..bb239bc8b 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -5,29 +5,15 @@ describe('State diagram', () => {
   it('should render a flowchart full of circles', () => {
     imgSnapshotTest(
       `
-    graph LR
-      47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-      37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
-      35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
-      41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
-      44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
-      46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
-      40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
-      38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
-      43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
-      42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
-      45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
-      35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
-      41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
-      41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
-      39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
-      39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
-      39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
-      39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
-      35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
-      36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
-      `,
+    stateDiagram
+    State1: The state with a note
+    `,
       {}
     );
   });
 });
+    // note right of State1
+    //   Important information! You\ncan write
+    //   notes with multiple lines...
+    //   Here is another line...
+    // end note
diff --git a/src/diagrams/state/stateRenderer.js b/src/diagrams/state/stateRenderer.js
index e0ba69a6a..31a640657 100644
--- a/src/diagrams/state/stateRenderer.js
+++ b/src/diagrams/state/stateRenderer.js
@@ -89,17 +89,34 @@ export const draw = function(text, id) {
   const rootDoc = stateDb.getRootDoc();
   renderDoc(rootDoc, diagram);
 
+  const padding = conf.padding;
   const bounds = diagram.node().getBBox();
 
-  diagram.attr('height', '100%');
-  diagram.attr('style', `width: ${bounds.width * 3 + conf.padding * 2};`);
+  console.warn(bounds);
+
+  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
+  diagram.attr('width', width * 2);
+  // diagram.attr('height', bounds.height * 3 + conf.padding * 2);
   diagram.attr(
     'viewBox',
-    `${conf.padding * -1} ${conf.padding * -1} ` +
-      (bounds.width * 1.5 + conf.padding * 2) +
-      ' ' +
-      (bounds.height + conf.padding * 5)
+    `${bounds.x - conf.padding}  ${bounds.y - conf.padding} ` + width + ' ' + height
   );
+  // diagram.attr('transform', `translate(, 0)`);
+
+  // diagram.attr(
+  //   'viewBox',
+  //   `${conf.padding * -1} ${conf.padding * -1} ` +
+  //     (bounds.width * 1.5 + conf.padding * 2) +
+  //     ' ' +
+  //     (bounds.height + conf.padding * 5)
+  // );
 };
 const getLabelWidth = text => {
   return text ? text.length * conf.fontSizeFactor : 1;
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 57563897f..94b0efe54 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -310,7 +310,7 @@ const config = {
   state: {
     dividerMargin: 10,
     sizeUnit: 5,
-    padding: 5,
+    padding: 8,
     textHeight: 10,
     titleShift: -15,
     noteMargin: 10,