How to setup Mermaid Plugin for VitePress

Introduction

Mermaid is a popular open-source tool for generating diagrams and flowcharts. Vitepress is a static site generator that is built on top of Vue.

For example, if we want to display the request-response flow of a NGINX proxied upstream we'll write :

graph LR

  A[Client] -->|HTTP Request| B(NGINX Frontend)
  B -->|Proxied HTTP Request| C[Upstream App Server]
  C -->|Proxied HTTP Response| B
  B -->|HTTP Response| A

This translates to :

Getting rid of Vitepress Uncaught SyntaxError: ambiguous indirect export: default

The current issue is that vitepress-plugin-mermaid no longer works out of the box because of dependencies versions being incompatible. I spent some time figuring out a working config.

Installing Mermaid Plugin for Vitepress

To install Mermaid Plugin for Vitepress, run the following command in your terminal:

npm i vitepress-plugin-mermaid mermaid @mermaid-js/mermaid-mindmap -D

Important : Now modify package.json with the versions hereunder :

...
    "devDependencies": {
        "@mermaid-js/mermaid-mindmap": "^9.3.0",
        "mermaid": "^8.14.0",
        "vitepress": "^1.0.0-beta.1",
        "vitepress-plugin-mermaid": "^2.0.10",
...

Newer versions can work but at the time I write this, I found this is the only working setup.

Then modify .vitepress/config.ts such as :

import { defineConfig } from 'vitepress'
import { withMermaid } from "vitepress-plugin-mermaid";


export default withMermaid(
  defineConfig({
    vite: {
      optimizeDeps: { include: ['@braintree/sanitize-url'] },
      resolve: {
          alias: {
            dayjs: 'dayjs/',
          },
        },
    },
...

Notes :

• Look twice at the config : withMermaid directive shall be added to encapsulate the configuration
• optimizeDeps and resolve are required to avoid the error Uncaught SyntaxError: ambiguous indirect export: default

Discover more content ?

Do you want to learn more and faster with dense and tailored technical resources ?