Workflow dashboard with mermaid.js

Workflow dashboard with mermaid.js automates the visualization of your n8n workflows, providing a clear overview of all workflows, nodes, and their connections. Triggered by webhooks, it aggregates data and responds with interactive flowcharts, enhancing workflow management and simplifying complex integrations.

7/8/2025
12 nodes
Complex
webhookcomplexrespondtowebhookn8naggregatesticky noteadvancedintegrationapilogicrouting
Categories:
Complex WorkflowWebhook Triggered
Integrations:
RespondToWebhookN8nAggregateSticky Note

Target Audience

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

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

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.

Customization Guide

Customization Guide


- Modify Webhook Path: Adjust the webhook path in the CONFIG node to match your specific setup.
- Change API Credentials: Update the API credentials in the List Workflows and Single Workflow nodes to connect to your n8n instance.
- Customize Response Format: Modify the response body in the Respond with Mermaid node to change how the Mermaid chart is rendered.
- Add New Nodes: Feel free to add additional nodes to the workflow to integrate more services or to handle more complex logic.
- Adjust Conditions: Update the conditions in the Switch node to tailor the workflow triggers according to your specific requirements.