test: 图表渲染测试代码

package.json

@@ -37,8 +37,10 @@
     "marked": "^15.0.0",
     "marked-highlight": "^2.2.1",
     "marked-katex-extension": "^5.1.4",
+    "mermaid": "^11.6.0",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.7",
+    "panzoom": "^9.4.3",
     "pinia": "^2.2.2",
     "qs": "^6.14.0",
     "quill": "^2.0.3",

src/assets/svgs/mermaid-error.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748501615425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4103" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M773.029647 202.029176a79.058824 79.058824 0 0 1 79.058824 79.058824v491.941647a79.058824 79.058824 0 0 1-79.058824 79.058824H281.088a79.058824 79.058824 0 0 1-79.058824-79.058824V281.088a79.058824 79.058824 0 0 1 79.058824-79.058824h491.941647z m0 52.705883H281.088a26.352941 26.352941 0 0 0-26.352941 26.352941v491.941647c0 14.546824 11.806118 26.352941 26.352941 26.352941h491.941647a26.352941 26.352941 0 0 0 26.352941-26.352941V281.088a26.352941 26.352941 0 0 0-26.352941-26.352941z" fill="#999999" p-id="4104"></path><path d="M644.999529 459.685647a61.500235 61.500235 0 0 1 80.353883-5.722353l116.193882 87.160471a26.352941 26.352941 0 0 1-31.623529 42.164706l-116.163765-87.130353a8.794353 8.794353 0 0 0-11.504941 0.813176l-83.84753 83.84753a26.352941 26.352941 0 1 1-37.285647-37.25553l83.877647-83.877647zM403.907765 402.160941a26.352941 26.352941 0 0 1 35.478588 38.972235l-193.264941 175.706353a26.352941 26.352941 0 0 1-35.448471-39.002353l193.234824-175.676235z" fill="#999999" p-id="4105"></path><path d="M192.180706 192.180706a26.352941 26.352941 0 0 1 37.285647 0l632.470588 632.470588a26.352941 26.352941 0 1 1-37.285647 37.285647l-632.470588-632.470588a26.352941 26.352941 0 0 1 0-37.285647z" fill="#999999" p-id="4106"></path></svg>
\ No newline at end of file

src/components/markdown-render/markdown-render.vue

@@ -241,4 +241,58 @@ defineExpose({
     border-radius: 2px;
   }
 }
+
+:deep(.mermaid) {
+  background-color: #fff;
+
+  .mermaid-viewer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    height: 300px;
+    overflow: hidden;
+    background-image: radial-gradient(circle, #e4e4e48c 2px, #0000 0);
+    background-size: 30px 30px;
+    border-radius: 12px;
+
+    svg {
+      display: block;
+      max-width: 100% !important;
+    }
+  }
+}
+
+:deep(.mermaid-error) {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 10px;
+  font-family: 'Microsoft YaHei UI';
+  font-size: 14px;
+  color: #999;
+}
+
+:deep(.mermaid-rendering-container) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 200px;
+  height: 300px;
+  background-color: #fff;
+
+  .mermaid-rendering-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: #999;
+    background-image: radial-gradient(circle, #e4e4e48c 2px, #0000 0);
+    background-size: 30px 30px;
+  }
+}
 </style>

src/components/markdown-render/utils/markdown-parser.ts

@@ -2,7 +2,13 @@ import { Marked } from 'marked'
 import { markedHighlight } from 'marked-highlight'
 import DOMPurify from 'dompurify'
 import hljs from 'highlight.js'
+import mermaid from 'mermaid'
+import { nanoid } from 'nanoid'
 import markedKatex, { type MarkedKatexOptions } from 'marked-katex-extension'
