updated drop shadow styling for small shapes

packages/mermaid/src/rendering-util/render.ts

@@ -72,6 +72,19 @@ export const render = async (data4Layout: LayoutData, svg: SVG, positions?: any)
     .attr('flood-opacity', '0.06')
     .attr('flood-color', '#000000');
 
+  svg
+    .append('defs')
+    .append('filter')
+    .attr('id', 'drop-shadow-small')
+    .attr('height', '150%')
+    .attr('width', '150%')
+    .append('feDropShadow')
+    .attr('dx', '2')
+    .attr('dy', '2')
+    .attr('stdDeviation', 0)
+    .attr('flood-opacity', '0.06')
+    .attr('flood-color', '#000000');
+
   if (useGradient) {
     const gradient = svg
       .append('linearGradient')

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

@@ -61,6 +61,10 @@ export function filledCircle<T extends SVGGraphicsElement>(
     filledCircle.attr('class', 'outer-path');
   }
 
+  if (node.width < 25) {
+    filledCircle.attr('style', 'filter:url(#drop-shadow-small)');
+  }
+
   if (cssStyles && cssStyles.length > 0 && node.look !== 'handDrawn') {
     filledCircle.selectAll('path').attr('style', cssStyles);
   }

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

@@ -80,6 +80,10 @@ export function stateEnd<T extends SVGGraphicsElement>(
     circle.selectAll('path').attr('style', nodeStyles);
   }
 
+  if (node.width < 25) {
+    circle.attr('style', 'filter:url(#drop-shadow-small)');
+  }
+
   updateNodeBounds(node, circle);
 
   node.intersect = function (point) {

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

@@ -62,6 +62,10 @@ export function stateStart<T extends SVGGraphicsElement>(
       .attr('height', node.height ?? 14);
   }
 
+  if (node.width < 25) {
+    circle.attr('style', 'filter:url(#drop-shadow-small)');
+  }
+
   updateNodeBounds(node, circle);
 
   node.intersect = function (point) {