diff --git a/e2e/README.md b/e2e/README.md
index e6a96cb28..ef701dd66 100644
--- a/e2e/README.md
+++ b/e2e/README.md
@@ -4,6 +4,16 @@ These tests are end to end tests in the sense that they actually render a full d
 
 Apart from beeing rendered in a browser the tests perform image snapshots of the diagrams. The tests is handled in the same way as regular jest snapshots tests with the difference that an image comparison is performed instead of a comparison of the generated code.
 
+# Platform differences
+
+There will be slightly different renderings of the images on different platforms. For instance how fonts are anti-aliased. This means that until this started to render usings some common clod service the snaphos rendered on windows will fail in linux etc.
+
+Here are a few simple rules to work around this flaw for now:
+
+1. With no changes assume that tests are working.
+2. Before starting to do changes update the snapshots `jest e2e --config e2e/jest.config.js -u`
+3. Dont commit the __diff_output__
+
 ## To run the tests
 1. Start the dev server by running ***yarn dev***
 2. Run yarn e2e to run the tests
@@ -31,4 +41,12 @@ Add otions for the e2e tests to log the dev server url as in the example below.
 
 Open the url in the dev server and fix the issue.
 
-This way if working makes it easy to have render a graph you want to work with ands ensures that the e2e suit is expanded.
\ No newline at end of file
+This way if working makes it easy to have render a graph you want to work with ands ensures that the e2e suit is expanded.
+
+One unwanted sideeffect is that when the fix is done the the likley willl fail. Fix this by updating the snapshots.
+
+```
+  jest e2e --config e2e/jest.config.js -u
+```
+
+** Important** If you change the text, dont forget to use the new url.
\ No newline at end of file
diff --git a/e2e/platform/e2e.html b/e2e/platform/e2e.html
index bed932e80..498b374d2 100644
--- a/e2e/platform/e2e.html
+++ b/e2e/platform/e2e.html
@@ -10,6 +10,8 @@
   <body>
     <script src="./mermaid.js"></script>
     <script>
+      // Notice startOnLoad=false
+      // This prevents default handling in mermaid from render before the e2e logic is applied
       mermaid.initialize({
         startOnLoad: false,
         useMaxWidth: true,
diff --git a/e2e/platform/viewer.js b/e2e/platform/viewer.js
index 8d8a39dee..b33c76502 100644
--- a/e2e/platform/viewer.js
+++ b/e2e/platform/viewer.js
@@ -20,6 +20,7 @@ const contentLoaded = function () {
     div.innerHTML = graphObj.code
     document.getElementsByTagName('body')[0].appendChild(div)
     global.mermaid.initialize(graphObj.mermaid)
+    // console.log('graphObj.mermaid', graphObj.mermaid)
     global.mermaid.init()
   }
 }
@@ -30,7 +31,6 @@ const contentLoadedApi = function () {
     const graphBase64 = document.location.href.substr(pos)
     const graphObj = JSON.parse(Base64.decode(graphBase64))
     // const graph = 'hello'
-    console.log(graphObj)
     const div = document.createElement('div')
     div.id = 'block'
     div.className = 'mermaid'
@@ -57,6 +57,7 @@ if (typeof document !== 'undefined') {
         this.console.log('Using api')
         contentLoadedApi()
       } else {
+        this.console.log('Not using api')
         contentLoaded()
       }
     },
diff --git a/e2e/spec/__image_snapshots__/__diff_output__/xss-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-diff.png b/e2e/spec/__image_snapshots__/__diff_output__/xss-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-diff.png
deleted file mode 100644
index 757395203..000000000
Binary files a/e2e/spec/__image_snapshots__/__diff_output__/xss-spec-js-sequencediagram-should-render-a-simple-sequence-diagrams-1-diff.png and /dev/null differ
diff --git a/e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-color-of-styled-nodes-1-snap.png b/e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-color-of-styled-nodes-1-snap.png
new file mode 100644
index 000000000..aa4e769a8
Binary files /dev/null and b/e2e/spec/__image_snapshots__/flowchart-spec-js-flowcart-should-render-color-of-styled-nodes-1-snap.png differ
diff --git a/e2e/spec/flowchart.spec.js b/e2e/spec/flowchart.spec.js
index 2f6a39f8a..f8567356b 100644
--- a/e2e/spec/flowchart.spec.js
+++ b/e2e/spec/flowchart.spec.js
@@ -308,17 +308,18 @@ describe('Flowcart', () => {
     {})
   })
 
-  fit('should render color of styled nodes', async () => {
+  it('should render color of styled nodes', async () => {
     await imgSnapshotTest(page, `
       graph LR
         foo-->bar
 
+        classDef foo fill:lightblue,color:green,stroke:#FF9E2C,font-weight:bold
         style foo fill:#F99,stroke-width:2px,stroke:#F0F
-        style bar fill:#999,color: #ffffff, stroke-width:10px,stroke:#0F0
+        style bar fill:#999,color: #00ff00, stroke-width:10px,stroke:#0F0
       `,
     {
-      listUrl: true,
-      listId: 'color'
+      listUrl: false,
+      listId: 'color styling',
       logLevel: 0
     })
   })
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index 0715e8dc8..3df7a6ad9 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -27,14 +27,21 @@ export const addVertices = function (vert, g, svgId) {
   const svg = d3.select(`[id="${svgId}"]`)
   const keys = Object.keys(vert)
 
-  const styleFromStyleArr = function (styleStr, arr) {
+  const styleFromStyleArr = function (styleStr, arr, { label }) {
+    if (!label) {
     // Create a compound style definition from the style definitions found for the node in the graph definition
-    for (let i = 0; i < arr.length; i++) {
-      if (typeof arr[i] !== 'undefined') {
-        styleStr = styleStr + arr[i] + ';'
+      for (let i = 0; i < arr.length; i++) {
+        if (typeof arr[i] !== 'undefined') {
+          styleStr = styleStr + arr[i] + ';'
+        }
+      }
+    } else {
+      for (let i = 0; i < arr.length; i++) {
+        if (typeof arr[i] !== 'undefined') {
+          if (arr[i].match('^color:')) styleStr = styleStr + arr[i] + ';'
+        }
       }
     }
-
     return styleStr
   }
 
@@ -57,7 +64,9 @@ export const addVertices = function (vert, g, svgId) {
      */
     let style = ''
     // Create a compound style definition from the style definitions found for the node in the graph definition
-    style = styleFromStyleArr(style, vertex.styles)
+    style = styleFromStyleArr(style, vertex.styles, { label: false })
+    let labelStyle = ''
+    labelStyle = styleFromStyleArr(labelStyle, vertex.styles, { label: true })
 
     // Use vertex id as text in the box if no text is provided by the graph definition
     let vertexText = vertex.text !== undefined ? vertex.text : vertex.id
@@ -139,7 +148,7 @@ export const addVertices = function (vert, g, svgId) {
         _shape = 'rect'
     }
     // Add the node
-    g.setNode(vertex.id, { labelType: 'svg', shape: _shape, label: vertexNode, rx: radious, ry: radious, 'class': classStr, style: style, id: vertex.id })
+    g.setNode(vertex.id, { labelType: 'svg', labelStyle: labelStyle, shape: _shape, label: vertexNode, rx: radious, ry: radious, 'class': classStr, style: style, id: vertex.id })
   })
 }
 
