From ecd891ef9b44ba618cc3aa5e8eefd9efc585dc84 Mon Sep 17 00:00:00 2001
From: PyZhang <1259156776@qq.com>
Date: Sat, 2 May 2026 15:17:51 +0800
Subject: [PATCH] feat: add Mermaid diagram rendering to wiki reader, file
 preview, and research panel

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/components/editor/file-preview.tsx   | 7 +++++++
 src/components/editor/wiki-reader.tsx    | 7 +++++++
 src/components/layout/research-panel.tsx | 7 +++++++
 3 files changed, 21 insertions(+)

diff --git a/src/components/editor/file-preview.tsx b/src/components/editor/file-preview.tsx
index 7261b0a7..f0bb9d8d 100644
--- a/src/components/editor/file-preview.tsx
+++ b/src/components/editor/file-preview.tsx
@@ -20,6 +20,7 @@ import { resolveMarkdownImageSrc } from "@/lib/markdown-image-resolver"
 import { parseFrontmatter } from "@/lib/frontmatter"
 import { FrontmatterPanel } from "@/components/editor/frontmatter-panel"
 import { useWikiStore } from "@/stores/wiki-store"
+import { MermaidDiagram } from "@/components/mermaid-diagram"
 
 interface FilePreviewProps {
   filePath: string
@@ -223,6 +224,12 @@ function TextPreview({ filePath, content, label }: { filePath: string; content:
             td: ({ children, ...props }) => (
               <td className="border border-border/60 px-3 py-1.5" {...props}>{children}</td>
             ),
+            code: ({ className, children, ...props }) => {
+              const lang = className?.replace("language-", "")
+              const codeText = String(children).replace(/\n$/, "")
+              if (lang === "mermaid") return <MermaidDiagram code={codeText} />
+              return <code className={className} {...props}>{children}</code>
+            },
           }}
         >
           {body}
diff --git a/src/components/editor/wiki-reader.tsx b/src/components/editor/wiki-reader.tsx
index bf74c675..daa96497 100644
--- a/src/components/editor/wiki-reader.tsx
+++ b/src/components/editor/wiki-reader.tsx
@@ -9,6 +9,7 @@ import { resolveRelatedSlug } from "@/lib/wiki-page-resolver"
 import { resolveMarkdownImageSrc } from "@/lib/markdown-image-resolver"
 import { normalizePath } from "@/lib/path-utils"
 import { useWikiStore } from "@/stores/wiki-store"
+import { MermaidDiagram } from "@/components/mermaid-diagram"
 
 interface WikiReaderProps {
   body: string
@@ -113,6 +114,12 @@ export function WikiReader({ body }: WikiReaderProps) {
               {children}
             </td>
           ),
+          code: ({ className, children, ...props }) => {
+            const lang = className?.replace("language-", "")
+            const codeText = String(children).replace(/\n$/, "")
+            if (lang === "mermaid") return <MermaidDiagram code={codeText} />
+            return <code className={className} {...props}>{children}</code>
+          },
         }}
       >
         {transformed}
diff --git a/src/components/layout/research-panel.tsx b/src/components/layout/research-panel.tsx
index 459f3dcc..64d5796c 100644
--- a/src/components/layout/research-panel.tsx
+++ b/src/components/layout/research-panel.tsx
@@ -15,6 +15,7 @@ import { readFile } from "@/commands/fs"
 import { queueResearch } from "@/lib/deep-research"
 import { normalizePath } from "@/lib/path-utils"
 import { isImeComposing } from "@/lib/keyboard-utils"
+import { MermaidDiagram } from "@/components/mermaid-diagram"
 
 export function ResearchPanel() {
   const tasks = useResearchStore((s) => s.tasks)
@@ -183,6 +184,12 @@ function SynthesisBlock({ synthesis, isStreaming }: { synthesis: string; isStrea
               td: ({ children, ...props }) => (
                 <td className="border border-border/60 px-3 py-1.5" {...props}>{children}</td>
               ),
+              code: ({ className, children, ...props }) => {
+                const lang = className?.replace("language-", "")
+                const codeText = String(children).replace(/\n$/, "")
+                if (lang === "mermaid") return <MermaidDiagram code={codeText} />
+                return <code className={className} {...props}>{children}</code>
+              },
             }}
           >
             {answer}