n8n Workflow Dashboard & Visualizer with Mermaid.js
detail.loadingPreview
This n8n workflow transforms your automation instance into a dynamic dashboard. It provides an overview of all your workflows and generates interactive Mermaid.js flowcharts for each, making complex automations easy to understand and manage.
About This Workflow
Gain unparalleled clarity over your n8n automations with this powerful workflow dashboard. Designed for efficiency, it automatically fetches and displays a list of all your n8n workflows, presenting them in an intuitive, browser-based interface. Beyond a simple list, it leverages the popular Mermaid.js library to render beautiful, interactive flowcharts for any selected workflow. Whether you're onboarding new team members, troubleshooting intricate processes, or simply seeking a comprehensive overview of your automation landscape, this solution offers a visual, centralized hub. Understand your n8n instance at a glance, drill down into specific workflow logic, and empower your team with a clearer picture of your automated operations.
Key Features
- Dynamic Workflow Dashboard: Instantly view all your n8n workflows in a clean, accessible HTML interface, complete with titles and descriptions.
- Mermaid.js Visualization: Generate beautiful, code-based flowcharts for any individual workflow on demand, making complex logic easy to follow.
- Real-time n8n API Integration: Directly connects to your n8n instance to fetch the latest workflow data, ensuring your dashboard is always up-to-date.
- Browser-Based Accessibility: Access your dashboard and visualizations directly through a web browser using a dedicated webhook URL.
- Developer-Friendly HTML Output: Provides a customizable HTML page for the dashboard and raw Mermaid.js syntax for individual workflow diagrams.
How To Use
- Configure n8n API Credentials: Ensure you have n8n API credentials configured that allow listing and retrieving workflow details. The template uses credentials named "Ted n8n account".
- Activate Webhook Trigger: Enable the
When clicking 'Test workflow'node or link this workflow to an external HTTP webhook to receive requests. - Access the Dashboard: Hit the primary webhook URL (e.g.,
https://your-n8n-instance.com/webhook/your-workflow-id) in your browser to view the full workflow dashboard. - Visualize a Specific Workflow: To see a Mermaid.js diagram for a single workflow, append
?wfid=YOUR_WORKFLOW_IDto the webhook URL (e.g.,https://your-n8n-instance.com/webhook/your-workflow-id?wfid=Um37boya1U0mnCjS). The dashboard itself will generate these links for you.
Apps Used
Workflow JSON
{
"id": "fd985f89-3640-4393-bd35-348da142d48e",
"name": "n8n Workflow Dashboard & Visualizer with Mermaid.js",
"nodes": 27,
"category": "DevOps",
"status": "active",
"version": "1.0.0"
}Note: This is a sample preview. The full workflow JSON contains node configurations, credentials placeholders, and execution logic.
Get This Workflow
ID: fd985f89-3640...
About the Author
N8N_Community_Pick
Curator
Hand-picked high quality workflows from the global community.
Statistics
Related Workflows
Discover more workflows you might like
Visualize Your n8n Workflows: Interactive Dashboard with Mermaid.js
Gain unparalleled visibility into your n8n automation landscape. This workflow transforms your n8n instance into a dynamic, interactive dashboard, leveraging Mermaid.js to visualize all your workflows in one accessible place.
Automated PR Merged QA Notifications
Streamline your QA process with this automated workflow that notifies your team upon successful Pull Request merges. Leverage AI and vector stores to enrich notifications and ensure seamless integration into your development pipeline.
Automate Qualys Report Generation and Retrieval
Streamline your Qualys security reporting by automating the generation and retrieval of reports. This workflow ensures timely access to crucial security data without manual intervention.