Replaced hard-coded node.look by checking diagram config and cleanup styling a bit

packages/mermaid/src/config.type.ts

@@ -68,7 +68,7 @@ export interface MermaidConfig {
    * Defines which main look to use for the diagram.
    *
    */
-  look?: 'classic' | 'handdrawn' | 'slick';
+  look?: 'classic' | 'handdrawn' | 'slick' | 'neo';
   /**
    * Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
    *

packages/mermaid/src/dagre-wrapper/edgeMarker.ts

@@ -29,6 +29,7 @@ const arrowTypesMap = {
   arrow_cross: 'cross',
   arrow_point: 'point',
   arrow_barb: 'barb',
+  arrow_neo: 'barbNeo',
   arrow_circle: 'circle',
   aggregation: 'aggregation',
   extension: 'extension',

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

@@ -79,7 +79,12 @@ export const draw = async function (
   data4Layout.nodeSpacing = conf?.nodeSpacing || 50;
   // @ts-expect-error TODO: Will be fixed after config refactor
   data4Layout.rankSpacing = conf?.rankSpacing || 50;
+  const config = getConfig();
+  if (config.look === 'neo') {
+    data4Layout.markers = ['barbNeo'];
+  } else {
     data4Layout.markers = ['barb'];
+  }
   data4Layout.diagramId = id;
   // console.log('REF1:', data4Layout);
   await render(data4Layout, svg, element, positions);

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

@@ -129,7 +129,6 @@ g.stateGroup line {
 .statediagram-cluster rect.outer {
   rx: 2px;
   ry: 2px;
-  filter: drop-shadow( 1px 2px 2px rgba(185,185,185,1.0) );
 }
 .statediagram-state .divider {
   stroke: ${options.stateBorder || options.nodeBorder};

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

@@ -187,7 +187,7 @@ const roundedWithTitle = (parent, node) => {
   const innerY = node.y - node.height / 2 - halfPadding + bbox.height - 1;
   const height = node.height + padding;
   const innerHeight = node.height + padding - bbox.height - 3;
-
+  const look = siteConfig.look;
   // add the rect
   let rect;
   if (node.useRough) {
@@ -216,9 +216,15 @@ const roundedWithTitle = (parent, node) => {
     innerRect = shapeSvg.insert(() => roughInnerNode);
   } else {
     rect = outerRectG.insert('rect', ':first-child');
+    let outerRectClass = 'outer';
+    if (look === 'neo') {
+      outerRectClass = 'outer state-shadow';
+    } else {
+      outerRectClass = 'outer';
+    }
     // center the rect around its coordinate
     rect
-      .attr('class', 'outer')
+      .attr('class', outerRectClass)
       .attr('x', x)
       .attr('y', y)
       .attr('width', width)

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

@@ -263,21 +263,21 @@ const cross = (elem, type, id) => {
     .style('stroke-width', 2)
     .style('stroke-dasharray', '1,0');
 };
-// const barb = (elem, type, id) => {
-//   elem
-//     .append('defs')
-//     .append('marker')
-//     .attr('id', id + '_' + type + '-barbEnd')
-//     .attr('refX', 19)
-//     .attr('refY', 7)
-//     .attr('markerWidth', 20)
-//     .attr('markerHeight', 14)
-//     .attr('markerUnits', 'strokeWidth')
-//     .attr('orient', 'auto')
-//     .append('path')
-//     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
-// };
 const barb = (elem, type, id) => {
+  elem
+    .append('defs')
+    .append('marker')
+    .attr('id', id + '_' + type + '-barbEnd')
+    .attr('refX', 19)
+    .attr('refY', 7)
+    .attr('markerWidth', 20)
+    .attr('markerHeight', 14)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('orient', 'auto')
+    .append('path')
+    .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');
+};
+const barbNeo = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
@@ -303,5 +303,6 @@ const markers = {
   circle,
   cross,
   barb,
+  barbNeo,
 };
 export default insertMarkers;

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

@@ -1,4 +1,3 @@
-import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
@@ -8,7 +7,7 @@ import rough from 'roughjs';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
-  const { themeVariables, handdrawnSeed } = getConfig();
+  const { themeVariables, handdrawnSeed, look } = getConfig();
   const { nodeBorder, mainBkg } = themeVariables;
 
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
@@ -24,6 +23,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   const y = -totalHeight / 2;
 
   let rect;
+  node.look = look;
   let { rx, ry } = node;
   const { cssStyles, useRough } = node;
 

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

@@ -1,8 +1,10 @@
 import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const roundedRect = async (parent: SVGAElement, node: Node) => {
-  node.look = 'neo';
+  const { look } = getConfig();
+  node.look = look;
   const options = {
     rx: node.look === 'neo' ? 1 : 1,
     ry: node.look === 'neo' ? 1 : 1,

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

@@ -1,8 +1,10 @@
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { drawRect } from './drawRect.js';
+import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const state = async (parent: SVGAElement, node: Node) => {
-  node.look = 'neo';
+  const { look } = getConfig();
+  node.look = look;
 
   const options = {
     rx: node.look === 'neo' ? 2 : 5,

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

@@ -61,6 +61,9 @@ interface Node {
   // Flowchart specific properties
   x?: number;
   y?: number;
+
+  // Added look to handle
+  look?: string;
 }
 
 // Common properties for any edge in the system