[#63734] support mermaid diagrams

package.json

@@ -15,6 +15,7 @@
     "test": "PW_TEST_HTML_REPORT_OPEN=never playwright test -c tests/playwright.config.js --reporter html"
   },
   "dependencies": {
+    "@agoose77/markdown-it-mermaid": "^1.1.0",
     "@codemirror/commands": "^6.2.4",
     "@codemirror/lang-markdown": "^6.2.3",
     "@codemirror/merge": "@6.0.0",

src/hooks/useText.js

@@ -4,6 +4,7 @@ import markdownIt from "markdown-it";
 import { markdownReplacer, useCustomRoles } from "./markdownReplacer";
 import { useCallback, useEffect, useMemo, useReducer, useState } from "preact/hooks";
 import IMurMurHash from "imurmurhash";
+import markdownItMermaid from "@agoose77/markdown-it-mermaid";
 
 const countOccurences = (str, pattern) => (str?.match(pattern) || []).length;
 
@@ -62,7 +63,12 @@ export const useText = ({ initialText, transforms, customRoles, preview }) => {
   }, []);
 
   const markdown = useMemo(
-    () => markdownIt({ breaks: true, linkify: true }).use(markdownitDocutils).use(markdownReplacer(transforms)).use(useCustomRoles(customRoles)),
+    () =>
+      markdownIt({ breaks: true, linkify: true })
+        .use(markdownitDocutils)
+        .use(markdownReplacer(transforms))
+        .use(useCustomRoles(customRoles))
+        .use(markdownItMermaid),
     [],
   );