feat: markdown mermaid

package.json

@@ -29,6 +29,7 @@
     "html-to-image": "^1.11.11",
     "katex": "^0.16.4",
     "markdown-it": "^13.0.1",
+    "mermaid-it-markdown": "^1.0.8",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.33",
     "vue": "^3.2.47",

src/views/chat/components/Message/Text.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, onUpdated, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
-import mdKatex from '@vscode/markdown-it-katex'
-import mila from 'markdown-it-link-attributes'
+import MdKatex from '@vscode/markdown-it-katex'
+import MdLinkAttributes from 'markdown-it-link-attributes'
+import MdMermaid from 'mermaid-it-markdown'
 import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { t } from '@/locales'
@@ -35,8 +36,7 @@ const mdi = new MarkdownIt({
   },
 })
 
-mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
-mdi.use(mdKatex)
+mdi.use(MdLinkAttributes, { attrs: { target: '_blank', rel: 'noopener' } }).use(MdKatex).use(MdMermaid)
 
 const wrapClass = computed(() => {
   return [

src/views/chat/components/Message/style.less

@@ -57,6 +57,14 @@
 		}
 	}
 
+	// Mermaid
+	div[id^='mermaid-container'] {
+		padding: 4px;
+		border-radius: 4px;
+		overflow-x: auto !important;
+		background-color: #fff;
+		border: 1px solid #e5e5e5;
+	}
 
 	&.markdown-body-generate>dd:last-child:after,
 	&.markdown-body-generate>dl:last-child:after,