Add 'mermaidOptions' as plugin options (#6)

Author: rheinardkorf

README.md

@@ -36,12 +36,12 @@ Now you can use markdown:
 
     ```mermaid
     graph LR
-    install[Install Plugin] 
+    install[Install Plugin]
     install --> configure[Configure Plugin]
     configure --> draw[Draw Fancy Diagrams]
     ```
 
-To generate: 
+To generate:
 
 ![example](https://github.com/ChappIO/gatsby-remark-mermaid/raw/master/example_graph.png)
 
@@ -53,6 +53,7 @@ To generate:
 | `theme`           | `"default"` | Set this value to one of `"dark"`, `"neutral"`, `"forrest"`, or `"default"`. You can preview the themes in the [Live Editor](https://mermaidjs.github.io/mermaid-live-editor) |
 | `viewport.width`  | `200`       | Set this value to the desired viewport width while rendering the svg                                                                                                          |
 | `viewport.height` | `200`       | Set this value to the desired viewport height while rendering the svg                                                                                                         |
+| `mermaidOptions`  | `{}`        | This object specifies the [configuration options](https://mermaidjs.github.io/#/mermaidAPI) passed to `mermaid.initialize()`                                                                                              |
 
 ### Defaults
 
@@ -71,12 +72,15 @@ To generate:
                  viewport: {
                      width: 200,
                      height: 200
+                 },
+                 mermaidOptions: {
+                     themeCSS: ".node rect { fill: cornflowerblue; }"
                  }
-             } 
+             }
           }
         ]
       }
     }
-  ] 
+  ]
 }
 ```

index.js

@@ -2,24 +2,27 @@ const path = require('path');
 const visit = require('unist-util-visit');
 const puppeteer = require('puppeteer');
 
-async function render(browser, definition, theme, viewport) {
+async function render(browser, definition, theme, viewport, mermaidOptions) {
     const page = await browser.newPage();
     page.setViewport(viewport);
     await page.goto(`file://${path.join(__dirname, 'render.html')}`);
     await page.addScriptTag({
         path:  require.resolve('mermaid/dist/mermaid.min.js')
     });
-    return await page.$eval('#container', (container, definition, theme) => {
+    return await page.$eval('#container', (container, definition, theme, mermaidOptions) => {
         container.innerHTML = `<div class="mermaid">${definition}</div>`;
 
         try {
-            window.mermaid.initialize({theme: theme});
+            window.mermaid.initialize({
+                ...mermaidOptions,
+                theme
+            });
             window.mermaid.init();
             return container.innerHTML;
         } catch (e) {
             return `${e}`
         }
-    }, definition, theme);
+    }, definition, theme, mermaidOptions);
 }
 
 function mermaidNodes(markdownAST, language) {
@@ -37,6 +40,7 @@ module.exports = async ({markdownAST},
                             language = 'mermaid',
                             theme = 'default',
                             viewport = {height: 200, width: 200},
+                            mermaidOptions = {}
                         }) => {
 
     // Check if there is a match before launching anything
@@ -51,7 +55,7 @@ module.exports = async ({markdownAST},
 
     await Promise.all(nodes.map(async node => {
         node.type = 'html';
-        node.value = await render(browser, node.value, theme, viewport);
+        node.value = await render(browser, node.value, theme, viewport, mermaidOptions);
     }));
     browser.close();
 };