add download svg graph

Author: GiggleLiu

docs/src/introduction.md

@@ -6,6 +6,7 @@
 
 <script src="https://unpkg.com/elkjs@0.9.3/lib/elk.bundled.js"></script>
 <script src="https://unpkg.com/cytoscape-elk@2.2.0/dist/cytoscape-elk.js"></script>
+<script src="https://unpkg.com/cytoscape-svg@0.4.0/cytoscape-svg.js"></script>
 
 <div id="cy-search">
   <input id="search-input" type="text" placeholder="Search problems...">
@@ -23,6 +24,7 @@
   <div>
     <span id="instructions">Click a node to start path selection</span>
     <button id="clear-btn">Clear</button>
+    <button id="download-svg-btn">Download SVG</button>
   </div>
 </div>
 <div id="cy-help">

docs/src/static/reduction-graph.css

@@ -63,6 +63,13 @@
   font-size: 12px;
 }
 
+#download-svg-btn {
+  margin-left: 8px;
+  padding: 3px 10px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
 #cy-search {
   margin-bottom: 8px;
 }

docs/src/static/reduction-graph.js

@@ -13,6 +13,11 @@ document.addEventListener('DOMContentLoaded', function() {
     try { cytoscape({ headless: true, elements: [] }).layout({ name: 'elk' }); elkAvailable = true; } catch(e) {}
   }
 
+  // Register cytoscape-svg extension if available
+  if (typeof cytoscapeSvg !== 'undefined') {
+    cytoscape.use(cytoscapeSvg);
+  }
+
   var categoryColors = {
     graph: '#c8f0c8', set: '#f0c8c8', algebraic: '#f0f0a0',
     formula: '#c8c8f0', misc: '#f0c8e0'
@@ -552,6 +557,21 @@ document.addEventListener('DOMContentLoaded', function() {
         }
       });
 
+      // Download SVG handler
+      var downloadBtn = document.getElementById('download-svg-btn');
+      if (downloadBtn) {
+        downloadBtn.addEventListener('click', function() {
+          var svgContent = cy.svg({ scale: 1, full: true, bg: getComputedStyle(document.documentElement).getPropertyValue('--bg').trim() || '#ffffff' });
+          var blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
+          var url = URL.createObjectURL(blob);
+          var a = document.createElement('a');
+          a.href = url;
+          a.download = 'reduction-graph.svg';
+          a.click();
+          URL.revokeObjectURL(url);
+        });
+      }
+
       // Search bar handler
       var searchInput = document.getElementById('search-input');
       if (searchInput) {