howlwindy
commented
1 week ago If you want to use mermaid, this solution below works for me.
- Install mermaid and markdown-it-diagram.
pnpm add mermaid markdown-it-diagram - Usage of
markdown-it-diagram.// .vitepress/config.mts
import diagram from 'markdown-it-diagram'
export default defineConfig({ markdown: { config: (md) => { md.use(diagram, { showController: true, }) }, }, })
3. Create the component use for initialization.
```vue
// Diagram.vue
<script setup lang="ts">
import { markdownItDiagramDom } from 'markdown-it-diagram/dom'
import mermaid from 'mermaid'
import { onMounted } from 'vue'
onMounted(async () => {
mermaid.initialize({
startOnLoad: false,
})
await mermaid.run()
markdownItDiagramDom()
})
</script>
<template>
<div>
<slot />
</div>
</template>- Registering
diagram.vueglobally.// .vitepress/theme/index.ts
import Diagram from '@components/Diagram.vue' import type { Theme } from 'vitepress'
export default { enhanceApp({ app }) { app.component('Diagram', Diagram) }, } satisfies Theme
5. Writing in `.md`.
``````markdown
<!--diagram.md-->
<Diagram>
```mermaid
graph TD
A-->B
A-->C
B-->D
C-->D
6. If you wanna import `.md` to another, please do this below.
```typescript
// .vitepress/config.mts
import diagram from 'markdown-it-diagram'
export default defineConfig({
markdown: {
cache: false, // if it is `true`, HMR is not working when update `diagram.md`
config: (md) => {
md.use(diagram, {
showController: true,
})
},
},
})<!--index.md-->
<!--@include: ./diagram.md-->
Describe the bug
Constraints.md
frame.md fragment
Expected behavior
Mermaid diagram included and shown. No such an error previously.
System Info
Additional context
Package.json