app.py

import gradio as gr
#import execjs
# Define the Mermaid code for the flowchart
mermaid_code = """
graph TD;
    A[Start] --> B[Decision]
    B -- Yes --> C[Option 1]
    B -- No --> D[Option 2]
    C --> E[End]
    D --> E
    E[End] --> F[End]
"""
# Create an ExecJS context
js_c=("""
    let mermaid = require('mermaid');
    mermaid.initialize({startOnLoad:true});
    function renderMermaid(mermaidCode) {
        mermaid.mermaidAPI.render('mermaid', mermaidCode, function(svgCode, bindFunctions) {
            document.getElementById('diagram').innerHTML = svgCode;
        });
    }
""")

def call_chart(mermaidCode):
    # Render the flowchart
    #context.call("renderMermaid", mermaid_code)
    # Print the Mermaid code for reference
    print(mermaid_code)
    
with gr.Blocks() as app:
    inp_text=gr.Textbox(value=mermaid_code)
    
    out_html=gr.HTML("""<div id='diagram'>Text</div>""")
    app.load(call_chart,inp_text,None,js=js_c)
app.launch()