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 のグラフを出力できる。
参考
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 &#39;@nuxt/content-theme-docs&#39; export...
github.com