#5237 State diagram bugfixes

cypress/platform/knsv2.html

@@ -136,13 +136,17 @@ sequenceDiagram
       </pre
     >
 
-    <pre id="diagram" class="mermaid2">
-      %%{init: {"layout": "elk", "mergeEdges": true} }%%
+    <pre id="diagram" class="mermaid">
 stateDiagram
-      A --> B
+  S:Stillas
       </pre
     >
     <pre id="diagram" class="mermaid">
+stateDiagram
+  state "This is a state description" as S
+      </pre
+    >
+    <pre id="diagram" class="mermaid2">
       %%{init: {"layout": "elk", "mergeEdges": true} }%%
 flowchart
       A --> B(This is B)
@@ -254,8 +258,8 @@ stateDiagram-v2
         handdrawnSeed: 12,
         look: 'handdrawn',
         'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
-        // layout: 'dagre',
-        layout: 'elk',
+        layout: 'dagre',
+        // layout: 'elk',
         flowchart: { titleTopMargin: 10 },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.0.0-beta.3",
+  "version": "11.0.0-beta.6",
   "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/diagrams/state/dataFetcher.js

@@ -408,3 +408,8 @@ export const dataFetcher = (
     setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
   }
 };
+
+export const reset = () => {
+  nodeDb = {};
+  graphItemCount = 0;
+};

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

@@ -11,7 +11,7 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../common/commonDb.js';
-import { dataFetcher } from './dataFetcher.js';
+import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -584,9 +584,8 @@ export const getData = () => {
   const config = getConfig();
   const useRough = config.look === 'handdrawn';
   const look = config.look;
+  resetDataFetching();
   dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look);
-
-  console.log('State Nodes XDX:', nodes);
   return { nodes, edges, other: {}, config };
 };
 

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

@@ -36,6 +36,7 @@ const shapes = {
   choice,
   note,
   roundedRect,
+  rectWithTitle: roundedRect,
   squareRect,
   stadium,
   subroutine,

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

@@ -0,0 +1,12 @@
+import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
+import { drawRect } from './drawRect.js';
+
+export const roundedRect = async (parent: SVGAElement, node: Node) => {
+  const options = {
+    rx: 5,
+    ry: 5,
+    classes: '',
+  } as RectOptions;
+
+  return drawRect(parent, node, options);
+};

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

@@ -8,6 +8,5 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => {
     classes: '',
   } as RectOptions;
 
-  console.log('roundedRect XDX');
   return drawRect(parent, node, options);
 };