Component is missing template or render function.

[ezzle]

Describe the bug

index.js:123 [Vue warn]: Component is missing template or render function. 
  at <VueMermaidString value="flowchart TB\n                Frame(\"<div class='diagram-frame'><div class='diagram-frame-frametype'><img class='diagram-frame-frametype-icon' src='/icons/file-code-solid.svg' alt='Icon for facet' width='16em' height='16em'><a href='/graph/diagramly/facet/'>facet</a></div><div class='diagram-frame-name'>:CONSTRAINTS</div></div>\")\n                Frametype(\"<div class='diagram-frametype'><div class='diagram-frametype-title'><img class='diagram-frametype-title-icon' src='/icons/shapes-solid.svg' alt='Icon for frametype' width='36px' height='36px'></div><div class='diagram-frametype-value'><img class='diagram-frametype-value-icon' src='/icons/file-solid.svg' alt='Icon for class' width='14em' height='14em'><a href='/graph/diagramly/facet/'>facet</a></div></div>\")\n                Frame --> |\"<div class='label'>frametype</div>\"| Frametype\n                Type(\"<div class='diagram-type'><div class='diagram-type-title'><img class='diagram-type-title-icon' src='/icons/shapes-solid.svg' alt='Icon' width='36px' height='36px'></div><div class='diagram-type-value'><img class='diagram-type-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--standard-facet'>:STANDARD-FACET</a></div></div>\")            \n                Frame ---> |\"<div class='label'>type</div>\"| Type\n\n        SuperType(\"<div class='diagram-supertype'><div class='diagram-supertype-title'><img class='diagram-supertype-title-icon' src='/icons/network-wired-solid.svg' alt='Icon' width='48px' height='48px'></div><div class='diagram-supertype-values'><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--facet'>:FACET</a></div><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--meta-class'>:META-CLASS</a></div><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--system-class'>:SYSTEM-CLASS</a></div><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--thing'>:THING</a></div></div></div>\")\n                Frame ----> |\"<div class='label'>supertype</div>\"| SuperType\n\n            " > 
  at <Constraints onVnodeMounted=fn<runCbs> onVnodeUpdated=fn<runCbs> > 
  at <VitePressContent> 
  at <VPHome key=2 > 
  at <VPContent> 
  at <Layout> 
  at <Layout> 
  at <VitePressApp>
warn2 @ runtime-core.esm-bundler.js:41
finishComponentSetup @ runtime-core.esm-bundler.js:7352
setupStatefulComponent @ runtime-core.esm-bundler.js:7265
setupComponent @ runtime-core.esm-bundler.js:7197
mountComponent @ runtime-core.esm-bundler.js:5599
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
mountChildren @ runtime-core.esm-bundler.js:5284
mountElement @ runtime-core.esm-bundler.js:5191
processElement @ runtime-core.esm-bundler.js:5156
patch @ runtime-core.esm-bundler.js:5028
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
componentUpdateFn @ runtime-core.esm-bundler.js:5708
run @ reactivity.esm-bundler.js:178
instance.update @ runtime-core.esm-bundler.js:5814
setupRenderEffect @ runtime-core.esm-bundler.js:5822
mountComponent @ runtime-core.esm-bundler.js:5612
processComponent @ runtime-core.esm-bundler.js:5565
patch @ runtime-core.esm-bundler.js:5040
render2 @ runtime-core.esm-bundler.js:6332
mount @ runtime-core.esm-bundler.js:3824
app.mount @ runtime-dom.esm-bundler.js:1431
(anonymous) @ index.js:123
Promise.then (async)
(anonymous) @ index.js:120
Promise.then (async)
(anonymous) @ index.js:118
Show 83 more frames
Show less
--constraints.md:74 undefined

### Reproduction

Constraints.md

