November 16, 2022
このブログの記事内に Mermaid の図を埋め込めるようにした。
正直なところ記事にするほどのこと は何もないんだけど、動作確認できる場所が欲しくて記事にした。gatsby-remark-mermaid
を導入して、コードブロックとして Mermaid で書くだけでいけた。gatsby-remark-prismjs
より先に書かないとそちらに拾われてレンダリングされない点だけ注意が必要だった。
yarn add gatsby-remark-mermaid
yarn add --dev puppeteer
{
...
plugins: [
...
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
...
`gatsby-remark-mermaid`, // Must be placed before `gatsby-remark-prismjs`,
`gatsby-remark-prismjs`,
...
],
},
},
...
],
...
}
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
なお、Puppeteer は Chrome の入った macOS や Cloudflare Pages のビルド環境では問題なく動作したが、WSL2 上の Ubuntu では依存するパッケージのインストールが必要だった。
仕事では PlantUML を使うことが多いけど、GitHub, Obsidian など個人的に使いたい周辺ツールが Mermaid で固まりつつあったので Mermaid がいいのかなと思った。