Getting mermaid in Astro up and running is support, but takes some doing.

Lets get that set up!

Announcement

The feature was announced here, in the Astro 5.5 release.

I had initially tried to set this up, but didnt have much luck.

We’ll need the rehype-mermaid npm package:

npm install rehype-mermaid

Next we need to add rehype to the astro.config.mjs:

import { defineConfig } from 'astro/config';
import rehypeMermaid from 'rehype-mermaid';

export default defineConfig({
  markdown: {
    syntaxHighlight: {
      type: 'shiki',
      excludeLangs: ['mermaid', 'math'],
    },
    rehypePlugins: [rehypeMermaid],
  },
});

But right off the rip, we hit an error:

1:53:30 PM [vite] (ssr) Error when evaluating SSR module blog/astro.config.mjs: Cannot find package ‘playwright’ imported from blog/node_modules/mermaid-isomorphic/dist/mermaid-isomorphic.js

Oof.

According the README from rehype-mermaid, we also need playwright:

npm install playwright
npx playwright install

The docs recommend using the --with-deps chromium option to the npx install command, but that did not work on Fedora.

See the playwright install instructions, but it took a bit more than this. Running this manually got the deps i needed installed, and playwright working (my system only needed pcre):

sudo dnf install -y \
    libicu \
    libjpeg-turbo \
    libwebp \
    flite \
    pcre \
    libffi

Then npx playwright install still reports a dependencies warning, but worked as expected.

Lets see how it goes!

flowchart LR
  A --> B --> C

gives:

Excellent!

---

One last note, this crashed on push to Github Actions.

We need to install playwright and its deps there, in Actions:

    - name: Install Playwright Browsers
      run: npx playwright install --with-deps

Share: