Skip to content

Commit

Permalink
Update to use remark-mermaidjs (#19)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bdenham
bdenham committed Nov 21, 2022
1 parent caaf361 commit 9e34685
Show file tree
Hide file tree
Showing 5 changed files with 3,624 additions and 590 deletions.
112 changes: 56 additions & 56 deletions README.md
View file
Expand Up @@ -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).
70 changes: 4 additions & 66 deletions index.js
View file
@@ -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)
};

0 comments on commit 9e34685

Please sign in to comment.