Use regex to filter out 'none' from fill styles; improve docs

Author: enourbakhsh

docs/syntax/flowchart.md

@@ -1816,7 +1816,6 @@ or
 ##### Linear gradient examples
 
 **1. Basic gradient**
-
 Create a basic gradient from red to blue, flowing from top to bottom (default direction):
 
 ```mermaid-example
@@ -1848,7 +1847,6 @@ flowchart
 In this example, the gradient starts with red at the top and transitions to blue at the bottom.
 
 **2. Gradient with directional keywords**
-
 Use directional keywords to define the gradient's direction:
 
 ```mermaid-example
@@ -1866,7 +1864,6 @@ flowchart LR
 This gradient moves from the top-right corner to the bottom-left corner, starting with pink and ending with cyan.
 
 **3. Gradient with angle**
-
 Specify the gradient angle to control the direction:
 
 ```mermaid-example
@@ -1884,7 +1881,6 @@ flowchart BT
 The gradient line is tilted at a 35-degree angle, starting with orange and transitioning to purple.
 
 **4. Multiple color stops**
-
 Include multiple color stops at specific positions:
 
 ```mermaid-example
@@ -1902,7 +1898,6 @@ flowchart LR
 Here, the gradient starts with red at the top, transitions to yellow at 30%, green at 60%, brown at 90%, and ends with Deep Sky Blue at the bottom.
 
 **5. Length Units for color stops**
-
 Use length units for color stop positions (physical units like `cm` are calculated assuming _96dpi_):
 
 ```mermaid-example
@@ -1920,7 +1915,6 @@ flowchart LR
 This gradient moves from left to right, using specific lengths and percentages to control where colors change.
 
 **6. Gradients with opacity**
-
 Apply gradients using colors with opacity:
 
 ```mermaid-example
@@ -1938,7 +1932,6 @@ flowchart TD
 The gradient transitions from semi-transparent red to semi-transparent blue diagonally.
 
 **7. Automatic positioning**
-
 If positions for color stops are not specified, they are distributed evenly:
 
 ```mermaid-example
@@ -1956,7 +1949,6 @@ flowchart LR
 In this example, the gradient begins with red from 0% to 10% (specified), transitions smoothly to green at 30%, then to orange at 50%, blue at 70%, and finally reaches cyan at 90% (specified), remaining cyan until the end, distributing the colors with missing positions evenly throughout.
 
 **8. Overlapping positions**
-
 If color stops have overlapping positions, Mermaid adjusts them to maintain the correct order:
 
 ```mermaid-example
@@ -1974,7 +1966,6 @@ flowchart RL
 Here, since 40% comes after 60%, the white color stop at 40% is adjusted to 60% to keep positions ascending.
 
 **9. Out-of-bounds positions**
-
 Color stops set outside the 0% to 100% range cause the gradient to stretch beyond the edges.
 
 ```mermaid-example
@@ -1992,7 +1983,6 @@ flowchart TD
 In this gradient, red at -20% blends toward yellow and appears as a red-yellow mix at 0%. Likewise, green at 145% blends with yellow near 100%, creating a yellow-green mix rather than pure green at the end. Yellow is centered because the 50% stop is explicitly defined.
 
 **10. Sharp color transition**
-
 Specifying two identical positions for consecutive colors creates a sharp transition:
 
 ```mermaid-example
@@ -2010,7 +2000,6 @@ flowchart LR
 This results in a sharp change from red to blue exactly at the 50% mark.
 
 **11. Double color stops**
-
 Using double positions for a color creates a solid zone with that colors:
 
 ```mermaid-example
@@ -2042,7 +2031,6 @@ flowchart TD
 In this example, the gradient transitions from yellow to red between 0% and 30%, remains solid red between 30% and 50%, and then transitions from red to blue after 50%.
 
 **12. Color functions**
-
 Mermaid supports CSS color functions, provided they are supported by the browser:
 
 ```mermaid-example
@@ -2058,7 +2046,6 @@ flowchart LR
 ```
 
 **13. Applying gradients to different shapes**
-
 Gradients adjust based on the node's shape and dimensions:
 
 ```mermaid-example
@@ -2087,7 +2074,6 @@ flowchart TD
 Non-linear color transitions occur when using transition hints or colors with varying opacity. See the two scenarios below.
 
 **Scenario I: interpolating between colors with color transition hint**
-
 Transition hints are positional markers that can be placed between color stops to guide the gradient's interpolation.
 
 ```mermaid-example
@@ -2124,7 +2110,6 @@ In this gradient, the transition is from a semi-transparent red (90% opacity) to
 > You are allowed to have both transition hints and opacity variations in the same gradient.
 
 **Fine-tuning non-linear interpolation with custom transition stops**
-
 You can specify `num-transition-stops` directly in the `style` or `classDef` to customize the number of segments that make up the gradient transition. The default is `5`, which provides a decent transition, but adjusting this number allows for finer control. This value must be odd to align with the symmetry logic used for interpolation. Here is an example:
 
 ```mermaid-example

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -112,7 +112,7 @@ export const draw = async function (text: string, id: string, _version: string,
         );
 
         // Filter out 'none' from fill styles
