Merge pull request #116 from PengyiZhang/claude/mermaid-enhancement-all

feat: add Mermaid diagram rendering to all markdown views

Author: nashsu

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}

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}

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}