# Can Dify Chat Render Charts and Videos Generated by AI?

> Discover if Dify Chat renders AI-generated charts and videos. Learn how its MarkdownRenderer supports ECharts, Mermaid, and HTML video tags for seamless integration.

- Repository: [lexmin0412/dify-chat](https://github.com/lexmin0412/dify-chat)
- Tags: how-to-guide
- Published: 2026-03-06

---

**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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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:

```markdown

```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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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`](https://github.com/lexmin0412/dify-chat/blob/main/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.