diff --git a/src/index.ts b/src/index.ts
index b34dadc59..7024eb8ae 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 import "./assets/scss/index.scss";
 import VditorMethod from "./method";
+import * as adapter from "./ts/adapter";
 import {Constants, VDITOR_VERSION} from "./ts/constants";
 import {DevTools} from "./ts/devtools/index";
 import {Hint} from "./ts/hint/index";
diff --git a/src/ts/adapter.ts b/src/ts/adapter.ts
new file mode 100644
index 000000000..171dff0cf
--- /dev/null
+++ b/src/ts/adapter.ts
@@ -0,0 +1,33 @@
+export const mathRenderAdapter = {
+    getCode: (mathElement: Element) => mathElement.textContent,
+    getMathElements: (element: HTMLElement) => element.querySelectorAll(".language-math"),
+};
+export const mermaidRenderAdapter = {
+    /** 不仅要返回code，并且需要将 code 设置为 el 的 innerHTML */
+    getCode: (el: Element) => el.textContent,
+    getMathElements: (element: HTMLElement) => element.querySelectorAll(".language-mermaid"),
+};
+export const mindmapRenderAdapter = {
+    getCode: (el: Element) => el.getAttribute("data-code"),
+    getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-mindmap"),
+};
+export const chartRenderAdapter = {
+    getCode: (el: Element) => el.innerHTML,
+    getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-echarts"),
+};
+export const abcRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-abc"),
+};
+export const graphvizRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
+};
+export const flowchartRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),
+};
+export const plantumlRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getMathElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-plantuml"),
+};
diff --git a/src/ts/markdown/abcRender.ts b/src/ts/markdown/abcRender.ts
index 7b55755e2..65cd765a4 100644
--- a/src/ts/markdown/abcRender.ts
+++ b/src/ts/markdown/abcRender.ts
@@ -1,3 +1,4 @@
+import {abcRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
@@ -6,7 +7,7 @@ declare const ABCJS: {
 };
 
 export const abcRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
-    const abcElements = element.querySelectorAll(".language-abc");
+    const abcElements = abcRenderAdapter.getMathElements(element);
     if (abcElements.length > 0) {
         addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript").then(() => {
             abcElements.forEach((item: HTMLDivElement) => {
@@ -17,7 +18,7 @@ export const abcRender = (element: (HTMLElement | Document) = document, cdn = Co
                 if (item.getAttribute("data-processed") === "true") {
                     return;
                 }
-                ABCJS.renderAbc(item, item.textContent.trim());
+                ABCJS.renderAbc(item, abcRenderAdapter.getCode(item).trim());
                 item.style.overflowX = "auto";
                 item.setAttribute("data-processed", "true");
             });
diff --git a/src/ts/markdown/chartRender.ts b/src/ts/markdown/chartRender.ts
index 09028723c..9720e0d7b 100644
--- a/src/ts/markdown/chartRender.ts
+++ b/src/ts/markdown/chartRender.ts
@@ -1,3 +1,4 @@
+import {chartRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
@@ -6,7 +7,7 @@ declare const echarts: {
 };
 
 export const chartRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
-    const echartsElements = element.querySelectorAll(".language-echarts");
+    const echartsElements = chartRenderAdapter.getMathElements(element);
     if (echartsElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             echartsElements.forEach((e: HTMLDivElement) => {
@@ -15,7 +16,7 @@ export const chartRender = (element: (HTMLElement | Document) = document, cdn =
                     return;
                 }
 
-                const text = e.innerText.trim();
+                const text = chartRenderAdapter.getCode(e).trim();
                 if (!text) {
                     return;
                 }
diff --git a/src/ts/markdown/flowchartRender.ts b/src/ts/markdown/flowchartRender.ts
index 70abc4b53..0e9a84284 100644
--- a/src/ts/markdown/flowchartRender.ts
+++ b/src/ts/markdown/flowchartRender.ts
@@ -1,3 +1,4 @@
+import {flowchartRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
@@ -6,7 +7,7 @@ declare const flowchart: {
 };
 
 export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const flowchartElements = element.querySelectorAll(".language-flowchart");
+    const flowchartElements = flowchartRenderAdapter.getMathElements(element);
     if (flowchartElements.length === 0) {
         return;
     }
@@ -15,7 +16,7 @@ export const flowchartRender = (element: HTMLElement, cdn = Constants.CDN) => {
             if (item.getAttribute("data-processed") === "true") {
                 return;
             }
-            const flowchartObj = flowchart.parse(item.textContent);
+            const flowchartObj = flowchart.parse(flowchartRenderAdapter.getCode(item));
             item.innerHTML = "";
             flowchartObj.drawSVG(item);
             item.setAttribute("data-processed", "true");
diff --git a/src/ts/markdown/graphvizRender.ts b/src/ts/markdown/graphvizRender.ts
index 4c083fb4d..5ada90d8a 100644
--- a/src/ts/markdown/graphvizRender.ts
+++ b/src/ts/markdown/graphvizRender.ts
@@ -1,42 +1,44 @@
+import {graphvizRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
 declare class Viz {
     public renderSVGElement: (code: string) => Promise<any>;
 
-    constructor({}: { worker: Worker });
+    constructor({ }: { worker: Worker });
 }
 
 export const graphvizRender = (element: HTMLElement, cdn = Constants.CDN) => {
-    const graphvizElements = element.querySelectorAll(".language-graphviz");
+    const graphvizElements = graphvizRenderAdapter.getMathElements(element);
 
     if (graphvizElements.length === 0) {
         return;
     }
     addScript(`${cdn}/dist/js/graphviz/viz.js`, "vditorGraphVizScript").then(() => {
         graphvizElements.forEach((e: HTMLDivElement) => {
+            const code = graphvizRenderAdapter.getCode(e);
             if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
                 e.parentElement.classList.contains("vditor-ir__marker--pre")) {
                 return;
             }
 
-            if (e.getAttribute("data-processed") === "true" || e.textContent.trim() === "") {
+            if (e.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
 
             try {
                 const blob = new Blob([`importScripts('${(document.getElementById("vditorGraphVizScript") as HTMLScriptElement).src.replace("viz.js", "full.render.js")}');`],
-                    {type: "application/javascript"});
+                    { type: "application/javascript" });
                 const url = window.URL || window.webkitURL;
                 const blobUrl = url.createObjectURL(blob);
                 const worker = new Worker(blobUrl);
-                new Viz({worker})
-                    .renderSVGElement(e.textContent).then((result: HTMLElement) => {
-                    e.innerHTML = result.outerHTML;
-                }).catch((error) => {
-                    e.innerHTML = `graphviz render error: <br>${error}`;
-                    e.className = "vditor-reset--error";
-                });
+                new Viz({ worker })
+                    .renderSVGElement(code).then((result: HTMLElement) => {
+                        e.innerHTML = result.outerHTML;
+                    }).catch((error) => {
+                        e.innerHTML = `graphviz render error: <br>${error}`;
+                        e.className = "vditor-reset--error";
+                    });
             } catch (e) {
                 console.error("graphviz error", e);
             }
diff --git a/src/ts/markdown/mathRender.ts b/src/ts/markdown/mathRender.ts
index 3c553b612..32d3fcba7 100644
--- a/src/ts/markdown/mathRender.ts
+++ b/src/ts/markdown/mathRender.ts
@@ -1,3 +1,4 @@
+import {mathRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript, addScriptSync} from "../util/addScript";
 import {addStyle} from "../util/addStyle";
@@ -17,7 +18,7 @@ declare global {
 }
 
 export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?: IMath }) => {
-    const mathElements = element.querySelectorAll(".language-math");
+    const mathElements = mathRenderAdapter.getMathElements(element);
 
     if (mathElements.length === 0) {
         return;
@@ -49,7 +50,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
                 if (mathElement.getAttribute("data-math")) {
                     return;
                 }
-                const math = code160to32(mathElement.textContent);
+                const math = code160to32(mathRenderAdapter.getCode(mathElement));
                 mathElement.setAttribute("data-math", math);
                 try {
                     mathElement.innerHTML = katex.renderToString(math, {
@@ -87,7 +88,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
         if (!window.MathJax) {
             window.MathJax = {
                 loader: {
-                    paths: {mathjax: `${options.cdn}/dist/js/mathjax`},
+                    paths: { mathjax: `${options.cdn}/dist/js/mathjax` },
                 },
                 startup: {
                     typeset: false,
@@ -120,7 +121,7 @@ export const mathRender = (element: HTMLElement, options?: { cdn?: string, math?
             });
         };
         window.MathJax.startup.promise.then(() => {
-            const chains: any [] = [];
+            const chains: any[] = [];
             for (let i = 0; i < mathElements.length; i++) {
                 const mathElement = mathElements[i];
                 if (!mathElement.parentElement.classList.contains("vditor-wysiwyg__pre") &&
diff --git a/src/ts/markdown/mermaidRender.ts b/src/ts/markdown/mermaidRender.ts
index d6fb22070..da334097f 100644
--- a/src/ts/markdown/mermaidRender.ts
+++ b/src/ts/markdown/mermaidRender.ts
@@ -1,3 +1,4 @@
+import {mermaidRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
@@ -7,7 +8,7 @@ declare const mermaid: {
 };
 
 export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
-    const mermaidElements = element.querySelectorAll(".language-mermaid");
+    const mermaidElements = mermaidRenderAdapter.getMathElements(element);
     if (mermaidElements.length === 0) {
         return;
     }
@@ -115,7 +116,8 @@ export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN, theme:
         }
         mermaid.initialize(config);
         mermaidElements.forEach((item) => {
-            if (item.getAttribute("data-processed") === "true" || item.textContent.trim() === "") {
+            const code = mermaidRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
                 return;
             }
             mermaid.init(undefined, item);
diff --git a/src/ts/markdown/mindmapRender.ts b/src/ts/markdown/mindmapRender.ts
index 0ec165456..bc308b8fe 100644
--- a/src/ts/markdown/mindmapRender.ts
+++ b/src/ts/markdown/mindmapRender.ts
@@ -1,3 +1,4 @@
+import {mindmapRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
@@ -6,7 +7,7 @@ declare const echarts: {
 };
 
 export const mindmapRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
-    const mindmapElements = element.querySelectorAll(".language-mindmap");
+    const mindmapElements = mindmapRenderAdapter.getMathElements(element);
     if (mindmapElements.length > 0) {
         addScript(`${cdn}/dist/js/echarts/echarts.min.js`, "vditorEchartsScript").then(() => {
             mindmapElements.forEach((e: HTMLDivElement) => {
@@ -14,7 +15,7 @@ export const mindmapRender = (element: (HTMLElement | Document) = document, cdn
                     e.parentElement.classList.contains("vditor-ir__marker--pre")) {
                     return;
                 }
-                const text = e.getAttribute("data-code");
+                const text = mindmapRenderAdapter.getCode(e);
                 if (!text) {
                     return;
                 }
diff --git a/src/ts/markdown/plantumlRender.ts b/src/ts/markdown/plantumlRender.ts
index 1f87da71b..cbcba9ad3 100644
--- a/src/ts/markdown/plantumlRender.ts
+++ b/src/ts/markdown/plantumlRender.ts
@@ -1,3 +1,4 @@
+import {plantumlRenderAdapter} from "../adapter";
 import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
 
@@ -6,7 +7,7 @@ declare const plantumlEncoder: {
 };
 
 export const plantumlRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
-    const plantumlElements = element.querySelectorAll(".language-plantuml");
+    const plantumlElements = plantumlRenderAdapter.getMathElements(element);
     if (plantumlElements.length === 0) {
         return;
     }
@@ -16,7 +17,7 @@ export const plantumlRender = (element: (HTMLElement | Document) = document, cdn
                 e.parentElement.classList.contains("vditor-ir__marker--pre")) {
                 return;
             }
-            const text = e.textContent.trim();
+            const text = plantumlRenderAdapter.getCode(e).trim();
             if (!text) {
                 return;
             }