Can i use mermaid gatsby-plugin in this theme?

[havefunatcode]

While using the starter portfolio theme you worked on, I wanted to add mermaid to my blog post, so I found gatsby-plugin page for mermaid(https://www.gatsbyjs.com/plugins/gatsby-remark-mermaid/), and I set gatsby-config.js to apply it.

I attach my code.

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-portfolio-minimal",
      options: {
        siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/", // Used for sitemap generation
        manifestSettings: {
          favicon: "./content/images/favicon.png", // Path is relative to the root
          siteName: "My Minimal Portfolio", // Used in manifest.json
          shortName: "Portfolio", // Used in manifest.json
          startUrl: "/", // Used in manifest.json
          backgroundColor: "#FFFFFF", // Used in manifest.json
          themeColor: "#000000", // Used in manifest.json
          display: "minimal-ui", // Used in manifest.json
        },
        contentDirectory: "./content",
        blogSettings: {
          path: "/blog", // Defines the slug for the blog listing page
          usePathPrefixForArticles: false, // Default true (i.e. path will be /blog/first-article)
        },
        // googleAnalytics: {
        //     trackingId: "UA-XXXXXX-X",
        //     anonymize: true, // Default true
        //     environments: ["production", "development"] // Default ["production"]
        // }
      },
    },
    {
      resolve: `gatsby-remark-mermaid`,
      options: {
        launchOptions: {
          executablePath: './content'
        },
        svgo: {
          plugins: [{ name: 'removeTitle', active: false }]
        },
        mermaidOptions: {
          theme: 'neutral',
          themeCSS: '.node rect { fill: #fff; }'
        }
      }
    },
  ],
};

I hope it's work. but it doesn't. I'm a junior java developer, so I'm very inexperienced with js. Could you please advise how to apply it?

[konstantinmuenster]

Hey @havefunatcode!

I am not sure if this will work out of the box. At first glance, you could try two things:

1. Replace the current plugin entry with the object below.
2. Try to find the right executablePath for puppeteer (e.g. this issue)

    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            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; }'
              }
            }
          }
        ]
      }
    }

[havefunatcode]

Thanks for your help.

There's an issue where letters break when you draw the following chart, but it works properly when you apply the answers you've!

Thanks!! :)