Dynamic Dashboard for Workflow Visualization using Mermaid.js - n8n Workflow

Automation Architects needing a high-level overview of their entire n8n instance.
Developers looking to document complex multi-step n8n workflow logic visually.
Technical writers who require auto-generated, readable flowcharts for documentation.
Users who want better visibility into their running n8n templates and automations.

Managing numerous n8n workflows can become challenging without a centralized visual reference. This powerful n8n workflow solves this by acting as a self-documenting system. By leveraging the internal n8n API and custom JavaScript (in the Code n8n node) to generate Mermaid.js syntax, it transforms complex n8n workflow JSON into clear, readable flowcharts. The resulting dashboard provides an immediate, interactive overview of every n8n workflow, detailing connections, n8n node types, and disabled states. This is an essential n8n template for governance and auditing, ensuring you always have clear insight into your automation landscape.

This automation operates primarily through a single Webhook n8n trigger that handles two distinct requests:

1. Dashboard Load (Initial Request): The process starts with the Webhook n8n trigger. If no workflow ID (wfid) query parameter is provided, the Switch n8n node routes the request to the 'load page' path. The List workflows n8n node uses the internal n8n API to fetch metadata for all active n8n workflows. This metadata is prepared, aggregated, and combined with configuration details (via the CONFIG Set n8n node, which handles instance URL derivation). Finally, the Send Page n8n node responds with a detailed HTML page containing embedded JavaScript. This JavaScript renders the list of n8n templates and prepares to dynamically fetch their diagrams.

1. Diagram Request (Dynamic Request): When a user clicks 'Show Workflow' on the dashboard, the embedded JavaScript makes a secondary call back to the same n8n trigger, but this time including the wfid query parameter. The Switch n8n node routes this to the 'has wfid' path. The Single workflow n8n node fetches the complete JSON structure for that specific n8n workflow ID. The Code n8n node then executes a custom script that parses the n8n node connections, assigns appropriate Mermaid shapes (e.g., rhombus for Switch n8n node), and generates the raw Mermaid flowchart syntax. This syntax is returned by the Respond with Mermaid n8n node and dynamically rendered on the user's dashboard page.

1. Import the n8n Workflow: Copy the provided JSON and import it into your n8n instance using the 'New' -> 'Import from JSON' option.


2. API Credentials: Ensure the n8n n8n nodes (List workflows and Single workflow) are configured with valid n8n API credentials that have permissions to read workflow data. These nodes currently point to an existing credential named 'Ted n8n account'. You must replace this with your own self-hosted or cloud n8n API key.


3. Webhook Activation: Activate the Webhook n8n trigger and note its URL.


4. Crucial Configuration for n8n Cloud/Self-Hosted: The CONFIG n8n node relies on environment variables (N8NPROTOCOL, N8NHOST, N8NENDPOINTWEBHOOK). If you are using n8n Cloud, you must manually update the CONFIG n8n node's parameters:

1. Run: Access the Webhook URL (without any parameters) in your browser to view the dynamic dashboard of your n8n templates.

This n8n workflow utilizes several crucial n8n node types:

Webhook (n8n trigger): The entry point for the dashboard. It listens for requests and determines if a list view or a specific visualization is required. Key Configuration: Response Mode set to 'Response Node'.
Switch: Controls the flow based on whether the query parameter wfid (Workflow ID) is present. This directs the process to either list all n8n workflows or fetch a single one.
n8n (List workflows & Single workflow): These n8n node operations interact directly with the internal n8n API. They are essential for retrieving the raw JSON data of the n8n templates currently deployed.
Code: This is the core engine for visualization. It uses JavaScript to iterate through the fetched n8n workflow JSON, maps standard n8n node types to specific Mermaid.js shapes (like rhombuses for conditional nodes or subroutines for Code nodes), and compiles the connections into the final flowchart LR string.
Set (CONFIG): Manages essential configuration variables, primarily gathering the current n8n instance URL and webhook path to construct functional links within the dashboard's HTML.
Respond to Webhook (Send Page / Respond with Mermaid): These n8n nodes are responsible for outputting the final content, either the initial interactive HTML dashboard (Send Page) or the raw Mermaid text data (Respond with Mermaid) requested dynamically by the frontend JavaScript.