feat(zbugs): support mermaid diagrams

Author: tantaman

apps/zbugs/package.json

@@ -36,6 +36,7 @@
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-mermaidjs": "4.1.1",
     "wouter": "^3.3.5"
   },
   "devDependencies": {

apps/zbugs/src/components/markdown-internal.tsx

@@ -1,9 +1,13 @@
 import MarkdownBase from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+// import mermaid from 'rehype-mermaid';
+import mermaid from 'remark-mermaidjs';
 
 /**
  * Do not import this component directly. Use `Markdown` instead.
  */
 export default function Markdown({children}: {children: string}) {
-  return <MarkdownBase rehypePlugins={[remarkGfm]}>{children}</MarkdownBase>;
+  return (
+    <MarkdownBase remarkPlugins={[remarkGfm, mermaid]}>{children}</MarkdownBase>
+  );
 }