diff --git a/auto-detect-newman.html b/auto-detect-newman.html
index d4d7d0e..a6da7d7 100644
--- a/auto-detect-newman.html
+++ b/auto-detect-newman.html
@@ -384,7 +384,7 @@ <h1>Swagger Coverage Report</h1>
     &#128262; <!-- flashlight icon -->
   </button>
   <div class="meta-info">
-    <p><strong>Timestamp:</strong> 9/18/2025, 2:32:58 PM</p>
+    <p><strong>Timestamp:</strong> 9/21/2025, 7:49:24 PM</p>
     <p><strong>API Spec:</strong> Test API</p>
     
     <p><strong>Postman Collection:</strong> Test Newman Collection</p>
diff --git a/cli.js b/cli.js
index f877d4a..5300810 100755
--- a/cli.js
+++ b/cli.js
@@ -9,7 +9,7 @@ const { loadAndParseSpec, extractOperationsFromSpec } = require("./lib/swagger")
 const { loadPostmanCollection, extractRequestsFromPostman } = require("./lib/postman");
 const { loadNewmanReport, extractRequestsFromNewman } = require("./lib/newman");
 const { matchOperationsDetailed } = require("./lib/match");
-const { generateHtmlReport } = require("./lib/report");
+const { generateHtmlReport, generateGraphHtmlReport } = require("./lib/report");
 const { loadExcelSpec } = require("./lib/excel");
 const { loadAndParseProto, extractOperationsFromProto, isProtoFile } = require("./lib/grpc");
 const { loadAndParseGraphQL, extractOperationsFromGraphQL, isGraphQLFile } = require("./lib/graphql");
@@ -29,9 +29,10 @@ program
   .option("--strict-body", "Enable strict validation of requestBody (JSON)")
   .option("--output <file>", "HTML report output file", "coverage-report.html")
   .option("--newman", "Treat input file as Newman run report instead of Postman collection")