---
{
  "layout": "home",
  "hero": {
    "image": {
      "src": "/icons/green/big/map.svg",
      "alt": "Diagram Icon"
    },
    "name": "DiagramLy Facet",
    "text": ":CONSTRAINTS",
    "tagline": "Type [:STANDARD-FACET]",
    "actions": [
      {
        "theme": "brand",
        "text": "ArchimateLy",
        "link": "/graph/archimately/facet/--constraints"
      },
      {
        "theme": "brand",
        "text": "XmLy",
        "link": "/graph/xmly/facet/--constraints"
      },
      {
        "theme": "brand",
        "text": "JsonLy",
        "link": "/graph/jsonly/facet/--constraints"
      },
      {
        "theme": "brand",
        "text": "CsvLy",
        "link": "/graph/csvly/facet/--constraints"
      },
      {
        "theme": "brand",
        "text": "CardLy",
        "link": "/graph/facet/--constraints"
      },
      {
        "theme": "alt",
        "text": "Classes",
        "link": "/graph/diagramly/class/"
      },
      {
        "theme": "alt",
        "text": "Slots",
        "link": "/graph/diagramly/slot/"
      },
      {
        "theme": "alt",
        "text": "Facets",
        "link": "/graph/diagramly/facet/"
      },
      {
        "theme": "alt",
        "text": "Simple Instances",
        "link": "/graph/diagramly/simple_instance/"
      }
    ]
  },
  "diagram": "flowchart TB\n                Frame(\"<div class='diagram-frame'><div class='diagram-frame-frametype'><img class='diagram-frame-frametype-icon' src='/icons/file-code-solid.svg' alt='Icon for facet' width='16em' height='16em'><a href='/graph/diagramly/facet/'>facet</a></div><div class='diagram-frame-name'>:CONSTRAINTS</div></div>\")\n                Frametype(\"<div class='diagram-frametype'><div class='diagram-frametype-title'><img class='diagram-frametype-title-icon' src='/icons/shapes-solid.svg' alt='Icon for frametype' width='36px' height='36px'></div><div class='diagram-frametype-value'><img class='diagram-frametype-value-icon' src='/icons/file-solid.svg' alt='Icon for class' width='14em' height='14em'><a href='/graph/diagramly/facet/'>facet</a></div></div>\")\n                Frame --> |\"<div class='label'>frametype</div>\"| Frametype\n                Type(\"<div class='diagram-type'><div class='diagram-type-title'><img class='diagram-type-title-icon' src='/icons/shapes-solid.svg' alt='Icon' width='36px' height='36px'></div><div class='diagram-type-value'><img class='diagram-type-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--standard-facet'>:STANDARD-FACET</a></div></div>\")            \n                Frame ---> |\"<div class='label'>type</div>\"| Type\n\n        SuperType(\"<div class='diagram-supertype'><div class='diagram-supertype-title'><img class='diagram-supertype-title-icon' src='/icons/network-wired-solid.svg' alt='Icon' width='48px' height='48px'></div><div class='diagram-supertype-values'><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--facet'>:FACET</a></div><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--meta-class'>:META-CLASS</a></div><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--system-class'>:SYSTEM-CLASS</a></div><div class='diagram-supertype-value'><img class='diagram-supertype-value-icon' src='/icons/file-solid.svg' alt='Icon' width='14em' height='14em'><a href='/graph/diagramly/class/--thing'>:THING</a></div></div></div>\")\n                Frame ----> |\"<div class='label'>supertype</div>\"| SuperType\n\n            "
}
---
:::tip Facet :CONSTRAINTS Diagram
<!--@include: @/fragment/graph/diagramly/frame.md-->
:::

frame.md fragment

<br/>

<vue-mermaid-string :value="$frontmatter.diagram" />

<script>
import * as VueMermaidString from "vue-mermaid-string";
//import endent from "endent";
//import tinycolor from "tinycolor2";

// https://www.paletton.com/#uid=73+1p0k2O++00++00++7n++be+Z
let colorDefs = [
  { color: "#FFE9F0", saturateStroke: -5 },
  { color: "#F3FFE9", darkenStroke: 60, saturateStroke: -5 },
  { color: "#FFF9E9", darkenStroke: 50, saturateStroke: 10 },
];

colorDefs = colorDefs.map((colorDef) => ({
  darkenStroke: 20,
  saturateStroke: 0,
  ...colorDef,
}));

const style = (node, colorIndex) => {
  const colorDef = colorDefs[colorIndex];
  const fill = colorDef.color;
  const stroke = tinycolor(colorDef.color)
    .darken(colorDef.darkenStroke)
    .saturate(colorDef.saturateStroke)
    .toString();
  return `style ${node} fill: ${fill}, stroke: ${stroke}`;
};

export default {
  /*computed: {
    diagram: () => endent`
    flowchart TB
      Frame["♠ << Abstract>> <br/>Frame<br/><br/><br/>fab:fa-twitter<br/><br/><br/><br/><br/>"]
      subgraph FrameType["FrameType <br/><br/><br/>"]
        direction LR
        Class["Class<br/>"]
        Slot
        Facet
        SimpleInstance
      end
      Class --> |frametype| Frame
      Slot --> |frametype| Frame
      Facet --> |frametype| Frame
      SimpleInstance ---> |frametype| Frame
      Frame ---x |own_slot_value| OwnSlotValue ---> |slot_reference| Slot
      OwnSlotValue --> |value_type| Frame
      OwnSlotValue --x |value| Frame
      Frame --- |type| Class
      Frame --x |supertype| Class
      Class --x |superclass| Class
      Class --x |template_facet_value| TemplateFacetValue --> |slot_reference| Slot
      TemplateFacetValue ---> |facet_reference| Facet
      TemplateFacetValue --> |value_type| Frame
      TemplateFacetValue --x |value| Frame
      subgraph PrimitiveType
        String
        Boolean
        Integer
        Float
        Symbol
      end
      TemplateFacetValue ---> |value_type| PrimitiveType 
      TemplateFacetValue ---> |value| PrimitiveType
      OwnSlotValue ---> |value_type| PrimitiveType 
      OwnSlotValue --> |value| PrimitiveType
      KnowledgeBase[(KnowledgeBase)] --x Frame
      
    `,
  },*/
  components: {
    VueMermaidString,
  },
  mounted() {
    console.log(this.diagram)
  }
};
</script>

<style>
/*#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}*/
[data-processed] {
     display: flex; 
     justify-content: center; 
     align-items: center;
     
}
div.tip.custom-block {
    margin:2% 5% 0 5%;
    /*background-color: rgb(205, 150, 105, .1618);*/
    background-color: var(--vp-c-bg);                             
}
/*.custom-block-title {
    font-size: 1.382em;
}*/

