svg export with text content is resolved

Mermaid_Selector.html

@@ -355,9 +355,9 @@ graph TD
                         <button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
                         <button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom" style="font-size: 1.2em;">⟲</button>
                         <button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen" style="font-size: 1.2em;">⛶</button>
-                        <button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG" style="font-size: 1em;">PNG</button>
+                        <button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG (Best for Word/PDF - Vector Format)" style="font-size: 1em; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">SVG</button>
-                        <button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG" style="font-size: 1em;">JPG</button>
+                        <button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG (Raster Format)" style="font-size: 1em;">PNG</button>
-                        <button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG" style="font-size: 1em;">SVG</button>
+                        <button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG (Raster Format)" style="font-size: 1em;">JPG</button>
                     </div>
                 </div>
             </div>
@@ -638,18 +638,119 @@ graph TD
                 clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
                 clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
                 
-                // Add embedded style for standard fonts
+                // Convert foreignObject elements to native SVG text (Word doesn't support foreignObject)
-                const styleElement = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+                const foreignObjects = clonedSvg.querySelectorAll('foreignObject');
-                styleElement.textContent = `
+                foreignObjects.forEach(fo => {
-                    text {
+                    const foText = fo.textContent || '';
-                        font-family: Arial, Helvetica, Verdana, sans-serif !important;
+                    if (foText.trim()) {
-                        font-size: 14px !important;
+                        const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+                        
+                        // Handle multi-line text by splitting into tspan elements
+                        const lines = foText.trim().split('\n').filter(line => line.trim());
+                        
+                        // Copy position attributes
+                        const x = fo.getAttribute('x') || '0';
+                        const y = fo.getAttribute('y') || '0';
+                        const width = fo.getAttribute('width') || '100';
+                        const height = fo.getAttribute('height') || '20';
+                        
+                        const centerX = parseFloat(x) + parseFloat(width)/2;
+                        const centerY = parseFloat(y) + parseFloat(height)/2;
+                        
+                        textElement.setAttribute('x', centerX);
+                        textElement.setAttribute('y', centerY);
+                        textElement.setAttribute('text-anchor', 'middle');
+                        textElement.setAttribute('dominant-baseline', 'middle');
+                        textElement.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
+                        textElement.setAttribute('font-size', '14px');
+                        textElement.setAttribute('fill', 'black');
+                        textElement.setAttribute('stroke', 'none');
+                        
+                        if (lines.length === 1) {
+                            textElement.textContent = lines[0];
+                        } else {
+                            // Multi-line text
+                            lines.forEach((line, index) => {
+                                const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+                                tspan.textContent = line;
+                                tspan.setAttribute('x', centerX);
+                                tspan.setAttribute('dy', index === 0 ? '0' : '1.2em');
+                                textElement.appendChild(tspan);
+                            });
+                        }
+                        
+                        // Replace foreignObject with text
+                        fo.parentNode.replaceChild(textElement, fo);
+                    } else {
+                        fo.remove();
                     }
-                    .nodeLabel, .edgeLabel {
+                });
-                        font-family: Arial, Helvetica, Verdana, sans-serif !important;
+                
+                // ONLY process text elements - leave shapes and paths untouched
+                const allTextElements = clonedSvg.querySelectorAll('text');
+                allTextElements.forEach((textElement, index) => {
+                    // Remove contentEditable
+                    textElement.removeAttribute('contentEditable');
+                    
+                    // Only add missing font attributes, don't modify existing ones
+                    if (!textElement.hasAttribute('font-family')) {
+                        textElement.setAttribute('font-family', 'Arial, Helvetica, sans-serif');
                     }
-                `;
+                    if (!textElement.hasAttribute('font-size')) {
-                clonedSvg.insertBefore(styleElement, clonedSvg.firstChild);
+                        textElement.setAttribute('font-size', '14px');
+                    }
+                    if (!textElement.hasAttribute('fill')) {
+                        textElement.setAttribute('fill', 'black');
+                    }
+                    
+                    // Only clean up pointer-events and user-select from style, keep everything else
+                    const styleAttr = textElement.getAttribute('style');
+                    if (styleAttr) {
+                        const cleanedStyles = styleAttr.split(';')
+                            .filter(s => {
+                                const trimmed = s.trim();
+                                return trimmed && 
+                                    !trimmed.startsWith('pointer-events') &&
+                                    !trimmed.startsWith('user-select') &&
+                                    !trimmed.startsWith('-webkit-user-select') &&
+                                    !trimmed.startsWith('-moz-user-select');
+                            })
+                            .join('; ');
+                        
+                        if (cleanedStyles) {
+                            textElement.setAttribute('style', cleanedStyles);
+                        } else {
+                            textElement.removeAttribute('style');
+                        }
+                    }
+                });
+                
+                // Process tspan elements - minimal changes
+                const allTspanElements = clonedSvg.querySelectorAll('tspan');
+                allTspanElements.forEach(tspan => {
+                    tspan.removeAttribute('contentEditable');
+                    
+                    // Only clean up pointer-events and user-select
+                    const styleAttr = tspan.getAttribute('style');
+                    if (styleAttr) {
+                        const cleanedStyles = styleAttr.split(';')
+                            .filter(s => {
+                                const trimmed = s.trim();
+                                return trimmed && 
+                                    !trimmed.startsWith('pointer-events') &&
+                                    !trimmed.startsWith('user-select') &&
+                                    !trimmed.startsWith('-webkit-user-select') &&
+                                    !trimmed.startsWith('-moz-user-select');
+                            })
+                            .join('; ');
+                        
+                        if (cleanedStyles) {
+                            tspan.setAttribute('style', cleanedStyles);
+                        } else {
+                            tspan.removeAttribute('style');
+                        }
+                    }
+                });
                 
                 // Get SVG dimensions
                 const bbox = svg.getBBox();