+  .option("--graph-report", "Generate a separate graph schema HTML report showing API test coverage with nodes and edges")
   .action(async (apiFiles, postmanFile, options) => {
     try {
-      const { verbose, strictQuery, strictBody, output, newman } = options;
+      const { verbose, strictQuery, strictBody, output, newman, graphReport } = options;
 
       // Parse comma-separated API files
       const files = apiFiles.includes(',') ? 
@@ -217,6 +218,26 @@ program
 
       fs.writeFileSync(path.resolve(output), html, "utf8");
       console.log(`\nHTML report saved to: ${output}`);
+
+      // 8. Generate graph report if requested
+      if (graphReport) {
+        const graphOutputFile = output.replace(/\.html?$/i, '-graph.html');
+        const graphHtml = generateGraphHtmlReport({
+          coverage,
+          coverageItems,
+          meta: {
+            timestamp: new Date().toLocaleString(),
+            specName: combinedSpecName,
+            postmanCollectionName: collectionName,
+            undocumentedRequests,
+            apiCount: files.length,
+            apiNames: allSpecNames
+          },
+        });
+
+        fs.writeFileSync(path.resolve(graphOutputFile), graphHtml, "utf8");
+        console.log(`Graph report saved to: ${graphOutputFile}`);
+      }
     } catch (err) {
       console.error("Error:", err.message);
       process.exit(1);
diff --git a/current-tree.html b/current-tree.html
new file mode 100644
index 0000000..09e70ec
--- /dev/null
+++ b/current-tree.html
@@ -0,0 +1,480 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Coverage Tree Report</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    body {
+      margin: 0;
+      font-family: 'Roboto', sans-serif;
+      background-color: #fafafa;
+      color: #212121;
+    }
+    
+    header {
+      padding: 16px;
+      background-color: #ffffff;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      text-align: center;
+    }
+    
+    h1 {
+      margin: 0 0 8px 0;
+      font-size: 1.8rem;
+      color: #6200ee;
+    }
+    
+    .meta-info {
+      font-size: 0.9em;
+      opacity: 0.8;
+      margin-bottom: 16px;
+    }
+    
+    .controls {
+      text-align: center;
+      padding: 16px;
+      background-color: #ffffff;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    
+    .tree-controls {
+      margin-bottom: 10px;
+    }
+    
+    .tree-btn {
+      margin: 0 5px;
+      padding: 8px 16px;
+      background-color: #6200ee;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    
+    .tree-btn:hover {
+      background-color: #7c4dff;
+    }
+    
+    .legend {
+      display: inline-block;
+      margin: 0 20px;
+    }
+    
+    .legend-item {
+      display: inline-block;
+      margin: 0 10px;
+      font-size: 0.9em;
+    }
+    
+    .legend-color {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
+    
+    .covered { background-color: #4caf50; }
+    .partial { background-color: #ff9800; }
+    .not-covered { background-color: #f44336; }
+    .group { background-color: #2196f3; }
+    .root { background-color: #9c27b0; }
+    
+    #tree-container {
+      width: 100%;
+      height: calc(100vh - 250px);
+      min-height: 600px;
+      background-color: #ffffff;
+      position: relative;
+      overflow: auto;
+    }
+    
+    .node-circle {
+      cursor: pointer;
+      stroke: #333;
+      stroke-width: 2px;
+    }
+    
+    .node-circle.covered {
+      fill: #4caf50;
+    }
+    
+    .node-circle.partial {
+      fill: #ff9800;
+    }
+    
+    .node-circle.not-covered {
+      fill: #f44336;
+    }
+    
+    .node-circle.group {
+      fill: #2196f3;
+    }
+    
+    .node-circle.root {
+      fill: #9c27b0;
+    }
+    
+    .link {
+      fill: none;
+      stroke: #666;
+      stroke-width: 2px;
+    }
+    
+    .node-text {
+      font-size: 12px;
+      font-family: 'Roboto', sans-serif;
+      cursor: pointer;
+      user-select: none;
+    }
+    
+    .node-text.endpoint {
+      font-size: 11px;
+      font-weight: normal;
+    }
+    
+    .node-text.group {
+      font-weight: bold;
+    }
+    
+    .node-text.root {
+      font-weight: bold;
+      font-size: 14px;
+    }
+    
+    .tooltip {
+      position: absolute;
+      background-color: rgba(0, 0, 0, 0.8);
+      color: white;
+      padding: 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      pointer-events: none;
+      z-index: 100;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    
+    .expand-symbol {
+      font-size: 12px;
+      font-weight: bold;
+      fill: #333;
+      text-anchor: middle;
+      dominant-baseline: central;
+      pointer-events: none;
+    }
+    
+    footer {
+      text-align: center;
+      padding: 16px;
+      background-color: #f5f5f5;
+      border-top: 1px solid #e0e0e0;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>API Coverage Tree Report</h1>
+    <div class="meta-info">
+      <p><strong>Timestamp:</strong> 9/21/2025, 7:43:34 PM</p>
+      <p><strong>API Spec:</strong> Sample API for Newman Demo</p>
+      
+      <p><strong>Postman Collection:</strong> Comprehensive Test Collection</p>
+      <p><strong>Overall Coverage:</strong> 16.67%</p>
+    </div>
+  </header>
+  
+  <div class="controls">
+    <div class="tree-controls">
+      <button class="tree-btn" onclick="expandAll()">Expand All</button>
+      <button class="tree-btn" onclick="collapseAll()">Collapse All</button>
+      <button class="tree-btn" onclick="centerTree()">Center View</button>
+    </div>
+    <div class="legend">
+      <h3 style="margin: 0 0 10px 0;">Coverage Status</h3>
+      <div class="legend-item">
+        <span class="legend-color covered"></span>
+        <span>Covered (3)</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color partial"></span>
+        <span>Partial (0)</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color not-covered"></span>
+        <span>Not Covered (15)</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color group"></span>
+        <span>Groups</span>
+      </div>
+    </div>
+  </div>
+  
+  <div id="tree-container">
+    <div class="tooltip" id="tooltip"></div>
+  </div>
+  
+  <footer>
+    <p>Generated by swagger-coverage-cli - Expandable tree visualization shows API endpoints hierarchically with coverage status color coding</p>
+  </footer>
+
+  <script>
+    // Tree data
+    const treeData = {"name":"API Coverage","children":[{"name":"Sample API for Newman Demo","children":[{"name":"Users","children":[{"name":"/users","children":[{"name":"GET /users","method":"GET","path":"/users","status":"covered","type":"endpoint","coverage":100,"matchedRequests":[{"name":"Get All Users","rawUrl":"{{baseUrl}}/users?limit=10&offset=0","method":"GET","testedStatusCodes":["200"],"testScripts":"pm.test('Status code is 200', function () {\n    pm.response.to.have.status(200);\n});\n\npm.test('Response is an array', function () {\n    pm.response.to.be.json;\n    pm.expect(pm.response.json()).to.be.an('array');\n});","confidence":0.8999999999999999}],"operationName":"getUsers"},{"name":"GET /users","method":"GET","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUsers"},{"name":"GET /users","method":"GET","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUsers"},{"name":"POST /users","method":"POST","path":"/users","status":"covered","type":"endpoint","coverage":100,"matchedRequests":[{"name":"Create User","rawUrl":"{{baseUrl}}/users","method":"POST","testedStatusCodes":["201"],"testScripts":"pm.test('Status code is 201', function () {\n    pm.response.to.have.status(201);\n});\n\npm.test('User created successfully', function () {\n    const responseJson = pm.response.json();\n    pm.expect(responseJson).to.have.property('id');\n    pm.expect(responseJson.email).to.eql('john.doe@example.com');\n});","confidence":0.8999999999999999}],"operationName":"createUser"},{"name":"POST /users","method":"POST","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"createUser"},{"name":"POST /users","method":"POST","path":"/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"createUser"}],"type":"path","status":"group"},{"name":"/users/{id}","children":[{"name":"GET /users/{id}","method":"GET","path":"/users/{id}","status":"covered","type":"endpoint","coverage":100,"matchedRequests":[{"name":"Get User by ID","rawUrl":"{{baseUrl}}/users/{{userId}}","method":"GET","testedStatusCodes":["200"],"testScripts":"pm.test('Status code is 200', function () {\n    pm.response.to.have.status(200);\n});\n\npm.test('User has required properties', function () {\n    const user = pm.response.json();\n    pm.expect(user).to.have.property('id');\n    pm.expect(user).to.have.property('email');\n    pm.expect(user).to.have.property('firstName');\n    pm.expect(user).to.have.property('lastName');\n});","confidence":0.8999999999999999}],"operationName":"getUserById"},{"name":"GET /users/{id}","method":"GET","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUserById"},{"name":"GET /users/{id}","method":"GET","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getUserById"},{"name":"PATCH /users/{id}","method":"PATCH","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"updateUser"},{"name":"PATCH /users/{id}","method":"PATCH","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"updateUser"},{"name":"PATCH /users/{id}","method":"PATCH","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"updateUser"},{"name":"DELETE /users/{id}","method":"DELETE","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"deleteUser"},{"name":"DELETE /users/{id}","method":"DELETE","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"deleteUser"},{"name":"DELETE /users/{id}","method":"DELETE","path":"/users/{id}","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"deleteUser"}],"type":"path","status":"group"}],"type":"tag","status":"group"},{"name":"Admin","children":[{"name":"/admin/users","children":[{"name":"GET /admin/users","method":"GET","path":"/admin/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getAdminUsers"},{"name":"GET /admin/users","method":"GET","path":"/admin/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getAdminUsers"},{"name":"GET /admin/users","method":"GET","path":"/admin/users","status":"not-covered","type":"endpoint","coverage":0,"matchedRequests":[],"operationName":"getAdminUsers"}],"type":"path","status":"group"}],"type":"tag","status":"group"}],"type":"api","status":"group"}],"type":"root","status":"root"};
+    
+    // Set up dimensions and margins
+    const margin = { top: 20, right: 120, bottom: 20, left: 120 };
+    const container = d3.select('#tree-container');
+    const containerNode = container.node();
+    const width = containerNode.clientWidth - margin.left - margin.right;
+    const height = containerNode.clientHeight - margin.top - margin.bottom;
+    
+    // Create SVG
+    const svg = container.append('svg')
+      .attr('width', containerNode.clientWidth)
+      .attr('height', containerNode.clientHeight);
+    
+    const g = svg.append('g')
+      .attr('transform', `translate(${margin.left},${margin.top})`);
+    
+    // Set up zoom behavior
+    const zoom = d3.zoom()
+      .scaleExtent([0.1, 3])
+      .on('zoom', (event) => {
+        g.attr('transform', `translate(${event.transform.x + margin.left},${event.transform.y + margin.top}) scale(${event.transform.k})`);
+      });
+    
+    svg.call(zoom);
+    
+    // Create tree layout
+    const tree = d3.tree().size([height, width]);
+    
+    let i = 0;
+    const duration = 500;
+    
+    // Initialize the tree
+    const root = d3.hierarchy(treeData, d => d.children);
+    root.x0 = height / 2;
+    root.y0 = 0;
+    
+    // Collapse all children initially except root
+    function collapse(d) {
+      if (d.children) {
+        d._children = d.children;
+        d._children.forEach(collapse);
+        d.children = null;
+      }
+    }
+    
+    root.children.forEach(collapse);
+    
+    update(root);
+    
+    function update(source) {
+      // Compute the new tree layout
+      const treeData = tree(root);
+      const nodes = treeData.descendants();
+      const links = treeData.descendants().slice(1);
+      
+      // Normalize for fixed-depth
+      nodes.forEach(d => { d.y = d.depth * 180; });
+      
+      // Update the nodes
+      const node = g.selectAll('g.node')
+        .data(nodes, d => d.id || (d.id = ++i));
+      
+      // Enter any new nodes at the parent's previous position
+      const nodeEnter = node.enter().append('g')
+        .attr('class', 'node')
+        .attr('transform', d => `translate(${source.y0},${source.x0})`)
+        .on('click', click);
+      
+      // Add circles for the nodes
+      nodeEnter.append('circle')
+        .attr('class', d => `node-circle ${d.data.status}`)
+        .attr('r', 1e-6)
+        .on('mouseover', showTooltip)
+        .on('mouseout', hideTooltip);
+      
+      // Add expand/collapse symbol
+      nodeEnter.append('text')
+        .attr('class', 'expand-symbol')
+        .attr('dy', '0.35em')
+        .text(d => d._children ? '+' : (d.children ? '−' : ''));
+      
+      // Add labels for the nodes
+      nodeEnter.append('text')
+        .attr('class', d => `node-text ${d.data.type}`)
+        .attr('dy', '0.35em')
+        .attr('x', d => d.children || d._children ? -13 : 13)
+        .attr('text-anchor', d => d.children || d._children ? 'end' : 'start')
+        .text(d => d.data.name);
+      
+      // Transition nodes to their new position
+      const nodeUpdate = nodeEnter.merge(node);
+      
+      nodeUpdate.transition()
+        .duration(duration)
+        .attr('transform', d => `translate(${d.y},${d.x})`);
+      
+      nodeUpdate.select('circle.node-circle')
+        .attr('r', d => {
+          if (d.data.type === 'root') return 12;
+          if (d.data.type === 'endpoint') return 8;
+          return 10;
+        })
+        .attr('class', d => `node-circle ${d.data.status}`);
+      
+      nodeUpdate.select('text.expand-symbol')
+        .text(d => d._children ? '+' : (d.children ? '−' : ''));
+      
+      // Remove any exiting nodes
+      const nodeExit = node.exit().transition()
+        .duration(duration)
+        .attr('transform', d => `translate(${source.y},${source.x})`)
+        .remove();
+      
+      nodeExit.select('circle')
+        .attr('r', 1e-6);
+      
+      nodeExit.select('text')
+        .style('fill-opacity', 1e-6);
+      
+      // Update the links
+      const link = g.selectAll('path.link')
+        .data(links, d => d.id);
+      
+      // Enter any new links at the parent's previous position
+      const linkEnter = link.enter().insert('path', 'g')
+        .attr('class', 'link')
+        .attr('d', d => {
+          const o = { x: source.x0, y: source.y0 };
+          return diagonal(o, o);
+        });
+      
+      // Transition links to their new position
+      const linkUpdate = linkEnter.merge(link);
+      
+      linkUpdate.transition()
+        .duration(duration)
+        .attr('d', d => diagonal(d, d.parent));
+      
+      // Remove any exiting links
+      const linkExit = link.exit().transition()
+        .duration(duration)
+        .attr('d', d => {
+          const o = { x: source.x, y: source.y };
+          return diagonal(o, o);
+        })
+        .remove();
+      
+      // Store the old positions for transition
+      nodes.forEach(d => {
+        d.x0 = d.x;
+        d.y0 = d.y;
+      });
+    }
+    
+    // Creates a curved (diagonal) path from parent to the child nodes
+    function diagonal(s, d) {
+      const path = `M ${s.y} ${s.x}
+        C ${(s.y + d.y) / 2} ${s.x},
+          ${(s.y + d.y) / 2} ${d.x},
+          ${d.y} ${d.x}`;
+      return path;
+    }
+    
+    // Toggle children on click
+    function click(event, d) {
+      if (d.children) {
+        d._children = d.children;
+        d.children = null;
+      } else {
+        d.children = d._children;
+        d._children = null;
+      }
+      update(d);
+    }
+    
+    // Tooltip functions
+    function showTooltip(event, d) {
+      const tooltip = d3.select('#tooltip');
+      let content = `<strong>${d.data.name}</strong><br/>`;
+      
+      if (d.data.type === 'endpoint') {
+        content += `Method: ${d.data.method}<br/>`;
+        content += `Path: ${d.data.path}<br/>`;
+        content += `Status: ${d.data.status.replace('-', ' ')}<br/>`;
+        if (d.data.operationName) {
+          content += `Operation: ${d.data.operationName}<br/>`;
+        }
+        if (d.data.matchedRequests && d.data.matchedRequests.length > 0) {
+          content += `Tests: ${d.data.matchedRequests.length}<br/>`;
+        }
+      } else {
+        content += `Type: ${d.data.type}<br/>`;
+        const childCount = (d.children || d._children || []).length;
+        if (childCount > 0) {
+          content += `Children: ${childCount}<br/>`;
+        }
+      }
+      
+      tooltip
+        .style('opacity', 1)
+        .style('left', (event.pageX + 10) + 'px')
+        .style('top', (event.pageY + 10) + 'px')
+        .html(content);
+    }
+    
+    function hideTooltip() {
+      d3.select('#tooltip').style('opacity', 0);
+    }
+    
+    // Control functions
+    function expandAll() {
+      function expand(d) {
+        if (d._children) {
+          d.children = d._children;
+          d._children = null;
+        }
+        if (d.children) {
+          d.children.forEach(expand);
+        }
+      }
+      expand(root);
+      update(root);
+    }
+    
+    function collapseAll() {
+      function collapse(d) {
+        if (d.children) {
+          d._children = d.children;
+          d._children.forEach(collapse);
+          d.children = null;
+        }
+      }
+      root.children.forEach(collapse);
+      update(root);
+    }
+    
+    function centerTree() {
+      svg.transition().call(zoom.transform, d3.zoomIdentity);
+    }
+    
+    // Handle window resize
+    window.addEventListener('resize', () => {
+      const newWidth = containerNode.clientWidth;
+      const newHeight = containerNode.clientHeight;
+      svg.attr('width', newWidth).attr('height', newHeight);
+      tree.size([newHeight - margin.top - margin.bottom, newWidth - margin.left - margin.right]);
+      update(root);
+    });
+  </script>
+</body>
+</html>
diff --git a/lib/report.js b/lib/report.js
index a91076e..bcc03b7 100644
--- a/lib/report.js
+++ b/lib/report.js
@@ -1069,5 +1069,652 @@ function generateHtmlReport({ coverage, coverageItems, meta }) {
   return html;
 }
 
-// Export the function
-module.exports = { generateHtmlReport };
+/**
+ * generateGraphHtmlReport - generates an expandable tree visualization of API coverage
+ * using D3.js to show hierarchical structure with expandable nodes and color coding
+ */
+function generateGraphHtmlReport({ coverage, coverageItems, meta }) {
+  const { timestamp, specName, postmanCollectionName, apiCount = 1, apiNames = [] } = meta;
+  
+  // Create hierarchical tree structure
+  function buildHierarchy(items) {
+    const root = {
+      name: 'API Coverage',
+      children: [],
+      type: 'root',
+      status: 'root'
+    };
+
+    // Group by API name first (if multiple APIs)
+    const apiGroups = {};
+    items.forEach(item => {
+      const apiName = item.apiName || 'Main API';
+      if (!apiGroups[apiName]) {
+        apiGroups[apiName] = [];
+      }
+      apiGroups[apiName].push(item);
+    });
+
+    Object.keys(apiGroups).forEach(apiName => {
+      const apiNode = {
+        name: apiName,
+        children: [],
+        type: 'api',
+        status: 'group'
+      };
+
+      // Group by tags within each API
+      const tagGroups = {};
+      apiGroups[apiName].forEach(item => {
+        const tag = (item.tags && item.tags.length > 0) ? item.tags[0] : 'General';
+        if (!tagGroups[tag]) {
+          tagGroups[tag] = [];
+        }
+        tagGroups[tag].push(item);
+      });
+
+      Object.keys(tagGroups).forEach(tag => {
+        const tagNode = {
+          name: tag,
+          children: [],
+          type: 'tag',
+          status: 'group'
+        };
+
+        // Group by base path within each tag
+        const pathGroups = {};
+        tagGroups[tag].forEach(item => {
+          const basePath = item.path.split('/').slice(0, 3).join('/') || '/';
+          if (!pathGroups[basePath]) {
+            pathGroups[basePath] = [];
+          }
+          pathGroups[basePath].push(item);
+        });
+
+        Object.keys(pathGroups).forEach(basePath => {
+          const pathNode = {
+            name: basePath,
+            children: [],
+            type: 'path',
+            status: 'group'
+          };
+
+          // Add individual endpoints
+          pathGroups[basePath].forEach(item => {
+            const status = item.unmatched ? 'not-covered' : 
+                          (item.matchedRequests && item.matchedRequests.length > 0 ? 'covered' : 'partial');
+            
+            pathNode.children.push({
+              name: `${item.method} ${item.path}`,
+              method: item.method,
+              path: item.path,
+              status,
+              type: 'endpoint',
+              coverage: item.unmatched ? 0 : 100,
+              matchedRequests: item.matchedRequests || [],
+              operationName: item.name
+            });
+          });
+
+          tagNode.children.push(pathNode);
+        });
+
+        apiNode.children.push(tagNode);
+      });
+
+      root.children.push(apiNode);
+    });
+
+    return root;
+  }
+
+  const treeData = buildHierarchy(coverageItems);
+  const treeDataJson = JSON.stringify(treeData);
+
+  const html = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>API Coverage Tree Report</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+      background-color: #f8fafc;
+      color: #334155;
+      line-height: 1.6;
+    }
+    
+    header {
+      padding: 24px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      text-align: center;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+    
+    h1 {
+      margin: 0 0 16px 0;
+      font-size: 2rem;
+      font-weight: 700;
+      text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+    
+    .meta-info {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 16px;
+      max-width: 1000px;
+      margin: 0 auto;
+      font-size: 0.95em;
+    }
+    
+    .meta-card {
+      background: rgba(255,255,255,0.1);
+      padding: 12px 16px;
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+    }
+    
+    .meta-label {
+      font-weight: 600;
+      opacity: 0.9;
+      margin-bottom: 4px;
+    }
+    
+    .meta-value {
+      font-size: 1.1em;
+      font-weight: 700;
+    }
+    
+    .coverage-highlight {
+      font-size: 1.3em;
+      color: #fbbf24;
+    }
+    
+    .controls {
+      background: white;
+      padding: 20px;
+      border-bottom: 1px solid #e2e8f0;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+    
+    .tree-controls {
+      text-align: center;
+      margin-bottom: 16px;
+    }
+    
+    .tree-btn {
+      margin: 0 8px;
+      padding: 10px 20px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border: none;
+      border-radius: 25px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.3s ease;
+      box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+    }
+    
+    .tree-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
+    }
+    
+    .legend {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 24px;
+    }
+    
+    .legend h3 {
+      margin: 0;
+      color: #475569;
+      font-weight: 600;
+    }
+    
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.9em;
+      font-weight: 500;
+    }
+    
+    .legend-color {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      border: 2px solid white;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .covered { background-color: #10b981; }
+    .partial { background-color: #f59e0b; }
+    .not-covered { background-color: #ef4444; }
+    .group { background-color: #3b82f6; }
+    
+    .main-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+    
+    .tree-container {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+      overflow: hidden;
+    }
+    
+    .tree-node {
+      border-bottom: 1px solid #f1f5f9;
+    }
+    
+    .tree-node:last-child {
+      border-bottom: none;
+    }
+    
+    .node-header {
+      padding: 16px 20px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.2s ease;
+      user-select: none;
+    }
+    
+    .node-header:hover {
+      background-color: #f8fafc;
+    }
+    
+    .node-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: bold;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+    
+    .expand-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      background: #e2e8f0;
+      color: #475569;
+      font-size: 14px;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+    }
+    
+    .expand-icon.expanded {
+      background: #3b82f6;
+      color: white;
+      transform: rotate(90deg);
+    }
+    
+    .node-content {
+      flex: 1;
+      min-width: 0;
+    }
+    
+    .node-title {
+      font-weight: 600;
+      font-size: 1rem;
+      color: #1e293b;
+      margin-bottom: 2px;
+    }
+    
+    .node-subtitle {
+      font-size: 0.85em;
+      color: #64748b;
+    }
+    
+    .node-stats {
+      display: flex;
+      gap: 16px;
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+    
+    .stat-badge {
+      padding: 4px 8px;
+      border-radius: 12px;
+      font-size: 0.75em;
+      font-weight: 600;
+      color: white;
+    }
+    
+    .children {
+      background: #f8fafc;
+      border-left: 3px solid #e2e8f0;
+      margin-left: 20px;
+      display: none;
+    }
+    
+    .children.expanded {
+      display: block;
+    }
+    
+    .endpoint {
+      padding: 12px 20px;
+      border-bottom: 1px solid #e2e8f0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+    
+    .endpoint:last-child {
+      border-bottom: none;
+    }
+    
+    .method-badge {
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 0.75em;
+      font-weight: 700;
+      text-transform: uppercase;
+      min-width: 50px;
+      text-align: center;
+    }
+    
+    .method-get { background: #10b981; color: white; }
+    .method-post { background: #3b82f6; color: white; }
+    .method-put { background: #f59e0b; color: white; }
+    .method-patch { background: #8b5cf6; color: white; }
+    .method-delete { background: #ef4444; color: white; }
+    
+    .endpoint-path {
+      font-family: 'Monaco', 'Consolas', monospace;
+      flex: 1;
+      font-size: 0.9em;
+      color: #475569;
+    }
+    
+    .endpoint-status {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    
+    .test-count {
+      font-size: 0.8em;
+      color: #64748b;
+      background: #e2e8f0;
+      padding: 2px 6px;
+      border-radius: 10px;
+    }
+    
+    footer {
+      text-align: center;
+      padding: 24px;
+      background: #f1f5f9;
+      color: #64748b;
+      font-size: 0.9em;
+      margin-top: 40px;
+    }
+    
+    @media (max-width: 768px) {
+      .meta-info {
+        grid-template-columns: 1fr;
+        text-align: left;
+      }
+      
+      .legend {
+        justify-content: flex-start;
+        gap: 16px;
+      }
+      
+      .tree-btn {
+        margin: 4px;
+        padding: 8px 16px;
+        font-size: 13px;
+      }
+      
+      .node-stats {
+        flex-direction: column;
+        gap: 4px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>API Coverage Tree Report</h1>
+    <div class="meta-info">
+      <div class="meta-card">
+        <div class="meta-label">Generated</div>
+        <div class="meta-value">${timestamp}</div>
+      </div>
+      <div class="meta-card">
+        <div class="meta-label">API Spec${apiCount > 1 ? 's' : ''}</div>
+        <div class="meta-value">${specName}</div>
+      </div>
+      <div class="meta-card">
+        <div class="meta-label">Test Collection</div>
+        <div class="meta-value">${postmanCollectionName}</div>
+      </div>
+      <div class="meta-card">
+        <div class="meta-label">Coverage</div>
+        <div class="meta-value coverage-highlight">${coverage.toFixed(2)}%</div>
+      </div>
+    </div>
+  </header>
+  
+  <div class="controls">
+    <div class="tree-controls">
+      <button class="tree-btn" onclick="expandAll()">📖 Expand All</button>
+      <button class="tree-btn" onclick="collapseAll()">📚 Collapse All</button>
+      <button class="tree-btn" onclick="showOnlyCovered()">✅ Show Covered</button>
+      <button class="tree-btn" onclick="showOnlyUncovered()">❌ Show Uncovered</button>
+      <button class="tree-btn" onclick="showAll()">👀 Show All</button>
+    </div>
+    <div class="legend">
+      <h3>Coverage Status:</h3>
+      <div class="legend-item">
+        <span class="legend-color covered"></span>
+        <span>Covered (${coverageItems.filter(item => !item.unmatched && item.matchedRequests && item.matchedRequests.length > 0).length})</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color partial"></span>
+        <span>Partial (${coverageItems.filter(item => !item.unmatched && (!item.matchedRequests || item.matchedRequests.length === 0)).length})</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color not-covered"></span>
+        <span>Not Covered (${coverageItems.filter(item => item.unmatched).length})</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color group"></span>
+        <span>Groups</span>
+      </div>
+    </div>
+  </div>
+  
+  <div class="main-content">
+    <div class="tree-container" id="tree-container">
+      <!-- Tree will be generated here -->
+    </div>
+  </div>
+  
+  <footer>
+    <p>Generated by swagger-coverage-cli - Interactive tree visualization shows API endpoints hierarchically with coverage status</p>
+  </footer>
+
+  <script>
+    // Tree data
+    const treeData = ${treeDataJson};
+    
+    function renderTree() {
+      const container = document.getElementById('tree-container');
+      container.innerHTML = renderNode(treeData, 0);
+    }
+    
+    function renderNode(node, level) {
+      const isEndpoint = node.type === 'endpoint';
+      const hasChildren = node.children && node.children.length > 0;
+      const statusClass = node.status || 'group';
+      
+      let html = '';
+      
+      if (isEndpoint) {
+        // Render endpoint
+        const testCount = node.matchedRequests ? node.matchedRequests.length : 0;
+        html += \`
+          <div class="endpoint" data-status="\${statusClass}">
+            <span class="method-badge method-\${node.method.toLowerCase()}">\${node.method}</span>
+            <span class="endpoint-path">\${node.path}</span>
+            <span class="endpoint-status \${statusClass}"></span>
+            \${testCount > 0 ? \`<span class="test-count">\${testCount} test\${testCount !== 1 ? 's' : ''}</span>\` : ''}
+          </div>
+        \`;
+      } else {
+        // Render group node
+        const childrenCount = hasChildren ? node.children.length : 0;
+        const coveredChildren = hasChildren ? 
+          node.children.filter(child => {
+            if (child.type === 'endpoint') {
+              return child.status === 'covered';
+            } else if (child.children) {
+              return child.children.some(grandchild => grandchild.status === 'covered');
+            }
+            return false;
+          }).length : 0;
+        
+        const nodeId = \`node-\${Math.random().toString(36).substr(2, 9)}\`;
+        
+        html += \`
+          <div class="tree-node">
+            <div class="node-header" onclick="toggleNode('\${nodeId}')">
+              \${hasChildren ? \`<div class="expand-icon" id="icon-\${nodeId}">▶</div>\` : '<div style="width: 20px;"></div>'}
+              <div class="node-icon \${statusClass}">\${getNodeIcon(node.type)}</div>
+              <div class="node-content">
+                <div class="node-title">\${node.name}</div>
+                \${childrenCount > 0 ? \`<div class="node-subtitle">\${childrenCount} item\${childrenCount !== 1 ? 's' : ''}\${coveredChildren > 0 ? \` • \${coveredChildren} covered\` : ''}</div>\` : ''}
+              </div>
+              \${childrenCount > 0 ? \`<div class="node-stats">
+                <span class="stat-badge covered">\${coveredChildren}</span>
+                <span class="stat-badge not-covered">\${childrenCount - coveredChildren}</span>
+              </div>\` : ''}
+            </div>
+            \${hasChildren ? \`<div class="children" id="children-\${nodeId}">\${node.children.map(child => renderNode(child, level + 1)).join('')}</div>\` : ''}
+          </div>
+        \`;
+      }
+      
+      return html;
+    }
+    
+    function getNodeIcon(type) {
+      switch(type) {
+        case 'root': return '🌳';
+        case 'api': return '🔗';
+        case 'tag': return '🏷️';
+        case 'path': return '📁';
+        default: return '📄';
+      }
+    }
+    
+    function toggleNode(nodeId) {
+      const children = document.getElementById(\`children-\${nodeId}\`);
+      const icon = document.getElementById(\`icon-\${nodeId}\`);
+      
+      if (children && icon) {
+        const isExpanded = children.classList.contains('expanded');
+        
+        if (isExpanded) {
+          children.classList.remove('expanded');
+          icon.classList.remove('expanded');
+          icon.textContent = '▶';
+        } else {
+          children.classList.add('expanded');
+          icon.classList.add('expanded');
+          icon.textContent = '▼';
+        }
+      }
+    }
+    
+    function expandAll() {
+      document.querySelectorAll('.children').forEach(el => {
+        el.classList.add('expanded');
+      });
+      document.querySelectorAll('.expand-icon').forEach(el => {
+        el.classList.add('expanded');
+        el.textContent = '▼';
+      });
+    }
+    
+    function collapseAll() {
+      document.querySelectorAll('.children').forEach(el => {
+        el.classList.remove('expanded');
+      });
+      document.querySelectorAll('.expand-icon').forEach(el => {
+        el.classList.remove('expanded');
+        el.textContent = '▶';
+      });
+    }
+    
+    function showOnlyCovered() {
+      document.querySelectorAll('.endpoint').forEach(el => {
+        const status = el.getAttribute('data-status');
+        el.style.display = status === 'covered' ? 'flex' : 'none';
+      });
+    }
+    
+    function showOnlyUncovered() {
+      document.querySelectorAll('.endpoint').forEach(el => {
+        const status = el.getAttribute('data-status');
+        el.style.display = status === 'not-covered' ? 'flex' : 'none';
+      });
+    }
+    
+    function showAll() {
+      document.querySelectorAll('.endpoint').forEach(el => {
+        el.style.display = 'flex';
+      });
+    }
+    
+    // Initialize the tree
+    document.addEventListener('DOMContentLoaded', function() {
+      renderTree();
+      // Expand the first level by default
+      document.querySelectorAll('.tree-node > .children').forEach(el => {
+        el.classList.add('expanded');
+      });
+      document.querySelectorAll('.tree-node > .node-header .expand-icon').forEach(el => {
+        el.classList.add('expanded');
+        el.textContent = '▼';
+      });
+    });
+  </script>
+</body>
+</html>
+`;
+
+  return html;
+}
+
+// Export the functions
+module.exports = { generateHtmlReport, generateGraphHtmlReport };
diff --git a/test/graph-report.test.js b/test/graph-report.test.js
new file mode 100644
index 0000000..3da7c9b
--- /dev/null
+++ b/test/graph-report.test.js
@@ -0,0 +1,70 @@
+const { exec } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+describe('Graph Report Integration', () => {
+  const testApiFile = path.join(__dirname, 'fixtures', 'sample-api.yaml');
+  const testCollectionFile = path.join(__dirname, 'fixtures', 'test-collection.json');
+  const outputFile = path.join(__dirname, '..', 'tmp', 'test-graph-report.html');
+  const graphOutputFile = path.join(__dirname, '..', 'tmp', 'test-graph-report-graph.html');
+
+  beforeAll(() => {
+    // Ensure tmp directory exists
+    const tmpDir = path.dirname(outputFile);
+    if (!fs.existsSync(tmpDir)) {
+      fs.mkdirSync(tmpDir, { recursive: true });
+    }
+  });
+
+  afterEach(() => {
+    // Clean up generated files
+    if (fs.existsSync(outputFile)) {
+      fs.unlinkSync(outputFile);
+    }
+    if (fs.existsSync(graphOutputFile)) {
+      fs.unlinkSync(graphOutputFile);
+    }
+  });
+
+  test('CLI should generate graph report when --graph-report flag is used', (done) => {
+    const command = `node cli.js --graph-report --output ${outputFile} ${testApiFile} ${testCollectionFile}`;
+    
+    exec(command, { cwd: path.join(__dirname, '..') }, (error, stdout, stderr) => {
+      expect(error).toBeNull();
+      expect(stderr).toBe('');
+      expect(stdout).toContain('HTML report saved to');
+      expect(stdout).toContain('Graph report saved to');
+      
+      // Check that both files were created
+      expect(fs.existsSync(outputFile)).toBe(true);
+      expect(fs.existsSync(graphOutputFile)).toBe(true);
+      
+      // Check content of graph report
+      const graphContent = fs.readFileSync(graphOutputFile, 'utf8');
+      expect(graphContent).toContain('API Coverage Tree Report');
+      expect(graphContent).toContain('Coverage Status');
+      expect(graphContent).toContain('tree-container');
+      expect(graphContent).toContain('expandAll');
+      expect(graphContent).toContain('renderTree');
+      
+      done();
+    });
+  });
+
+  test('CLI should NOT generate graph report when --graph-report flag is not used', (done) => {
+    const command = `node cli.js --output ${outputFile} ${testApiFile} ${testCollectionFile}`;
+    
+    exec(command, { cwd: path.join(__dirname, '..') }, (error, stdout, stderr) => {
+      expect(error).toBeNull();
+      expect(stderr).toBe('');
+      expect(stdout).toContain('HTML report saved to');
+      expect(stdout).not.toContain('Graph report saved to');
+      
+      // Check that only regular report was created
+      expect(fs.existsSync(outputFile)).toBe(true);
+      expect(fs.existsSync(graphOutputFile)).toBe(false);
+      
+      done();
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/report.test.js b/test/report.test.js
index 2f360e3..8420e02 100644
--- a/test/report.test.js
+++ b/test/report.test.js
@@ -1,4 +1,4 @@
-const { generateHtmlReport } = require('../lib/report');
+const { generateHtmlReport, generateGraphHtmlReport } = require('../lib/report');
 
 describe('Report Module', () => {
   test('generateHtmlReport should return HTML string', () => {
@@ -16,4 +16,42 @@ describe('Report Module', () => {
     expect(html).toContain('<html');
     expect(html).toContain('Swagger Coverage Report');
   });
+
+  test('generateGraphHtmlReport should return HTML string with graph visualization', () => {
+    const input = {
+      coverage: 75,
+      coverageItems: [
+        {
+          method: 'GET',
+          path: '/users',
+          name: 'getUsers',
+          unmatched: false,
+          matchedRequests: [{ name: 'Get Users Test' }],
+          tags: ['users']
+        },
+        {
+          method: 'POST',
+          path: '/users',
+          name: 'createUser',
+          unmatched: true,
+          matchedRequests: [],
+          tags: ['users']
+        }
+      ],
+      meta: {
+        timestamp: '2023-10-10 10:00:00',
+        specName: 'Test API',
+        postmanCollectionName: 'Test Collection',
+        apiCount: 1,
+        apiNames: ['Test API']
+      }
+    };
+    const html = generateGraphHtmlReport(input);
+    expect(typeof html).toBe('string');
+    expect(html).toContain('<html');
+    expect(html).toContain('API Coverage Tree Report');
+    expect(html).toContain('renderTree');
+    expect(html).toContain('Coverage Status');
+    expect(html).toContain('75.00%');
+  });
 });
\ No newline at end of file
