review comment fixes

packages/mermaid/src/config.type.ts

@@ -68,12 +68,12 @@ export interface MermaidConfig {
    * Defines which main look to use for the diagram.
    *
    */
-  look?: 'classic' | 'handdrawn';
+  look?: 'classic' | 'handDrawn';
   /**
-   * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
+   * Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
    *
    */
-  handdrawnSeed?: number;
+  handDrawnSeed?: number;
   /**
    * Defines which layout algorithm to use for rendering the diagram.
    *

packages/mermaid/src/diagrams/flowchart/types.ts

@@ -23,7 +23,7 @@ export interface FlowEdge {
   end: string;
   interpolate?: string;
   type?: string;
-  stroke?: 'normal' | 'thick' | 'invisible';
+  stroke?: 'normal' | 'thick' | 'invisible' | 'dotted';
   style?: string[];
   length?: number;
   text: string;

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

@@ -11,12 +11,12 @@ import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 
 const rect = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
   const siteConfig = getConfig();
-  const { themeVariables, handdrawnSeed } = siteConfig;
+  const { themeVariables, handDrawnSeed } = siteConfig;
   const { clusterBkg, clusterBorder } = themeVariables;
 
   const { labelStyles, nodeStyles } = styles2String(node);
@@ -63,7 +63,7 @@ const rect = async (parent, node) => {
 
   log.trace('Data ', node, JSON.stringify(node));
   let rect;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {
@@ -72,7 +72,7 @@ const rect = async (parent, node) => {
       // fill: 'red',
       stroke: clusterBorder,
       fillWeight: 3,
-      seed: handdrawnSeed,
+      seed: handDrawnSeed,
     });
     const roughNode = rc.path(createRoundedRectPathD(x, y, width, height, 0), options);
     rect = shapeSvg.insert(() => {
@@ -162,7 +162,7 @@ const noteGroup = (parent, node) => {
 const roundedWithTitle = async (parent, node) => {
   const siteConfig = getConfig();
 
-  const { themeVariables, handdrawnSeed } = siteConfig;
+  const { themeVariables, handDrawnSeed } = siteConfig;
   const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =
     themeVariables;
 
@@ -218,7 +218,7 @@ const roundedWithTitle = async (parent, node) => {
 
   // add the rect
   let rect;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     const isAlt = node.cssClasses.includes('statediagram-cluster-alt');
     const rc = rough.svg(shapeSvg);
     const roughOuterNode =
@@ -228,16 +228,16 @@ const roundedWithTitle = async (parent, node) => {
             fill: compositeTitleBackground,
             fillStyle: 'solid',
             stroke: nodeBorder,
-            seed: handdrawnSeed,
+            seed: handDrawnSeed,
           })
-        : rc.rectangle(x, y, width, height, { seed: handdrawnSeed });
+        : 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,
+      seed: handDrawnSeed,
     });
 
     rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
@@ -283,7 +283,7 @@ const roundedWithTitle = async (parent, node) => {
 const divider = (parent, node) => {
   const siteConfig = getConfig();
 
-  const { themeVariables, handdrawnSeed } = siteConfig;
+  const { themeVariables, handDrawnSeed } = siteConfig;
   const { nodeBorder } = themeVariables;
 
   // Add outer g element
@@ -310,14 +310,14 @@ const divider = (parent, node) => {
 
   // add the rect
   let rect;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     const rc = rough.svg(shapeSvg);
     const roughOuterNode = rc.rectangle(x, y, width, height, {
       fill: 'lightgrey',
       roughness: 0.5,
       strokeLineDash: [5],
       stroke: nodeBorder,
-      seed: handdrawnSeed,
+      seed: handDrawnSeed,
     });
 
     rect = shapeSvg.insert(() => roughOuterNode, ':first-child');

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

@@ -423,7 +423,7 @@ const fixCorners = function (lineData) {
 };
 
 export const insertEdge = function (elem, edge, clusterDb, diagramType, startNode, endNode, id) {
-  const { handdrawnSeed } = getConfig();
+  const { handDrawnSeed } = getConfig();
   let points = edge.points;
   let pointsHasChanged = false;
   const tail = startNode;
@@ -510,13 +510,13 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   let svgPath;
   let linePath = lineFunction(lineData);
   const edgeStyles = Array.isArray(edge.style) ? edge.style : [edge.style];
-  if (edge.look === 'handdrawn') {
+  if (edge.look === 'handDrawn') {
     const rc = rough.svg(elem);
     Object.assign([], lineData);
 
     const svgPathNode = rc.path(linePath, {
       roughness: 0.3,
-      seed: handdrawnSeed,
+      seed: handDrawnSeed,
     });
 
     strokeClasses += ' transition';

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

@@ -3,7 +3,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
 // @ts-ignore TODO: Fix rough typings
 import rough from 'roughjs';
-import { solidStateFill, styles2String } from './handdrawnStyles.js';
+import { solidStateFill, styles2String } from './handDrawnStyles.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const choice = (parent: SVG, node: Node) => {
@@ -25,7 +25,7 @@ export const choice = (parent: SVG, node: Node) => {
   ];
 
   let choice;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const pointArr = points.map(function (d) {

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

@@ -5,7 +5,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
@@ -17,7 +17,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
   let circleElem;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 
 export const createCylinderPathD = (
@@ -63,7 +63,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);

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

@@ -5,7 +5,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
@@ -19,7 +19,7 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
   let circleGroup;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });

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

@@ -5,7 +5,7 @@ import { createRoundedRectPathD } from './roundedRectPath.js';
 import {
   userNodeOverrides,
   styles2String,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
@@ -31,7 +31,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
     ry = options.ry;
   }
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -3,7 +3,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 { solidStateFill } from './handdrawnStyles.js';
+import { solidStateFill } from './handDrawnStyles.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const forkJoin = (parent: SVG, node: Node, dir: string) => {
@@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
   const y = (-1 * height) / 2;
 
   let shape;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));

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

@@ -3,7 +3,7 @@ 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();
+  const { handDrawnSeed } = getConfig();
   return {
     fill: color,
     hachureAngle: 120, // angle of hachure,
@@ -11,7 +11,7 @@ export const solidStateFill = (color: string) => {
     fillWeight: 2,
     roughness: 0.7,
     stroke: color,
-    seed: handdrawnSeed,
+    seed: handDrawnSeed,
   };
 };
 
@@ -72,7 +72,7 @@ export const styles2String = (node: Node) => {
 // Striped fill like start or fork nodes in state diagrams
 // TODO remove any
 export const userNodeOverrides = (node: Node, options: any) => {
-  const { themeVariables, handdrawnSeed } = getConfig();
+  const { themeVariables, handDrawnSeed } = getConfig();
   const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
@@ -84,7 +84,7 @@ export const userNodeOverrides = (node: Node, options: any) => {
       fillStyle: 'hachure', // solid fill
       fillWeight: 4,
       stroke: stylesMap.get('stroke') || nodeBorder,
-      seed: handdrawnSeed,
+      seed: handDrawnSeed,
       strokeWidth: 1.3,
     },
     options

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';
@@ -48,7 +48,7 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -40,7 +40,7 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -40,7 +40,7 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -40,7 +40,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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, handdrawnSeed } = getConfig();
+  const { themeVariables, handDrawnSeed } = getConfig();
   const { noteBorderColor, noteBkgColor } = themeVariables;
 
   const useHtmlLabels = node.useHtmlLabels;
@@ -23,7 +23,7 @@ export const note = async (parent: SVGAElement, node: Node) => {
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // add the rect
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
@@ -31,7 +31,7 @@ export const note = async (parent: SVGAElement, node: Node) => {
       roughness: 0.7,
       fill: noteBkgColor,
       fillWeight: 3,
-      seed: handdrawnSeed,
+      seed: handDrawnSeed,
       // fillStyle: 'solid', // solid fill'
       stroke: noteBorderColor,
     });

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

@@ -5,7 +5,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -38,7 +38,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -40,7 +40,7 @@ export const rect_left_inv_arrow = async (
   let polygon;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -7,7 +7,7 @@ import intersect from '../intersect/index.js';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
@@ -104,7 +104,7 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
   const y = -bbox.height / 2 - halfPadding;
   let rect;
   let innerLine;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore No typings for rough
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 
@@ -63,7 +63,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
 
   let rect;
   const { cssStyles } = node;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -3,7 +3,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 { solidStateFill } from './handdrawnStyles.js';
+import { solidStateFill } from './handDrawnStyles.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const stateEnd = (parent: SVG, node: Node) => {
@@ -16,7 +16,7 @@ export const stateEnd = (parent: SVG, node: Node) => {
 
   let circle;
   let innerCircle;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });

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

@@ -3,7 +3,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 { solidStateFill } from './handdrawnStyles.js';
+import { solidStateFill } from './handDrawnStyles.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const stateStart = (parent: SVG, node: Node) => {
@@ -16,7 +16,7 @@ export const stateStart = (parent: SVG, node: Node) => {
     .attr('id', node.domId || node.id);
 
   let circle;
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -58,7 +58,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
     { x: -8, y: 0 },
   ];
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -4,7 +4,7 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import {
   styles2String,
   userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+} from '$root/rendering-util/rendering-elements/shapes/handDrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -40,7 +40,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -133,4 +133,4 @@ export function insertPolygonShape(parent, w, h, points) {
 }
 
 export const getNodeClasses = (node, extra) =>
-  (node.look === 'handdrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
+  (node.look === 'handDrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');

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

@@ -79,11 +79,11 @@ properties:
     type: string
     enum:
       - classic
-      - handdrawn
+      - handDrawn
     default: 'classic'
-  handdrawnSeed:
+  handDrawnSeed:
     description: |
-      Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
+      Defines the seed to be used when using handDrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
     type: number
     default: 0
   layout: