What Types of Rich Content Can Dify Chat Render Beyond Markdown?

Dify Chat renders images, videos, syntax-highlighted code, Mermaid diagrams, ECharts visualizations, SVG graphics, LaTeX equations, interactive forms, action buttons, and collapsible think blocks through its MarkdownRenderer component.

The lexmin0412/dify-chat repository extends standard markdown with a sophisticated rendering pipeline that transforms specific HTML tags and code fences into interactive React components. Understanding what types of rich content Dify Chat can render helps developers leverage the full capabilities of this AI chat interface.

Rich Media Support: Images and Videos

Zoomable Image Previews

Dify Chat replaces standard markdown images with an interactive zoom experience. The ImageBlock component in packages/react-app/src/components/markdown-renderer/blocks/image.tsx integrates react-photo-view to enable pinch-to-zoom and pan functionality. Users can click any image to expand it into a full-screen lightbox without leaving the conversation context.

Native Video Playback

Video content renders through the VideoBlock component located at packages/react-app/src/components/markdown-renderer/blocks/video.tsx. This component outputs a standard HTML5 <video> element with native browser controls, supporting MP4, WebM, and other standard formats directly within chat messages.

Code and Visualization Rendering

Syntax-Highlighted Code Blocks

Code fences receive automatic syntax highlighting via react-syntax-highlighter with support for light and dark themes. The CodeBlock component inside packages/react-app/src/components/markdown-renderer/index.tsx parses language identifiers (e.g., python, javascript) and applies appropriate highlighting rules.

Mermaid Diagrams and Flowcharts

Dify Chat compiles Mermaid syntax into interactive SVG diagrams. The Flowchart component in packages/react-app/src/components/markdown-renderer/blocks/mermaid.tsx processes Mermaid code blocks and renders them as scalable vector graphics. Users can toggle between classic and hand-drawn sketch styles for visual variety.

ECharts Data Visualizations

JSON chart configurations render as interactive data visualizations using echarts-for-react. When the CodeBlock detects language-echarts in packages/react-app/src/components/markdown-renderer/index.tsx, it parses the JSON and instantiates the corresponding ECharts instance with full interactivity including tooltips and zooming.

Raw SVG Graphics

Sanitized SVG strings display via @svgdotjs/svg.js through the SVGRenderer component at packages/react-app/src/components/markdown-renderer/blocks/svg-renderer.tsx. A toggle button allows users to switch between raw SVG markup and rasterized preview modes, ensuring both developer debugging and end-user clarity.

Mathematical and Scientific Content

LaTeX Equations with KaTeX

Mathematical expressions render beautifully through KaTeX integration. The MarkdownRenderer in packages/react-app/src/components/markdown-renderer/index.tsx configures rehype-katex and remark-math to parse LaTeX syntax (both inline $...$ and block $$...$$) into high-quality mathematical typography without external image dependencies.

Interactive UI Components

Interactive Forms

HTML form elements transform into Ant Design form controls through the MarkdownForm component at packages/react-app/src/components/markdown-renderer/blocks/form.tsx. Supported inputs include <input>, <textarea>, <select>, and <date-picker> elements. Form submissions feed directly back into the chat conversation, enabling structured data collection within the AI interface.

Action Buttons

Custom <button> elements become functional ButtonBlock components located at packages/react-app/src/components/markdown-renderer/blocks/button.tsx. These buttons can trigger predefined messages or actions when clicked, allowing chat designers to create guided workflows and quick-reply interfaces without custom frontend development.

Collapsible Think Blocks

Deep-thinking AI steps display in expandable panels via the ThinkBlock component at packages/react-app/src/components/markdown-renderer/blocks/think-block.tsx. When the renderer encounters <details data-think>, it creates a collapsible section with a visual timer indicating the AI's reasoning duration, keeping the main chat stream clean while preserving transparency about the AI's thought process.

Security and HTML Handling

Dify Chat implements strict HTML sanitization to prevent XSS attacks while preserving rich functionality. The MarkdownRenderer uses rehypeRaw combined with a custom tree walk to strip disallowed tags like <iframe> and <script>, rendering unknown or dangerous tags as plain text. This security layer ensures that user-generated or AI-generated markdown cannot execute arbitrary code while still supporting the rich component ecosystem described above.

The component mapping occurs through ReactMarkdown's components prop in packages/react-app/src/components/markdown-renderer/index.tsx:

components={{
  code: CodeBlock,
  a: Link,
  p: Paragraph,
  form: MarkdownForm,
  img: ImageBlock,
  video: VideoBlock,
  button: (props) => <ButtonBlock {...props} onSend={onSubmit} />,
  details: ThinkBlock,
  // …additional mappings
}}

Summary

Dify Chat transforms standard markdown into a rich interactive experience through its MarkdownRenderer architecture. Key capabilities include:

• Media rendering with zoomable images and native video playback
• Data visualization via Mermaid diagrams, ECharts charts, and raw SVG
• Technical content including syntax-highlighted code and KaTeX mathematical equations
• Interactive components such as forms, action buttons, and collapsible think blocks
• Security protections that sanitize HTML while preserving rich functionality

Frequently Asked Questions

Can Dify Chat render interactive charts and graphs?

Yes. Dify Chat supports ECharts visualizations through JSON configuration blocks and Mermaid diagrams for flowcharts and sequence diagrams. The CodeBlock component in packages/react-app/src/components/markdown-renderer/index.tsx detects language-echarts fences and renders them using echarts-for-react, while the Flowchart component handles Mermaid syntax.

How does Dify Chat handle mathematical equations?

Dify Chat renders LaTeX mathematical expressions using KaTeX via the rehype-katex plugin. Both inline math (delimited by single dollar signs) and block equations (delimited by double dollar signs) are supported. This implementation resides in the MarkdownRenderer at packages/react-app/src/components/markdown-renderer/index.tsx.

Is it safe to render user-generated HTML in Dify Chat?

Yes, Dify Chat implements strict HTML sanitization to prevent XSS attacks. The renderer uses rehypeRaw combined with a custom tree walk to strip dangerous tags like <iframe> and <script>, rendering unknown elements as plain text. This security layer allows rich interactive components while blocking arbitrary code execution.

Can users submit data through forms within chat messages?

Yes. Dify Chat supports interactive forms through the MarkdownForm component in packages/react-app/src/components/markdown-renderer/blocks/form.tsx. HTML form elements including inputs, textareas, selects, and date pickers are transformed into Ant Design controls, and submissions feed directly back into the chat conversation as structured data.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}