feat: ERD for components and schemas

public/app.js

@@ -11,6 +11,9 @@
 
   let currentTab = 'yaml';
   const opIndexByPath = new Map(); // path -> first operation element
+  let currentGraphData = null;
+  let currentERDData = null;
+  const graphTypeSelect = document.getElementById('graph-type-select');
 
   const editor = CodeMirror.fromTextArea(textarea, {
     mode: 'yaml',
@@ -456,7 +459,10 @@ paths:
         throw new Error(data && data.error ? data.error : 'Failed to parse');
       }
 
-      const { graph, info, servers } = data;
+      const { graph, erdGraph, info, servers } = data;
+      currentGraphData = graph;
+      currentERDData = erdGraph || { nodes: [], links: [] };
+      
       if (info && (info.title || info.version)) {
         const title = info.title || 'Untitled';
         const version = info.version ? ` v${info.version}` : '';
@@ -490,8 +496,26 @@ paths:
       const operations = graph.operations || [];
       renderOperations(operations);
 
-      // Graph rendering with node click jump
-      const endpoints = graph.endpoints || [];
+      // Render the selected graph type
+      renderSelectedGraph();
+
+      // Auto-switch to Form tab after successful parse
+      setTab('form');
+    } catch (e) {
+      errorEl.textContent = e.message || String(e);
+    }
+  }
+
+  function renderSelectedGraph() {
+    if (!currentGraphData && !currentERDData) return;
+    
+    const graphType = graphTypeSelect ? graphTypeSelect.value : 'endpoints';
+    
+    if (graphType === 'erd') {
+      renderERDGraph('#graph', currentERDData);
+    } else {
+      // Endpoint graph
+      const endpoints = currentGraphData.endpoints || [];
       function onNodeClick(segmentId) {
         const match = endpoints.find(ep => {
           const parts = (ep.path || '').split('/').filter(Boolean);
@@ -515,16 +539,14 @@ paths:
           }
         }
       }
-
-      renderGraph('#graph', graph, { onNodeClick });
-
-      // Auto-switch to Form tab after successful parse
-      setTab('form');
-    } catch (e) {
-      errorEl.textContent = e.message || String(e);
+      renderGraph('#graph', currentGraphData, { onNodeClick });
     }
   }
 
+  if (graphTypeSelect) {
+    graphTypeSelect.addEventListener('change', renderSelectedGraph);
+  }
+
   renderBtn.addEventListener('click', parseAndRender);
 
   // Auto-parse when YAML is pasted, then switch to Form tab