#5237 Style support in rects

.cspell/mermaid-terms.txt

@@ -9,6 +9,7 @@ elems
 gantt
 gitgraph
 gzipped
+handdrawn
 knsv
 Knut
 marginx

.cspell/misc-terms.txt

@@ -1 +1,2 @@
+handdrawnSeed
 newbranch

cypress/platform/knsv2.html

@@ -32,7 +32,7 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /* background:#333; */
+        background: #333;
         font-family: 'Arial';
         /* font-size: 18px !important; */
       }
@@ -45,12 +45,14 @@
       .mermaid svg {
         /* font-size: 18px !important; */
 
-        background-color: #efefef;
+        /* background-color: #efefef;
         background-image: radial-gradient(#fff 51%, transparent 91%),
           radial-gradient(#fff 51%, transparent 91%);
         background-size: 20px 20px;
-        background-position: 0 0, 10px 10px;
-        background-repeat: repeat;
+        background-position:
+          0 0,
+          10px 10px;
+        background-repeat: repeat; */
       }
       .malware {
         position: fixed;
@@ -107,19 +109,28 @@ stateDiagram-v2
       </pre
     >
     <pre id="diagram" class="mermaid">
-stateDiagram-v2
-    state ProActive {
-      state Active {
-        Chimp --> A:One
-        Chimp --> B:Two
-        Chimp --> C:Three
-        state InActive {
-          D
-        }
-      }
-    }
+   stateDiagram-v2
+     TN1: The state with a note
+        note right of TN1
+            Important information! You can write
+            notes.
+        end note
+        TN1 --> TN2
+        note left of TN2 : This is the note to the left.
   </pre
     >
+    <pre id="diagram" class="mermaid">
+      %%{init: {"look": "classic"} }%%
+   stateDiagram-v2
+     TN3: The state with a note
+        note right of TN3
+            Important information! You can write
+            notes.
+        end note
+        TN3 --> TN4
+        note left of TN4 : This is the note to the left.
+          </pre
+    >
     <pre id="diagram" class="mermaid2">
 block-beta
     A["square"]
@@ -511,7 +522,9 @@ mindmap
       //   useMaxWidth: false,
       // });
       mermaid.initialize({
-        handdrawn: true,
+        theme: 'dark',
+        handdrawnSeed: 12,
+        look: 'handdrawn',
         // layout: 'dagre',
         layout: 'elk',
         flowchart: { titleTopMargin: 10 },

cypress/platform/state-refactor.html

@@ -114,7 +114,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 stateDiagram-v2
     stateId
 
@@ -130,7 +130,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
     stateId
 
@@ -161,7 +161,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 stateDiagram-v2
     state "This is a state description" as s3
       </pre>
@@ -175,7 +175,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
     state "This is a state description" as s5
       </pre>
@@ -205,7 +205,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 stateDiagram-v2
     s22 : This is a state description
 
@@ -221,7 +221,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
     s24 : This is a state description
 
@@ -257,7 +257,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
     s41 --> s42
@@ -276,7 +276,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
     s61 --> s62
 
@@ -315,7 +315,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
     a3 --> a4: A transition
@@ -334,7 +334,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
    a7 --> a8: A transition
 
@@ -375,7 +375,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
        [*] --> test
@@ -396,7 +396,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
       [*] --> test
     test --> [*]
@@ -444,7 +444,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
        [*] --> First
@@ -471,7 +471,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
 stateDiagram-v2
       [*] --> First
     state First {
@@ -540,13 +540,13 @@ stateDiagram-v2
             }
         }
     }
-    
+
 
       </pre>
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
     [*] --> Level1
@@ -564,7 +564,7 @@ stateDiagram-v2
             }
         }
     }
-    
+
 
 
       </pre>
@@ -588,13 +588,13 @@ stateDiagram-v2
             }
         }
     }
-    
+
 
       </pre>
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
  stateDiagram-v2
     [*] --> Level1
 
@@ -611,7 +611,7 @@ stateDiagram-v2
             }
         }
     }
-    
+
       </pre>
       </td>
     </tr>
@@ -675,7 +675,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
    [*] --> B1
@@ -721,7 +721,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
  stateDiagram-v2
 [*] --> B1
     B1 --> B2
@@ -783,7 +783,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
 
    stateDiagram-v2
    state if_state <<choice>>
@@ -806,7 +806,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
  stateDiagram-v2
  state if_state <<choice>>
     [*] --> IsPositive
