Mermaid (gatsby-remark) doesn't seem to work

[Willem]

Hi,

I am trying to use Mermaid to make graphs in my markdown files. I followed the instructions on the gatsby plugin site but it doesn't seem to work.

I tried to add the following to a markdown page:

```mermaid
classDiagram
Notification<|--User
Notification<|--Recurrence
User : int UserID()
Notification : int NotificationID()
Notification : int UserID()
Notification : string Message()
Notification : int RecurrenceID()
Notification : int Interval()
Notification : date StartingDate()
Recurrence : int RecurrenceID()
Recurrence : string Message()

But I didn't get the graph in my page. I only got a codeblock with the text in it.

I suspect I did something wrong in the gatsby.config.js but I can't put my finger on it.

Could you help me?

[Praveen Durairaju]

Hi @wserr - You don't need to use gatsby-transformer-remark when gatsby-plugin-mdx is used to parse markdown already. The config can be updated to specifically just use gatsby-remark-mermaid plugin.

Here's a sample config that you can try:

{
    resolve: 'gatsby-plugin-mdx',
    options: {
      gatsbyRemarkPlugins: [
      {
        resolve: 'gatsby-remark-mermaid',
      },
      {
          resolve: "gatsby-remark-images",
          options: {
            maxWidth: 1035,
            sizeByPixelDensity: true
          }
        },
        {
          resolve: 'gatsby-remark-copy-linked-files'
        }
      ],
      extensions: [".mdx", ".md"]
    }
  }

[Willem]

I modified the gatsby-config.js as you stated. I then tried to add a mermaid graph to a page.

When I try this, I get the following error when loading this page:

The GraphQL query from /home/willem/homebrew/Docs/src/templates/docs.js failed.

Errors:
  Failed to launch chrome!
/home/willem/homebrew/Docs/node_modules/puppeteer/.local-chromium/linux-686378/chrome-

linux/chrome: error while loading shared libraries: libX11-xcb.so.1: 
cannot open shared object file: No such file or directory

This is a screenshot from the error in my browser:

[Andrey Nikiforov]

@wserr If you are running in docker, you'll need to provide special care for puppeteer as described here

[Cygra Wang]

Ran into this issue as well, my gatsby-remark-mermaid doesn't seem to work at the beginning.

In my circumstance, the solution is to move gatsby-remark-mermaid to the first place of all the plugins under gatsby-transformer-remark. The order seems to have effect.