remcohaszing / gatsby-remark-mermaid Goto Github PK

View Code? Open in Web Editor NEW

23.0 5.0 8.0 228 KB

Create mermaid graphs and diagrams in your markdown files.

License: ISC License

JavaScript 100.00%

gatsby gatsby-plugin markdown mermaid mermaidjs remark

gatsby-remark-mermaid's Introduction

gatsby-remark-mermaid

Create mermaid graphs and diagrams in your markdown files.

This plugin uses 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.

Installation
Usage
Options
Credits
License

Installation

npm install gatsby-remark-mermaid gatsby-transformer-remark

Usage

Configure this plugin as a plugin of gatsby-transformer-remark.

NOTE: Make sure you add this plugin before any other plugins that process code blocks.

Example configuration

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-mermaid`,
            options: /** @type {import('gatsby-remark-mermaid').Options} */ ({
              mermaidConfig: {
                theme: 'neutral',
                themeCSS: '.node rect { fill: #fff; }'
              }
            })
          }
        ]
      }
    }
  ]
}

Options

`browser`

The Playwright browser to use. (object, default: chromium)

`css`

A URL that points to a custom CSS file to load. Use this to load custom fonts. This option is ignored in the browser. You need to include the CSS in your build manually. (string | URL)

`errorFallback`

Create a fallback node if processing of a mermaid diagram fails. If nothing is returned, the code block is removed. The function receives the following arguments:

node: The mdast code node that couldn’t be rendered.
error: The error message that was thrown.
file: The file on which the error occurred.

`launchOptions`

The options used to launch the browser. (object)

`mermaidConfig`

The mermaid config to use.

`prefix`

A custom prefix to use for Mermaid IDs. (string, default: mermaid)

Credits

This package was originally developed by Thomas Biesaart.

License

MIT © Thomas Biesaart

gatsby-remark-mermaid's People

Contributors

Stargazers

Watchers

Forkers

rheinardkorf jakub-gawlas zmre daninprogress marcbot23 thealbertdev tindalia portableant

gatsby-remark-mermaid's Issues

Adding the configurations for puppeteer

The mermaid diagrams are rendered properly on my end, however it gets an error on the build. Here is the error message:

Failed to launch the browser process!
/tmp/build/node_modules/puppeteer/.local-chromium/linux-970485/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

I looked into the documentation and since I'm running it on Heroku, I must include this configuration:

puppeteer.launch({ args: ['--no-sandbox'] });

I tried using it on gatsby-browser.js like this, but I only got errors instead.

const puppeteer = require('puppeteer')
const browser = await puppeteer.launch({ args: ['--no-sandbox'] })

I'm not really familiar with puppeteer, so where do I need to put this configuration for it to work?

How I got this plugin to work with Puppeteer 5

I'm using Puppeteer 5.2.1 for testing and with that dependency, gatsby-remark-mermaid generated incomplete diagrams. I changed the following settings and it worked with Puppeteer 5. I'd send a PR but I'm not sure if these are correct for everyone.

browser = await puppeteer.launch({args: [
  '--disable-gpu',
  '--disable-dev-shm-usage',
  '--disable-setuid-sandbox',
  '--no-first-run',
  '--no-sandbox',
  '--no-zygote',
  '--single-process',
]});

200 x 200 vieport is too small for some diagrams

E.g. one of the example diagrams from https://mermaidjs.github.io/ (see bellow) is broken when rendered with 200x200 but is ok when rendering with e.g. 800x800.

Other diagrams seem to be unchanged from this change.

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

Actual when 200x200:

Expected when 800x800:

I can send a PR but it's just a few lines so I think you can do it faster ⚡️

May be related to #1

'path/to/chrome/executable' ?!?

actually … where one is supposed to find the correct 'path/to/chrome/executable' ? this is not an issue with the code but the readme.md could be more helpful on this!

Using old version of mermaid

Can this library be updated to use the latest version of mermaid, or require it as a peer dependency?

Pupeteer error when building in azure

I am trying to push and build a site into azure. The site is working nice in my local but when it is pushed to azure it throws this error :

/github/workspace/node_modules/puppeteer/.local-chromium/linux-1011831/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory

The build is being done in a docker image and I am not sure how to fix it, I have seen some troubleshooting for Docker and apparently I need to install last version of chromium browsers with apt-get. Has anyone has an example with the docker build steps and the chromium steps in it? Or another workaround with azure?

Unable to render anything using MDXProvider & MDXRenderer

I can't seem to render anything. I'm rebuilding an existing portfolio site from scratch using gatsby. The data is being pulled from strapi using MDXProvider and is rendered using MDXRenderer. Running this on an Ubuntu 16.04 vps with chromium installed.

strapi entry

```mermaid
graph LR
install[Install Plugin]
install --> configure[Configure Plugin]
configure --> draw[Draw Fancy Diagrams]
```    .

project.js

import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"

<MDXProvider>
   <MDXRenderer>
       {data.strapiProject.childStrapiProjectContent.childMdx.body}
   </MDXRenderer>
</MDXProvider>

gatsby-config.js

{
    resolve: 'gatsby-plugin-mdx',
        options: {
           plugins: [
            {
                resolve: 'gatsby-remark-mermaid',
            }
        ],
            extensions: [".mdx", ".md"]
    },
}

Using gatsby develop I'm able to render the page without any errors. All the other elements are being shown on the page as intended.

Code block part of the HTML:

<pre class="css-0">
    <code class="language-mermaid css-0">
        graph LR
        install[Install Plugin]
        install --&gt; configure[Configure Plugin]
        configure --&gt; draw[Draw Fancy Diagrams]
    </code>
</pre>

The thing is I have no idea on how to identify any errors on the process. How would I go around identifying the issue on the console?

const browser = await puppeteer.launch({
    executablePath: process.env.CHROMIUM_PATH,
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
  });

It's ok if you close it as out of scope for this project.

remcohaszing / gatsby-remark-mermaid Goto Github PK

gatsby-remark-mermaid's Introduction

gatsby-remark-mermaid

Table of COntents

Installation

Usage

Options

browser

css

errorFallback

launchOptions

mermaidConfig

prefix