oliver/n8n-workflows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #31 from rg-najera/fix/mermaid-graph-view

Browse Source 
Fixes Mermaid diagram view
This commit is contained in:
Eliad Shahar
2025-06-26 20:52:13 +03:00
committed by GitHub
parent 3a3f76f918 79e534dc80
commit a8a720c37b
2 changed files with 1263 additions and 1203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.gitignore vendored
View File

@@ -81,3 +81,10 @@ workflow_rename_log.json
# Node.js artifacts (if using npm) # Node.js artifacts (if using npm)
node_modules/ node_modules/
package-lock.json package-lock.json
#db
*.db-shm
*.db-wal
# versions
.python-version

81
static/index.html
View File

@@ -1,9 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⚡ N8N Workflow Documentation</title> <title>⚡ N8N Workflow Documentation</title>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<style> <style>
/* Modern CSS Reset and Base */ /* Modern CSS Reset and Base */
* { * {
@@ -265,8 +267,13 @@
border-radius: 50%; border-radius: 50%;
} }
.status-active { background: var(--success); } .status-active {
.status-inactive { background: var(--text-muted); } background: var(--success);
}
.status-inactive {
background: var(--text-muted);
}
.complexity-dot { .complexity-dot {
width: 8px; width: 8px;
@@ -274,9 +281,17 @@
border-radius: 50%; border-radius: 50%;
} }
.complexity-low { background: var(--success); } .complexity-low {
.complexity-medium { background: var(--warning); } background: var(--success);
.complexity-high { background: var(--error); } }
.complexity-medium {
background: var(--warning);
}
.complexity-high {
background: var(--error);
}
.trigger-badge { .trigger-badge {
background: var(--primary); background: var(--primary);
@@ -497,6 +512,21 @@
display: none !important; 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 */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.title { .title {
@@ -507,7 +537,8 @@
gap: 1rem; gap: 1rem;
} }
.search-section, .filter-section { .search-section,
.filter-section {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
@@ -533,6 +564,7 @@
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<!-- Header --> <!-- Header -->
@@ -565,12 +597,8 @@
<div class="controls"> <div class="controls">
<div class="container"> <div class="container">
<div class="search-section"> <div class="search-section">
<input <input type="text" id="searchInput" class="search-input"
type="text" placeholder="Search workflows by name, description, or integration...">
id="searchInput"
class="search-input"
placeholder="Search workflows by name, description, or integration..."
>
</div> </div>
<div class="filter-section"> <div class="filter-section">
@@ -770,9 +798,28 @@
async init() { async init() {
this.setupEventListeners(); this.setupEventListeners();
this.setupTheme(); this.setupTheme();
this.initMermaid();
await this.loadInitialData(); 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() { setupEventListeners() {
// Search and filters // Search and filters
this.elements.searchInput.addEventListener('input', (e) => { this.elements.searchInput.addEventListener('input', (e) => {
@@ -1129,10 +1176,15 @@
const data = await this.apiCall(`/workflows/${this.currentWorkflow.filename}/diagram`); const data = await this.apiCall(`/workflows/${this.currentWorkflow.filename}/diagram`);
this.currentDiagramData = data.diagram; this.currentDiagramData = data.diagram;
// Create a simple diagram display // Create a Mermaid diagram that will be rendered
this.elements.diagramViewer.innerHTML = ` 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) { } catch (error) {
this.elements.diagramViewer.textContent = 'Error loading diagram: ' + error.message; this.elements.diagramViewer.textContent = 'Error loading diagram: ' + error.message;
this.currentDiagramData = null; this.currentDiagramData = null;
@@ -1249,4 +1301,5 @@
}); });
</script> </script>
</body> </body>
</html> </html>