#5237 Fix for rough styling of regular states and dividers in state diagrams

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -321,16 +321,13 @@ const divider = (parent, node) => {
   let rect;
   if (node.look === 'handdrawn') {
     const rc = rough.svg(shapeSvg);
-    const roughOuterNode =
-      node.rx || node.ry
-        ? rc.path(createRoundedRectPathD(x, y, width, height, 10), {
-            roughness: 0.7,
-            fill: compositeTitleBackground,
-            fillStyle: 'solid',
-            stroke: nodeBorder,
-            seed: handdrawnSeed,
-          })
-        : rc.rectangle(x, y, width, height, { seed: handdrawnSeed });
+    const roughOuterNode = rc.rectangle(x, y, width, height, {
+      fill: 'lightgrey',
+      roughness: 0.5,
+      strokeLineDash: [5],
+      stroke: nodeBorder,
+      seed: handdrawnSeed,
+    });
 
     rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
   } else {

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -24,7 +24,6 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   // log.info('IPI node = ', node);
 
   let rect;
-  node.look = look;
   let { rx, ry } = node;
   const { cssStyles } = node;
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts

@@ -82,7 +82,7 @@ export const userNodeOverrides = (node: Node, options: any) => {
       roughness: 0.7,
       fill: stylesMap.get('fill') || mainBkg,
       fillStyle: 'hachure', // solid fill
-      fillWeight: 3.5,
+      fillWeight: 4,
       stroke: stylesMap.get('stroke') || nodeBorder,
       seed: handdrawnSeed,
       strokeWidth: 1.3,