it still doesnt work, live preview doesnt show the sankey diagram. make sure to update the live view every time user add a new link. maybe you can add an update button to update the live preview section.

index.html

@@ -21,10 +21,13 @@
             <div class="p-4 border-b border-gray-200">
                 <h2 class="text-xl font-semibold text-gray-700">Live Preview</h2>
             </div>
-            <div id="diagram-container" class="p-4 h-96 w-full">
+            <div id="diagram-container" class="p-4 h-96 w-full relative">
                 <svg id="sankey-diagram" class="w-full h-full"></svg>
+                <button id="update-diagram" class="absolute top-4 right-4 bg-blue-500 hover:bg-blue-600 text-white px-3 py-1 rounded-md text-sm shadow-md transition">
+                    <i data-feather="refresh-cw" class="mr-1"></i> Update
+                </button>
             </div>
-        </section>
+</section>
 
         <!-- Control Panel Section -->
         <section class="bg-white rounded-xl shadow-md overflow-hidden">

script.js

@@ -151,13 +151,13 @@ document.addEventListener('DOMContentLoaded', () => {
             initDiagram();
         }
     });
-
     // Add link
     document.getElementById('add-link').addEventListener('click', () => {
         const sourceIndex = parseInt(document.getElementById('source-node').value);
         const targetIndex = parseInt(document.getElementById('target-node').value);
-            const value = parseInt(document.getElementById('link-value').value) || 1;
-if (!isNaN(sourceIndex) && !isNaN(targetIndex) && !isNaN(value) && value > 0) {
+        const value = parseInt(document.getElementById('link-value').value) || 1;
+        
+        if (!isNaN(sourceIndex) && !isNaN(targetIndex) && !isNaN(value) && value > 0) {
             sankeyData.links.push({
                 source: sourceIndex,
                 target: targetIndex,
@@ -169,7 +169,9 @@ if (!isNaN(sourceIndex) && !isNaN(targetIndex) && !isNaN(value) && value > 0) {
         }
     });
 
-    // Delete node or link
+    // Manual diagram update
+    document.getElementById('update-diagram').addEventListener('click', initDiagram);
+// Delete node or link
     document.addEventListener('click', (e) => {
         if (e.target.closest('button[data-index]')) {
             const button = e.target.closest('button[data-index]');

style.css

@@ -5,11 +5,11 @@
     background: #f8fafc;
     border-radius: 0.5rem;
 }
-
 #diagram-container {
     background: white;
     border-radius: 0.5rem;
     margin: 0.5rem;
+    position: relative;
 }
 .node rect {
     cursor: move;