Configurable viewport (#4)

Author: ChappIO

README.md

@@ -47,10 +47,12 @@ To generate:
 
 ## Options
 
-| Name       | Default     | Description                                                                                                                                                                   |
-| ---        | ---         | ---                                                                                                                                                                           |
-| `language` | `"mermaid"` | Set this value to the identifier which will replace the code block. If you set it to `"graph"` then you can create graphs using ` ```graph ...`.                              |
-| `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) |
+| Name              | Default     | Description                                                                                                                                                                   |
+| ---               | ---         | ---                                                                                                                                                                           |
+| `language`        | `"mermaid"` | Set this value to the identifier which will replace the code block. If you set it to `"graph"` then you can create graphs using ` ```graph ...`.                              |
+| `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                                                                                                         |
 
 ### Defaults
 
@@ -65,7 +67,11 @@ To generate:
              resolve: 'gatsby-remark-mermaid',
              options: {
                  language: 'mermaid',
-                 theme: 'default'
+                 theme: 'default',
+                 viewport: {
+                     width: 200,
+                     height: 200
+                 }
              } 
           }
         ]

index.js

@@ -2,9 +2,9 @@ const path = require('path');
 const visit = require('unist-util-visit');
 const puppeteer = require('puppeteer');
 
-async function render(browser, definition, theme) {
+async function render(browser, definition, theme, viewport) {
     const page = await browser.newPage();
-    page.setViewport({width: 200, height: 200});
+    page.setViewport(viewport);
     await page.goto(`file://${path.join(__dirname, 'render.html')}`);
     await page.addScriptTag({
         path:  require.resolve('mermaid/dist/mermaid.min.js')
@@ -35,7 +35,8 @@ function mermaidNodes(markdownAST, language) {
 module.exports = async ({markdownAST},
                         {
                             language = 'mermaid',
-                            theme = 'default'
+                            theme = 'default',
+                            viewport = {height: 200, width: 200},
                         }) => {
 
     // Check if there is a match before launching anything
@@ -50,7 +51,7 @@ module.exports = async ({markdownAST},
 
     await Promise.all(nodes.map(async node => {
         node.type = 'html';
-        node.value = await render(browser, node.value, theme);
+        node.value = await render(browser, node.value, theme, viewport);
     }));
     browser.close();
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-remark-mermaid",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Add pretty graphs using mermaid and server-side rendering.",
   "main": "index.js",
   "repository": {