+import i18n from '@/locales'
+import panzoom from 'panzoom'
+
+const t = i18n.global.t
 
 const katexOptions: MarkedKatexOptions = {
   throwOnError: false,
@@ -11,14 +17,120 @@ const katexOptions: MarkedKatexOptions = {
   output: 'html',
 }
 
+mermaid.initialize({
+  startOnLoad: false,
+  htmlLabels: true,
+  suppressErrorRendering: true,
+  theme: 'default',
+  securityLevel: 'loose',
+  fontFamily: 'Microsoft YaHei UI',
+  altFontFamily: 'Microsoft YaHei UI',
+  fontSize: 14,
+  themeVariables: {
+    textColor: '#333',
+    pie1: '#94d4c0',
+    pie2: '#fdaf91',
+    pie3: '#afbddb',
+    pie4: '#eeadd5',
+    pieSectionTextSize: '16px',
+    pieLegendTextSize: '16px',
+    pieTitleTextSize: '24px',
+  },
+  pie: {
+    textPosition: 0.6,
+  },
+  flowchart: {
+    useMaxWidth: false,
+  },
+})
+
+// 创建Mermaid扩展
+const createMermaidExtension = () => ({
+  name: 'mermaid',
+  level: 'block' as const,
+  start(src: string) {
+    return src.match(/^```mermaid/)?.index
+  },
+  tokenizer(src: string) {
+    const match = src.match(/^```mermaid\n([\s\S]*?)\n```/)
+    if (match) {
+      return {
+        type: 'mermaid',
+        raw: match[0],
+        text: match[1].trim(),
+      }
+    }
+    return undefined
+  },
+  renderer(token: { text?: string }) {
+    return `<pre class="mermaid">${token.text}</pre>`
+  },
+})
+
+const walkTokens = async (token: any) => {
+  switch (token.type) {
+    case 'mermaid': {
+      try {
+        const mermaidId = `mermaid-${nanoid()}`
+        const { svg } = await mermaid.render(mermaidId, token.text)
+
+        const tempDiv = document.createElement('div')
+        tempDiv.innerHTML = `<div class="mermaid-viewer">${svg}</div>`
+
+        const svgEl = tempDiv.querySelector('.mermaid-viewer svg')
+        if (svgEl) {
+          svgEl.setAttribute('height', '100%')
+          svgEl.setAttribute('width', '100%')
+        }
+
+        token.text = tempDiv.innerHTML
+      } catch (error) {
+        token.text = `<div class="mermaid-error">
+            <div class="bg-svg-mermaid_error h-5 w-5"></div>
+            <span>${t('common_module.mermaid_render_error')}</span>
+          </div>`
+      }
+      break
+    }
+  }
+}
+
+export function initMermaidPanzoom() {
+  setTimeout(() => {
+    const mermaidViewers = document.querySelectorAll('.mermaid-viewer')
+    mermaidViewers.forEach((viewer) => {
+      const svgEl = viewer.querySelector('svg')
+      if (svgEl) {
+        panzoom(svgEl as SVGElement, {
+          maxZoom: 5,
+          minZoom: 0.2,
+          bounds: true,
+          boundsPadding: 0.1,
+        })
+      }
+    })
+  }, 0)
+}
+
 export function createMarkedInst() {
   return new Marked()
-    .use({ gfm: true, async: true, breaks: true })
+    .use({
+      gfm: true,
+      async: true,
+      breaks: true,
+      extensions: [createMermaidExtension()],
+    })
     .use(
       markedHighlight({
         emptyLangClass: 'hljs',
         langPrefix: 'hljs code-container-wrapper language-',
         highlight(code, lang, _info) {
+          if (lang === 'mermaid') {
+            return `<div class="mermaid-rendering-container">
+              <div class="mermaid-rendering-content">${t('common_module.mermaid_rendering')}</div>
+            </div>`
+          }
+
           const language = hljs.getLanguage(lang) ? lang : 'plaintext'
 
           // return hljs.highlight(code, { language }).value
@@ -38,6 +150,7 @@ export function createMarkedInst() {
       }),
     )
     .use(markedKatex(katexOptions))
+    .use({ walkTokens, async: true })
     .use({
       hooks: {
         preprocess(markdown: string) {
@@ -53,6 +166,7 @@ export function createMarkedInst() {
           return katexTextReplace
         },
         postprocess(html: string) {
+          initMermaidPanzoom()
           return DOMPurify.sanitize(html)
         },
       },

src/locales/langs/en.yaml

@@ -165,6 +165,8 @@ common_module:
   output_parameter: 'Output parameter'
   submit_successfully: 'Submit successfully'
   submit_failure: 'Submit failure'
+  mermaid_render_error: 'There is an error in the chart rendering. Please ask again'
+  mermaid_rendering: 'The chart is being rendered...'
 
   dialogue_module:
     continue_question_message: 'You can keep asking questions'

src/locales/langs/zh-cn.yaml

@@ -164,6 +164,8 @@ common_module:
   output_parameter: '输出参数'
   submit_successfully: '提交成功'
   submit_failure: '提交失败'
+  mermaid_render_error: '图表渲染出错了，请重新提问'
+  mermaid_rendering: '图表正在渲染中...'
 
   dialogue_module:
     continue_question_message: '你可以继续提问'

src/locales/langs/zh-hk.yaml

@@ -164,6 +164,8 @@ common_module:
   output_parameter: '輸出參數'
   submit_successfully: '提交成功'
   submit_failure: '提交失敗'
+  mermaid_render_error: '圖表渲染出錯了，請重新提問'
+  mermaid_rendering: '圖表正在渲染中...'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'

vite.config.ts

@@ -46,6 +46,7 @@ export default defineConfig(({ command, mode }) => {
             'marked-highlight': ['marked-highlight'],
             echarts: ['echarts'],
             katex: ['katex'],
+            mermaid: ['mermaid'],
           },
         },
       },