app.py

import gradio as gr
import base64
import random
#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];
"""


#def call_chart(mermaidCode):
def mm(graph):
    code_out=""
    for ea in graph.split("\n"):
        code=ea.strip().strip("\n")
        code_out+=code
    #out_html=f'''<div><iframe src="https://omnibus-mermaid-script.static.hf.space/index.html?mermaid={code_out}&rand={random.randint(1,1111111111)}" height="500" width="500"></iframe></div>'''
    out_html=f'''<div><iframe src="https://omnibus-mermaid-script.static.hf.space/index.html?mermaid={code_out}" height="500" width="500"></iframe></div>'''
    return out_html

"""
graph LR;
    A--> B & C & D;
    B--> A & E;
    C--> A & E;
    D--> A & E;
    E--> B & C & D;
"""


css="""
svg.style .flowchart-link{
stroke:red;!important;
}
svg.style .marker {
    fill: #ed0000!important;
    stroke: #ff0101;!important;
}
"""

with gr.Blocks(css=css) as app:
    inp_text=gr.Textbox(value=mermaid_code)
    btn=gr.Button()
    out_html=gr.HTML("""""")
    btn.click(mm,inp_text,out_html)
    app.load(mm,inp_text,out_html)
app.launch()