Visualize Your n8n Workflows with Mermaid.js Dashboard

What This Automation Does

This workflow makes a dashboard page showing all workflows and their node connections.

It helps fix the problem where users spend many hours checking each workflow one by one.

You get a clear picture of all workflows on one page with buttons to view each workflow’s flowchart visually drawn with Mermaid.js.

The dashboard talks to the n8n system using API nodes to fetch workflow lists and details.

It skips note nodes and shows disabled nodes with strikethrough styling in charts.

This means users save time and avoid missing errors by seeing workflows all together.

Inputs → Processing → Output

Inputs

• API calls: fetch all workflows from n8n instance.
• Webhook requests: HTTP get requests with or without workflow ID query.

Processing

• Switch: Decides which response to send based on query parameters.
• n8n node: Lists workflows or fetches a single workflow JSON.
• Set and Aggregate nodes: Clean up and group workflows metadata for dashboard.
• Code node: Transforms one workflow’s JSON into Mermaid.js flowchart text.
• Config node: Builds URLs needed for linking in the dashboard page.

Output

• HTML page: Dashboard with workflow cards and Mermaid.js graphs.
• Plain text: Mermaid flowchart source to embed in the page.

Who Should Use This Workflow

This helps anyone managing lots of n8n workflows and who wants a quick way to see all automation maps.

It works well for teams that often troubleshoot, document, or improve workflows.

Users who find it slow to open many editors individually will find this handy.

Tools and Services Used

• n8n API: Retrieves workflow data.
• Mermaid.js: Renders flowchart diagrams from text code.
• Bootstrap CSS: Styles the dashboard page.
• JavaScript: Handles dynamic fetching and showing of charts in the browser.

Beginner Step-by-Step: How to Use This Workflow in n8n

Download and Import

1. Download the provided workflow file using the Download button on this page.
2. In the n8n editor, click the menu option Import from File.
3. Select the downloaded workflow JSON to import.

Configure Credentials

1. Open the imported workflow and locate all API nodes that need credentials.
2. Add your n8n API credentials (API Key) to these nodes to allow fetching workflow data.

Update IDs and Paths

1. Check the Webhook node parameters and confirm the Webhook path matches your URL endpoint.
2. If needed, adjust instance URL environment variables to match your setup (for example, N8N_PROTOCOL and N8N_HOST).
3. Update any hardcoded IDs, emails, channels, or folder names if the workflow uses them.

Testing

1. Trigger the workflow manually once using the Manual Trigger node to check all parts run without error.
2. Use a browser or tool like Postman to call the webhook URL and see if the dashboard page loads.
3. Click workflow cards to verify Mermaid.js charts load properly.

Production Use

1. After confirming all works, activate the workflow in n8n.
2. Make the webhook URL available for your team or yourself to access the dashboard anytime.
3. Optionally, protect the webhook with authentication.

Customizations

• Change the dashboard styling in the Respond to Webhook node HTML content to match company branding or preferences.
• Add extra workflow info like tags, update date, or owner by expanding the Set node preparing workflows list.
• Filter which workflows show by adding parameters on the Switch node and adjusting list API calls.
• Modify the special shapes used in the Code node to show different node types with unique Mermaid shapes.
• Protect dashboard with login or IP filtering on the webhook endpoint.

Troubleshooting

Error loading workflow diagram

This means the Mermaid diagram text failed to generate or send correctly.

Check the Code node for any script errors.

Confirm the request carried a valid workflow ID.

Dashboard page blank or no workflows shown

Could be due to API credentials missing or wrong.

Check the n8n node fetching the workflows for proper authentication.

Look for JavaScript console errors in the browser.

Mermaid diagrams render wrong or incomplete

Ensure the Mermaid.js script version matches what is expected.

Test the raw Mermaid text generated in the Code node separately using online Mermaid editors.

Pre-Production Checklist

• Try the webhook URL in browser or Postman for correct HTML response and Mermaid text for single workflows.
• Make sure all credentials are correctly added and permissions allow API calls.
• Verify environment variables are set correctly for building URLs.
• Test the workflow using the Manual Trigger node before activating.
• Confirm dashboard lists workflows and graphs show on click.
• Check logs for errors or warnings during runs.

Deployment Guide

Set the workflow status to active in n8n to make it listen on the webhook URL.

Test the webhook externally to ensure dashboard content and flowchart data are served.

Monitor executions in the n8n UI to catch errors fast.

Consider adding simple authentication to secure the webhook endpoint.

Summary and Results

✓ Dashboard shows all workflows visually on one page.

✓ Saves time by removing manual opening of each workflow editor.

✓ Helps find and fix errors faster with clear diagrams.

→ Makes managing automation easier and less error-prone.

→ Works well for many workflows by loading flowcharts on demand.