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_modules/
package-lock.json
#db
*.db-shm
*.db-wal
# versions
.python-version

81
static/index.html
View File

@@ -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>