Feature Request: Add Mermaid Support to gr.Markdown() Component

[xiaoyingv]

• I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.

Currently, the gr.Markdown() component in Gradio supports basic Markdown rendering but lacks native integration for Mermaid diagrams. This limitation forces users to manually embed charts via HTML or external libraries, which complicates the development process and reduces the flexibility of creating dynamic visualizations (e.g., flowcharts, Gantt charts) directly from text.

---

Describe the solution you'd like

Implement Mermaid.js support within gr.Markdown() to render Mermaid code blocks (e.g., mermaid ... ) natively. Key requirements:

1. Automatic Rendering: Automatically parse and render Mermaid syntax within Markdown content.
2. Full Compatibility: Support all Mermaid chart types (flowcharts, sequence diagrams, Gantt charts, etc.).
3. Zero-Configuration: No additional dependencies or frontend code required.
4. Optional Toggle: Provide a flag like enable_mermaid=True to activate the feature.

---

Example Use Case

import gradio as gr

demo = gr.Blocks()
with demo:
    markdown = gr.Markdown(
        value="""  
        ```mermaid  
        graph TD  
            A[Start] --> B[Step 1]  
            B --> C[Step 2]  
            C --> D[End]  
        ```  
        """
    )
demo.launch()

The above code should render a flowchart directly in the UI without extra setup.

---

Additional context

• Technical Integration: Integrate [Mermaid.js](https://mermaid-js.github.io/) into Gradio's frontend.
• Reference: Similar implementations exist in Jupyter Notebooks and are widely adopted.
• Impact: This feature would streamline visualization creation for developers and enhance the tool's appeal to data science and engineering communities.

---

Checklist

• I have searched to see if a similar issue already exists.
• This feature request is specific and actionable.
• I can provide additional details or examples if needed.

---

Labels

• enhancement
• markdown
• visualization
• Mermaid

---

[xiaoyingv]

🎉 Thank you for accepting my suggestion! Enabling Mermaid syntax support in the Markdown component will make technical documentation and flowcharts far more intuitive for both developers and users!

A special thanks to @abidlabs for your advocacy and the team’s efficient collaboration! I’d love to assist with testing or feedback if needed. Thanks again for all your efforts!

[abidlabs]

Let's keep the issue open until the PR is merged!

[AI-Guru]

I need this ASAP as possible 🤗

[abidlabs]

This is supported in the latest version of Gradio!

[vishnupeesapaticoe]

This is working quite well , thanks gradio team !!!