Fixes Mermaid diagram view

2025-06-26 00:46:11 -07:00
parent 3a3f76f918
commit 79e534dc80
2 changed files with 1263 additions and 1203 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -81,3 +81,10 @@ workflow_rename_log.json
 # Node.js artifacts (if using npm)
 node_modules/
 package-lock.json
+
+#db
+*.db-shm
+*.db-wal
+
+# versions
+.python-version
--- a/static/index.html
+++ b/static/index.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>⚡ N8N Workflow Documentation</title>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
  <style>
    /* Modern CSS Reset and Base */
    * {
@@ -265,8 +267,13 @@
      border-radius: 50%;
    }

-        .status-active { background: var(--success); }
-        .status-inactive { background: var(--text-muted); }
+    .status-active {
+      background: var(--success);
+    }
+
+    .status-inactive {
+      background: var(--text-muted);
+    }

    .complexity-dot {
      width: 8px;
@@ -274,9 +281,17 @@
      border-radius: 50%;
    }

-        .complexity-low { background: var(--success); }
-        .complexity-medium { background: var(--warning); }
-        .complexity-high { background: var(--error); }
+    .complexity-low {
+      background: var(--success);
+    }
+
+    .complexity-medium {
+      background: var(--warning);
+    }
+
+    .complexity-high {
+      background: var(--error);
+    }

    .trigger-badge {
      background: var(--primary);
@@ -497,6 +512,21 @@
      display: none !important;
    }

+    /* Mermaid diagram styling */
+    .mermaid {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 0.5rem;
+      padding: 1rem;
+      text-align: center;
+      overflow-x: auto;
+    }
+
+    .mermaid svg {
+      max-width: 100%;
+      height: auto;
+    }
+
    /* Responsive */
    @media (max-width: 768px) {
      .title {
@@ -507,7 +537,8 @@
        gap: 1rem;
      }

-            .search-section, .filter-section {
+      .search-section,
+      .filter-section {
        flex-direction: column;
        align-items: stretch;
      }
@@ -533,6 +564,7 @@
    }
  </style>
 </head>
+
 <body>
  <div id="app">
    <!-- Header -->
@@ -565,12 +597,8 @@
    <div class="controls">
      <div class="container">
        <div class="search-section">
-                    <input 
-                        type="text" 
-                        id="searchInput" 
-                        class="search-input" 
-                        placeholder="Search workflows by name, description, or integration..."
-                    >
+          <input type="text" id="searchInput" class="search-input"
+            placeholder="Search workflows by name, description, or integration...">
        </div>

        <div class="filter-section">
@@ -770,9 +798,28 @@
      async init() {
        this.setupEventListeners();
        this.setupTheme();
+        this.initMermaid();
        await this.loadInitialData();
      }

+      initMermaid() {
+        // Initialize Mermaid with proper configuration
+        if (typeof mermaid !== 'undefined') {
+          mermaid.initialize({
+            startOnLoad: false,
+            theme: 'base',
+            themeVariables: {
+              primaryColor: '#3b82f6',
+              primaryTextColor: '#1e293b',
+              primaryBorderColor: '#2563eb',
+              lineColor: '#64748b',
+              secondaryColor: '#f1f5f9',
+              tertiaryColor: '#f8fafc'
+            }
+          });
+        }
+      }
+
      setupEventListeners() {
        // Search and filters
        this.elements.searchInput.addEventListener('input', (e) => {
@@ -1129,10 +1176,15 @@
            const data = await this.apiCall(`/workflows/${this.currentWorkflow.filename}/diagram`);
            this.currentDiagramData = data.diagram;

-                        // Create a simple diagram display
+            // Create a Mermaid diagram that will be rendered
            this.elements.diagramViewer.innerHTML = `
-                            <pre style="background: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; overflow-x: auto;">${this.escapeHtml(data.diagram)}</pre>
+                            <pre class="mermaid">${data.diagram}</pre>
                        `;
+
+            // Re-initialize Mermaid for the new diagram
+            if (typeof mermaid !== 'undefined') {
+              mermaid.init(undefined, this.elements.diagramViewer.querySelector('.mermaid'));
+            }
          } catch (error) {
            this.elements.diagramViewer.textContent = 'Error loading diagram: ' + error.message;
            this.currentDiagramData = null;
@@ -1249,4 +1301,5 @@
    });
  </script>
 </body>
+
 </html>