@southball/remark-mermaid を作った

Astro で 個人ブログ を作ったけど、Mermaid diagram も使いたかったので Remark のプラグインを作った。ライブラリのページは ここからアクセスできる。

すでに remark-mermaid というライブラリがあるけど、2018 年から更新されてなく、かつ生成された HTML をインライン化する機能がないので、ゼロから作ることにした。

さて、作ろう！

もともと mermaid のライブラリ を使ってそのまま SVG を生成しようと思ってたけど、実は ライブラリで SVG を生成する関数がなかった ので、mermaid-cli で生成することにした。

https://github.com/southball/remark-mermaid/blob/d95484dcb47d0791bcbeb5d3b27caaac8da55ffc/src/index.ts#L18-L29

そして README.md を書いて、0.1.1 をリリースして、それで終わりと思ってたんですが...

neutral テーマと dark テーマの SVG を両方生成して、ダークテーマだったら dark、ライトテーマだったら neutral テーマのダイアグラムを表示するようにしていたが、矢印の定義の ID が一緒なので、ライトテーマかダークテーマのときしか矢印が表示されなかった。

それを解決するため、ID を書き換える必要があるので、jsdom で使われている ID を取得し、ID と ID への参照をすべて書き換えた。

https://github.com/southball/remark-mermaid/blob/main/src/index.ts#L20-L39

実際動いている様子は？

https://blog.southball.dev/posts/20230115-mermaid/ から確認できる。

デスクトップの Google Chrome でダークテーマ・ライトテーマを切り替える方法は この記事 に書いてある。