mermaid添加实现

package-lock.json

@@ -8,6 +8,7 @@
 			"name": "vue-manage-system",
 			"version": "5.5.0",
 			"dependencies": {
+				"@agoose77/markdown-it-mermaid": "^1.1.0",
 				"@element-plus/icons-vue": "*",
 				"@wangeditor/editor": "^5.1.23",
 				"@wangeditor/editor-for-vue": "^5.1.12",
@@ -15,6 +16,7 @@
 				"clipboard": "^2.0.11",
 				"countup.js": "^2.8.0",
 				"cropperjs": "^2.0.0",
+				"d3": "^7.9.0",
 				"dompurify": "^3.2.4",
 				"echarts": "^5.5.0",
 				"echarts-wordcloud": "^2.1.0",
@@ -23,6 +25,7 @@
 				"js-md5": "^0.8.3",
 				"katex": "^0.16.21",
 				"markdown-it": "^14.1.0",
+				"markdown-it-emoji": "^3.0.0",
 				"markdown-it-highlightjs": "^4.2.0",
 				"markdown-it-katex": "^2.0.3",
 				"markdown-it-mermaid": "^0.2.5",
@@ -51,6 +54,118 @@
 				"vue-tsc": "^0.38.4"
 			}
 		},
+		"node_modules/@agoose77/markdown-it-mermaid": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/@agoose77/markdown-it-mermaid/-/markdown-it-mermaid-1.1.0.tgz",
+			"integrity": "sha512-DIDgGazLgcT3M60xJYXaiFZQG9UzkCl55mDpU+XucjHlPuTb80fYwZJr0Cw5uAqVScY1a4shY7QlNbObnVO4VQ==",
+			"dependencies": {
+				"markdown-it": "^13.0.1",
+				"mermaid": "^9.1.7"
+			}
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/@braintree/sanitize-url": {
+			"version": "6.0.4",
+			"resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
+			"integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/dagre-d3-es": {
+			"version": "7.0.9",
+			"resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.9.tgz",
+			"integrity": "sha512-rYR4QfVmy+sR44IBDvVtcAmOReGBvRCWDpO2QjYwqgh9yijw6eSHBqaPG/LIOEy7aBsniLvtMW6pg19qJhq60w==",
+			"dependencies": {
+				"d3": "^7.8.2",
+				"lodash-es": "^4.17.21"
+			}
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/dompurify": {
+			"version": "2.4.3",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
+			"integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/elkjs": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz",
+			"integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ=="
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/entities": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+			"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/linkify-it": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+			"integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+			"dependencies": {
+				"uc.micro": "^1.0.1"
+			}
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/markdown-it": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+			"integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+			"dependencies": {
+				"argparse": "^2.0.1",
+				"entities": "~3.0.1",
+				"linkify-it": "^4.0.1",
+				"mdurl": "^1.0.1",
+				"uc.micro": "^1.0.5"
+			},
+			"bin": {
+				"markdown-it": "bin/markdown-it.js"
+			}
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/mdurl": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+			"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/mermaid": {
+			"version": "9.4.3",
+			"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-9.4.3.tgz",
+			"integrity": "sha512-TLkQEtqhRSuEHSE34lh5bCa94KATCyluAXmFnNI2PRZwOpXFeqiJWwZl+d2CcemE1RS6QbbueSSq9QIg8Uxcyw==",
+			"dependencies": {
+				"@braintree/sanitize-url": "^6.0.0",
+				"cytoscape": "^3.23.0",
+				"cytoscape-cose-bilkent": "^4.1.0",
+				"cytoscape-fcose": "^2.1.0",
+				"d3": "^7.4.0",
+				"dagre-d3-es": "7.0.9",
+				"dayjs": "^1.11.7",
+				"dompurify": "2.4.3",
+				"elkjs": "^0.8.2",
+				"khroma": "^2.0.0",
+				"lodash-es": "^4.17.21",
+				"non-layered-tidy-tree-layout": "^2.0.2",
+				"stylis": "^4.1.2",
+				"ts-dedent": "^2.2.0",
+				"uuid": "^9.0.0",
+				"web-worker": "^1.2.0"
+			}
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/uc.micro": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+		},
+		"node_modules/@agoose77/markdown-it-mermaid/node_modules/uuid": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+			"integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+			"funding": [
+				"https://github.com/sponsors/broofa",
+				"https://github.com/sponsors/ctavan"
+			],
+			"bin": {
+				"uuid": "dist/bin/uuid"
+			}
+		},
 		"node_modules/@antfu/install-pkg": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.0.0.tgz",
@@ -3314,6 +3429,11 @@
 				"markdown-it": "bin/markdown-it.mjs"
 			}
 		},
+		"node_modules/markdown-it-emoji": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-3.0.0.tgz",
+			"integrity": "sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg=="
+		},
 		"node_modules/markdown-it-highlightjs": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz",

package.json

@@ -8,6 +8,7 @@
 		"serve": "vite preview"
 	},
 	"dependencies": {
+		"@agoose77/markdown-it-mermaid": "^1.1.0",
 		"@element-plus/icons-vue": "*",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
@@ -15,6 +16,7 @@
 		"clipboard": "^2.0.11",
 		"countup.js": "^2.8.0",
 		"cropperjs": "^2.0.0",
+		"d3": "^7.9.0",
 		"dompurify": "^3.2.4",
 		"echarts": "^5.5.0",
 		"echarts-wordcloud": "^2.1.0",
@@ -23,6 +25,7 @@
 		"js-md5": "^0.8.3",
 		"katex": "^0.16.21",
 		"markdown-it": "^14.1.0",
+		"markdown-it-emoji": "^3.0.0",
 		"markdown-it-highlightjs": "^4.2.0",
 		"markdown-it-katex": "^2.0.3",
 		"markdown-it-mermaid": "^0.2.5",

src/views/system/gen-chat.vue

@@ -99,15 +99,14 @@ import hljs from "highlight.js";
 import { Session } from "@/types/session";
 import { FindSessionService } from "@/api/session";
 import markdownItHighlightjs from 'markdown-it-highlightjs';
-import mermaid from 'mermaid';
+import markdownItKatex from 'markdown-it-katex';
-import markdownItMermaid from 'markdown-it-mermaid';
+import mermaidPlugin from "@agoose77/markdown-it-mermaid";
 import "katex/dist/katex.min.css";
 interface Message {
   role: "user" | "assistant";
   content: string;
   finished?: boolean;
 }
-mermaid.initialize({ startOnLoad: false });
 
 const md = new MarkdownIt();
 md.use(markdownItHighlightjs, {
@@ -115,7 +114,10 @@ md.use(markdownItHighlightjs, {
   auto: true,
   code: true,
 });
-md.use(markdownItMermaid);
+md.use(markdownItKatex);
+md.use(mermaidPlugin);
+
+//md.use(markdownItMermaid);
 
 const historySessions = ref<Session[]>([]);
 const loading = ref(false);
@@ -147,6 +149,11 @@ const copyCode = (code: string) => {
 const doButtonD = () => {
   const codeBlocks = document.querySelectorAll('pre code');
   codeBlocks.forEach((codeBlock) => {
+    //先查看是否已经添加了复制按钮
+    if (codeBlock.parentNode.querySelector('.code-controls')) {
+      return;
+    }
+
     // 获取代码类型
     const codeType = codeBlock.className.replace('hljs ', '');
     // 创建代码类型显示元素
@@ -185,6 +192,7 @@ const doButtonD = () => {
     pre.insertBefore(controlsContainer, codeBlock);
   });
 
+
 };
 
 onMounted(() => {
@@ -227,6 +235,7 @@ onMounted(() => {
       const assistantMessage = messages[messages.length - 1];
       assistantMessage.finished = true;
       loading.value = false;
+      doButtonD();
     }
     nextTick(() => {
       scrollToBottom(); // 新增滚动调用

yarn.lock

@@ -2,6 +2,14 @@
 # yarn lockfile v1
 
 
+"@agoose77/markdown-it-mermaid@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@agoose77/markdown-it-mermaid/-/markdown-it-mermaid-1.1.0.tgz"
+  integrity sha512-DIDgGazLgcT3M60xJYXaiFZQG9UzkCl55mDpU+XucjHlPuTb80fYwZJr0Cw5uAqVScY1a4shY7QlNbObnVO4VQ==
+  dependencies:
+    markdown-it "^13.0.1"
+    mermaid "^9.1.7"
+
 "@antfu/install-pkg@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.0.0.tgz"
@@ -32,6 +40,11 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@braintree/sanitize-url@^6.0.0":
+  version "6.0.4"
+  resolved "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz"
+  integrity sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==
+
 "@braintree/sanitize-url@^6.0.1":
   version "6.0.4"
   resolved "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz"
@@ -1164,14 +1177,14 @@ cytoscape-cose-bilkent@^4.1.0:
   dependencies:
     cose-base "^1.0.0"
 
-cytoscape-fcose@^2.2.0:
+cytoscape-fcose@^2.1.0, cytoscape-fcose@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz"
   integrity sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==
   dependencies:
     cose-base "^2.2.0"
 
-cytoscape@^3.2.0, cytoscape@^3.28.1, cytoscape@^3.29.3:
+cytoscape@^3.2.0, cytoscape@^3.23.0, cytoscape@^3.28.1, cytoscape@^3.29.3:
   version "3.31.1"
   resolved "https://registry.npmjs.org/cytoscape/-/cytoscape-3.31.1.tgz"
   integrity sha512-Hx5Mtb1+hnmAKaZZ/7zL1Y5HTFYOjdDswZy/jD+1WINRU8KVi1B7+vlHdsTwY+VCFucTreoyu1RDzQJ9u0d2Hw==
@@ -1476,6 +1489,14 @@ dagre-d3-es@7.0.11:
     d3 "^7.9.0"
     lodash-es "^4.17.21"
 
+dagre-d3-es@7.0.9:
+  version "7.0.9"
+  resolved "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.9.tgz"
+  integrity sha512-rYR4QfVmy+sR44IBDvVtcAmOReGBvRCWDpO2QjYwqgh9yijw6eSHBqaPG/LIOEy7aBsniLvtMW6pg19qJhq60w==
+  dependencies:
+    d3 "^7.8.2"
+    lodash-es "^4.17.21"
+
 dagre-d3-renderer@^0.4.25:
   version "0.4.26"
   resolved "https://registry.npmjs.org/dagre-d3-renderer/-/dagre-d3-renderer-0.4.26.tgz"
@@ -1559,6 +1580,11 @@ dompurify@^3.2.4:
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
+dompurify@2.4.3:
+  version "2.4.3"
+  resolved "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz"
+  integrity sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
@@ -1608,6 +1634,11 @@ element-plus@^2.6.3:
     memoize-one "^6.0.0"
     normalize-wheel-es "^1.2.0"
 
+elkjs@^0.8.2:
+  version "0.8.2"
+  resolved "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz"
+  integrity sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==
+
 elkjs@^0.9.0:
   version "0.9.3"
   resolved "https://registry.npmjs.org/elkjs/-/elkjs-0.9.3.tgz"
@@ -2153,6 +2184,11 @@ magic-string@^0.30.7:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+markdown-it-emoji@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-3.0.0.tgz"
+  integrity sha512-+rUD93bXHubA4arpEZO3q80so0qgoFJEKRkRbjKX8RTdca89v2kfyF+xR3i2sQTwql9tpPZPOQN5B+PunspXRg==
+
 markdown-it-highlightjs@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/markdown-it-highlightjs/-/markdown-it-highlightjs-4.2.0.tgz"
@@ -2174,6 +2210,17 @@ markdown-it-mermaid@^0.2.5:
   dependencies:
     mermaid "^7.1.2"
 
+markdown-it@^13.0.1:
+  version "13.0.2"
+  resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz"
+  integrity sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==
+  dependencies:
+    argparse "^2.0.1"
+    entities "~3.0.1"
+    linkify-it "^4.0.1"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.5"
+
 markdown-it@^13.0.2:
   version "13.0.2"
   resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz"
@@ -2343,6 +2390,28 @@ mermaid@^7.1.2:
     lodash "^4.17.4"
     moment "^2.20.1"
 
+mermaid@^9.1.7:
+  version "9.4.3"
+  resolved "https://registry.npmjs.org/mermaid/-/mermaid-9.4.3.tgz"
+  integrity sha512-TLkQEtqhRSuEHSE34lh5bCa94KATCyluAXmFnNI2PRZwOpXFeqiJWwZl+d2CcemE1RS6QbbueSSq9QIg8Uxcyw==
+  dependencies:
+    "@braintree/sanitize-url" "^6.0.0"
+    cytoscape "^3.23.0"
+    cytoscape-cose-bilkent "^4.1.0"
+    cytoscape-fcose "^2.1.0"
+    d3 "^7.4.0"
+    dagre-d3-es "7.0.9"
+    dayjs "^1.11.7"
+    dompurify "2.4.3"
+    elkjs "^0.8.2"
+    khroma "^2.0.0"
+    lodash-es "^4.17.21"
+    non-layered-tidy-tree-layout "^2.0.2"
+    stylis "^4.1.2"
+    ts-dedent "^2.2.0"
+    uuid "^9.0.0"
+    web-worker "^1.2.0"
+
 micromark-core-commonmark@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz"
@@ -3041,7 +3110,7 @@ strip-literal@^1.0.0:
   dependencies:
     acorn "^8.10.0"
 
-stylis@^4.1.3, stylis@^4.3.6:
+stylis@^4.1.2, stylis@^4.1.3, stylis@^4.3.6:
   version "4.3.6"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz"
   integrity sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==