@@ -684,7 +785,7 @@ graph TD
                 // Cleanup
                 URL.revokeObjectURL(url);
                 
-                showMessage('✅ Diagram exported as SVG', 'success');
+                showMessage('✅ SVG exported - Optimized for Word/PDF with full text compatibility', 'success');
             } catch (error) {
                 showMessage('❌ Error: ' + error.message, 'error');
                 console.error('SVG export error:', error);

approval_hierarchy.mermaid

@@ -1,9 +1,9 @@
 graph TD
 
-DDT[DD Team<br/>First point of contact,<br/>Initial processing] --> ZM[ZM<br/>Evaluates and Approves/Rejects]
+DDT[DD Team - First point of contact, Initial processing] --> ZM[ZM - Evaluates and Approves/Rejects]
-ZM --> RBM[RBM<br/>Reviews ZM-approved applications,<br/>Makes final decisions]
+ZM --> RBM[RBM - Reviews ZM-approved applications, Makes final decisions]
-RBM --> DDL[DDL<br/>Evaluates RBM-approved applications<br/>and Forwards to Finance]
+RBM --> DDL[DDL - Evaluates RBM-approved applications and Forwards to Finance]
-DDL --> FDD[FDD Team<br/>Financial Due Diligence<br/>and Document Submission]
+DDL --> FDD[FDD Team - Financial Due Diligence and Document Submission]
-FDD --> NBH[NBH<br/>Final Review and Approval]
+FDD --> NBH[NBH - Final Review and Approval]
-NBH --> Legal[Legal<br/>Handles Legal Documentation<br/>and Compliance]
+NBH --> Legal[Legal - Handles Legal Documentation and Compliance]
-Legal --> SuperAdmin[Super Admin<br/>Full Oversight and Management]
+Legal --> SuperAdmin[Super Admin - Full Oversight and Management]

settlment_diagram.mermaid

@@ -1,13 +1,13 @@
 graph TD
 
     %% ===== Start =====
-    Start([🟢 Start: Dealer Claim Process]) --> RI[1️⃣ Request Initiation<br/><i>Requestor</i><br/>Submits activity request<br/>with dealer info, type, date, location, and details]
+    Start([🟢 Start: Dealer Claim Process]) --> RI[1️⃣ Request Initiation - <i>Requestor</i> - Submits activity request with dealer info, type, date, location, and details]
 
     %% ===== Proposal Submission =====
-    RI --> PS[2️⃣ Proposal Submission<br/><i>Dealer</i><br/>Submits proposal with<br/>cost breakup, timeline,<br/>and supporting documents]
+    RI --> PS[2️⃣ Proposal Submission - <i>Dealer</i> - Submits proposal with cost breakup, timeline, and supporting documents]
 
     %% ===== Request Evaluation =====
-    PS --> RE[3️⃣ Request Evaluation<br/><i>Requestor</i><br/>Reviews dealer proposal<br/>and adds comments]
+    PS --> RE[3️⃣ Request Evaluation - <i>Requestor</i> - Reviews dealer proposal and adds comments]
 
     RE --> RE_Decision{Proposal Satisfactory?}
     RE_Decision -->|❌ Needs Clarification| RE_Clarify[Requestor Requests Clarification]
@@ -15,22 +15,22 @@ graph TD
     RE_Decision -->|✅ Confirmed to Proceed| DLA
 
     %% ===== Department Lead Approval =====
-    DLA[4️⃣ Department Lead Approval<br/><i>Dept. Lead</i><br/>Reviews and Approves Request] --> DLA_Decision{Lead Decision}
+    DLA[4️⃣ Department Lead Approval - <i>Dept. Lead</i> - Reviews and Approves Request] --> DLA_Decision{Lead Decision}
     DLA_Decision -->|❌ Needs Clarification| DLA_Clarify[Lead Requests Clarification]
     DLA_Clarify --> RE
     DLA_Decision -->|✅ Approved| BUD
 
     %% ===== Budgeting =====
-    BUD[5️⃣ Budgeting<br/><i>Finance or System</i><br/>Blocks budget under IO Internal Order] --> AC
+    BUD[5️⃣ Budgeting - <i>Finance or System</i> - Blocks budget under IO Internal Order] --> AC
 
     %% ===== Activity Creation =====
-    AC[6️⃣ Activity Creation<br/><i>System</i><br/>Creates Activity and Sends Notifications<br/>to Requestor, Dealer and Lead] --> AE
+    AC[6️⃣ Activity Creation - <i>System</i> - Creates Activity and Sends Notifications to Requestor, Dealer and Lead] --> AE
 
     %% ===== Activity Execution =====
-    AE[7️⃣ Activity Execution<br/><i>Dealer</i><br/>Executes Activity<br/>and Uploads Proof Documents] --> CA
+    AE[7️⃣ Activity Execution - <i>Dealer</i> - Executes Activity and Uploads Proof Documents] --> CA
 
     %% ===== Claim Approval =====
-    CA[8️⃣ Claim Approval<br/><i>Requestor</i><br/>Reviews submitted documents] --> CA_Decision{Documents OK?}
+    CA[8️⃣ Claim Approval - <i>Requestor</i> - Reviews submitted documents] --> CA_Decision{Documents OK?}
     CA_Decision -->|❌ Needs More Info| CA_Clarify[Requestor Requests Additional Information]
     CA_Clarify --> AE
     CA_Decision -->|✅ Approved| CA_Type{Approval Type}
@@ -38,7 +38,7 @@ graph TD
     CA_Type -->|Partial Approval| EI
 
     %% ===== E-Invoicing =====
-    EI[9️⃣ E-Invoicing<br/><i>Finance or System</i><br/>Generates E-Invoice<br/>and Issues Credit Note] --> End([✅ Claim Settled<br/>Process Completed])
+    EI[9️⃣ E-Invoicing - <i>Finance or System</i> - Generates E-Invoice and Issues Credit Note] --> End([✅ Claim Settled - Process Completed])
 
     %% ===== Styles =====
     style RI fill:#e3f2fd,stroke:#2196f3,stroke-width:2px,color:#000