diff --git a/cypress/integration/rendering/current.spec.js b/cypress/integration/rendering/current.spec.js
index bb239bc8b..1ed1c9d5c 100644
--- a/cypress/integration/rendering/current.spec.js
+++ b/cypress/integration/rendering/current.spec.js
@@ -7,13 +7,14 @@ describe('State diagram', () => {
       `
     stateDiagram
     State1: The state with a note
+    note right of State1
+      Important information! You\ncan write
+      notes with multiple lines...
+      Here is another line...
+      And another line...
+    end 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/shapes.js b/src/diagrams/state/shapes.js
index 79d46092b..c8cf18124 100644
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -272,17 +272,22 @@ const _drawLongText = (_text, x, y, g) => {
   let text = _text.replace(/\r\n/g, '<br/>');
   text = text.replace(/\n/g, '<br/>');
   const lines = text.split(/<br\/?>/gi);
+
+  let tHeight = 1.25 * getConfig().state.noteMargin;
   for (const line of lines) {
     const txt = line.trim();
 
     if (txt.length > 0) {
       const span = textElem.append('tspan');
       span.text(txt);
-      const textBounds = span.node().getBBox();
-      textHeight += textBounds.height;
+      if (tHeight === 0) {
+        const textBounds = span.node().getBBox();
+        tHeight += textBounds.height;
+      }
+      // console.warn('textBounds', textBounds);
+      textHeight += tHeight;
       span.attr('x', x + getConfig().state.noteMargin);
       span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin);
-      // textWidth = Math.max(textBounds.width, textWidth);
     }
   }
   return { textWidth: textElem.node().getBBox().width, textHeight };