diff --git a/src/features/Portal/Artifacts/Body/Renderer/index.tsx b/src/features/Portal/Artifacts/Body/Renderer/index.tsx
index 8f4945ae06895..0c5300eb1f891 100644
--- a/src/features/Portal/Artifacts/Body/Renderer/index.tsx
+++ b/src/features/Portal/Artifacts/Body/Renderer/index.tsx
@@ -1,4 +1,4 @@
-import { Markdown } from '@lobehub/ui';
+import { Markdown, Mermaid } from '@lobehub/ui';
 import dynamic from 'next/dynamic';
 import { memo } from 'react';
 
@@ -17,6 +17,10 @@ const Renderer = memo<{ content: string; type?: string }>(({ content, type }) =>
       return <SVGRender content={content} />;
     }
 
+    case 'application/lobe.artifacts.mermaid': {
+      return <Mermaid type={'pure'}>{content}</Mermaid>;
+    }
+
     case 'text/markdown': {
       return <Markdown style={{ overflow: 'auto' }}>{content}</Markdown>;
     }