概要

AstroでもMermaidを表示できるようにしたいと思いソース修正したので対応内容をメモしておく。

Astroでは astro.config.mjs でのシンタックスハイライト設定の違いで```によるpreタグのHTML変換結果が変化する。 そのままpreタグに変換する場合や、preタグの中にcodeタグ、さらにcodeタグの中にdivタグが追加される設定もある。 mermaid.jsをそのままscriptタグで反映させても大抵の場合うまく表示できない。

そのため、rehype-mermaid というライブラリを提供してくれている方がいるので、そちらを使わせていただく。 このライブラリでは依存関係としてPlaywrightのインストールが必要でビルド時にブラウザをインストールするのは少々重い。 ただし、ビルド時にmermaidをSVG等に変換しなければPlaywrightで使うブラウザのインストールは不要なので 多少描画が遅くなってしまうが、Playwrightのブラウザをインストールしない方法にした。

https://github.com/remcohaszing/rehype-mermaid

手順

rehype-mermaidのインストールをする。依存関係としてplaywright本体も必要だった。

npm install rehype-mermaid
npm install playwright

このサイトはCloudFlare Pagesを使用しているが、最新版の3.0.0ではビルドがうまくいかなかった。 原因は不明だが、2.1.0にバージョンを下げたところビルドができたので現状はこのバージョンを使う。

4:31:49 PM [vite] Error when evaluating SSR module /opt/buildhome/repo/astro.config.mjs: failed to import "rehype-mermaid"
|- TypeError: (intermediate value).resolve is not a function
    at file:///opt/buildhome/repo/node_modules/mermaid-isomorphic/dist/mermaid-isomorphic.js:2:26
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[astro] Unable to load your Astro config

(intermediate value).resolve is not a function
  Stack trace:
    at file:///opt/buildhome/repo/node_modules/mermaid-isomorphic/dist/mermaid-isomorphic.js:2:26
Failed: Error while executing user command. Exited with error code: 1
Failed: build command exited with code: 1
Failed: error occurred while running build command

続いて、 astro.config.mjs を指定する。 シンタックスハイライトはここではprismを使用している。 rehypePluginsでrehype-mermaidを指定しているが、設定でpre-mermaidを設定することでPlaywirghtのブラウザをインストール(npx playwright install)する必要がなくなった。ただし、playwright本体のインストールは必要。

export default defineConfig({
  ...
  markdown: {
    syntaxHighlight: 'prism',
    rehypePlugins: [
      [rehypeMermaid, {strategy: 'pre-mermaid' }],
    ]
  }
});

最後にヘッダなどでmermaid側の設定をする。プラグインにより初期化するだけでJavaScript側でmermaidに変換できるようなhtmlに変換してくれる。

https://mermaid.js.org/intro/getting-started.html

<script>
    mermaid.initialize({securityLevel: 'loose'});
</script>

これで準備完了。以下のようにmermaidを表示できた。

sequenceDiagram
    participant Alice
    participant Bob
    Bob->>Alice: Hi Alice
    Alice->>Bob: Hi Bob