support mermaid

[xu4wang]

As a software developer, I need to draw sequence diagram everyday. I am wondering is it easy to add mermaid support?

BR,Austin

[Tahul]

Hey @xu4wang ;

I think you can add Mermaid support to your Content Wind website by adding https://github.com/temando/remark-mermaid to @nuxt/content configuration.

https://content.nuxtjs.org/api/configuration#markdown

Here is a link to the guidelines about adding remark plugins!

Hope this can help :)

[xu4wang]

@Tahul thanks for you help.

Do you mind share me a working nuxt configuration?

Below is my version:

export default defineNuxtConfig({
  extends: 'content-wind',
  content: {
    documentDriven: true,
    highlight: {
      theme: {
        dark: 'github-dark',
        default: 'github-light'
      }
    },
    markdown: {
      // Object syntax can be used to override default options
      remarkPlugins: {
        // Override remark-emoji options
        'remark-emoji': {
          emoticon: true
        },
        // Disable remark-gfm
        'remark-gfm': false,
        //add mermaid
        'remark-mermaid': {
        },
        // Add remark-oembed
        'remark-oembed': {
          // Options
        }
      },
      // Array syntax can be used to add plugins
      rehypePlugins: [
        'rehype-figure'
      ]
    }
  }
})

I did install

$ npm install remark-mermaid mermaid.cli

However, when I use mermaid in the markdown file:

```mermaid
graph LR
Start --> Stop
```

The graph was not generated, instead it shows the mermaid source in a code block.

[ytsurk]

Install instructions from say https://www.npmjs.com/package/remark-mermaid, you should install mermaid.cli too.

[xu4wang]

Install instructions from say https://www.npmjs.com/package/remark-mermaid, you should install mermaid.cli too.

thanks for the reply. are you able to render mermaid diagram? I did install mermaid.cli