Merge branch 'alanaV11' into pebr/neo-style

cypress/platform/knsv2.html

@@ -85,7 +85,7 @@ end
     Apa --> C
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart LR
 subgraph Apa["Apa"]
     B["This is B"]
@@ -95,7 +95,7 @@ end
     Apa --> C
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart RL
 subgraph Apa["Apa"]
   subgraph Gorilla
@@ -107,7 +107,7 @@ end
     Gorilla --> C
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 flowchart LR
 subgraph Apa["Apa"]
   subgraph Gorilla
@@ -154,11 +154,32 @@ flowchart LR
     Apa --- C
     A --x C
 
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
+---
+config:
+  look: neo
+  theme: neo
+  layout: elk
+  elk.mergeEdges: true
+  themeVariables: {}
+---
+%% 'elk.stress',
+%% 'elk.force'
+%%'elk.mrtree'
+%% 'elk.sporeOverlap
 stateDiagram
-  S:Stillas
+  direction TB
-  T:Tiger
+  A --> B
-  U:Ulv
+  A --> C
+  A --> D
+  A --> E
+  A --> F
+  state F {
+    Another
+  }
+  Another --> A
+
+
       </pre
     >
     <pre id="diagram" class="mermaid2">
@@ -211,7 +232,7 @@ flowchart
     if_state --> True : if n >= 0
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: {"layout": "dagre", "mergeEdges": true} }%%
 stateDiagram
   direction TB
