monolithic kernel

ブログに Mermaid を導入した

November 16, 2022

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

A
B
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 がいいのかなと思った。