@@ -864,7 +864,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -898,7 +898,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
     state fork_state <<fork>>
       [*] --> fork_state
@@ -954,7 +954,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -981,7 +981,7 @@ stateDiagram-v2
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
    stateDiagram-v2
      TN7: The state with a note
         note right of TN7
@@ -1051,7 +1051,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1094,7 +1094,7 @@ state Active {
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
      stateDiagram-v2
     [*] --> Active
 
@@ -1158,7 +1158,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram2" class="mermaid">
-%%{init: {"handdrawn": true} }%%
+%%{init: {"look": "handdrawn"} }%%
      stateDiagram-v2
    direction LR
     [*] --> D1
@@ -1188,7 +1188,7 @@ direction LR
       </td>
       <td>
         <pre id="diagram4" class="mermaid">
-%%{init: {"handdrawn": true, "layout": "elk"} }%%
+%%{init: {"look": "handdrawn", "layout": "elk"} }%%
      stateDiagram-v2
     direction LR
     [*] --> D1
@@ -1248,11 +1248,11 @@ direction LR
     };
 
 
-    var coll = document.getElementsByClassName("collapsible");
-    for (var i = 0; i < coll.length; i++) {
+    let coll = document.getElementsByClassName("collapsible");
+    for (let i = 0; i < coll.length; i++) {
       coll[i].addEventListener("click", function () {
         this.classList.toggle("active");
-        var content = this.nextElementSibling;
+        let content = this.nextElementSibling;
         if (content.style.maxHeight) {
           content.style.maxHeight = null;
         } else {

packages/mermaid/src/diagrams/state/stateDb.js

@@ -686,6 +686,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
         domId: stateDomId(itemId, graphItemCount, NOTE),
         type: newNode.type,
         padding: 15, //getConfig().flowchart.padding
+        useRough,
       };
       const groupData = {
         labelStyle: '',
@@ -697,6 +698,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
         domId: stateDomId(itemId, graphItemCount, PARENT),
         type: 'group',
         padding: 0, //getConfig().flowchart.padding
+        useRough,
       };
       graphItemCount++;
 
@@ -850,7 +852,7 @@ export const getData = () => {
   extract(getRootDocV2());
   const diagramStates = getStates();
 
-  const useRough = getConfig().handdrawn;
+  const useRough = getConfig().look === 'handdrawn';
   dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
 
   return { nodes, edges, other: {} };

packages/mermaid/src/rendering-util/layout-algorithms/elk/index.js

@@ -1,17 +1,8 @@
 import insertMarkers from '../../rendering-elements/markers.js';
 import { findCommonAncestor } from './find-common-ancestor.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
-import {
-  insertNode,
-  positionNode,
-  clear as clearNodes,
-  setNodeElem,
-} from '../../rendering-elements/nodes.js';
-import {
-  insertCluster,
-  clear as clearClusters,
-  positionCluster,
-} from '../../rendering-elements/clusters.js';
+import { insertNode, clear as clearNodes } from '../../rendering-elements/nodes.js';
+import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
 import {
   insertEdgeLabel,
   positionEdgeLabel,
@@ -116,14 +107,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
       if (node.type === 'group') {
         log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
         const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
+        // TODO use faster way of cloning
         const clusterNode = JSON.parse(JSON.stringify(node));
         clusterNode.x = node.offset.posX + node.width / 2;
         clusterNode.y = node.offset.posY + node.height / 2;
-        // clusterNode.y = node.y + node.height / 2;
         const cluster = insertCluster(subgraphEl, clusterNode);
-        // const bbox = cluster.node().getBBox();
-        // node.x -= bbox.width / 2 - 2; // Magic number 2... why??? WHY???
-        // node.y -= bbox.height / 2;
+
         log.info('Id (UGH)= ', node.shape, node.labels);
       } else {
         log.info(
@@ -524,6 +513,7 @@ export const render = async (data4Layout, svg, element) => {
           height: node?.labelData?.height || 100,
         },
       ];
+      node['elk.direction'] = 'RIGHT';
       delete node.x;
       delete node.y;
       delete node.width;
@@ -533,7 +523,7 @@ export const render = async (data4Layout, svg, element) => {
 
   log.info('before layout', JSON.stringify(elkGraph, null, 2));
   const g = await elk.layout(elkGraph);
-  log.info('after layout DAGA', g);
+  log.info('after layout DAGA', JSON.stringify(g));
 
   // debugger;
   drawNodes(0, 0, g.children, svg, subGraphsEl, 0);

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

@@ -102,6 +102,21 @@ const rect = (parent, node) => {
  * @returns {any} ShapeSvg
  */
 const noteGroup = (parent, node) => {
+  const { themeVariables } = getConfig();
+  const {
+    textColor,
+    clusterTextColor,
+    altBackground,
+    compositeBackground,
+    compositeTitleBackground,
+    compositeBorder,
+    noteBorderColor,
+    noteBkgColor,
+    nodeBorder,
+    mainBkg,
+    stateBorder,
+  } = themeVariables;
+
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id);
 
@@ -134,6 +149,10 @@ const noteGroup = (parent, node) => {
 const roundedWithTitle = (parent, node) => {
   const siteConfig = getConfig();
 
+  const { themeVariables, handdrawnSeed } = siteConfig;
+  const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =
+    themeVariables;
+
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
 
@@ -178,28 +197,28 @@ const roundedWithTitle = (parent, node) => {
   // add the rect
   let rect;
   if (node.useRough) {
-    const isAlt = node.classes.indexOf('statediagram-cluster-alt') >= 0;
-    console.log(
-      'DAGA node in roundedWithTitle',
-      node.classes,
-      node.classes.indexOf('statediagram-cluster-alt'),
-      isAlt
-    );
+    const isAlt = node.classes.includes('statediagram-cluster-alt');
     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);
+        : rc.rectangle(x, y, width, height, { seed: handdrawnSeed });
 
-    rect = shapeSvg.insert(() => roughOuterNode);
+    rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
     const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {
-      fill: isAlt ? 'lightgrey' : 'white',
+      fill: isAlt ? altBackground : compositeBackground,
       fillStyle: isAlt ? 'hachure' : 'solid',
+      stroke: nodeBorder,
+      seed: handdrawnSeed,
     });
 
-    rect = shapeSvg.insert(() => roughOuterNode);
+    rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
     innerRect = shapeSvg.insert(() => roughInnerNode);
   } else {
     rect = outerRectG.insert('rect', ':first-child');
@@ -242,6 +261,7 @@ const roundedWithTitle = (parent, node) => {
 };
 
 const divider = (parent, node) => {
+  const { handdrawnSeed } = getConfig();
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
 
@@ -261,6 +281,7 @@ const divider = (parent, node) => {
       fill: 'lightgrey',
       roughness: 0.5,
       strokeLineDash: [5],
+      seed: handdrawnSeed,
     });
 
     rect = shapeSvg.insert(() => roughNode);

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

@@ -386,6 +386,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
 };
 
 export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) {
+  const { handdrawnSeed } = getConfig();
   console.log('abc88 InsertEdge - edge: ', edge);
   let points = edge.points;
   let pointsHasChanged = false;
@@ -478,17 +479,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
 
   if (useRough) {
     const rc = rough.svg(elem);
-    const svgPathNode = rc.curve(pointArr, { roughness: 0.5, stroke: 'green' });
-    console.log('svgPathNode abc88', svgPathNode);
+    const svgPathNode = rc.curve(pointArr, { roughness: 0.5, seed: handdrawnSeed });
     strokeClasses += ' transition';
-    // const svgPath2 = elem
-    //   .append('path')
-    //   .attr('d', lineFunction(lineData))
-    //   .attr('id', edge.id)
-    //   .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
-    //   .attr('style', edge.style);
 
-    console.log('svgPath2 abc88', strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
     svgPath = select(svgPathNode)
       .select('path')
       .attr('id', edge.id)

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

@@ -4,7 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
 import { stateEnd } from './shapes/stateEnd.ts';
 import { forkJoin } from './shapes/forkJoin.ts';
 import { choice } from './shapes/choice.ts';
-import {note} from './shapes/note.ts';
+import { note } from './shapes/note.ts';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 const formatClass = (str) => {
@@ -32,7 +32,6 @@ export const insertNode = async (elem, node, dir) => {
 
   // debugger;
   // Add link when appropriate
-  console.log('node.link', node.link);
   if (node.link) {
     let target;
     if (getConfig().securityLevel === 'sandbox') {

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

@@ -2,7 +2,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';
+import { solidStateFill } from './handdrawnStyles.js';
+
 export const choice = (parent: SVG, node: Node) => {
   const shapeSvg = parent
     .insert('g')
@@ -23,7 +24,7 @@ export const choice = (parent: SVG, node: Node) => {
     const pointArr = points.map(function (d) {
       return [d.x, d.y];
     });
-    const roughNode = rc.polygon(pointArr, solidFillOptions);
+    const roughNode = rc.polygon(pointArr, solidStateFill('black'));
     choice = shapeSvg.insert(() => roughNode);
   } else {
     choice = shapeSvg.insert('polygon', ':first-child').attr(

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

@@ -4,7 +4,7 @@ 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';
+import { solidStateFill } from './handdrawnStyles.js';
 
 export const forkJoin = (parent: SVG, node: Node, dir: string) => {
   const shapeSvg = parent
@@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
   let shape;
   if (node.useRough) {
     const rc = rough.svg(shapeSvg);
-    const roughNode = rc.rectangle(x, y, width, height, solidFillOptions);
+    const roughNode = rc.rectangle(x, y, width, height, solidStateFill('black'));
     shape = shapeSvg.insert(() => roughNode);
   } else {
     shape = shapeSvg

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

@@ -0,0 +1,24 @@
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+
+// Striped fill like start or fork nodes in state diagrams
+export const solidStateFill = (color: string) => {
+  const { handdrawnSeed } = getConfig();
+  return {
+    fill: color,
+    hachureAngle: 120, // angle of hachure,
+    hachureGap: 4,
+    fillWeight: 2,
+    roughness: 0.7,
+    seed: handdrawnSeed,
+  };
+};
+
+// Striped fill like start or fork nodes in state diagrams
+// TODO remove any
+export const userNodeOverrides = (node: Node, options: any) => {
+  const result = Object.assign({}, options);
+  result.fill = node.backgroundColor || options.fill;
+  result.stroke = node.borderColor || options.stroke;
+  return result;
+};

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

@@ -1,10 +1,15 @@
 import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
+import rough from 'roughjs';
 
 export const note = async (parent: SVGAElement, node: Node) => {
-    const useHtmlLabels = node.useHtmlLabels ;
+  const { themeVariables, handdrawnSeed } = getConfig();
+  const { noteBorderColor, noteBkgColor } = themeVariables;
+
+  const useHtmlLabels = node.useHtmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }
@@ -16,16 +21,37 @@ export const note = async (parent: SVGAElement, node: Node) => {
   );
 
   log.info('Classes = ', node.classes);
-  // add the rect
-  const rect = shapeSvg.insert('rect', ':first-child');
+  const { style, useRough } = node;
+  let rect;
+  const totalWidth = bbox.width + node.padding;
+  const totalHeight = bbox.height + node.padding;
+  const x = -bbox.width / 2 - halfPadding;
+  const y = -bbox.height / 2 - halfPadding;
 
-  rect
-    .attr('rx', node.rx)
-    .attr('ry', node.ry)
-    .attr('x', -bbox.width / 2 - halfPadding)
-    .attr('y', -bbox.height / 2 - halfPadding)
-    .attr('width', bbox.width + node.padding)
-    .attr('height', bbox.height + node.padding);
+  if (useRough) {
+    // add the rect
+    const rc = rough.svg(shapeSvg);
+    const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
+      roughness: 0.7,
+      fill: noteBkgColor,
+      fillWeight: 3,
+      seed: handdrawnSeed,
+      // fillStyle: 'solid', // solid fill'
+      stroke: noteBorderColor,
+    });
+
+    rect = shapeSvg.insert(() => roughNode, ':first-child');
+    rect.attr('class', 'basic label-container').attr('style', style);
+  } else {
+    rect = shapeSvg.insert('rect', ':first-child');
+    rect
+      .attr('rx', node.rx)
+      .attr('ry', node.ry)
+      .attr('x', x)
+      .attr('y', y)
+      .attr('width', totalWidth)
+      .attr('height', totalHeight);
+  }
 
   updateNodeBounds(node, rect);
 

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

@@ -3,6 +3,8 @@ import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { createRoundedRectPathD } from './roundedRectPath.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
 /**
@@ -57,6 +59,9 @@ function applyNodePropertyBorders(
 }
 
 export const rect = async (parent: SVGAElement, node: Node) => {
+  const { themeVariables, handdrawnSeed } = getConfig();
+  const { nodeBorder, mainBkg } = themeVariables;
+
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
@@ -73,19 +78,20 @@ export const rect = async (parent: SVGAElement, node: Node) => {
   const { rx, ry, style, useRough } = node;
   if (useRough) {
     const rc = rough.svg(shapeSvg);
+    const options = userNodeOverrides(node, {
+      roughness: 0.7,
+      fill: mainBkg,
+      fillStyle: 'solid', // solid fill'
+      stroke: nodeBorder,
+      seed: handdrawnSeed,
+    });
     const roughNode =
       rx || ry
-        ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), {
-            roughness: 0.7,
-            fill:'white',
-            fillStyle: 'solid' // solid fill'
-          })
-        : rc.rectangle(x, y, totalWidth, totalHeight);
+        ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)
+        : rc.rectangle(x, y, totalWidth, totalHeight, options);
 
     rect = shapeSvg.insert(() => roughNode, ':first-child');
-        rect
-      .attr('class', 'basic label-container')
-      .attr('style', style)
+    rect.attr('class', 'basic label-container').attr('style', style);
   } else {
     rect = shapeSvg.insert('rect', ':first-child');
 

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

@@ -1,10 +0,0 @@
-const options = {
-  fill: 'black',
-  // fillStyle: 'solid',
-  hachureAngle: 120, // angle of hachure,
-  hachureGap: 4,
-  fillWeight: 2,
-  roughness: 0.7,
-};
-
-export default options;

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

@@ -4,7 +4,7 @@ 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';
+import { solidStateFill } from './handdrawnStyles.js';
 
 export const stateEnd = (parent: SVG, node: Node) => {
   const shapeSvg = parent
@@ -25,8 +25,8 @@ export const stateEnd = (parent: SVG, node: Node) => {
   let innerCircle;
   if (node.useRough) {
     const rc = rough.svg(shapeSvg);
-    const roughNode = rc.circle(0, 0, 14, { roughness: 0.5 });
-    const roughInnerNode = rc.circle(0, 0, 5, { ...solidFillOptions, fillStyle: 'solid' });
+    const roughNode = rc.circle(0, 0, 14, { ...solidStateFill('black'), roughness: 0.5 });
+    const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill('black'), fillStyle: 'solid' });
     circle = shapeSvg.insert(() => roughNode);
     innerCircle = shapeSvg.insert(() => roughInnerNode);
   } else {

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

@@ -4,7 +4,7 @@ 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';
+import { solidStateFill } from './handdrawnStyles.js';
 
 export const stateStart = (parent: SVG, node: Node) => {
   const shapeSvg = parent
@@ -15,7 +15,7 @@ export const stateStart = (parent: SVG, node: Node) => {
   let circle;
   if (node.useRough) {
     const rc = rough.svg(shapeSvg);
-    const roughNode = rc.circle(0, 0, 14, solidFillOptions);
+    const roughNode = rc.circle(0, 0, 14, solidStateFill('black'));
     circle = shapeSvg.insert(() => roughNode);
   } else {
     circle = shapeSvg.insert('circle', ':first-child');

packages/mermaid/src/schemas/config.schema.yaml

@@ -71,11 +71,20 @@ properties:
     tsType: any
   themeCSS:
     type: string
-  handdrawn:
+  look:
     description: |
-      Defines whether or not to use the handdrawn effect in the diagram.
-    type: boolean
-    default: false
+      Defines which main look to use for the diagram.
+    type: string
+    enum:
+      - classic
+      - handdrawn
+      - slick
+    default: 'classic'
+  handdrawnSeed:
+    description: |
+      Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differentces without the seed. The default value is 0 which gives a random seed.
+    type: number
+    default: 0
   layout:
     description: |
       Defines which layout algorithm to use for rendering the diagram.

packages/mermaid/src/themes/theme-dark.js

@@ -6,7 +6,6 @@ class Theme {
     this.background = '#333';
     this.primaryColor = '#1f2020';
     this.secondaryColor = lighten(this.primaryColor, 16);
-
     this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
     this.primaryBorderColor = invert(this.background);
     this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
@@ -22,7 +21,7 @@ class Theme {
     this.mainContrastColor = 'lightgrey';
     this.darkTextColor = lighten(invert('#323D47'), 10);
     this.lineColor = 'calculated';
-    this.border1 = '#81B1DB';
+    this.border1 = '#ccc';
     this.border2 = rgba(255, 255, 255, 0.25);
     this.arrowheadColor = 'calculated';
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
@@ -333,6 +332,8 @@ class Theme {
     this.attributeBackgroundColorEven =
       this.attributeBackgroundColorEven || lighten(this.background, 2);
     /* -------------------------------------------------- */
+
+    this.nodeBorder = this.nodeBorder || '#999';
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {