Add support for mermaid.js in Markdown component (as well as components like gr.Chatbot that use Markdown)

[abidlabs]

I think this library is worth including in our Markdown component as it's a pretty popular way to generate diagrams & nice visualizations. Test with the new demo I added or with the code snippets below:

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()

or

import gradio as gr

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

Closes: #10844
Closes: #9048

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detecting...

---

Install Gradio from this PR

pip install https://gradio-pypi-previews.s3.amazonaws.com/f3dc81d777f1f33567869e76a9dd11230c36d382/gradio-5.22.0-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@f3dc81d777f1f33567869e76a9dd11230c36d382#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-npm-previews.s3.amazonaws.com/f3dc81d777f1f33567869e76a9dd11230c36d382/gradio-client-1.13.1.tgz

Use Lite from this PR

<script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/f3dc81d777f1f33567869e76a9dd11230c36d382/dist/lite.js""></script>

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/chatbot	patch
@gradio/markdown	patch
@gradio/markdown-code	patch
gradio	patch

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Add support for mermaid.js in Markdown component (as well as components like gr.Chatbot that use Markdown)

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

Actually the behavior isn't great when streaming (note the flickering & syntax error). Will work on a better solution:

import gradio as gr
import time

value = """  
abc
```mermaid  
graph TD  
    A[Start] --> B[Step 1]  
    B --> C[Step 2]  
    C --> D[End]  
``` 
defdefdefdefdefdefdefdef
defdefdefdefdefdefdefdef
defdefdefdefdefdefdefdef
"""

demo = gr.Blocks()

def update():
    for i in range(len(value)):
        time.sleep(0.03)
        yield [(value[:i+1], None)]

with demo:
    chatbot = gr.Chatbot(height=600)
    btn = gr.Button()

    btn.click(update, None, chatbot)
demo.launch()

[abidlabs]

Actually the behavior isn't great when streaming (note the flickering & syntax error). Will work on a better solution:

The syntax error has been resolved. The flickering is still there, but that's tricky to resolve as the HTML gets re-rendered every time there's a new update. Note that this happens anytime there's HTML in the chat body, e.g. with this:

import gradio as gr
import time

value = """  
abc

<marquee>abc</marquee>

defdefdefdefdefdefdefdef
defdefdefdefdefdefdefdef
defdefdefdefdefdefdefdef
"""

demo = gr.Blocks()

def update():
    for i in range(len(value)):
        time.sleep(0.03)
        yield [(value[:i+1], None)]

with demo:
    chatbot = gr.Chatbot(height=600)
    btn = gr.Button()

    btn.click(update, None, chatbot)
demo.launch()

There are ways we could fix this, e.g. by adding a small debounce before the html is rendered, but I think we can tackle that later.

[pngwn]

Mermaid can be pretty big, maybe we should dynamically import it if someone uses mermaid syntax, rather than everyone paying that cost.

[abidlabs]

Should be fixed now @pngwn

[abidlabs]

Thanks @pngwn!

[abidlabs]

@aliabid94 pointed out that we should use the dark mermaid.js theme when we are in dark mode. Will update and then merge this in for the release