fix(files): render mermaid diagrams in markdown preview using design tokens

Streamdown intercepts fenced code blocks before components.code is called,
so the previous mermaid branch in the code renderer was dead code. Add a
remarkMermaid plugin that transforms mermaid code nodes at the MDAST stage
via data.hName/hProperties so remark-rehype emits a <mermaid-diagram>
element that our MermaidDiagram component handles. This avoids Streamdown's
built-in mermaid renderer which uses mismatched Tailwind semantic classes.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -96,6 +96,33 @@ export const PreviewPanel = memo(function PreviewPanel({
 
 const CALLOUT_TYPES = new Set(['NOTE', 'TIP', 'WARNING', 'IMPORTANT', 'CAUTION'])
 
+function remarkMermaid() {
+  return (tree: { type: string; children?: unknown[] }) => {
+    function processNode(node: {
+      type: string
+      children?: unknown[]
+      lang?: string
+      value?: string
+      data?: Record<string, unknown>
+    }) {
+      if (!node.children) return
+      for (const child of node.children) {
+        const c = child as typeof node
+        if (c.type === 'code' && c.lang === 'mermaid') {
+          c.data = {
+            hName: 'mermaid-diagram',
+            hProperties: { definition: c.value ?? '' },
+            hChildren: [],
+          }
+        } else {
+          processNode(c)
+        }
+      }
+    }
+    processNode(tree)
+  }
+}
+
 function remarkCallouts() {
   return (tree: { type: string; children?: unknown[] }) => {
     function processNode(node: { type: string; children?: unknown[] }) {
@@ -140,7 +167,7 @@ function remarkCallouts() {
   }
 }
 
-const REMARK_PLUGINS = [remarkGfm, remarkBreaks, remarkCallouts]
+const REMARK_PLUGINS = [remarkGfm, remarkBreaks, remarkMermaid, remarkCallouts]
 const REHYPE_PLUGINS = [rehypeSlug]
 
 /**
@@ -320,6 +347,9 @@ function resolveSimFileUrl(src: string | undefined): string | undefined {
 
 const STATIC_MARKDOWN_COMPONENTS = {
   pre: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  'mermaid-diagram': ({ definition }: { definition?: string }) => (
+    <MermaidDiagram definition={definition ?? ''} />
+  ),
   p: ({ children }: { children?: React.ReactNode }) => (
     <p className='mb-3 break-words text-[14px] text-[var(--text-primary)] leading-[1.6] last:mb-0'>
       {children}
@@ -392,10 +422,6 @@ const STATIC_MARKDOWN_COMPONENTS = {
     const langRaw = langMatch?.[1] ?? ''
     const codeString = extractTextContent(children)
 
-    if (langRaw === 'mermaid') {
-      return <MermaidDiagram definition={codeString} />
-    }
-
     if (!codeString) {
       return (
         <code className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[var(--caution)]'>
@@ -728,6 +754,7 @@ const MarkdownPreview = memo(function MarkdownPreview({
         remarkPlugins={REMARK_PLUGINS}
         rehypePlugins={REHYPE_PLUGINS}
         components={MARKDOWN_COMPONENTS}
+        allowedTags={{ 'mermaid-diagram': ['definition'] }}
       >
         {markdownContent}
       </Streamdown>