Workflow dashboard with mermaid.js

Target Audience

• Developers looking to automate their processes using n8n.
• Project Managers wanting to visualize workflows and monitor tasks effectively.
• Data Analysts needing to aggregate and analyze workflow data.
• Business Owners aiming to streamline operations and improve efficiency.
• Technical Teams integrating various web services and APIs.

Problem Solved

This workflow addresses the challenge of managing and visualizing complex automated workflows in n8n. It allows users to:

• Easily visualize the structure and flow of their workflows using Mermaid.js.
• Quickly respond to webhook triggers and provide detailed insights into workflow operations.
• Aggregate workflow data to gain a comprehensive overview of all active workflows and their statuses.

Workflow Steps

1. Trigger the Workflow: The process starts when the user clicks the ‘Test workflow’ button, initiating a webhook event.
2. Switch Conditions: The workflow checks if the request contains a wfid (workflow ID) or if it should load a default page.
3. List Workflows: If no wfid is provided, it lists all available workflows through an API call.
4. Single Workflow Retrieval: If a wfid is present, it fetches details of that specific workflow.
5. Prepare Workflow Data: The workflow data is prepared for aggregation, extracting essential details like workflow ID and name.
6. Aggregate Data: The workflow data is aggregated to provide a summary of all workflows.
7. Generate Mermaid Diagram: A custom code node generates a Mermaid.js diagram string representing the workflow structure.
8. Respond with Mermaid Chart: The generated chart is returned as a response to the webhook, allowing users to visualize the workflow.
9. Send HTML Page: If no wfid is found, a default HTML page is sent back, displaying all workflows and their statuses.