.diagram-frame {
  display: flex;
  flex-direction: column;
  justify-content: center; 
}
.diagram-frame-frametype-icon {
  margin:0 5px 0 0;
}
.diagram-frame-name {
  margin: 5px 15px 0 15px;
  padding: 2px;
  color: #9370db;
  font-size: 1.382em;
  opacity: .9618;
  font-weight: bolder;
}
.diagram-frametype, .diagram-type, .diagram-supertype, .diagram-superclass, .diagram-templateslot, .diagram-ownslotvalue, .diagram-templatefacetvalue {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.diagram-frametype-value, .diagram-type-value, .diagram-supertype-values, .diagram-superclass-values, .diagram-templateslot-values, .diagram-ownslotvalue-value, .diagram-ownslotvalue-value-slotvalue-item, .diagram-templatefacetvalue-value {
  margin: 5px 20px 0 5px;
}
.diagram-frametype-value-icon, .diagram-type-value-icon, .diagram-supertype-value-icon, .diagram-superclass-value-icon, .diagram-templateslot-value-icon, .diagram-ownslotvalue-title-icon, .diagram-ownslotvalue-value-slotvalue-item-valuetype-icon, .diagram-ownslotvalue-value-slotvalue-item-valuecontent-icon, .diagram-ownslotvalue-value-slotreference-icon, .diagram-templatefacetvalue-value-slotreference-icon, .diagram-templatefacetvalue-value-facetreference-icon,
.archimate-application-data-object-icon {
  margin:0 5px 0 0;
}
.diagram-supertype-values, .diagram-templateslot-values, .diagram-ownslotvalue-value-slotvalues, .diagram-ownslotvalue-value, .diagram-ownslotvalue-value-slotvalue-item, .diagram-templatefacetvalue-value {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.diagram-ownslotvalue-value, .diagram-templatefacetvalue-value {
  border-color:#9370db;
  border-style: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}
.diagram-templatefacetvalue-value-slotreference, .diagram-templatefacetvalue-value-facetreference {
  margin:0 20px 0 0px;
}
.diagram-ownslotvalue-value-slotvalue-item {
  margin:0 15px 0 15px;
}
.main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
}
/*.main div {
  align-self: start;
  padding: 0 15px 0 0;
  margin:0 15px 0 15px;
}*/
img {
  display: inline;
  vertical-align: text-bottom;
  fill:green;
}
.scope {
  fill:#bbf;
  stroke:#f66;
  stroke-width:2px;
  color:#fff;
  stroke-dasharray: 5 5;
}
.marker {
  stroke: #9370db !important;
  fill: #9370db !important;
}
.flowchart-link {
  stroke: #9370db !important;
}

html:not(.dark) div.label {
  background-color:var(--vp-c-bg) !important;
  color:#9370db !important;
  border-color:white !important;
  padding:5px !important;
}

html.dark div.label {
  background-color:var(--vp-c-bg) !important;
  color:#9370db !important;
  border-color:var(--vp-c-bg) !important;
  padding:5px !important;
}
.basic.label-container {
  stroke: #9370db !important;
  stroke-width:3 !important;
  fill:#E6FFFA !important;
}
.nodes  .node:nth-child(1) .basic.label-container {
  fill: #ECECFF !important;
}
.marker {
  stroke: #9370db !important;
  fill: #9370db !important;
}
.flowchart-link {
  stroke: #9370db !important;
}

.custom-block-title {
  font-size: 1.382em;
  display: flex !important;
  justify-content: space-evenly !important;
}
</style>

Expected behavior

Mermaid diagram included and shown.
No such an error previously.

System Info

Text
System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 6.39 GB / 15.88 GB
  Binaries:
    Node: 18.15.0 - D:\Tools\Nodejs\18.15.0\node.EXE
    npm: 9.8.1 - D:\Tools\Nodejs\18.15.0\npm.CMD
    pnpm: 8.6.3 - D:\Tools\Nodejs\18.15.0\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (117.0.2045.47)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vitepress: v1.0.0-rc.20 => 1.0.0-rc.20

Additional context

Package.json

{
  "type": "module",
  "devDependencies": {
    "vitepress": "v1.0.0-rc.20",
    "vue": "^3.3.4"
  },
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  },
  "dependencies": {
    "mermaid": "^8.8.3",
    "nanoid": "^4.0.0",
    "vue-mermaid-string": "^4.0.69"
  }
}

´´´´

### Validations

- [X] Check if you're on the [latest VitePress version](https://github.com/vuejs/vitepress/releases/latest).
- [X] Follow our [Code of Conduct](https://vuejs.org/about/coc.html)
- [X] Read the [docs](https://vitepress.dev).
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[howlwindy]

If you want to use mermaid, this solution below works for me.

1. Install mermaid and markdown-it-diagram.

pnpm add mermaid markdown-it-diagram

2. 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.

// 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>

4. Registering diagram.vue globally.

// .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.

<!--diagram.md-->

<Diagram>

```mermaid
graph TD
  A-->B
  A-->C
  B-->D
  C-->D
```

</Diagram>

6. If you wanna import .md to another, please do this below.

// .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-->