New settings

index.html

@@ -112,6 +112,31 @@
                             <label class="block text-sm text-gray-600 mb-1">Diagram Height</label>
                             <input type="range" id="diagram-height" min="300" max="800" value="400" class="w-full">
                         </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">Font Size</label>
+                            <select id="font-size" class="w-full p-2 border rounded-md">
+                                <option value="small">Small</option>
+                                <option value="medium" selected>Medium</option>
+                                <option value="large">Large</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">Background Color</label>
+                            <input type="color" id="background-color" value="#f3f4f6" class="w-full h-8">
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">Node Edge Color</label>
+                            <input type="color" id="node-edge-color" value="#000000" class="w-full h-8">
+                        </div>
+                        <div>
+                            <label class="block text-sm text-gray-600 mb-1">Text Shadow</label>
+                            <select id="text-shadow" class="w-full p-2 border rounded-md">
+                                <option value="none">None</option>
+                                <option value="light">Light</option>
+                                <option value="medium">Medium</option>
+                                <option value="dark">Dark</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
             </div>

script.js

@@ -573,6 +573,10 @@ function initDiagram() {
         (node.targetLinks && node.targetLinks.length > 0)
     );
 
+    // Update diagram container background
+    const backgroundColor = document.getElementById('background-color').value;
+    document.getElementById('diagram-container').style.backgroundColor = backgroundColor;
+
     // Add nodes with better styling
     const node = svg.append("g")
         .selectAll("g")
@@ -586,11 +590,13 @@ function initDiagram() {
         return pos ? `translate(${pos.x},${pos.y})` : `translate(${d.x},${d.y})`;
     });
 
+    const nodeEdgeColor = document.getElementById('node-edge-color').value;
+    
     node.append("rect")
         .attr("height", d => Math.max(d.dy, 1)) // Ensure minimum height of 1px
         .attr("width", d => d.dx)
         .attr("fill", d => d.color || "#4f46e5")
-        .attr("stroke", "#fff")
+        .attr("stroke", nodeEdgeColor)
         .attr("stroke-width", 1)
         .attr("rx", 3) // Rounded corners
         .attr("ry", 3);
@@ -641,6 +647,23 @@ function initDiagram() {
             textAnchor = "middle";
     }
 
+    // Get font size from settings
+    const fontSizeMap = {
+        'small': '10px',
+        'medium': '12px',
+        'large': '14px'
+    };
+    const fontSize = fontSizeMap[document.getElementById('font-size').value] || '12px';
+
+    // Get text shadow settings
+    const textShadowMap = {
+        'none': 'none',
+        'light': '1px 1px 2px rgba(0,0,0,0.2)',
+        'medium': '2px 2px 4px rgba(0,0,0,0.3)',
+        'dark': '3px 3px 6px rgba(0,0,0,0.4)'
+    };
+    const textShadow = textShadowMap[document.getElementById('text-shadow').value] || 'none';
+
     node.append("text")
         .attr("x", textX)
         .attr("y", d => d.dy / 2)
@@ -648,8 +671,9 @@ function initDiagram() {
         .attr("text-anchor", textAnchor)
         .text(d => d.name)
         .attr("fill", document.getElementById('text-color').value)
-        .attr("font-size", "12px")
+        .attr("font-size", fontSize)
         .attr("font-weight", "bold")
+        .style("text-shadow", textShadow)
         .attr("pointer-events", "all")
         .attr("cursor", "pointer")
         .on("dblclick", function(event, d) {
@@ -983,6 +1007,10 @@ document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('diagram-height').addEventListener('input', initDiagram);
     document.getElementById('link-alpha').addEventListener('input', initDiagram);
     document.getElementById('static-link-color').addEventListener('input', initDiagram);
+    document.getElementById('font-size').addEventListener('change', initDiagram);
+    document.getElementById('background-color').addEventListener('input', initDiagram);
+    document.getElementById('node-edge-color').addEventListener('input', initDiagram);
+    document.getElementById('text-shadow').addEventListener('change', initDiagram);
     
     // Handle link color mode changes
     const linkColorMode = document.getElementById('link-color-mode');