Adding option for custom theme

README.md

@@ -2,18 +2,18 @@
 
 Command-line interface for [mermaid](https://mermaidjs.github.io/).
 
-This CLI tool takes a mermaid definition file as input and generates svg/png file as output.
+This CLI tool takes a mermaid definition file as input and generates svg/png/pdf file as output.
 
 
 ## Installation
 
-```
+```sh
 yarn global add mermaid.cli
 ```
 
  Or
 
-```
+```sh
 npm install -g mermaid.cli
 ```
 
@@ -22,31 +22,31 @@ Please install via `npm` instead of `yarn` if you encounter [this issue](https:/
 
 ## Examples
 
-```
+```sh
 mmdc -i input.mmd -o output.svg
 ```
 
-```
+```sh
 mmdc -i input.mmd -o output.png
 ```
 
-```
+```sh
 mmdc -i input.mmd -o output.pdf
 ```
 
-```
+```sh
 mmdc -i input.mmd -o output.svg -w 1024 -H 768
 ```
 
-```
+```sh
 mmdc -i input.mmd -t forest
 ```
 
-```
+```sh
 mmdc -i input.mmd -o output.png -b '#FFF000'
 ```
 
-```
+```sh
 mmdc -i input.mmd -o output.png -b transparent
 ```
 
@@ -55,16 +55,15 @@ mmdc -i input.mmd -o output.png -b transparent
 
 Please run the following command to see the latest options:
 
-```
+```sh
 mmdc -h
 ```
 
 The following is for your quick reference (may not be the latest version):
 
-```
+```text
 Usage: mmdc [options]
 
-
   Options:
 
     -V, --version                            output the version number
@@ -76,5 +75,6 @@ Usage: mmdc [options]
     -b, --backgroundColor [backgroundColor]  Background color. Example: transparent, red, '#F0F0F0'. Optional. Default: white
     -c, --configFile [config]                JSON configuration file for mermaid. Optional
     -C, --cssFile [cssFile]                  CSS alternate file for mermaid. Optional
+    -T, --customTheme <customThemeCssFile>   CSS file replacing CSS injected into SVG container. Optional
     -h, --help                               output usage information
 ```

index.js

@@ -14,17 +14,18 @@ const error = (message) => {
 
 commander
   .version(pkg.version)
-  .option('-t, --theme [name]', 'Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default', /^default|forest|dark|neutral$/, 'default')
-  .option('-w, --width [width]', 'Width of the page. Optional. Default: 800', /^\d+$/, '800')
-  .option('-H, --height [height]', 'Height of the page. Optional. Default: 600', /^\d+$/, '600')
+  .option('-t, --theme <name>', 'Theme of the chart, could be default, forest, dark or neutral. Optional. Default: default', /^default|forest|dark|neutral$/, 'default')
+  .option('-w, --width <width>', 'Width of the page. Optional. Default: 800', /^\d+$/, '800')
+  .option('-H, --height <height>', 'Height of the page. Optional. Default: 600', /^\d+$/, '600')
   .option('-i, --input <input>', 'Input mermaid file. Required.')
-  .option('-o, --output [output]', 'Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"')
-  .option('-b, --backgroundColor [backgroundColor]', 'Background color. Example: transparent, red, \'#F0F0F0\'. Optional. Default: white')
-  .option('-c, --configFile [config]', 'JSON configuration file for mermaid. Optional')
-  .option('-C, --cssFile [cssFile]', 'CSS alternate file for mermaid. Optional')
+  .option('-o, --output <output>', 'Output file. It should be either svg, png or pdf. Optional. Default: input + ".svg"')
+  .option('-b, --backgroundColor <backgroundColor>', 'Background color. Example: transparent, red, \'#F0F0F0\'. Optional. Default: white')
+  .option('-c, --configFile <config>', 'JSON configuration file for mermaid. Optional')
+  .option('-C, --cssFile <cssFile>', 'CSS alternate file for mermaid. Optional')
+  .option('-T, --customTheme <customThemeCssFile>', 'CSS file replacing CSS injected into SVG container. Optional')
   .parse(process.argv)
 
-let { theme, width, height, input, output, backgroundColor, configFile, cssFile } = commander
+let { theme, width, height, input, output, backgroundColor, configFile, cssFile, customTheme } = commander
 
 // check input file
 if (!input) {
@@ -62,6 +63,14 @@ if (cssFile) {
   }
 }
 
+if (customTheme) {
+  if (!fs.existsSync(customTheme)) {
+    error(`CSS file "${customTheme}" doesn't exist`)
+  } else if (!/\.(?:css)$/.test(customTheme)) {
+    error(`CSS file must end with ".css"`)
+  }
+}
+
 // normalize args
 width = parseInt(width)
 height = parseInt(height)
@@ -70,15 +79,16 @@ backgroundColor = backgroundColor || 'white'
 ;(async () => {
   const browser = await puppeteer.launch()
   const page = await browser.newPage()
+  page.on('console', msg => console.log('PAGE LOG:', ...msg.args))
   page.setViewport({ width, height })
   await page.goto(`file://${path.join(__dirname, 'index.html')}`)
 
   await page.evaluate(`document.body.style.background = '${backgroundColor}'`)
 
   const definition = fs.readFileSync(input, 'utf-8')
 
-  var myconfig, myCSS
-  
+  let myconfig, myCSS, myTheme
+
   if (configFile) {
     myconfig = JSON.parse(fs.readFileSync(configFile, 'utf-8'))
   }
@@ -87,7 +97,11 @@ backgroundColor = backgroundColor || 'white'
     myCSS = fs.readFileSync(cssFile, 'utf-8')
   }
 
-  await page.$eval('#container', (container, definition, theme, myconfig, myCSS) => {
+  if (customTheme) {
+    myTheme = fs.readFileSync(customTheme, 'utf-8')
+  }
+
+  await page.$eval('#container', (container, definition, theme, myconfig, myCSS, myTheme) => {
     container.innerHTML = definition
     window.mermaid_config = { theme }
 
@@ -111,7 +125,13 @@ backgroundColor = backgroundColor || 'white'
     }
 
     window.mermaid.init(undefined, container)
-  }, definition, theme, myconfig, myCSS)
+
+    if (myTheme) {
+      // console.log('Replacing CSS with Custom Theme')
+      window.document.getElementById('mermaidChart0').getElementsByTagName('style')[0].innerHTML = myTheme;
+    }
+
+  }, definition, theme, myconfig, myCSS, myTheme)
 
   if (output.endsWith('svg')) {
     const svg = await page.$eval('#container', container => container.innerHTML)