#487 Set text color for flowchart nodes according to style definitions

cypress/integration/rendering/flowchart.spec.js

@@ -524,4 +524,36 @@ describe('Flowchart', () => {
       { flowchart: { htmlLabels: false } }
     );
   });
+
+  it('25: Set node text color according to style when html labels are enabled', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[red<br>text] --> B(blue<br>text)
+      C[/red<br/>text/] --> D{blue<br/>text}
+      style A color:red;
+      style B color:blue;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      click B "index.html#link-clicked" "link test"
+      click D testClick "click test"
+      `,
+      { flowchart: { htmlLabels: true } }
+    );
+  });
+
+  it('26: Set node text color according to style when html labels are disabled', () => {
+    imgSnapshotTest(
+      `graph LR
+      A[red<br>text] --> B(blue<br>text)
+      C[/red<br/>text/] --> D{blue<br/>text}
+      style A color:red;
+      style B color:blue;
+      style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+      style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+      click B "index.html#link-clicked" "link test"
+      click D testClick "click test"
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });

dist/index.html

@@ -353,6 +353,17 @@ graph TB
     linkStyle 1 stroke:greenyellow,stroke-width:2px
     style C fill:greenyellow,stroke:green,stroke-width:4px
   </div>
+  <div class="mermaid">
+    graph LR
+    A[red<br>text] --> B(blue<br>text)
+    C[/red<br/>text/] --> D{blue<br/>text}
+    style A color:red;
+    style B color:blue;
+    style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+    style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+    click B "index.html#link-clicked" "link test"
+    click D testClick "click test"
+  </div>
 
   <hr/>
 

docs/flowchart.md

@@ -509,13 +509,13 @@ It is possible to apply specific styles such as a thicker border or a different
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
 ```
 ```mermaid
 graph LR
     id1(Start)-->id2(Stop)
     style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5
+    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5, 5
 ```
 
 

src/diagrams/flowchart/flowRenderer.js

@@ -87,6 +87,7 @@ export const addVertices = function(vert, g, svgId) {
       vertexNode.parentNode.removeChild(vertexNode);
     } else {
       const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      svgLabel.setAttribute('style', labelStyle.replace('color:', 'fill:'));
 
       const rows = vertexText.split(/<br\s*\/?>/gi);