Inline window.getComputedStyle(svg) so you can save the svg.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mermaid",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.3",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "main": "dist/mermaid.core.js",
   "keywords": [

src/mermaidAPI.js

@@ -428,9 +428,19 @@ const render = function (id, txt, cb, container) {
 
   // insert inline style into svg
   const svg = element.firstChild
-  const s = document.createElement('style')
-  s.innerHTML = scope(themes[config.theme] || defaultTheme, `#${id}`)
-  svg.insertBefore(s, svg.firstChild)
+  const firstChild = svg.firstChild
+
+  const style1 = document.createElement('style')
+  style1.innerHTML = scope(themes[config.theme] || defaultTheme, `#${id}`)
+  svg.insertBefore(style1, firstChild)
+
+  const style2 = document.createElement('style')
+  const cs = window.getComputedStyle(svg)
+  style2.innerHTML = `#${id} {
+    color: ${cs.color};
+    font: ${cs.font};
+  }`
+  svg.insertBefore(style2, firstChild)
 
   d3.select('#' + id).selectAll('foreignobject > *').attr('xmlns', 'http://www.w3.org/1999/xhtml')
 

todo.md

@@ -6,3 +6,5 @@
     - https://bl.ocks.org/wboykinm/34627426d84f3242e0e6ecb2339e9065
     - Some one created a great PR: https://github.com/knsv/mermaid/pull/624
 - Flowchart `interpolate` is useless because there is no rendering code using it
+- mermaid live editor saved svg file has different font-size.
+    - Should not have removed this part: https://github.com/knsv/mermaid/pull/577#issuecomment-372116281