diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index b5ab86440..946b5d31e 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -509,4 +509,16 @@ stateDiagram-v2
       expect(svg).to.not.have.attr('style');
     });
   });
+
+  it('v2 should render a state diagram and set the correct length of the labels', () => {
+    imgSnapshotTest(
+      `
+      stateDiagram-v2
+      [*] --> 1
+      1 --> 2: test({ foo#colon; 'far' })
+      2 --> [*]
+    `,
+      { logLevel: 0, fontFamily: 'courier' }
+    );
+  });
 });
diff --git a/src/dagre-wrapper/createLabel.js b/src/dagre-wrapper/createLabel.js
index ed7b9f6fb..3e3ffdfc9 100644
--- a/src/dagre-wrapper/createLabel.js
+++ b/src/dagre-wrapper/createLabel.js
@@ -2,6 +2,7 @@ import { select } from 'd3';
 import { log } from '../logger'; // eslint-disable-line
 import { getConfig } from '../config';
 import { sanitizeText, evaluate } from '../diagrams/common/common';
+import { decodeEntities } from '../mermaidAPI';
 
 const sanitizeTxt = (txt) => sanitizeText(txt, getConfig());
 
@@ -52,7 +53,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
     log.info('vertexText' + vertexText);
     const node = {
       isNode,
-      label: vertexText.replace(
+      label: decodeEntities(vertexText).replace(
         /fa[lrsb]?:fa-[\w-]+/g,
         (s) => `<i class='${s.replace(':', ' ')}'></i>`
       ),