#5237 Styling fixes

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -201,9 +201,9 @@ export const updateLink = function (positions: ('default' | number)[], style: st
     if (pos === 'default') {
       edges.defaultStyle = style;
     } else {
-      if (utils.isSubstringInArray('fill', style) === -1) {
-        style.push('fill:none');
-      }
+      // if (utils.isSubstringInArray('fill', style) === -1) {
+      //   style.push('fill:none');
+      // }
       edges[pos].style = style;
     }
   });
@@ -807,8 +807,8 @@ const addNodeFromVertex = (
       parentId,
       padding: config.flowchart?.padding || 8,
       cssStyles: vertex.styles,
-      cssCompiledStyles: getCompiledStyles(vertex.classes),
-      cssClasses: vertex.classes.join(' '),
+      cssCompiledStyles: getCompiledStyles(['default', 'node', ...vertex.classes]),
+      cssClasses: 'default ' + vertex.classes.join(' '),
       shape: getTypeFromVertex(vertex),
       dir: vertex.dir,
       domId: vertex.domId,
@@ -888,7 +888,8 @@ export const getData = () => {
   const e = getEdges();
   e.forEach((rawEdge, index) => {
     const { arrowTypeStart, arrowTypeEnd } = destructEdgeType(rawEdge.type);
-    const styles = e.defaultStyle || [];
+    const styles = [...(e.defaultStyle || [])];
+
     if (rawEdge.style) {
       styles.push(...rawEdge.style);
     }

packages/mermaid/src/mermaidAPI.ts

@@ -145,7 +145,11 @@ export const createCssStyles = (
       }
       // create the css styles for the tspan element and the text styles (only if there are textStyles)
       if (!isEmpty(styleClassDef.textStyles)) {
-        cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles);
+        cssStyles += cssImportantStyles(
+          styleClassDef.id,
+          'tspan',
+          (styleClassDef?.textStyles || []).map((s) => s.replace('color', 'fill'))
+        );
       }
     });
   }

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

@@ -2,6 +2,7 @@
 // @ts-nocheck TODO: Fix types
 import type { MermaidConfig } from '../config.type.js';
 import type { Group } from '../diagram-api/types.js';
+import { select } from 'd3';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@@ -223,14 +224,18 @@ export const createText = async (
     const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground);
     return vertexNode;
   } else {
-    const structuredText = markdownToLines(text, config);
+    const structuredText = markdownToLines(text.replace('<br>', '<br/>'), config);
     const svgLabel = createFormattedText(
       width,
       el,
       structuredText,
       text ? addSvgBackground : false
     );
-    svgLabel.setAttribute('style', style.replace('fill:', 'color:'));
+    if (style.match('stroke:')) style = style.replace('stroke:', 'lineColor:');
+    select(svgLabel)
+      .select('text')
+      .attr('style', style.replace(/color\:/g, 'fill:'));
+    // svgLabel.setAttribute('style', style);
     return svgLabel;
   }
 };