diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
index 04d4466ad..6140d0043 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
@@ -1,7 +1,8 @@
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
-
+import rough from 'roughjs';
+import solidFillOptions from './solidFillOptions.js';
 export const choice = (parent: SVG, node: Node) => {
   const shapeSvg = parent
     .insert('g')
@@ -16,14 +17,25 @@ export const choice = (parent: SVG, node: Node) => {
     { x: -s / 2, y: 0 },
   ];
 
-  const choice = shapeSvg.insert('polygon', ':first-child').attr(
-    'points',
-    points
-      .map(function (d) {
-        return d.x + ',' + d.y;
-      })
-      .join(' ')
-  );
+  let choice;
+  if (node.useRough) {
+    const rc = rough.svg(shapeSvg);
+    const pointArr = points.map(function (d) {
+      return [d.x, d.y];
+    });
+    const roughNode = rc.polygon(pointArr, solidFillOptions);
+    choice = shapeSvg.insert(() => roughNode);
+  } else {
+    choice = shapeSvg.insert('polygon', ':first-child').attr(
+      'points',
+      points
+        .map(function (d) {
+          return d.x + ',' + d.y;
+        })
+        .join(' ')
+    );
+  }
+
   // center the circle around its coordinate
   choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28);
   node.width = 28;