Update to use remark-mermaidjs

README.md

@@ -3,88 +3,88 @@
 
 Create [mermaid](https://mermaidjs.github.io/) graphs and diagrams in your markdown files.
 
-This plugin uses **server-side rendering**. This means the svg is rendered on build time instead of having a runtime
-dependency on mermaid.
+This plugin uses [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs) to generate SVG diagrams at build time. The mermaid code blocks are replaced with an inline SVG in the generated HTML. This prevents any runtime
+dependencies on `mermaid.js`.
 
 ## Install
 
-`npm install --save gatsby-remark-mermaid gatsby-transformer-remark puppeteer`
+```sh
+npm install gatsby-remark-mermaid gatsby-transformer-remark
+```
+
+## Usage
 
+Configure this plugin as a plugin of [gatsby-transformer-remark](https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/).
 
-## How to Use
+**NOTE:** Make sure you add this plugin **before** any other plugins that process code blocks.
 
-This plugin processes markdown code blocks. If you have any other plugins which do that such as syntax highlighters,
-make sure you **import this before those plugins**.
+Example configuration
 
-Add the plugin to your `gatsby-config.js`.
 ```js
-{
+// In your gatsby-config.js
+module.exports = {
   plugins: [
     {
       resolve: 'gatsby-transformer-remark',
       options: {
         plugins: [
-          'gatsby-remark-mermaid'
+          {
+            resolve: `gatsby-remark-mermaid`,
+            options: {
+              launchOptions: {
+                executablePath: 'path/to/chrome/executable',
+              },
+              svgo: {
+                plugins: [
+                  { name: 'removeTitle', active: false },
+                ],
+              },
+              mermaidOptions: {
+                theme: 'neutral',
+                themeCSS: '.node rect { fill: #fff; }',
+              },
+            },
+          },
         ]
       }
     }
-  ]
+  ],
 }
 ```
 
-Now you can use markdown:
+## Options
 
-    ```mermaid
-    graph LR
-    install[Install Plugin]
-    install --> configure[Configure Plugin]
-    configure --> draw[Draw Fancy Diagrams]
-    ```
+The configuration options for this plugin are the same as for `remark-mermaidjs` [provided here](https://github.com/remcohaszing/remark-mermaidjs#options).
+However, the table below describes the configuration details as they apply to Gatsby.
 
-To generate:
+| Name                            | Default              | Description                                                                                                                                                                                                                                                               |
+| :------------------------------ | :------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `launchOptions.executablePath`  |                      | (Required) String path to the chrome executable that puppeteer uses to render the mermaid diagrams to SVGs.                                                                                                                                                               |
+| `mermaidOptions`                | `{}`                 | (Optional) Configuration object for customizing themes, styles, and properties of all mermaid diagrams. See [mermaidAPI configuration options](https://mermaid-js.github.io/mermaid/#/Setup).                                                                             |
+| `mermaidOptions.theme`          | `"default"`          | (Optional) Name of mermaid theme. Valid options: `'default'`, `'forest'`, `'dark'`, `'neutral'`, `'null'`. See [mermaid themes](https://mermaid-js.github.io/mermaid/#/Setup?id=theme).                                                                                   |
+| `mermaidOptions.themeCSS`       | `""`                 | (Optional) Override mermaid styles using `themeCSS`. See [mermaid themes](https://mermaid-js.github.io/mermaid/#/Setup?id=theme).                                                                                                                                         |
+| `mermaidOptions.themeVariables` | `{}`                 | (Optional) Override mermaid variables using `themeVariables`. See [Customizing Themes with themeVariables](https://mermaid-js.github.io/mermaid/#/./theming?id=customizing-themes-with-themevariablesSpecifies).)                                                         |
+| `svgo.plugins`                  | `defaultSVGOOptions` | (Optional) Override default optimizations for the generated SVG files. Set to `null` to disable minifying using SVGO completely. See [defaultSVGOOptions](https://github.com/remcohaszing/remark-mermaidjs/blob/v4.0.0/index.ts#L18)).) |
 
-![example](https://github.com/remcohaszing/gatsby-remark-mermaid/raw/master/example_graph.png)
+**NOTE:** You can use the [Mermaid Live Editor](https://mermaidjs.github.io/mermaid-live-editor) to preview the theme options described below.
 
-## Options
+## How it works
 
-| 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                                                                                                         |
-| `mermaidOptions`  | `{}`        | This object specifies the [configuration options](https://mermaidjs.github.io/#/mermaidAPI) passed to `mermaid.initialize()`                                                                                              |
+This plugin processes markdown code blocks set with `mermaid` as the language. It relies
 
-### Defaults
+For example, this mermaid code block:
 
-```js
-{
-  plugins: [
-    {
-      resolve: 'gatsby-transformer-remark',
-      options: {
-        plugins: [
-          {
-             resolve: 'gatsby-remark-mermaid',
-             options: {
-                 language: 'mermaid',
-                 theme: 'default',
-                 viewport: {
-                     width: 200,
-                     height: 200
-                 },
-                 mermaidOptions: {
-                     themeCSS: ".node rect { fill: cornflowerblue; }"
-                 }
-             }
-          }
-        ]
-      }
-    }
-  ]
-}
-```
+    ```mermaid
+    graph LR
+      install[Install Plugin]
+      install --> configure[Configure Plugin]
+      configure --> draw[Draw Fancy Diagrams]
+    ```
+
+Generates the following SVG image:
+
+![example](https://github.com/remcohaszing/gatsby-remark-mermaid/raw/master/example_graph.png)
 
 ### Credits
 
-This package was originally developed by [Thomas Biesaart](https://github.com/ChappIO).
+This package was originally developed by [Thomas Biesaart](https://github.com/ChappIO).

index.js

@@ -1,67 +1,5 @@
-const path = require('path');
-const visit = require('unist-util-visit');
-const puppeteer = require('puppeteer');
-
-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, mermaidOptions) => {
-        container.innerHTML = `<div class="mermaid">${definition}</div>`;
-
-        try {
-            window.mermaid.initialize({
-                ...mermaidOptions,
-                theme
-            });
-            window.mermaid.init();
-            return container.innerHTML;
-        } catch (e) {
-            return `${e}`
-        }
-    }, definition, theme, mermaidOptions);
-}
-
-function mermaidNodes(markdownAST, language) {
-    const result = [];
-    visit(markdownAST, 'code', node => {
-        if ((node.lang || '').toLowerCase() === language) {
-            result.push(node);
-        }
-    });
-    return result;
-}
-
-module.exports = async ({markdownAST},
-                        {
-                            language = 'mermaid',
-                            theme = 'default',
-                            viewport = {height: 200, width: 200},
-                            mermaidOptions = {}
-                        }) => {
-
-    // Check if there is a match before launching anything
-    let nodes = mermaidNodes(markdownAST, language);
-    if (nodes.length === 0) {
-        // No nodes to process
-        return;
-    }
-
-    // Launch virtual browser
-    let browser;
-    try {
-        browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
-
-        await Promise.all(nodes.map(async node => {
-            node.type = 'html';
-            node.value = await render(browser, node.value, theme, viewport, mermaidOptions);
-        }));
-    } finally {
-        if (browser) {
-            await browser.close();
-        }
-    }
+module.exports = async ({ markdownAST }, options) => {
+    const { default: plugin } = await import('remark-mermaidjs')
+    const transformer = plugin(options);
+    return transformer(markdownAST)
 };