Flowchart Script Generator

Flowchart Script Generator

1. Process Metadata

2. Add Node

3. Current Nodes in Sequence

Customer Support Ticket Process

Flowchart Script (Mermaid Syntax Example)



                
Process Data Table

                

                    

                        
                            

                                Node ID
                                Type
                                Instruction
                                Next ID(s)
                            

                        
                        
                            
                        
                    

                

            


            

                
            

        


    
 

    
    

        
        
    








No nodes defined.
';
        }

        appState.nodes.forEach(function(node) {
            var item = document.createElement('div');
            item.className = 'fcs-node-list-item';
            item.innerHTML = `
                
                    ${node.type.toUpperCase()} 
                    ${node.name}: ${node.desc.substring(0, 40)}...
                
                
            `;
            nodesListDiv.appendChild(item);
        });
        
        // Add remove listeners
        nodesListDiv.querySelectorAll('.fcs-remove-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var id = parseInt(btn.dataset.id);
                appState.nodes = appState.nodes.filter(function(n) { return n.id !== id; });
                saveState();
                renderConfigTab();
            });
        });
    }

    addNodeBtn.addEventListener('click', function() {
        var name = nodeNameInput.value.trim().toUpperCase();
        var type = nodeTypeSelect.value;
        var desc = nodeDescInput.value.trim();
        var next = nextNodeInput.value.trim().replace(/\s/g, '');
        
        if (!name || !desc) {
            alert("Please fill in the Node ID and Description.");
            return;
        }
        
        if (appState.nodes.some(function(n) { return n.name === name; })) {
            alert("Node ID must be unique.");
            return;
        }

        var newNode = {
            id: Date.now(),
            name: name,
            type: type,
            desc: desc,
            next: next
        };
        
        appState.nodes.push(newNode);
        saveState();
        renderConfigTab();
        
        // Clear inputs
        nodeNameInput.value = '';
        nodeDescInput.value = '';
        nextNodeInput.value = '';
        nodeTypeSelect.value = 'Process';
    });
    
    // Update button action
    updateBtn.addEventListener("click", function() {
        appState.title = processNameInput.value;
        saveState();
        renderDashboardTab();
        showTab(1); // Switch to Dashboard
    });

    // --- Core Logic: Dashboard Rendering ---
    
    function renderDashboardTab() {
        processTitleDisplay.textContent = appState.title;
        
        // 1. Generate Mermaid Script
        var script = 'graph TD\n';
        
        appState.nodes.forEach(function(node) {
            var shape = '';
            var label = node.desc.replace(/\"/g, '\\"'); // Escape quotes
            
            if (node.type === 'Start' || node.type === 'End') {
                shape = (node.type === 'Start') ? '((nodeName))' : '((nodeName))'; // Start and End are same shape in Mermaid for simplicity
                script += `  ${node.name}[(${label})]:::terminal\n`;
            } else if (node.type === 'Process') {
                script += `  ${node.name}[${label}]:::process\n`;
            } else if (node.type === 'Decision') {
                script += `  ${node.name}{${label}}:::decision\n`;
            }

            // Add links
            if (node.next) {
                var nextNodes = node.next.split(',');
                nextNodes.forEach(function(nextNode) {
                    var trimmedNext = nextNode.trim();
                    var linkLabel = '';
                    
                    if (node.type === 'Decision') {
                        // Assuming the decision format is "NodeID (Label)" or just "NodeID"
                        var parts = trimmedNext.split('(');
                        var targetId = parts[0].trim();
                        linkLabel = parts.length > 1 ? `|${parts[1].replace(')', '').trim()}|` : '';
                        script += `  ${node.name} --${linkLabel}--> ${targetId}\n`;
                    } else if (node.type === 'Process' || node.type === 'Start') {
                        script += `  ${node.name} --> ${trimmedNext}\n`;
                    }
                });
            }
        });
        
        // Add styling classes for clarity (Mermaid specific)
        script += '\nclassDef terminal fill:#A7C7A7,stroke:#333,stroke-width:2px;\n';
        script += 'classDef process fill:#ADD8E6,stroke:#333,stroke-width:2px;\n';
        script += 'classDef decision fill:#FFDDAA,stroke:#333,stroke-width:2px;\n';

        scriptOutput.textContent = script;
        
        // 2. Render Data Table
        dataTableBody.innerHTML = '';
        if (appState.nodes.length === 0) {
            dataTableBody.innerHTML = 'No nodes defined.';
            return;
        }

        appState.nodes.forEach(function(node) {
            var typeTag = `${node.type.toUpperCase()}`;
            dataTableBody.innerHTML += `
                
                    ${node.name}
                    ${typeTag}
                    ${node.desc}
                    ${node.next || 'N/A'}
                
            `;
        });
    }

    // --- PDF Download ---
    pdfBtn.addEventListener("click", function() {
        var jsPDF = window.jspdf.jsPDF;
        var projectSlug = appState.title.replace(/[^a-zA-Z0-9\s]/g, '').replace(/\s/g, '_').substring(0, 30) || 'Flowchart_Script';
        var fileName = `${projectSlug}_Script_Document.pdf`;

        html2canvas(exportArea, { 
            scale: 2, 
            useCORS: true,
            backgroundColor: '#ffffff'
        }).then(function(canvas) {
            var imgData = canvas.toDataURL('image/png');
            var doc = new jsPDF({
                orientation: 'p', 
                unit: 'pt',
                format: 'letter'
            });

            var pdfWidth = doc.internal.pageSize.getWidth();
            var pdfHeight = doc.internal.pageSize.getHeight();
            var imgProps = doc.getImageProperties(imgData);
            var imgWidth = imgProps.width;
            var imgHeight = imgProps.height;
            var margin = 40;
            var usableWidth = pdfWidth - (2 * margin);
            var ratio = usableWidth / imgWidth;
            var scaledHeight = imgHeight * ratio;

            var usablePageHeight = pdfHeight - (2 * margin);
            var heightLeft = scaledHeight;
            var position = 0; 
            
            while (heightLeft > 0) {
                doc.addImage(imgData, 'PNG', margin, position + margin, usableWidth, scaledHeight);
                
                heightLeft -= usablePageHeight;
                position -= usablePageHeight; 
                
                if (heightLeft > 0) {
                    doc.addPage();
                }
            }
            
            doc.save(fileName);
        }).catch(function(err) {
            console.error("FCS PDF Error:", err);
            // alert("An error occurred while generating the PDF."); // Per spec
        });
    });

    // --- Initial Load ---
    loadState();
    renderConfigTab(); 
    renderDashboardTab(); 
    showTab(0);
});

				

				

					

				

				

		






	
	



	
	


			
			
		
	



	
 
	


	




	
                
                	Scroll to Top