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

multi diag render

Browse Source
This commit is contained in:
Suryansh 2025-06-16 19:26:15 +05:30
parent f95a28d759
commit 2cfa372cbc
2 changed files with 6989 additions and 6915 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
generate_documentation.py
View File

@ -1558,27 +1558,31 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
.diagram-content { .diagram-content {
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
} } .workflow-diagram-container {
.workflow-diagram-container {
position: relative; position: relative;
margin: 15px 0; margin: 15px 0;
min-height: 100px; min-height: 200px; /* Give more space for diagram */
}.workflow-diagram-loading { }.workflow-diagram-loading {
text-align: center; text-align: center;
padding: 20px; padding: 20px;
color: var(--text-muted); color: var(--text-muted);
font-style: italic; font-style: italic;
} } .workflow-diagram {
.workflow-diagram {
margin: 15px 0; margin: 15px 0;
padding: 15px; padding: 15px;
background: white; background: white;
border-radius: 8px; border-radius: 8px;
overflow: auto; overflow: auto;
min-height: 150px;
} }
.dark-mode .workflow-diagram { .dark-mode .workflow-diagram {
background: #2d3748; background: #2d3748;
} }
/* Add styles for the mermaid diagrams */
.workflow-diagram .mermaid {
width: 100%;
overflow: visible;
}
.mermaid-container { .mermaid-container {
min-height: 200px; min-height: 200px;
padding: 20px; padding: 20px;
@ -1617,6 +1621,32 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
}); });
} }
// Function to render a Mermaid diagram with unique ID to avoid conflicts
function renderMermaidDiagram(container, diagramCode) {
// Create a unique ID for this diagram instance
const diagramId = 'diagram-' + Math.random().toString(36).substring(2, 10);
// Create a new div with the unique ID
const diagramDiv = document.createElement('div');
diagramDiv.id = diagramId;
diagramDiv.className = 'mermaid';
diagramDiv.textContent = diagramCode;
// Clear existing content and append the new div
container.innerHTML = '';
container.appendChild(diagramDiv);
// Render the diagram
try {
window.mermaid.init(undefined, document.getElementById(diagramId));
return true;
} catch (error) {
console.error('Error rendering diagram:', error);
container.innerHTML = '<div class="error-message">Error rendering diagram. Please try again.</div>';
return false;
}
}
// Embedded workflow data from Python analysis // Embedded workflow data from Python analysis
const WORKFLOW_DATA = ''' + js_data + '''; const WORKFLOW_DATA = ''' + js_data + ''';
@ -1742,7 +1772,8 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
</div> </div> </div> </div>
<div class="workflow-details"> <!-- Workflow Diagram Visualization --> <div class="workflow-details"> <!-- Workflow Diagram Visualization -->
<div class="details-section"> <div class="details-section">
<h4 class="details-title">Workflow Diagram</h4> <div class="workflow-diagram-container" data-diagram="${encodeURIComponent(workflow.diagram)}"> <h4 class="details-title">Workflow Diagram</h4>
<div class="workflow-diagram-container" data-diagram="${encodeURIComponent(workflow.diagram)}">
<div class="workflow-diagram-loading">Loading diagram...</div> <div class="workflow-diagram-loading">Loading diagram...</div>
<div class="workflow-diagram"></div> <div class="workflow-diagram"></div>
</div> </div>
@ -1807,20 +1838,19 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
if (card.classList.contains('expanded')) { if (card.classList.contains('expanded')) {
const diagramContainer = card.querySelector('.workflow-diagram-container'); const diagramContainer = card.querySelector('.workflow-diagram-container');
const diagramElement = card.querySelector('.workflow-diagram'); const diagramElement = card.querySelector('.workflow-diagram');
if (diagramContainer && diagramElement && !diagramElement.innerHTML) {
const loadingElement = card.querySelector('.workflow-diagram-loading'); const loadingElement = card.querySelector('.workflow-diagram-loading');
if (diagramContainer && diagramElement) {
if (loadingElement) loadingElement.style.display = 'block'; if (loadingElement) loadingElement.style.display = 'block';
// Load Mermaid.js if needed then render the diagram // Load Mermaid.js if needed then render the diagram with unique ID
loadMermaidIfNeeded().then(() => { loadMermaidIfNeeded().then(() => {
try { const diagramCode = decodeURIComponent(diagramContainer.dataset.diagram); const diagramCode = decodeURIComponent(diagramContainer.dataset.diagram);
diagramElement.innerHTML = diagramCode; // Render the diagram using our helper function
window.mermaid.init(undefined, diagramElement); const success = renderMermaidDiagram(diagramElement, diagramCode);
if (loadingElement) loadingElement.style.display = 'none'; if (loadingElement) loadingElement.style.display = 'none';
} catch (error) { if (!success && loadingElement) {
console.error('Error rendering diagram:', error); loadingElement.innerHTML = 'Error loading diagram';
if (loadingElement) loadingElement.innerHTML = 'Error loading diagram';
} }
}); });
} }
@ -1923,7 +1953,6 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); } URL.revokeObjectURL(url); }
showMermaidModal(workflowName) { showMermaidModal(workflowName) {
const workflow = this.workflows.find(w => w.name === workflowName); const workflow = this.workflows.find(w => w.name === workflowName);
if (!workflow) return; if (!workflow) return;
@ -1938,24 +1967,8 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
// Load Mermaid.js if needed then render the diagram // Load Mermaid.js if needed then render the diagram
loadMermaidIfNeeded().then(() => { loadMermaidIfNeeded().then(() => {
diagramElement.innerHTML = workflow.diagram; // Use our improved rendering function
renderMermaidDiagram(diagramElement, workflow.diagram);
// Render the diagram
window.mermaid.initialize({
startOnLoad: false,
theme: 'default',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'basis'
}, securityLevel: 'loose'
});
try {
window.mermaid.init(undefined, document.getElementById('mermaidDiagram'));
} catch (error) {
console.error('Error rendering diagram:', error);
diagramElement.innerHTML = '<div class="error-message">Error rendering diagram. Please try again.</div>';
}
}); });
} }
@ -2025,9 +2038,7 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
${nodes} ${nodes}
${connections} ${connections}
`; `;
} } toggleTheme() {
toggleTheme() {
const body = document.body; const body = document.body;
body.classList.toggle('dark-mode'); body.classList.toggle('dark-mode');
@ -2038,6 +2049,32 @@ def generate_html_documentation(data: Dict[str, Any]) -> str:
// Update button text // Update button text
const toggleButton = document.getElementById('themeToggle'); const toggleButton = document.getElementById('themeToggle');
toggleButton.textContent = isDarkMode ? '🌞 Light' : '🌙 Dark'; toggleButton.textContent = isDarkMode ? '🌞 Light' : '🌙 Dark';
// Update Mermaid theme if it's loaded
if (window.mermaid) {
// Re-initialize with the appropriate theme
window.mermaid.initialize({
startOnLoad: false,
theme: isDarkMode ? 'dark' : 'default',
flowchart: {
useMaxWidth: true,
htmlLabels: true,
curve: 'basis'
},
securityLevel: 'loose'
});
// Re-render any visible diagrams
const expandedCards = document.querySelectorAll('.workflow-card.expanded');
expandedCards.forEach(card => {
const diagramContainer = card.querySelector('.workflow-diagram-container');
const diagramElement = card.querySelector('.workflow-diagram');
if (diagramContainer && diagramElement) {
const diagramCode = decodeURIComponent(diagramContainer.dataset.diagram);
renderMermaidDiagram(diagramElement, diagramCode);
}
});
}
} }
hideLoading() { hideLoading() {

13781
workflow-documentation.html
View File

File diff suppressed because it is too large Load Diff