2 files changed, 89 insertions, 3 deletions
diff --git a/html/merfolk/app.js b/html/merfolk/app.js
index 71d9b18..851e426 100644
--- a/html/merfolk/app.js
+++ b/html/merfolk/app.js
@@ -90,8 +90,94 @@ const handleExport = async () => {
         
         // Small delay to ensure the reset is complete
         await new Promise(resolve => setTimeout(resolve, 100));
+
+        // Prompt for scale selection
+        const scale = await new Promise((resolve) => {
+            const scaleOptions = {
+                'Small (2x)': 2,
+                'Medium (5x)': 5,
+                'Large (10x)': 10
+            };
+
+            const scaleSelect = document.createElement('select');
+            scaleSelect.style.cssText = `
+                padding: 8px;
+                font-size: 16px;
+                border: 2px solid #111;
+                background: white;
+                margin: 10px 0;
+                width: 200px;
+            `;
+
+            Object.entries(scaleOptions).forEach(([label, value]) => {
+                const option = document.createElement('option');
+                option.value = value;
+                option.textContent = label;
+                scaleSelect.appendChild(option);
+            });
+
+            const dialog = document.createElement('div');
+            dialog.style.cssText = `
+                position: fixed;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                background: white;
+                padding: 20px;
+                border: 3px solid #111;
+                z-index: 1000;
+                text-align: center;
+            `;
+
+            const title = document.createElement('h3');
+            title.textContent = 'Select Scale';
+            title.style.cssText = `
+                margin: 0 0 15px 0;
+                font-size: 18px;
+                font-weight: bold;
+            `;
+
+            const button = document.createElement('button');
+            button.textContent = 'Export';
+            button.style.cssText = `
+                padding: 8px 16px;
+                font-size: 16px;
+                border: 2px solid #111;
+                background: white;
+                cursor: pointer;
+                margin-top: 10px;
+            `;
+
+            const overlay = document.createElement('div');
+            overlay.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 999;
+            `;
+
+            button.onclick = () => {
+                document.body.removeChild(overlay);
+                resolve(Number(scaleSelect.value));
+            };
+
+            dialog.appendChild(title);
+            dialog.appendChild(scaleSelect);
+            dialog.appendChild(button);
+            overlay.appendChild(dialog);
+            document.body.appendChild(overlay);
+        });
         
-        const canvas = await html2canvas(preview, { backgroundColor: null });
+        const canvas = await html2canvas(preview, { 
+            backgroundColor: null,
+            scale,
+            logging: false,
+            useCORS: true,
+            allowTaint: true
+        });
         const link = document.createElement('a');
         link.download = 'mermaid-diagram.png';
         link.href = canvas.toDataURL('image/png');
diff --git a/html/merfolk/styles.css b/html/merfolk/styles.css
index b6eedae..3b4e2b5 100644
--- a/html/merfolk/styles.css
+++ b/html/merfolk/styles.css
@@ -129,8 +129,8 @@ input[type="text"]::placeholder, textarea::placeholder {
 #export-btn, #export-svg-btn, #reset-btn {
     flex: 1;
     margin: 0;
-    padding: 16px;
-    font-size: 1.1rem;
+    padding: 12px;
+    font-size: 1rem;
     font-weight: 700;
     text-transform: uppercase;
     border: 3px solid #111;