From 83b71638447023bc4b70c39392916d3efe4779dc Mon Sep 17 00:00:00 2001 From: Stan Hu Date: Sun, 21 Jul 2019 08:19:50 -0700 Subject: [PATCH 1/2] Fix text label colors for flow charts When htmlLabels is set to `false` and a background fill color is used for a node, the text label will inherit the fill color, hiding the actual text. To fix this, explicitly set the fill color to `#333`, the same value used in `src/themes/flowchart.scss`. Closes https://github.com/knsv/mermaid/issues/885 --- src/diagrams/flowchart/flowRenderer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index 3fb9a31f5f..a2802c356c 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -78,6 +78,7 @@ export const addVertices = function (vert, g, svgId) { tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve') tspan.setAttribute('dy', '1em') tspan.setAttribute('x', '1') + tspan.setAttribute('fill', '#333') tspan.textContent = rows[j] svgLabel.appendChild(tspan) } From c6502fb03ba0fe7cb1bfa316f0ce86a3573f258b Mon Sep 17 00:00:00 2001 From: Stan Hu Date: Sun, 21 Jul 2019 08:49:21 -0700 Subject: [PATCH 2/2] Style the flow chart labels via SCSS --- src/diagrams/flowchart/flowRenderer.js | 1 - src/themes/flowchart.scss | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js index a2802c356c..3fb9a31f5f 100644 --- a/src/diagrams/flowchart/flowRenderer.js +++ b/src/diagrams/flowchart/flowRenderer.js @@ -78,7 +78,6 @@ export const addVertices = function (vert, g, svgId) { tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve') tspan.setAttribute('dy', '1em') tspan.setAttribute('x', '1') - tspan.setAttribute('fill', '#333') tspan.textContent = rows[j] svgLabel.appendChild(tspan) } diff --git a/src/themes/flowchart.scss b/src/themes/flowchart.scss index 7f8a98f9d1..91456bcadd 100644 --- a/src/themes/flowchart.scss +++ b/src/themes/flowchart.scss @@ -3,6 +3,10 @@ color: #333; } +.label text { + fill: #333; +} + .node rect, .node circle, .node ellipse,