ブログに Mermaid を導入した

追記 2023-04-04

gatsby-remark-mermaid の v3 が出て、移行しようにもこのブログではうまく動いていなかったこと、結局使っていないので調べるのが面倒なことから消した。

なお、v3 は launchOptions.executablePath の指定が必須となっており、そのままでは動かないので注意が必要。Chrome のパスをどのようにしてクロスプラットフォームな形で指定するかという問題が生じるが、それについては puppeteer の機能で取得できるようだった。

gatsby-config.js

import { executablePath } from "puppeteer"
{
  ...
  plugins: [
    ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          ...
          {
            // Must be placed before `gatsby-remark-prismjs`
            resolve: `gatsby-remark-mermaid`,
            options: {
              launchOptions: {
                executablePath: executablePath(),
              },
            },
          },
          `gatsby-remark-prismjs`,
          ...
        ],
      },
    },
    ...
  ],
  ...
}

このブログの記事内に Mermaid の図を埋め込めるようにした。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

正直なところ記事にするほどのことは何もないんだけど、動作確認できる場所が欲しくて記事にした。gatsby-remark-mermaid を導入して、コードブロックとして Mermaid で書くだけでいけた。gatsby-remark-prismjs より先に書かないとそちらに拾われてレンダリングされない点だけ注意が必要だった。

yarn add gatsby-remark-mermaid
yarn add --dev puppeteer

gatsby-config.js

{
  ...
  plugins: [
    ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          ...
          `gatsby-remark-mermaid`, // Must be placed before `gatsby-remark-prismjs`,
          `gatsby-remark-prismjs`,
          ...
        ],
      },
    },
    ...
  ],
  ...
}

index.md

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

なお、Puppeteer は Chrome の入った macOS や Cloudflare Pages のビルド環境では問題なく動作したが、WSL2 上の Ubuntu では依存するパッケージのインストールが必要だった。

仕事では PlantUML を使うことが多いけど、GitHub, Obsidian など個人的に使いたい周辺ツールが Mermaid で固まりつつあったので Mermaid がいいのかなと思った。