diff --git a/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx b/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx
index e0a381ff52..11fc3cafa5 100644
--- a/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx
+++ b/client/src/components/Chat/Messages/Content/MarkdownComponents.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useRef, useEffect } from 'react';
+import React, { memo, useMemo, useRef, useEffect, lazy, Suspense } from 'react';
import { useRecoilValue } from 'recoil';
import { PermissionTypes, Permissions } from 'librechat-data-provider';
import { useToastContext, useCodeBlockContext } from '~/Providers';
@@ -9,6 +9,16 @@ import useLocalize from '~/hooks/useLocalize';
import { handleDoubleClick } from '~/utils';
import store from '~/store';
+// Loading fallback component for lazy-loaded Mermaid diagrams
+const MermaidLoadingFallback = memo(() => {
+ const localize = useLocalize();
+ return (
+
+ {localize('com_ui_loading_diagram')}
+
+ );
+});
+
type TCodeProps = {
inline?: boolean;
className?: string;
@@ -23,6 +33,7 @@ export const code: React.ElementType = memo(({ className, children }: TCodeProps
const match = /language-(\w+)/.exec(className ?? '');
const lang = match && match[1];
const isMath = lang === 'math';
+ const isMermaid = lang === 'mermaid';
const isSingleLine = typeof children === 'string' && children.split('\n').length === 1;
const { getNextIndex, resetCounter } = useCodeBlockContext();
@@ -34,6 +45,13 @@ export const code: React.ElementType = memo(({ className, children }: TCodeProps
if (isMath) {
return <>{children};
+ } else if (isMermaid && typeof children === 'string') {
+ const SandpackMermaidDiagram = lazy(() => import('./SandpackMermaidDiagram'));
+ return (
+ }>
+
+
+ );
} else if (isSingleLine) {
return (
@@ -55,9 +73,17 @@ export const code: React.ElementType = memo(({ className, children }: TCodeProps
export const codeNoExecution: React.ElementType = memo(({ className, children }: TCodeProps) => {
const match = /language-(\w+)/.exec(className ?? '');
const lang = match && match[1];
+ const isMermaid = lang === 'mermaid';
if (lang === 'math') {
return children;
+ } else if (isMermaid && typeof children === 'string') {
+ const SandpackMermaidDiagram = lazy(() => import('./SandpackMermaidDiagram'));
+ return (
+ }>
+
+
+ );
} else if (typeof children === 'string' && children.split('\n').length === 1) {
return (
diff --git a/client/src/components/Chat/Messages/Content/SandpackMermaidDiagram.tsx b/client/src/components/Chat/Messages/Content/SandpackMermaidDiagram.tsx
new file mode 100644
index 0000000000..66d879e260
--- /dev/null
+++ b/client/src/components/Chat/Messages/Content/SandpackMermaidDiagram.tsx
@@ -0,0 +1,289 @@
+import React, { memo, useMemo, useEffect } from 'react';
+import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
+import dedent from 'dedent';
+import { cn } from '~/utils';
+import { sharedOptions } from '~/utils/artifacts';
+
+interface SandpackMermaidDiagramProps {
+ content: string;
+ className?: string;
+}
+
+// Minimal dependencies for Mermaid only
+const mermaidDependencies = {
+ mermaid: '^11.8.1',
+ 'react-zoom-pan-pinch': '^3.7.0',
+};
+
+// Lean mermaid template with inline SVG icons
+const leanMermaidTemplate = dedent`
+import React, { useEffect, useRef, useState } from "react";
+import {
+ TransformWrapper,
+ TransformComponent,
+ ReactZoomPanPinchRef,
+} from "react-zoom-pan-pinch";
+import mermaid from "mermaid";
+
+// Inline SVG icons
+const ZoomInIcon = () => (
+
+);
+
+const ZoomOutIcon = () => (
+
+);
+
+const ResetIcon = () => (
+
+);
+
+interface MermaidDiagramProps {
+ content: string;
+}
+
+const MermaidDiagram: React.FC = ({ content }) => {
+ const mermaidRef = useRef(null);
+ const transformRef = useRef(null);
+ const [isRendered, setIsRendered] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ mermaid.initialize({
+ startOnLoad: false,
+ theme: "default",
+ securityLevel: "loose",
+ flowchart: {
+ useMaxWidth: true,
+ htmlLabels: true,
+ curve: "basis",
+ },
+ });
+
+ const renderDiagram = async () => {
+ if (mermaidRef.current) {
+ try {
+ const id = "mermaid-" + Date.now();
+ const { svg } = await mermaid.render(id, content);
+ mermaidRef.current.innerHTML = svg;
+
+ const svgElement = mermaidRef.current.querySelector("svg");
+ if (svgElement) {
+ svgElement.style.width = "100%";
+ svgElement.style.height = "100%";
+ }
+ setIsRendered(true);
+ setError(null);
+ } catch (err) {
+ console.error("Mermaid rendering error:", err);
+ setError(err.message || "Failed to render diagram");
+ }
+ }
+ };
+
+ renderDiagram();
+ }, [content]);
+
+ const handleZoomIn = () => {
+ if (transformRef.current) {
+ transformRef.current.zoomIn(0.2);
+ }
+ };
+
+ const handleZoomOut = () => {
+ if (transformRef.current) {
+ transformRef.current.zoomOut(0.2);
+ }
+ };
+
+ const handleReset = () => {
+ if (transformRef.current) {
+ transformRef.current.resetTransform();
+ transformRef.current.centerView(1, 0);
+ }
+ };
+
+ if (error) {
+ return (
+
+ Error: {error}
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+ {isRendered && (
+
+
+
+
+
+ )}
+