fix: note position in state diagram

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

cypress/platform/yari.html

@@ -603,10 +603,6 @@
       </div>
       <div class="test">
         <pre class="mermaid">
-          ---
-            config:
-              theme: dark
-          ---
           classDiagram
             test ()--() test2
         </pre>

packages/mermaid/src/diagrams/class/classDb.ts

@@ -627,7 +627,7 @@ export class ClassDB implements DiagramDB {
           padding: config.class!.padding ?? 16,
           // parent node must be one of [rect, roundedWithTitle, noteGroup, divider]
           shape: 'rect',
-          cssStyles: [],
+          cssStyles: ['fill: none', 'stroke: black'],
           look: config.look,
         };
         nodes.push(node);

packages/mermaid/src/diagrams/class/styles.js

@@ -13,30 +13,6 @@ const getStyles = (options) =>
 
 }
 
-  .cluster-label text {
-    fill: ${options.titleColor};
-  }
-  .cluster-label span {
-    color: ${options.titleColor};
-  }
-  .cluster-label span p {
-    background-color: transparent;
-  }
-
-  .cluster rect {
-    fill: ${options.clusterBkg};
-    stroke: ${options.clusterBorder};
-    stroke-width: 1px;
-  }
-
-  .cluster text {
-    fill: ${options.titleColor};
-  }
-
-  .cluster span {
-    color: ${options.titleColor};
-  }
-
 .nodeLabel, .edgeLabel {
   color: ${options.classText};
 }

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;

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

@@ -130,6 +130,7 @@ const lollipop = (elem, type, id) => {
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
+    .attr('stroke', 'black')
     .attr('fill', 'transparent')
     .attr('cx', 7)
     .attr('cy', 7)
@@ -146,6 +147,7 @@ const lollipop = (elem, type, id) => {
     .attr('markerHeight', 240)
     .attr('orient', 'auto')
     .append('circle')
+    .attr('stroke', 'black')
     .attr('fill', 'transparent')
     .attr('cx', 7)
     .attr('cy', 7)