import gradio as gr
import base64
from mermaid import Mermaid
from mermaid.graph import Graph
# HTML template for rendering Mermaid diagrams
html_template = """
{}
"""
def render_mermaid(mermaid_code):
# Create a Mermaid graph using mermaid-py
sequence = Graph('Sequence-diagram', mermaid_code)
render = Mermaid(sequence)
# Create HTML output
html_content = html_template.format(render)
# Create PNG output
graphbytes = mermaid_code.encode("utf8")
base64_bytes = base64.urlsafe_b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
png_url = "https://mermaid.ink/img/" + base64_string
return html_content, png_url
# Create a Gradio Blocks interface with Citrus theme
with gr.Blocks(theme=gr.themes.Citrus()) as mrender:
gr.Markdown("# Mermaid Diagram Renderer")
gr.Markdown("Input your Mermaid diagram code to render it and get a PNG image.")
with gr.Row():
with gr.Column():
mermaid_input = gr.Textbox(label="Mermaid Code", placeholder="Enter your Mermaid diagram code here...")
submit_btn = gr.Button("Render")
with gr.Column():
html_output = gr.HTML()
image_output = gr.Image()
submit_btn.click(fn=render_mermaid, inputs=mermaid_input, outputs=[html_output, image_output])
# Launch the app
mrender.launch()