ふとしです。

GitHub で使えるようになるという噂の Mermaid を試してみたところ具合が良かったので、このブログに導入したという感じです。表題の Nuxt3 beta はこのブログですね。

Mermaid 読み込み

ブラウザでのみ使用するのでクライアントプラグイン mermaid.client.ts を作成して、ブラウザ側でのみ import されるようにしました。

そして helpers を使ってどこからでも参照できるようにしておきます。

yarn add mermaid @types/mermaid

描画タイミングによって自動で reder されたりされなかったりすると処理がめんどうなので、自動 render は無効にしておきます。

import mermaid, { Mermaid } from 'mermaid';

export default defineNuxtPlugin(() => {
  mermaid.initialize({
    startOnLoad: false,
  });

  return {
    provide: {
      MERMAID: mermaid,
    },
  };
});

export function useMermaid(): Mermaid {
  return useNuxtApp()['#MERMAID'];
}

Mermaid 適用

HTML が描画されてから呼ばれなくてはならないので ref を使って描画を待ってから手動で render しました。

const containerRef = ref<null | HTMLElement>(null);

watch(
  () => containerRef.value,
  (v) => {
    if (!v) {
      return;
    }
    v.querySelectorAll<HTMLDivElement>('div.mermaid').forEach((dom) => {
      useMermaid().mermaidAPI.render(
        'なんらかのID',
        dom.innerText,
        (v) => (dom.innerHTML = v)
      );
    });
  }
);

確認

HTML を書いて

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

以下に描画されていますでしょうか。

便利ですね。