fix: note position in state diagram

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>

.github/workflows/scorecard.yml

@@ -20,7 +20,7 @@ jobs:
         with:
           persist-credentials: false
       - name: Run analysis
-        uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
+        uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
         with:
           results_file: results.sarif
           results_format: sarif

package.json

@@ -63,12 +63,12 @@
     ]
   },
   "devDependencies": {
-    "@applitools/eyes-cypress": "^3.55.4",
+    "@applitools/eyes-cypress": "^3.55.2",
     "@argos-ci/cypress": "^6.1.3",
     "@changesets/changelog-github": "^0.5.1",
     "@changesets/cli": "^2.29.7",
     "@cspell/eslint-plugin": "^8.19.4",
-    "@cypress/code-coverage": "^3.14.7",
+    "@cypress/code-coverage": "^3.14.6",
     "@eslint/js": "^9.26.0",
     "@rollup/plugin-typescript": "^12.1.4",
     "@types/cors": "^2.8.19",
@@ -77,7 +77,7 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash": "^4.17.20",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^22.18.9",
+    "@types/node": "^22.18.6",
     "@types/rollup-plugin-visualizer": "^5.0.3",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/spy": "^3.2.4",
@@ -91,7 +91,7 @@
     "cspell": "^9.2.1",
     "cypress": "^14.5.4",
     "cypress-image-snapshot": "^4.0.1",
-    "cypress-split": "^1.24.24",
+    "cypress-split": "^1.24.23",
     "esbuild": "^0.25.10",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.8",
@@ -121,13 +121,13 @@
     "prettier": "^3.6.2",
     "prettier-plugin-jsdoc": "^1.3.3",
     "rimraf": "^6.0.1",
-    "rollup-plugin-visualizer": "^6.0.4",
+    "rollup-plugin-visualizer": "^6.0.3",
     "start-server-and-test": "^2.1.2",
     "tslib": "^2.8.1",
-    "tsx": "^4.20.6",
+    "tsx": "^4.20.5",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.1.9",
+    "vite": "^7.0.7",
     "vite-plugin-istanbul": "^7.0.0",
     "vitest": "^3.2.4"
   },

packages/mermaid-zenuml/package.json

@@ -33,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@zenuml/core": "^3.41.6"
+    "@zenuml/core": "^3.41.4"
   },
   "devDependencies": {
     "mermaid": "workspace:^"

packages/mermaid/package.json

@@ -76,10 +76,10 @@
     "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
-    "dagre-d3-es": "7.0.12",
+    "dagre-d3-es": "7.0.11",
     "dayjs": "^1.11.18",
     "dompurify": "^3.2.5",
-    "katex": "^0.16.23",
+    "katex": "^0.16.22",
     "khroma": "^2.1.0",
     "lodash-es": "^4.17.21",
     "marked": "^16.3.0",
@@ -89,10 +89,10 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@adobe/jsonschema2md": "^8.0.6",
+    "@adobe/jsonschema2md": "^8.0.5",
     "@iconify/types": "^2.0.0",
     "@types/cytoscape": "^3.21.9",
-    "@types/cytoscape-fcose": "^2.2.5",
+    "@types/cytoscape-fcose": "^2.2.4",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
@@ -123,7 +123,7 @@
     "rimraf": "^6.0.1",
     "start-server-and-test": "^2.1.2",
     "type-fest": "^4.41.0",
-    "typedoc": "^0.28.14",
+    "typedoc": "^0.28.13",
     "typedoc-plugin-markdown": "^4.8.1",
     "typescript": "~5.7.3",
     "unist-util-flatmap": "^1.0.0",

packages/mermaid/src/docs/package.json

@@ -21,19 +21,19 @@
     "font-awesome": "^4.7.0",
     "jiti": "^2.4.2",
     "mermaid": "workspace:^",
-    "vue": "^3.5.22"
+    "vue": "^3.5.21"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.2.14",
-    "@unocss/reset": "^66.5.3",
+    "@iconify-json/carbon": "^1.2.13",
+    "@unocss/reset": "^66.5.1",
     "@vite-pwa/vitepress": "^1.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "fast-glob": "^3.3.3",
     "https-localhost": "^4.7.1",
     "pathe": "^2.0.3",
-    "unocss": "^66.5.3",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^7.1.9",
+    "unocss": "^66.5.1",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^7.0.7",
     "vite-plugin-pwa": "^1.0.3",
     "vitepress": "1.6.4",
     "workbox-window": "^7.3.0"

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

@@ -27,6 +27,53 @@ import { log } from '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
+/**
+ * Apply absolute note positioning after dagre layout
+ * This fixes the issue where TB and LR directions position notes differently
+ * by making note positioning truly absolute
+ */
+const positionNotes = (graph) => {
+  const noteStatePairs = [];
+
+  graph.nodes().forEach((nodeId) => {
+    const node = graph.node(nodeId);
+    if (node.position && node.shape === 'note') {
+      const edges = graph.nodeEdges(nodeId);
+
+      for (const edge of edges) {
+        const otherNodeId = edge.v === nodeId ? edge.w : edge.v;
+        const otherNode = graph.node(otherNodeId);
+
+        if (otherNode && otherNode.shape !== 'note' && otherNode.shape !== 'noteGroup') {
+          noteStatePairs.push({
+            noteId: nodeId,
+            noteNode: node,
+            stateId: otherNodeId,
+            stateNode: otherNode,
+            position: node.position,
+          });
+        }
+      }
+    }
+  });
+
+  noteStatePairs.forEach(({ noteNode, stateNode, position }) => {
+    const spacing = 60;
+
+    let noteX = noteNode.x;
+    let noteY = stateNode.y;
+
+    if (position === 'right of') {
+      noteX = stateNode.x + stateNode.width / 2 + spacing + noteNode.width / 2;
+    } else if (position === 'left of') {
+      noteX = stateNode.x - stateNode.width / 2 - spacing - noteNode.width / 2;
+    }
+
+    noteNode.x = noteX;
+    noteNode.y = noteY;
+  });
+};
+
 const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
   log.warn('Graph in recursive render:XAX', graphlibJson.write(graph), parentCluster);
   const dir = graph.graph().rankdir;
@@ -164,6 +211,9 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
 
   dagreLayout(graph);
 
+  // Apply absolute note positioning after dagre layout
+  positionNotes(graph);
+
   log.info('Graph after layout:', JSON.stringify(graphlibJson.write(graph)));
   // Move the nodes to the correct place
   let diff = 0;