Nuxt Content で mermaid を利用する方法

Published: 2022/4/9

mermaid は、原理的には SSR/SSG 時点で SVG 形式での出力が可能な気もするが、しかし以下のスレッドにあるように、内部で利用している d3.js などの制約により、ブラウザで動作する前提になってしまう。

To SVG Export · Issue #146 · mermaid-js/mermaid

Is there a way to compile text to SVG? Like this: var svg = mermaid.toSVG(text); This is by far the most necessary function for this library. Other stuff, like including the full he library and tra...

github.com

代替案としては、 Nuxt Content は任意の vue component 埋め込むことができるので、それを利用しながら、かつ、 mermaid 用のグローバルなコンポーネントを用意してやること。その際、この処理は、 rehype-raw によって実現されるので、その記法に従うように記述を行う。

---
title: example
---

<mermaid>
  graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Server01]
    B --> D[Server02]
</mermaid>

<!-- components/mermaid.vue -->
<template>
  <div class="mermaid">
    <slot />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  mounted() {
    // @ts-ignore
    import("mermaid/dist/mermaid").then(m => {
      m.initialize({
        startOnLoad: true
      });
      m.init();
    });
  }
})
</script>

このようにすることで、例えば以下のような、 mermaid のグラフを出力できる。

graph TD A[Client] --> B[Load Balancer] B --> C[Server01] B --> D[Server02]

参考

Docs theme with additional Plugins | Adding MermaidJs to NuxtJs [Solved] · Issue #746 · nuxt/content

Hello, i want to implement a vue-mermaid plugin inside my nuxt-docs app. Since the nuxt.config.js got exported I cant import plugins like import theme from '@nuxt/content-theme-docs' export...

github.com