Can Dify Chat Render Charts and Videos Generated by AI?

Yes, Dify Chat can render AI-generated charts and videos through its specialized MarkdownRenderer component that recognizes ECharts JSON, Mermaid syntax, and HTML video tags.

The open-source lexmin0412/dify-chat repository includes advanced markdown processing capabilities that allow AI-generated visual content to display directly in the chat interface. By parsing specific code block languages and HTML elements, Dify Chat transforms text responses into interactive charts, diagrams, and video players without requiring additional client-side configuration.

How Dify Chat Processes AI-Generated Visual Content

ECharts Integration for Data Visualization

In packages/react-app/src/components/markdown-renderer/index.tsx, the MarkdownRenderer component detects fenced code blocks marked with the language echarts. It parses the JSON configuration inside the block and passes it to the ReactEcharts component from the echarts-for-react library. The chart renders inside a responsive container, displaying interactive data visualizations generated by AI.

Mermaid Diagram Support

For flowcharts and diagrams, Dify Chat processes code blocks labeled mermaid (or svg when toggled) through packages/react-app/src/components/markdown-renderer/blocks/mermaid.tsx. The Flowchart component utilizes the mermaid library to convert text-based diagram syntax into scalable SVG graphics that are injected directly into the DOM.

Video Playback Capabilities

AI-generated video content embedded via standard HTML <video> tags is intercepted by the VideoBlock component defined in packages/react-app/src/components/markdown-renderer/blocks/video.tsx. This component applies Tailwind CSS classes including w-full h-full max-w-[500px] rounded-lg mt-2 and ensures native browser controls are available for seamless playback.

Code Examples for AI-Generated Content

Rendering ECharts Bar Charts

When an AI response includes JSON configuration inside an echarts code block, Dify Chat renders it as an interactive chart:

```echarts
{
  "title": { "text": "Sales by Quarter" },
  "tooltip": {},
  "xAxis": { "type": "category", "data": ["Q1", "Q2", "Q3", "Q4"] },
  "yAxis": { "type": "value" },
  "series": [{ "type": "bar", "data": [120, 200, 150, 80] }]
}

The renderer automatically detects the `echarts` language specifier and initializes the **ReactEcharts** instance with the provided configuration object.

### Displaying Mermaid Flowcharts

Mermaid diagrams allow AI agents to generate visual workflows and decision trees:

```markdown

```mermaid
graph TD
    A[Start] --> B{Is AI output valid?}
    B -- Yes --> C[Render chart]
    B -- No --> D[Show error]
    C --> E[Show result]

The **Flowchart** component processes this syntax server-side and returns an SVG representation that maintains scalability across all device sizes.

### Embedding AI-Generated Videos

Video content generated by AI models can be embedded using standard HTML tags:

```markdown
<video src="https://example.com/ai-generated-demo.mp4" autoplay muted loop />

The VideoBlock component maps this element to a controlled React component that applies responsive styling and ensures cross-browser compatibility.

Key Implementation Files

File Path	Primary Function
packages/react-app/src/components/markdown-renderer/index.tsx	Core processor that routes echarts, mermaid, and HTML tags to their respective renderers
packages/react-app/src/components/markdown-renderer/blocks/mermaid.tsx	Implements Flowchart component using the mermaid library
packages/react-app/src/components/markdown-renderer/blocks/video.tsx	Provides VideoBlock component with Tailwind styling and control management
packages/react-app/src/components/markdown-renderer/blocks/svg-renderer.tsx	Handles generic SVG output for diagrams and vector graphics

Summary

• ECharts support: Dify Chat renders interactive charts by parsing JSON inside echarts code blocks using the ReactEcharts component.
• Mermaid integration: Flowcharts and diagrams are generated from mermaid code blocks via the Flowchart component in blocks/mermaid.tsx.
• Video rendering: HTML <video> tags are transformed into styled VideoBlock components with full playback controls.
• Automatic processing: The MarkdownRenderer in index.tsx automatically detects content types without requiring manual configuration.

Frequently Asked Questions

Does Dify Chat support ECharts JSON configuration?

Yes, Dify Chat fully supports ECharts JSON configuration through the MarkdownRenderer component. When a code block is marked with the language echarts, the application parses the JSON content and passes it directly to the ReactEcharts component from the echarts-for-react library, rendering interactive charts with tooltips, legends, and responsive resizing.

Can I embed Mermaid diagrams in Dify Chat responses?

Yes, you can embed Mermaid diagrams by using code blocks with the language specifier mermaid. The Flowchart component in packages/react-app/src/components/markdown-renderer/blocks/mermaid.tsx processes the syntax and converts it into SVG format using the mermaid library, allowing AI-generated flowcharts, sequence diagrams, and entity-relationship charts to display natively in the chat interface.

How does Dify Chat handle AI-generated video content?

Dify Chat handles AI-generated video content by intercepting HTML <video> tags in the markdown and rendering them through the VideoBlock component. This component applies Tailwind CSS utility classes for responsive sizing (max-w-[500px]) and styling (rounded-lg), while preserving native browser controls for play, pause, and volume adjustment.

What is the main file responsible for markdown rendering in Dify Chat?

The main file responsible for markdown rendering is packages/react-app/src/components/markdown-renderer/index.tsx. This file contains the MarkdownRenderer component that serves as the central router, identifying code block languages like echarts and mermaid, detecting HTML elements like <video>, and dispatching them to specialized block components for rendering.

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