-        const effectiveFillStyles = allFillStyles.filter((style) => style !== 'none');
+        const effectiveFillStyles = allFillStyles.filter((style) => !/fill\s*:\s*none/.test(style));
 
         // Layer fill styles if there’s more than one given or if any are gradients
         if (
@@ -124,7 +124,7 @@ export const draw = async function (text: string, id: string, _version: string,
           shapeElement.style('fill', 'none');
 
           // Iterate over fill styles in the order they were defined
-          allFillStyles.forEach((style, index) => {
+          effectiveFillStyles.forEach((style, index) => {
             // Clone the shape element to apply each fill as an overlay
             const shapeClone = shapeElement.clone(true);
 

packages/mermaid/src/docs/syntax/flowchart.md

@@ -1164,7 +1164,6 @@ A comprehensive collection of side-by-side examples comparing Mermaid and CSS li
 ##### Linear gradient examples
 
 **1. Basic gradient**
-
 Create a basic gradient from red to blue, flowing from top to bottom (default direction):
 
 ```mermaid-example
@@ -1184,7 +1183,6 @@ flowchart
 In this example, the gradient starts with red at the top and transitions to blue at the bottom.
 
 **2. Gradient with directional keywords**
-
 Use directional keywords to define the gradient's direction:
 
 ```mermaid-example
@@ -1196,7 +1194,6 @@ flowchart LR
 This gradient moves from the top-right corner to the bottom-left corner, starting with pink and ending with cyan.
 
 **3. Gradient with angle**
-
 Specify the gradient angle to control the direction:
 
 ```mermaid-example
@@ -1208,7 +1205,6 @@ flowchart BT
 The gradient line is tilted at a 35-degree angle, starting with orange and transitioning to purple.
 
 **4. Multiple color stops**
-
 Include multiple color stops at specific positions:
 
 ```mermaid-example
@@ -1220,7 +1216,6 @@ flowchart LR
 Here, the gradient starts with red at the top, transitions to yellow at 30%, green at 60%, brown at 90%, and ends with Deep Sky Blue at the bottom.
 
 **5. Length Units for color stops**
-
 Use length units for color stop positions (physical units like `cm` are calculated assuming _96dpi_):
 
 ```mermaid-example
@@ -1232,7 +1227,6 @@ flowchart LR
 This gradient moves from left to right, using specific lengths and percentages to control where colors change.
 
 **6. Gradients with opacity**
-
 Apply gradients using colors with opacity:
 
 ```mermaid-example
@@ -1244,7 +1238,6 @@ flowchart TD
 The gradient transitions from semi-transparent red to semi-transparent blue diagonally.
 
 **7. Automatic positioning**
-
 If positions for color stops are not specified, they are distributed evenly:
 
 ```mermaid-example
@@ -1256,7 +1249,6 @@ flowchart LR
 In this example, the gradient begins with red from 0% to 10% (specified), transitions smoothly to green at 30%, then to orange at 50%, blue at 70%, and finally reaches cyan at 90% (specified), remaining cyan until the end, distributing the colors with missing positions evenly throughout.
 
 **8. Overlapping positions**
-
 If color stops have overlapping positions, Mermaid adjusts them to maintain the correct order:
 
 ```mermaid-example
@@ -1268,7 +1260,6 @@ flowchart RL
 Here, since 40% comes after 60%, the white color stop at 40% is adjusted to 60% to keep positions ascending.
 
 **9. Out-of-bounds positions**
-
 Color stops set outside the 0% to 100% range cause the gradient to stretch beyond the edges.
 
 ```mermaid-example
@@ -1280,7 +1271,6 @@ flowchart TD
 In this gradient, red at -20% blends toward yellow and appears as a red-yellow mix at 0%. Likewise, green at 145% blends with yellow near 100%, creating a yellow-green mix rather than pure green at the end. Yellow is centered because the 50% stop is explicitly defined.
 
 **10. Sharp color transition**
-
 Specifying two identical positions for consecutive colors creates a sharp transition:
 
 ```mermaid-example
@@ -1292,7 +1282,6 @@ flowchart LR
 This results in a sharp change from red to blue exactly at the 50% mark.
 
 **11. Double color stops**
-
 Using double positions for a color creates a solid zone with that colors:
 
 ```mermaid-example
@@ -1312,7 +1301,6 @@ flowchart TD
 In this example, the gradient transitions from yellow to red between 0% and 30%, remains solid red between 30% and 50%, and then transitions from red to blue after 50%.
 
 **12. Color functions**
-
 Mermaid supports CSS color functions, provided they are supported by the browser:
 
 ```mermaid-example
@@ -1322,7 +1310,6 @@ flowchart LR
 ```
 
 **13. Applying gradients to different shapes**
-
 Gradients adjust based on the node's shape and dimensions:
 
 ```mermaid-example
@@ -1343,7 +1330,6 @@ The gradient line length is determined by projecting a shape's dimensions along
 Non-linear color transitions occur when using transition hints or colors with varying opacity. See the two scenarios below.
 
 **Scenario I: interpolating between colors with color transition hint**
-
 Transition hints are positional markers that can be placed between color stops to guide the gradient's interpolation.
 
 ```mermaid-example
@@ -1369,7 +1355,6 @@ You are allowed to have both transition hints and opacity variations in the same
 ```
 
 **Fine-tuning non-linear interpolation with custom transition stops**
-
 You can specify `num-transition-stops` directly in the `style` or `classDef` to customize the number of segments that make up the gradient transition. The default is `5`, which provides a decent transition, but adjusting this number allows for finer control. This value must be odd to align with the symmetry logic used for interpolation. Here is an example:
 
 ```mermaid-example