#5237 Updating configuration otions and adding handdrawnSeed

.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; */
       }
@@ -120,7 +120,7 @@ stateDiagram-v2
   </pre
     >
     <pre id="diagram" class="mermaid">
-      %%{init: {"handdrawn": false} }%%
+      %%{init: {"look": "classic"} }%%
    stateDiagram-v2
      TN3: The state with a note
         note right of TN3
@@ -522,8 +522,9 @@ mindmap
       //   useMaxWidth: false,
       // });
       mermaid.initialize({
-        theme: 'base',
+        theme: 'dark',
-        handdrawn: true,
+        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");
+    let coll = document.getElementsByClassName("collapsible");
-    for (var i = 0; i < coll.length; i++) {
+    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

@@ -852,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/rendering-elements/clusters.js

@@ -149,7 +149,7 @@ const noteGroup = (parent, node) => {
 const roundedWithTitle = (parent, node) => {
   const siteConfig = getConfig();
 
-  const { themeVariables } = siteConfig;
+  const { themeVariables, handdrawnSeed } = siteConfig;
   const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =
     themeVariables;
 
@@ -206,14 +206,16 @@ const roundedWithTitle = (parent, node) => {
             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, ':first-child');
     const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {
       fill: isAlt ? altBackground : compositeBackground,
       fillStyle: isAlt ? 'hachure' : 'solid',
       stroke: nodeBorder,
+      seed: handdrawnSeed,
     });
 
     rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
@@ -259,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);
 
@@ -278,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' });
+    const svgPathNode = rc.curve(pointArr, { roughness: 0.5, seed: handdrawnSeed });
-    console.log('svgPathNode abc88', svgPathNode);
     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

@@ -3,6 +3,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handdrawnStyles.js';
+
 export const choice = (parent: SVG, node: Node) => {
   const shapeSvg = parent
     .insert('g')

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

@@ -1,11 +1,14 @@
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
+
 // Striped fill like start or fork nodes in state diagrams
 export const solidStateFill = (color: string) => {
+  const { handdrawnSeed } = getConfig();
   return {
     fill: color,
-    // fillStyle: 'solid',
     hachureAngle: 120, // angle of hachure,
     hachureGap: 4,
     fillWeight: 2,
     roughness: 0.7,
+    seed: handdrawnSeed,
   };
 };

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

@@ -6,7 +6,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import rough from 'roughjs';
 
 export const note = async (parent: SVGAElement, node: Node) => {
-  const { themeVariables } = getConfig();
+  const { themeVariables, handdrawnSeed } = getConfig();
   const { noteBorderColor, noteBkgColor } = themeVariables;
 
   const useHtmlLabels = node.useHtmlLabels;
@@ -34,7 +34,9 @@ export const note = async (parent: SVGAElement, node: Node) => {
     const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
       roughness: 0.7,
       fill: noteBkgColor,
-      fillStyle: 'solid', // solid fill'
+      fillWeight: 3,
+      seed: handdrawnSeed,
+      // fillStyle: 'solid', // solid fill'
       stroke: noteBorderColor,
     });
 

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

@@ -58,20 +58,8 @@ function applyNodePropertyBorders(
 }
 
 export const rect = async (parent: SVGAElement, node: Node) => {
-  const { themeVariables } = getConfig();
+  const { themeVariables, handdrawnSeed } = getConfig();
-  const {
+  const { nodeBorder, mainBkg } = themeVariables;
-    textColor,
-    clusterTextColor,
-    altBackground,
-    compositeBackground,
-    compositeTitleBackground,
-    compositeBorder,
-    noteBorderColor,
-    noteBkgColor,
-    nodeBorder,
-    mainBkg,
-    stateBorder,
-  } = themeVariables;
 
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
@@ -89,15 +77,17 @@ export const rect = async (parent: SVGAElement, node: Node) => {
   const { rx, ry, style, useRough } = node;
   if (useRough) {
     const rc = rough.svg(shapeSvg);
+    const options = {
+      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), {
+        ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)
-            roughness: 0.7,
+        : rc.rectangle(x, y, totalWidth, totalHeight, options);
-            fill: mainBkg,
-            fillStyle: 'solid', // solid fill'
-            stroke: nodeBorder,
-          })
-        : rc.rectangle(x, y, totalWidth, totalHeight);
 
     rect = shapeSvg.insert(() => roughNode, ':first-child');
     rect.attr('class', 'basic label-container').attr('style', style);

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

@@ -25,7 +25,7 @@ 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 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);

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.
+      Defines which main look to use for the diagram.
-    type: boolean
+    type: string
-    default: false
+    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.