diff --git a/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx b/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
index 9deea5872..b11c69a03 100644
--- a/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
+++ b/gui/src/components/StyledMarkdownPreview/MermaidBlock.tsx
@@ -141,7 +141,7 @@ export default function MermaidDiagram({ code }: { code: string }) {
       {!!error ? (
         <div className="text-error whitespace-pre text-sm">{error}</div>
       ) : (
-        <div className="relative">
+        <div className="mermaid relative">
           <div className="absolute right-0 z-10 m-2 flex items-center gap-x-1">
             <ToolTip content={"Zoom In"}>
               <MagnifyingGlassPlusIcon
diff --git a/gui/src/components/StyledMarkdownPreview/markdown.css b/gui/src/components/StyledMarkdownPreview/markdown.css
index afb57b9fa..d9dfcfa2d 100644
--- a/gui/src/components/StyledMarkdownPreview/markdown.css
+++ b/gui/src/components/StyledMarkdownPreview/markdown.css
@@ -1038,3 +1038,6 @@ body[data-color-mode*="light"] {
 .token.entity {
   cursor: help;
 }
+.mermaid foreignObject {
+  width: 100%;
+}