Support Custom CSS

dist/index.html

@@ -109,6 +109,7 @@ Class08 <--> C2: Cool label
   <script>
     mermaid.initialize({
       theme: 'forest',
+      themeCSS: '.node rect { fill: red; }',
       logLevel: 3,
       gantt: { axisFormat: '%m/%d/%Y' },
       sequence: { actorMargin: 50 },

package.json

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

src/mermaidAPI.js

@@ -50,6 +50,7 @@ for (const themeName of ['default', 'forest', 'dark', 'neutral']) {
  */
 const config = {
   theme: 'default',
+  themeCSS: undefined,
 
   /**
    * logLevel , decides the amount of logging to be used.
@@ -380,8 +381,15 @@ const render = function (id, txt, cb, container) {
   const svg = element.firstChild
   const firstChild = svg.firstChild
 
+  // pre-defined theme
+  let style = config.theme !== undefined ? themes[config.theme] : ''
+
+  // user provided theme CSS
+  if (config.themeCSS !== undefined) {
+    style += `\n${config.themeCSS}`
+  }
+
   // classDef
-  let style = themes[config.theme] || themes.default
   if (graphType === 'flowchart') {
     const classes = flowRenderer.getClasses(txt)
     for (const className in classes) {

todo.md

@@ -2,4 +2,3 @@
 - git graph requires a blank line at the end. why?
 - Create a desktop client
 - Flowchart `interpolate` is useless because there is no rendering code using it
-- How to use custom theme?