Visualize Your n8n Workflows: Interactive Dashboard with Mermaid.js
detail.loadingPreview
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.
About This Workflow
Unlock the power of visualization for your n8n automations. This robust workflow acts as a self-serving dashboard, querying your n8n instance to list all workflows and providing both an overview page and detailed views for individual workflows. It dynamically generates an HTML page, embedding Bootstrap for a modern look and Mermaid.js for stunning, readable flowcharts. Whether you need a quick glance at your entire automation suite or a deep dive into a specific process, this dashboard streamlines understanding, facilitates monitoring, and makes sharing your automation architecture effortless.
Key Features
- Interactive Workflow Dashboard: Get a bird's-eye view of all your n8n workflows listed on a single, dynamically generated web page.
- Dynamic Single Workflow View: Easily drill down into the specifics of any workflow by simply appending its ID to the URL, offering focused insights.
- Mermaid.js Integration: Ready to power clear, visual flowcharts, making complex automation logic easy to grasp at a glance.
- Self-Served Web Application: Hosted entirely within n8n via a webhook, providing a secure and convenient way to access your dashboard.
- Query Your Own n8n Instance: Utilizes n8n's own API to fetch and display real-time data about your running and inactive workflows.
How To Use
- Configure n8n API Credential: Ensure you have an
n8nApicredential set up within this workflow, pointing to the n8n instance you wish to monitor (typically the same instance where this workflow runs). - Activate the Workflow: Set the workflow to "Active" to enable its webhook endpoint.
- Access the Dashboard: Open the
Send Pagewebhook URL in your browser to view the interactive dashboard displaying all your workflows. - View Single Workflow Details: To see a specific workflow's details, append
?wfid=<your-workflow-id>to theSend Pagewebhook URL (e.g.,your.n8n.instance/webhook/your-webhook-name?wfid=Um37boya1U0mnCjS). - Mermaid Chart API: If you need a raw Mermaid diagram for a specific workflow, access the
Respond with Mermaidwebhook URL with thewfidquery parameter.
Apps Used
Workflow JSON
{
"id": "643a3926-e161-41dd-9c78-c7801f40c5c5",
"name": "Visualize Your n8n Workflows: Interactive Dashboard with Mermaid.js",
"nodes": 10,
"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: 643a3926-e161...
About the Author
Crypto_Watcher
Web3 Developer
Automated trading bots and blockchain monitoring workflows.
Statistics
Related Workflows
Discover more workflows you might like
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.
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.
Robust Concurrency Control for n8n Workflows with Redis
Prevent simultaneous execution of critical n8n workflows or tasks using a centralized, Redis-backed locking mechanism. This reusable utility workflow ensures data integrity and resource management by allowing other workflows to acquire, check, and release locks.