Add fix for edge markers showing under node if handDrawn

cypress/platform/yari2.html

@@ -56,9 +56,12 @@
             config:
               htmlLabels: false
               layout: elk
+              look: handDrawn
+              theme: forest
           ---
           erDiagram
             "hi" }o..o{ ORDER : places
+            style hi fill:lightblue
         </pre>
       </div>
       <div class="test">
@@ -67,7 +70,8 @@
           ---
             config:
               htmlLabels: false
-              look: 
+              look: handDrawn
+              layout: elk
           ---
           erDiagram
             CAR ||--|{ NAMED-DRIVER : allows
@@ -80,6 +84,8 @@
           ---
             config:
               htmlLabels: true
+              look: handDrawn
+              theme: forest
           ---
           erDiagram
             CAR ||--o{ NAMED-DRIVER : allows

packages/mermaid/src/diagrams/er/erRenderer-unified.ts

@@ -6,6 +6,7 @@ import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js
 import type { LayoutData } from '../../rendering-util/types.js';
 import { getDirection } from './erDb.js';
 import utils from '../../utils.js';
+import { select } from 'd3';
 
 export const draw = async function (text: string, id: string, _version: string, diag: any) {
   log.info('REF0:');
@@ -34,6 +35,26 @@ export const draw = async function (text: string, id: string, _version: string,
   if (data4Layout.layoutAlgorithm === 'elk') {
     svg.select('.edges').lower();
   }
+
+  // Sets the background nodes to the same position as their original counterparts.
+  // Background nodes are created when the look is handDrawn so the ER diagram markers do not show underneath.
+  const backgroundNodes = svg.selectAll('[id*="-background"]');
+  // eslint-disable-next-line unicorn/prefer-spread
+  if (Array.from(backgroundNodes).length > 0) {
+    backgroundNodes.each(function (this: SVGElement) {
+      const backgroundNode = select(this);
+      const backgroundId = backgroundNode.attr('id');
+
+      const nonBackgroundId = backgroundId.replace('-background', '');
+      const nonBackgroundNode = svg.select(`#${CSS.escape(nonBackgroundId)}`);
+
+      if (!nonBackgroundNode.empty()) {
+        const transform = nonBackgroundNode.attr('transform');
+        backgroundNode.attr('transform', transform);
+      }
+    });
+  }
+
   const padding = 8;
   utils.insertTitle(
     svg,

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

@@ -18,6 +18,21 @@ export const erBox = async (parent: SVGAElement, node: Node) => {
   if (entityNode.alias) {
     node.label = entityNode.alias;
   }
+
+  // Background shapes are drawn to fill in the background color and cover up the ER diagram edge markers.
+  // Draw background shape once.
+  if (node.look === 'handDrawn') {
+    const { themeVariables } = getConfig();
+    const { background } = themeVariables;
+    const backgroundNode = {
+      ...node,
+      id: node.id + '-background',
+      look: 'default',
+      cssStyles: ['stroke: none', `fill: ${background}`],
+    };
+    await erBox(parent, backgroundNode);
+  }
+
   const config = getConfig();
   node.useHtmlLabels = config.htmlLabels;
   let PADDING = config.er?.diagramPadding ?? 10;
@@ -62,8 +77,6 @@ export const erBox = async (parent: SVGAElement, node: Node) => {
     .attr('class', cssClasses)
     .attr('id', node.domId || node.id);
 
-  // TODO: Make padding better
-
   const nameBBox = await addText(shapeSvg, node.label ?? '', config, 0, 0, ['name'], labelStyles);
   nameBBox.height += TEXT_PADDING;
   let yOffset = 0;
@@ -203,7 +216,7 @@ export const erBox = async (parent: SVGAElement, node: Node) => {
     .select('.name')
     .attr('transform', 'translate(' + -nameBBox.width / 2 + ', ' + (y + TEXT_PADDING / 2) + ')');
 
-  // Draw rect
+  // Draw shape
   const roughRect = rc.rectangle(x, y, w, h, options);
   const rect = shapeSvg.insert(() => roughRect, ':first-child').attr('style', cssStyles);