Nuxt Content で mermaid を利用する方法

Published: 2022/4/9


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

代替案としては、 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]

参考


Tags: nuxtmermaid

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags