Visualize Your n8n Workflows with Mermaid.js!

This workflow is for n8n users who want to visualize their workflows as Mermaid.js flowcharts. This helps with understanding and documenting workflow logic. This workflow lets you see your n8n workflow as a flowchart. You can view all your workflows as a list or a single workflow as a diagram. It uses Mermaid.js to draw the flowcharts in a web page. 1. Activate the workflow. 2. Set environment variables N8N_PROTOCOL and N8N_HOST to your n8n instance URL. 3. Update the "CONFIG" node if you are on n8n Cloud. You need an n8n instance and basic understanding of webhooks and N8N nodes. You can change the look and feel of the generated web page by editing the HTML in the "Send Page" node. You can also change how nodes appear in the Mermaid chart by altering the "Code" node logic. Key Technologies: n8n,Mermaid.js,HTML,JavaScript,CSS,Webhooks Automation Value: - Easily visualize complex workflows for better understanding. - Quickly see the structure of any n8n workflow. - Simplify documentation of n8n automations. - Get a bird's-eye view of all your workflows in one place. Best Practices: - Use clear and descriptive node names. - Secure the webhook endpoint if exposing sensitive information. - Keep the "Code" node logic clean and well-commented for easier maintenance. - Test workflow thoroughly in both "load page" and "has wfid" branches.