@@ -232,7 +253,7 @@ State T1 {
     }
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: {"layouts": "elk2", "mergeEdges": true} }%%
       stateDiagram
       State S1 {
@@ -242,7 +263,7 @@ State T1 {
   S1 --> S2
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
 State T1 {
@@ -252,7 +273,7 @@ State T1 {
     }
       </pre
     >
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 stateDiagram
   [*] --> T1

packages/mermaid-layout-elk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/layout-elk",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "ELK layout engine for mermaid",
   "module": "dist/mermaid-layout-elk.core.mjs",
   "types": "dist/packages/mermaid-layout-elk/src/index.d.ts",

packages/mermaid-layout-elk/src/render.ts

@@ -465,7 +465,7 @@ export const render = async (data4Layout, svg, element, algorithm) => {
       'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
       'elk.algorithm': algorithm,
       'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'],
-      'elk.layered.mergeEdges': data4Layout.config.mergeEdges,
+      'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'],
       'elk.direction': 'DOWN',
       'spacing.baseValue': 30,
       // 'spacing.nodeNode': 40,

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.0.0-beta.12",
+  "version": "11.0.0-beta.15",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",

packages/mermaid/src/config.type.ts

@@ -89,7 +89,7 @@ export interface MermaidConfig {
    */
   maxEdges?: number;
   /**
-   * Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
+   * Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
    *
    */
   'elk.mergeEdges'?: boolean;

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

@@ -768,7 +768,25 @@ const getTypeFromVertex = (vertex: FlowVertex) => {
 };
 
 const findNode = (nodes: Node[], id: string) => nodes.find((node) => node.id === id);
+const destructEdgeType = (type: string | undefined) => {
+  let arrowTypeStart = 'none';
+  let arrowTypeEnd = 'arrow_point';
+  switch (type) {
+    case 'arrow_point':
+    case 'arrow_circle':
+    case 'arrow_cross':
+      arrowTypeEnd = type;
+      break;
 
+    case 'double_arrow_point':
+    case 'double_arrow_circle':
+    case 'double_arrow_cross':
+      arrowTypeStart = type.replace('double_', '');
+      arrowTypeEnd = arrowTypeStart;
+      break;
+  }
+  return { arrowTypeStart, arrowTypeEnd };
+};
 const addNodeFromVertex = (
   vertex: FlowVertex,
   nodes: Node[],
@@ -776,7 +794,7 @@ const addNodeFromVertex = (
   subGraphDB: Map<string, boolean>,
   config: any,
   look: string
-): Node => {
+) => {
   const parentId = parentDB.get(vertex.id);
   const isGroup = subGraphDB.get(vertex.id) || false;
 
@@ -793,7 +811,6 @@ const addNodeFromVertex = (
       shape: getTypeFromVertex(vertex),
       dir: vertex.dir,
       domId: vertex.domId,
-      type: isGroup ? 'group' : undefined,
       isGroup,
       look,
     });
@@ -805,8 +822,6 @@ export const getData = () => {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
 
-  // extract(getRootDocV2());
-  // const diagramStates = getStates();
   const subGraphs = getSubGraphs();
   log.info('Subgraphs - APA12', subGraphs);
   const parentDB = new Map<string, string>();
@@ -830,26 +845,19 @@ export const getData = () => {
       cssClasses: '',
       shape: 'rect',
       dir: subGraph.dir,
-      domId: subGraph.domId,
-      type: 'group',
       isGroup: true,
       look: config.look,
     });
   }
-  console.log('APA12 nodes - 1', nodes.length);
 
   const n = getVertices();
   n.forEach((vertex) => {
     const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
-    if (node) {
-      nodes.push(node);
-    }
   });
 
-  console.log('APA12 nodes', nodes.length);
-
   const e = getEdges();
   e.forEach((rawEdge, index) => {
+    const { arrowTypeStart, arrowTypeEnd } = destructEdgeType(rawEdge.type);
     const edge: Edge = {
       id: getEdgeId(rawEdge.start, rawEdge.end, { counter: index, prefix: 'edge' }),
       start: rawEdge.start,
@@ -857,25 +865,16 @@ export const getData = () => {
       type: rawEdge.type || 'normal',
       label: rawEdge.text,
       labelpos: 'c',
-      //   labelStyle: '',
-      //   cssStyles: rawEdge.styles.join(' '),
       thickness: rawEdge.stroke,
       minlen: rawEdge.length,
       classes: 'edge-thickness-normal edge-pattern-solid flowchart-link',
-      arrowhead: 'none',
+      arrowTypeStart,
-      arrowTypeEnd: 'arrow_point',
+      arrowTypeEnd,
-      // arrowTypeEnd: 'arrow_barb',
       arrowheadStyle: 'fill: #333',
-      // stroke: rawEdge.pattern,
       pattern: rawEdge.stroke,
-      //   shape: getTypeFromVertex(rawEdge),
-      //   dir: rawEdge.dir,
-      //   domId: verawEdgertex.domId,
-      //   rawEdge: undefined,
-      //   isGroup: false,
       look: config.look,
     };
-    // console.log('rawEdge SPLIT', rawEdge, index);
+    console.log('rawEdge SPLIT', rawEdge, index);
     edges.push(edge);
   });
 

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -36,26 +36,13 @@ export const draw = async function (text: string, id: string, _version: string,
 
   // The getData method provided in all supported diagrams is used to extract the data from the parsed structure
   // into the Layout data format
-  console.log('Before getData: ');
+  log.debug('Before getData: ');
   const data4Layout = diag.db.getData() as LayoutData;
-  console.log('Data: ', data4Layout);
+  log.debug('Data: ', data4Layout);
   // Create the root SVG - the element is the div containing the SVG element
   const { element, svg } = getDiagramElements(id, securityLevel);
 
-  // // For some diagrams this call is not needed, but in the state diagram it is
-  // await insertElementsForSize(element, data4Layout);
-
-  // console.log('data4Layout:', data4Layout);
-
-  // // Now we have layout data with real sizes, we can perform the layout
-  // const data4Rendering = doLayout(data4Layout, id, _version, 'dagre-wrapper');
-
-  // // The performRender method provided in all supported diagrams is used to render the data
-  // performRender(data4Rendering);
-
   data4Layout.type = diag.type;
-  // data4Layout.layoutAlgorithm = 'dagre-wrapper';
-  // data4Layout.layoutAlgorithm = 'elk';
   data4Layout.layoutAlgorithm = layout;
   data4Layout.direction = DIR;
   data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
@@ -63,7 +50,7 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.markers = ['point', 'circle', 'cross'];
 
   data4Layout.diagramId = id;
-  console.log('REF1:', data4Layout);
+  log.debug('REF1:', data4Layout);
   await render(data4Layout, svg, element);
   const padding = 8;
   utils.insertTitle(

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

@@ -61,11 +61,9 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, l
     switch (item.stmt) {
       case STMT_STATE:
         dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
-
         break;
       case DEFAULT_STATE_TYPE:
         dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
-
         break;
       case STMT_RELATION:
         {

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

@@ -71,6 +71,9 @@ function newClassesList() {
   return new Map();
 }
 
+let nodes = [];
+let edges = [];
+
 let direction = DEFAULT_DIAGRAM_DIRECTION;
 let rootDoc = [];
 let classes = newClassesList(); // style classes defined by a classDef
@@ -222,6 +225,12 @@ const extract = (_doc) => {
         break;
     }
   });
+
+  const diagramStates = getStates();
+  const config = getConfig();
+  const look = config.look;
+  resetDataFetching();
+  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
 };
 
 /**
@@ -306,6 +315,8 @@ export const addState = function (
 };
 
 export const clear = function (saveCommon) {
+  nodes = [];
+  edges = [];
   documents = {
     root: newDoc(),
   };
@@ -571,20 +582,7 @@ const setDirection = (dir) => {
 const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
 
 export const getData = () => {
-  const nodes = [];
-  const edges = [];
-
-  // for (const key in currentDocument.states) {
-  //   if (currentDocument.states.hasOwnProperty(key)) {
-  //     nodes.push({...currentDocument.states[key]});
-  //   }
-  // }
-  const diagramStates = getStates();
   const config = getConfig();
-  const look = config.look;
-  resetDataFetching();
-  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
-
   return { nodes, edges, other: {}, config };
 };
 

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -46,6 +46,7 @@ export const draw = async function (
 ) {
   log.info('REF0:', positions);
   log.info('Drawing state diagram (v2)', id);
+  log.info('Diagram Configuration:', getConfig());
   const { securityLevel, state: conf, layout } = getConfig();
   // Extracting the data from the parsed structure into a more usable form
   // Not related to the refactoring, but this is the first step in the rendering process

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

@@ -183,11 +183,12 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
         const halfPadding = node?.padding / 2 || 0;
         const labelHeight = node?.labelBBox?.height || 0;
         const offsetY = labelHeight - halfPadding || 0;
-        node.y += offsetY / 2 + 2;
+        node.y += offsetY + (parent?.offsetY / 2 || 0);
+        // node.offsetY = offsetY;
         insertCluster(clusters, node);
 
         // A cluster in the non-recursive way
-        log.info(
+        console.log(
           'A tainted cluster node with children XBX',
           v,
           node.id,
@@ -204,7 +205,6 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
         node.y += (parent?.offsetY || 0) / 2;
         log.info(
           'A regular node XBX - using the padding',
-          v,
           node.id,
           'parent',
           node.parentId,
@@ -216,6 +216,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
           node.offsetY,
           'parent',
           parent,
+          parent?.offsetY,
           node
         );
 

packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js

@@ -162,7 +162,7 @@ const findCommonEdges = (graph, id1, id2) => {
     return { v: edge.v, w: edge.w };
   });
   const result = edges1Prim.filter((edgeIn1) => {
-    return edges2Prim.filter((edge) => edgeIn1.v === edge.v && edgeIn1.w === edge.w).length > 0;
+    return edges2Prim.some((edge) => edgeIn1.v === edge.v && edgeIn1.w === edge.w);
   });
 
   return result;

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

@@ -69,13 +69,12 @@ const rect = (parent, node) => {
       stroke: clusterBorder,
       fillWeight: 3,
       seed: handdrawnSeed,
-      stroke: clusterBorder,
     });
     const roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 0), options);
     // console.log('Rough node insert CXC', roughNode);
 
     rect = shapeSvg.insert(() => {
-      console.log('Rough node insert CXC', roughNode);
+      log.debug('Rough node insert CXC', roughNode);
       return roughNode;
     }, ':first-child');
   } else {
@@ -178,7 +177,12 @@ const roundedWithTitle = (parent, node) => {
     themeVariables;
 
   // Add outer g element
-  const shapeSvg = parent.insert('g').attr('class', node.cssClasses).attr('id', node.id);
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', node.cssClasses)
+    .attr('id', node.id)
+    .attr('data-et', 'node')
+    .attr('data-id', node.id);
 
   // add the rect
   const outerRectG = shapeSvg.insert('g', ':first-child');
@@ -211,6 +215,12 @@ const roundedWithTitle = (parent, node) => {
     node.diff = -node.padding / 2;
   }
 
+  // if (node.id === 'Apa0') {
+  //   console.log('XBX here', node);
+  //   node.y += 10;
+  // } else {
+  //   console.log('XBX there', node);
+  // }
   const x = node.x - width / 2 - halfPadding;
   const y = node.y - node.height / 2 - halfPadding;
   const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;

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

@@ -444,7 +444,7 @@ const fixCorners = function (lineData) {
       const a = Math.sqrt(2) * 2;
       let newCornerPoint = { x: cornerPoint.x, y: cornerPoint.y };
       if (Math.abs(nextPoint.x - prevPoint.x) > 10 && Math.abs(nextPoint.y - prevPoint.y) >= 10) {
-        console.log(
+        log.debug(
           'Corner point fixing',
           Math.abs(nextPoint.x - prevPoint.x),
           Math.abs(nextPoint.y - prevPoint.y)
@@ -462,7 +462,7 @@ const fixCorners = function (lineData) {
           };
         }
       } else {
-        console.log(
+        log.debug(
           'Corner point skipping fixing',
           Math.abs(nextPoint.x - prevPoint.x),
           Math.abs(nextPoint.y - prevPoint.y)

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

@@ -178,8 +178,8 @@ const point = (elem, type, id) => {
     .attr('refX', 4.5)
     .attr('refY', 5)
     .attr('markerUnits', 'userSpaceOnUse')
-    .attr('markerWidth', 11)
+    .attr('markerWidth', 8)
-    .attr('markerHeight', 11)
+    .attr('markerHeight', 8)
     .attr('orient', 'auto')
     .append('path')
     .attr('d', 'M 0 5 L 10 10 L 10 0 z')

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

@@ -18,7 +18,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const roughNode = rc.circle(0, 0, radius * 2, options);

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

@@ -5,16 +5,6 @@ import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
-/**
- * Creates an SVG path for a cylindrical shape.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the cylinder.
- * @param {number} height - The height of the cylinder.
- * @param {number} rx - The x-radius of the cylinder's ends.
- * @param {number} ry - The y-radius of the cylinder's ends.
- * @returns {string} The path data for the cylindrical shape.
- */
 export const createCylinderPathD = (
   x: number,
   y: number,
@@ -71,7 +61,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
     const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry);

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

@@ -21,7 +21,7 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @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

@@ -32,6 +32,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
     rx = options.rx;
     ry = options.ry;
   }
+
   if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);

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

@@ -7,15 +7,6 @@ import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a hexagon shape.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the hexagon.
- * @param {number} height - The height of the hexagon.
- * @param {number} m - The margin size for the hexagon.
- * @returns {string} The path data for the hexagon shape.
- */
 export const createHexagonPathD = (
   x: number,
   y: number,
@@ -59,7 +50,7 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createHexagonPathD(0, 0, w, h, m);

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

@@ -1,9 +1,3 @@
-/**
- * @param parent
- * @param w
- * @param h
- * @param points
- */
 export function insertPolygonShape(
   parent: any,
   w: number,

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

@@ -7,14 +7,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for an inverted trapezoid shape.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the shape.
- * @param {number} height - The height of the shape.
- * @returns {string} The path data for the inverted trapezoid shape.
- */
 export const createInvertedTrapezoidPathD = (
   x: number,
   y: number,
@@ -46,7 +38,7 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createInvertedTrapezoidPathD(0, 0, w, h);

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

@@ -6,14 +6,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a lean left shape.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the shape.
- * @param {number} height - The height of the shape.
- * @returns {string} The path data for the lean left shape.
- */
 export const createLeanLeftPathD = (
   x: number,
   y: number,
@@ -45,7 +37,7 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createLeanLeftPathD(0, 0, w, h);

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

@@ -6,14 +6,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a lean right shape.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the shape.
- * @param {number} height - The height of the shape.
- * @returns {string} The path data for the lean right shape.
- */
 export const createLeanRightPathD = (
   x: number,
   y: number,
@@ -45,7 +37,7 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createLeanRightPathD(0, 0, w, h);

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

@@ -6,13 +6,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a decision box shape (question shape).
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} size - The size of the shape.
- * @returns {string} The path data for the decision box shape.
- */
 export const createDecisionBoxPathD = (x: number, y: number, size: number): string => {
   return [
     `M${x + size / 2},${y}`,
@@ -41,7 +34,7 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createDecisionBoxPathD(0, 0, s);

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

@@ -6,14 +6,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a special polygon shape with a left-inverted arrow.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the shape.
- * @param {number} height - The height of the shape.
- * @returns {string} The path data for the special polygon shape.
- */
 export const createPolygonPathD = (x: number, y: number, width: number, height: number): string => {
   return [
     `M${x - height / 2},${y}`,
@@ -45,7 +37,7 @@ export const rect_left_inv_arrow = async (
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createPolygonPathD(0, 0, w, h);

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

@@ -6,6 +6,8 @@ export const squareRect = async (parent: SVGAElement, node: Node) => {
     rx: 0,
     ry: 0,
     classes: '',
+    labelPaddingX: (node?.padding || 0) * 2,
+    labelPaddingY: (node?.padding || 0) * 1,
   } as RectOptions;
   return drawRect(parent, node, options);
 };

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

@@ -60,7 +60,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
   let rect;
   const { cssStyles } = node;
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
 

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

@@ -55,7 +55,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
   ];
 
   if (node.look === 'handdrawn') {
-    // @ts-ignore
+    // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
     const pathData = createSubroutinePathD(-w / 2, -h / 2, w, h);

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

@@ -6,14 +6,6 @@ import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shape
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
-/**
- * Creates an SVG path for a trapezoid shape.
- * @param {number} x - The x coordinate of the top-left corner.
- * @param {number} y - The y coordinate of the top-left corner.
- * @param {number} width - The width of the shape.
- * @param {number} height - The height of the shape.
- * @returns {string} The path data for the trapezoid shape.
- */
 export const createTrapezoidPathD = (
   x: number,
   y: number,
@@ -45,7 +37,7 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   const { cssStyles } = node;
 
   if (node.look === 'handdrawn') {
-    console.log('Trapezoid: Inside use handdrawn');
+    console.log('Trapezoid: Inside handdrawn block');
     // @ts-ignore
     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.useRough ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');
+  (node.look === 'handdrawn' ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');

packages/mermaid/src/rendering-util/types.d.ts

@@ -27,7 +27,8 @@ interface Node {
 
   // Flowchart specific properties
   labelType?: string; // REMOVE? Always use markdown string, need to check for KaTeX - ⏳ wait with this one
-  domId: string;
+
+  domId?: string; // When you create the node in the getData function you do not have the domId yet
   // Rendering specific properties for both Flowchart and State Diagram nodes
   dir?: string; // Only relevant for isGroup true, i.e. a sub-graph or composite state.
   haveCallback?: boolean;
@@ -61,7 +62,6 @@ interface Node {
   x?: number;
   y?: number;
 
-  // Added look to handle
   look?: string;
 }
 
@@ -93,7 +93,6 @@ interface Edge {
   minlen?: number;
   pattern?: string;
   thickness?: 'normal' | 'thick' | 'invisible';
-
   look?: string;
 }
 

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

@@ -78,7 +78,6 @@ properties:
     enum:
       - classic
       - handdrawn
-      - slick
     default: 'classic'
   handdrawnSeed:
     description: |
@@ -102,7 +101,7 @@ properties:
     minimum: 0
   elk.mergeEdges:
     description: |
-      Elk specific option that allows edge egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
+      Elk specific option that allows egdes to share path where it convenient. It can make for pretty diagrams but can also make it harder to read the diagram.
     type: boolean
     default: false
   elk.nodePlacement.strategy: