vue中，代码块显示mermaid代码，点击按钮将代码转为相应的流程图，否则，将流程图转为代码

attachClipboard() {
      const codeElement = document.querySelector(".clipboard-bound");
      if (codeElement) {
        const classNames = codeElement.className.split(" "); // 将类名分割成数组
        this.language = classNames[0].split("-")[1];
      }
      const codes = document.querySelectorAll(
        "pre > code:not(.clipboard-bound)"
      );
      codes.forEach((code) => {
        var codeElement = document.querySelector(".language-mermaid");
        if (codeElement) {
          const codeContent = codeElement.textContent || codeElement.innerText;
          this.code = codeContent;
        }
        var codeElement1 = document.querySelector("pre>code"); //代码
        var classValue = codeElement1.getAttribute("class");
        if (classValue) {
          this.language = classValue.split("-")[1].split(" ")[0];
        }
        const p = document.createElement("button");
        p.className = !this.language ? "unlanguage" : "language";
        p.textContent = this.language;
        p.addEventListener("click", function () {
          // 获取所有包含Mermaid代码块的元素
          const mermaidCodeBlocks = code;
          const isMermaid = document.querySelector(".code-container>pre");
          // 获取Mermaid代码块的内容
          if (!isMermaid) {
            this.mermaidCode = mermaidCodeBlocks.textContent.trim();
            this.mermaidCode = this.mermaidCode.replace(/classDef.*?;/g, "");
            this.mermaidCode = this.mermaidCode.replace(/\b\w+\.\w+\b/g, "");
            this.mermaidCode = this.mermaidCode.replace(/style.*?;/g, "");
            this.mermaidCode = this.mermaidCode.replace(
              /(?:\/\*(?:[\s\S]*?)\*\/)|(?:^\s*\/\/.*$)|(?:note\s+over\s+\w+\s*(?:[\s\S]*?)end\s+note\s*\n?)/gm,
              ""
            );
            // 创建一个新的div元素来容纳渲染后的流程图
            this.mermaidDiagramContainer = document.createElement("pre");
            this.mermaidDiagramContainer.classList.add("mermaid");
            // 使用Mermaid插件渲染流程图并将SVG代码添加到新的div元素中
            try {
              mermaid.mermaidAPI.initialize({
                securityLevel: "loose",
                startOnLoad: false,
              });
              const svgPromise = mermaid.mermaidAPI.render(
                "mermaid",
                this.mermaidCode
              );
              mermaidCodeBlocks.parentNode.replaceChild(
                this.mermaidDiagramContainer,
                mermaidCodeBlocks
              );
              svgPromise
                .then((svg) => {
                  this.mermaidDiagramContainer.innerHTML = svg.svg;
                })
                .catch((error) => {});
            } catch (error) {}
          } else {
            this.mermaidDiagramContainer.parentNode.replaceChild(
              mermaidCodeBlocks,
              this.mermaidDiagramContainer
            );
          }
        });
        const button = document.createElement("button");
        const icon = document.createElement("i");
        icon.classList.add("el-icon-copy-document");
        button.appendChild(icon);
        button.className = "copy-button";
        const container = document.createElement("div");
        container.className = "code-container";

        container.appendChild(p);
        container.appendChild(button);
        code.parentNode.insertBefore(container, code);
        container.appendChild(code);
        code.classList.add("clipboard-bound");

        // 创建包含language容器的div
        const topcontainer = document.createElement("div");
        topcontainer.className = "topcontainer";
        container.appendChild(topcontainer);
        topcontainer.appendChild(p);
        topcontainer.appendChild(button);

        const bottomDiv = document.querySelector(".code-container");
        bottomDiv.addEventListener("scroll", function () {
          const topDiv = document.querySelector(".topcontainer");
          topDiv.style.left = `${bottomDiv.scrollLeft}px`;
          topDiv.style.right = `${-bottomDiv.scrollLeft}px`;
        });
        const clipboard = new Clipboard(button, {
          target: () => code,
        });
        clipboard.on("success", (event) => {
          event.clearSelection();
          this.$message.success({
            message: "复制成功",
            offset: 50,
          });

          setTimeout(() => {
          }, 1500);
        });
      });
    },