Added Support of Mermaid rendering.

src/streamlit_app.py

@@ -4,6 +4,9 @@ from weasyprint import HTML, CSS
 from datetime import datetime
 import base64
 import os
+import re
+import zlib
+import requests
 from io import BytesIO
 from PIL import Image
 
@@ -242,6 +245,40 @@ def get_css_template(font_name, spacing="normal", font_size=11):
         text-decoration: underline;
     }}
     
+    /* Mermaid diagram container - fits within one page */
+    .mermaid-container {{
+        max-height: 600px;
+        width: 100%;
+        page-break-inside: avoid;
+        break-inside: avoid;
+        margin: {1.5 * margin_multiplier}em 0;
+        text-align: center;
+        background: #fafafa;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 1em;
+        box-sizing: border-box;
+    }}
+    
+    .mermaid-container img {{
+        max-width: 100%;
+        max-height: 550px;
+        width: auto;
+        height: auto;
+        object-fit: contain;
+        display: block;
+        margin: 0 auto;
+    }}
+    
+    .mermaid-error {{
+        padding: 1em;
+        background: #fff3cd;
+        border: 1px solid #ffc107;
+        border-radius: 4px;
+        color: #856404;
+        margin: 1em 0;
+    }}
+    
     /* Syntax highlighting for code blocks - Complete Pygments style */
     .codehilite .hll {{ background-color: #ffffcc }}
     .codehilite .c {{ color: #008000; font-style: italic }} /* Comment */
@@ -315,6 +352,9 @@ def get_css_template(font_name, spacing="normal", font_size=11):
 
 def generate_html(markdown_text, title, font_name, spacing="normal", font_size=11, logo_data=None):
     """Convert Markdown to styled HTML"""
+    # Process Mermaid blocks first (renders diagrams and keeps code blocks)
+    processed_text = process_mermaid_blocks(markdown_text)
+    
     # Convert Markdown to HTML with extensions
     md = markdown.Markdown(
         extensions=[
@@ -334,7 +374,7 @@ def generate_html(markdown_text, title, font_name, spacing="normal", font_size=1
             }
         }
     )
-    body_html = md.convert(markdown_text)
+    body_html = md.convert(processed_text)
     
     # Handle logo
     logo_html = ""
@@ -396,6 +436,65 @@ def image_to_base64(image_file):
         st.error(f"Error processing image: {str(e)}")
         return None
 
+def encode_mermaid_for_ink(mermaid_code):
+    """Encode Mermaid code for mermaid.ink API using pako deflate + base64"""
+    # Use zlib to compress (pako compatible)
+    compressed = zlib.compress(mermaid_code.encode('utf-8'), level=9)
+    # Remove zlib header (first 2 bytes) and checksum (last 4 bytes) for raw deflate
+    raw_deflate = compressed[2:-4]
+    # Base64 encode with URL-safe characters
+    encoded = base64.urlsafe_b64encode(raw_deflate).decode('utf-8')
+    return encoded
+
+def render_mermaid_to_svg(mermaid_code):
+    """
+    Render Mermaid code to SVG using mermaid.ink API
+    Returns: SVG content as string, or None on failure
+    """
+    try:
+        encoded = encode_mermaid_for_ink(mermaid_code)
+        url = f"https://mermaid.ink/svg/pako:{encoded}"
+        
+        response = requests.get(url, timeout=30)
+        if response.status_code == 200:
+            return response.text
+        else:
+            return None
+    except Exception as e:
+        print(f"Mermaid rendering error: {e}")
+        return None
+
+def process_mermaid_blocks(markdown_text):
+    """
+    Parse ::mermaid...:: blocks and replace with rendered SVG + code block
+    Returns: modified markdown/HTML hybrid with embedded diagrams
+    """
+    # Pattern to match ::mermaid\n...\n::
+    pattern = r'::mermaid\n(.*?)\n::'
+    
+    def replace_mermaid(match):
+        mermaid_code = match.group(1).strip()
+        
+        # Render to SVG
+        svg_content = render_mermaid_to_svg(mermaid_code)
+        
+        if svg_content:
+            # Embed SVG as base64 data URL
+            svg_base64 = base64.b64encode(svg_content.encode('utf-8')).decode('utf-8')
+            img_tag = f'<div class="mermaid-container"><img src="data:image/svg+xml;base64,{svg_base64}" alt="Mermaid Diagram" /></div>'
+        else:
+            img_tag = '<div class="mermaid-error">⚠️ Failed to render Mermaid diagram</div>'
+        
+        # Create code block for raw mermaid code (will be processed by markdown later)
+        code_block = f'\n```mermaid\n{mermaid_code}\n```\n'
+        
+        # Return both: image first, then code block
+        return f'\n{img_tag}\n{code_block}'
+    
+    # Process all mermaid blocks
+    result = re.sub(pattern, replace_mermaid, markdown_text, flags=re.DOTALL)
+    return result
+
 # Streamlit UI
 st.title("📄 Markdown to PDF Converter")
 st.markdown("Convert your Markdown documents into beautifully formatted PDFs with syntax highlighting")
@@ -471,35 +570,26 @@ with col1:
         markdown_text = st.text_area(
             "Markdown Content",
             value="""# Welcome to Markdown PDF
-
 This is a **sample** document with **syntax highlighting**.
-
 ## Features
-
 - Beautiful typography
 - Professional layout  
 - Code highlighting with Pygments
 - Atomic list item page breaks
-
 ## Code Example
-
 ```python
 def fibonacci(n):
     \"\"\"Calculate Fibonacci number\"\"\"
     if n <= 1:
         return n
     return fibonacci(n-1) + fibonacci(n-2)
-
 print(fibonacci(10))
 ```
-
 ## JavaScript Example
-
 ```javascript
 const greeting = "Hello, World!";
 console.log(greeting);
 ```
-
 Enjoy! 🎉""",
             height=400,
             help="Supports GitHub-Flavored Markdown"
@@ -590,7 +680,7 @@ with col_btn2:
 st.divider()
 col_footer1, col_footer2, col_footer3 = st.columns(3)
 with col_footer1:
-    st.caption("🚀 Built with Streamlit & WeasyPrint")
+    st.caption("🚀 Built with Streamlit")
 with col_footer2:
     st.caption("📚 Supports GitHub-Flavored Markdown")
 with col_footer3: