Turn your n8n instance into a simple workflow viewer that lists every workflow and draws each one as a Mermaid diagram on demand. Teams use it for quick documentation, audits, and onboarding without leaving the browser.

A public webhook serves a clean HTML page. A Switch node routes requests. When someone loads the page, the n8n API lists all workflows. The data is formatted, aggregated, and sent to the page with instance settings from a config step. When a user selects a workflow, the n8n API pulls that single workflow. A Code node converts nodes into a Mermaid chart. The response node returns the diagram as plain text for rendering. This design avoids copy paste and always shows the current state of automation.

For setup, add n8n API credentials and set the instance URL and webhook path in the config. Cloud users should replace the environment expressions as noted. Expect faster documentation work, less human error, and an easier way to share how flows run. Great for IT and ops teams that manage many automations and need clear maps during reviews and training.

• Webhook endpoint serves a ready to use HTML page for viewing workflows.
• Switch node routes requests between loading the page and fetching a diagram.
• n8n API List Workflows pulls names and IDs for the entire workspace.
• Set and Aggregate nodes prepare and bundle a clean workflow list.
• Config step injects instance URL and webhook path for the front end.
• n8n API Single Workflow fetches details for the selected workflow ID.
• Code node converts workflow data into a Mermaid chart string.
• Respond to Webhook returns HTML for the page and text for the Mermaid diagram.
• Manual trigger supports quick testing inside the editor.

• Reduce manual diagram work from 2 hours to 5 minutes
• Cut documentation errors by up to 90 percent with live data
• Handle hundreds of workflows without extra maintenance
• Unify discovery and visualization in one browser page
• Keep diagrams current by reading directly from the n8n API

1. Import the template into n8n: Create a new workflow in n8n > Click the three dots menu > Select 'Import from File' > Choose the downloaded JSON file.
2. You'll need accounts with n8n. See the Tools Required section above for links to create accounts with these services.
3. Open the List workflows node and the Single workflow node, then in the Credential to connect with dropdown, click Create new credential and follow the on screen steps to connect your n8n account. Name the credential clearly, for example n8n API Visualizer.
4. Open the CONFIG node. If you use n8n Cloud, replace the environment expressions and enter your actual instance URL and set webhook_path to webhook as noted in the sticky note.
5. Open the Webhook node and copy the Production URL. This is the link you will visit in your browser to load the page.
6. Save the workflow and activate it. Keep the credentials tested and set to Production for the Webhook node.
7. Visit the Production Webhook URL in your browser. Confirm the page loads and shows a list of workflows.
8. Select a workflow from the page. Check that a diagram renders. If it does not, open the Code node and confirm it is receiving workflow nodes in the input.
9. If you see an unauthorized error or an empty list, reopen the n8n API credentials and verify the account has read access to all workflows.
10. If the page URL returns 404, confirm the Webhook node path matches the link in the CONFIG settings and that you are using the Production URL.
11. Optional security: add authentication at the Webhook level or restrict access via your reverse proxy if the page should not be public.