feat: support mermaid charts in markdown renderer

package.json

@@ -153,6 +153,7 @@
     "jsonc-parser": "^3.3.1",
     "katex": "^0.16.45",
     "lucide-react": "^0.564.0",
+    "mermaid": "^11.12.2",
     "minimatch": "^10.1.1",
     "mobx": "^6.15.0",
     "mobx-react-lite": "^4.1.1",

src/renderer/lib/ui/markdown-renderer.tsx

@@ -12,6 +12,7 @@ import { useTheme } from '@renderer/lib/hooks/useTheme';
 import { rpc } from '@renderer/lib/ipc';
 import { cn } from '@renderer/utils/utils';
 import { normalizeLatexDelimiters } from './markdown-latex';
+import { MermaidDiagram } from './mermaid-diagram';
 
 type Variant = 'full' | 'compact';
 
@@ -106,6 +107,29 @@ type WithChildrenAndClass = { children?: React.ReactNode; className?: string };
 type AnchorProps = { href?: string; children?: React.ReactNode };
 type ImgProps = { src?: string; alt?: string };
 
+function getCodeBlock(children: React.ReactNode, className?: string) {
+  const language = /language-(\w+)/.exec(className || '')?.[1] ?? '';
+  const isBlock = className?.includes('language-') ?? false;
+  const code = String(children).replace(/\n$/, '');
+  return { code, isBlock, language };
+}
+
+function renderMermaidCodeBlock(
+  children: React.ReactNode,
+  className: string | undefined,
+  isDark: boolean,
+  compact?: boolean
+) {
+  const { code, isBlock, language } = getCodeBlock(children, className);
+  if (!isBlock || language !== 'mermaid') return null;
+  return <MermaidDiagram chart={code} isDark={isDark} compact={compact} />;
+}
+
+function isOnlyMermaidDiagramChild(children: React.ReactNode): boolean {
+  const child = Array.isArray(children) ? children[0] : children;
+  return React.isValidElement(child) && child.type === MermaidDiagram;
+}
+
 function useFullComponents(
   isDark: boolean,
   resolveImage?: (src: string) => Promise<string | null>
@@ -145,10 +169,10 @@ function useFullComponents(
       ),
       li: ({ children }: WithChildren) => <li className="leading-relaxed">{children}</li>,
       code: ({ children, className }: WithChildrenAndClass) => {
-        const match = /language-(\w+)/.exec(className || '');
-        const language = match ? match[1] : '';
-        const isBlock = className?.includes('language-');
+        const mermaidBlock = renderMermaidCodeBlock(children, className, isDark);
+        if (mermaidBlock) return mermaidBlock;
 
+        const { code, isBlock, language } = getCodeBlock(children, className);
         if (isBlock) {
           return (
             <SyntaxHighlighter
@@ -157,16 +181,19 @@ function useFullComponents(
               PreTag="div"
               className="!my-0 !rounded-md !text-xs"
             >
-              {String(children).replace(/\n$/, '')}
+              {code}
             </SyntaxHighlighter>
           );
         }
 
         return <code className="rounded bg-muted px-1.5 py-0.5 text-xs">{children}</code>;
       },
-      pre: ({ children }: WithChildren) => (
-        <pre className="mb-3 overflow-x-auto rounded-md border border-border">{children}</pre>
-      ),
+      pre: ({ children }: WithChildren) =>
+        isOnlyMermaidDiagramChild(children) ? (
+          <>{children}</>
+        ) : (
+          <pre className="mb-3 overflow-x-auto rounded-md border border-border">{children}</pre>
+        ),
       a: ({ href, children }: AnchorProps) => {
         const isHttp = typeof href === 'string' && /^https?:\/\//i.test(href);
         const handleClick = (e: React.MouseEvent) => {
@@ -231,7 +258,7 @@ function useFullComponents(
   );
 }
 
-function useCompactComponents() {
+function useCompactComponents(isDark: boolean) {
   return useMemo(
     () => ({
       h1: ({ children }: WithChildren) => (
@@ -252,16 +279,25 @@ function useCompactComponents() {
       ),
       li: ({ children }: WithChildren) => <li className="leading-relaxed">{children}</li>,
       code: ({ children, className }: WithChildrenAndClass) => {
-        const isBlock = className?.includes('language-');
-        return isBlock ? (
-          <code className="block overflow-x-auto rounded bg-muted/60 p-2 text-[11px]">
-            {children}
-          </code>
-        ) : (
-          <code className="rounded bg-muted/60 px-1 py-0.5 text-[11px]">{children}</code>
-        );
+        const mermaidBlock = renderMermaidCodeBlock(children, className, isDark, true);
+        if (mermaidBlock) return mermaidBlock;
+
+        const { isBlock } = getCodeBlock(children, className);
+        if (isBlock) {
+          return (
+            <code className="block overflow-x-auto rounded bg-muted/60 p-2 text-[11px]">
+              {children}
+            </code>
+          );
+        }
+        return <code className="rounded bg-muted/60 px-1 py-0.5 text-[11px]">{children}</code>;
       },
-      pre: ({ children }: WithChildren) => <pre className="mb-2 overflow-x-auto">{children}</pre>,
+      pre: ({ children }: WithChildren) =>
+        isOnlyMermaidDiagramChild(children) ? (
+          <>{children}</>
+        ) : (
+          <pre className="mb-2 overflow-x-auto">{children}</pre>
+        ),
       strong: ({ children }: WithChildren) => (
         <strong className="font-semibold text-foreground">{children}</strong>
       ),
@@ -286,7 +322,7 @@ function useCompactComponents() {
         );
       },
     }),
-    []
+    [isDark]
   );
 }
 
@@ -300,7 +336,7 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({
   const isDark = effectiveTheme === 'emdark';
 
   const fullComponents = useFullComponents(isDark, resolveImage);
-  const compactComponents = useCompactComponents();
+  const compactComponents = useCompactComponents(isDark);
 
   const components = variant === 'full' ? fullComponents : compactComponents;
   const rehypePlugins = variant === 'full' ? FULL_REHYPE_PLUGINS : COMPACT_REHYPE_PLUGINS;

src/renderer/lib/ui/mermaid-diagram.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { cn } from '@renderer/utils/utils';
+import { createMermaidRenderId, renderMermaidDiagram } from './mermaid-renderer';
+
+interface MermaidDiagramProps {
+  chart: string;
+  isDark: boolean;
+  compact?: boolean;
+}
+
+type RenderState =
+  | { kind: 'rendered'; key: string; svg: string }
+  | { kind: 'error'; key: string; message: string | null };
+
+const GENERIC_RENDER_ERROR = 'Unable to render Mermaid diagram.';
+
+function errorMessage(error: unknown): string | null {
+  if (error instanceof Error && error.message && error.message !== GENERIC_RENDER_ERROR) {
+    return error.message;
+  }
+  if (typeof error === 'string' && error && error !== GENERIC_RENDER_ERROR) {
+    return error;
+  }
+  return null;
+}
+
+export const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ chart, isDark, compact }) => {
+  const id = useMemo(() => createMermaidRenderId(), []);
+  const theme = isDark ? 'dark' : 'default';
+  const renderKey = `${theme}:${chart}`;
+  const [state, setState] = useState<RenderState | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    renderMermaidDiagram({ id, chart, theme })
+      .then((svg) => {
+        if (!cancelled) setState({ kind: 'rendered', key: renderKey, svg });
+      })
+      .catch((error: unknown) => {
+        if (!cancelled) setState({ kind: 'error', key: renderKey, message: errorMessage(error) });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [chart, id, renderKey, theme]);
+
+  const visibleState = state?.key === renderKey ? state : null;
+
+  if (visibleState?.kind === 'error') {
+    return (
+      <div
+        className={cn(
+          'my-3 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-xs text-destructive',
+          compact && 'my-2 p-2 text-[11px]'
+        )}
+        role="alert"
+      >
+        <div className="font-medium">{GENERIC_RENDER_ERROR}</div>
+        {visibleState.message && (
+          <div className="mt-1 text-muted-foreground">{visibleState.message}</div>
+        )}
+        <pre className="mt-2 overflow-x-auto rounded bg-muted/60 p-2 text-muted-foreground">
+          <code>{chart}</code>
+        </pre>
+      </div>
+    );
+  }
+
+  if (!visibleState) {
+    return (
+      <div
+        className={cn(
+          'my-3 rounded-md border border-border bg-muted/20 p-3 text-xs text-muted-foreground',
+          compact && 'my-2 p-2 text-[11px]'
+        )}
+      >
+        Rendering diagram...
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'my-3 overflow-x-auto rounded-md border border-border bg-background p-3',
+        compact && 'my-2 p-2'
+      )}
+    >
+      <div
+        className="min-w-fit text-foreground [&_svg]:h-auto [&_svg]:max-w-full"
+        dangerouslySetInnerHTML={{ __html: visibleState.svg }}
+      />
+    </div>
+  );
+};

src/renderer/lib/ui/mermaid-renderer.ts

@@ -0,0 +1,54 @@
+import type { MermaidConfig } from 'mermaid';
+
+let idCounter = 0;
+let renderQueue: Promise<void> = Promise.resolve();
+let lastInitializedConfigKey: string | null = null;
+
+type MermaidTheme = NonNullable<MermaidConfig['theme']>;
+
+interface MermaidRenderRequest {
+  id: string;
+  chart: string;
+  theme: MermaidTheme;
+}
+
+export function createMermaidRenderId(): string {
+  idCounter += 1;
+  return `emdash-mermaid-${idCounter}`;
+}
+
+export async function renderMermaidDiagram({
+  id,
+  chart,
+  theme,
+}: MermaidRenderRequest): Promise<string> {
+  const render = async () => {
+    const mermaid = (await import('mermaid')).default;
+    const config: MermaidConfig = {
+      startOnLoad: false,
+      htmlLabels: false,
+      securityLevel: 'strict',
+      suppressErrorRendering: true,
+      theme,
+      flowchart: {
+        htmlLabels: false,
+      },
+    };
+    const configKey = JSON.stringify(config);
+
+    if (lastInitializedConfigKey !== configKey) {
+      mermaid.initialize(config);
+      lastInitializedConfigKey = configKey;
+    }
+
+    const { svg } = await mermaid.render(id, chart);
+    return svg;
+  };
+
+  const result = renderQueue.then(render, render);
+  renderQueue = result.then(
+    () => undefined,
+    () => undefined
+  );
+  return result;
+}