**Visualize Your n8n Workflows with Mermaid.js!**

## Are you a visual thinker working with n8n? View and understand workflow structures at a glance with this template! Built with mermaid.js, Bootstrap 5, and AJAX to create an interactive web page displaying n8n workflows as flowcharts. Perfect for documentation, presentations, or just getting a clearer picture of your automation processes. Need customization help? Reach out to [Eduard](https://www.linkedin.com/in/parsadanyan/)! ### Benefits * Instant workflow visualization * Responsive design * Direct links to n8n workflows * Special shapes for different node types * Disabled node indication * No external dependencies - just paste the workflow and call the webhook * Easily customizable - enhance the JS script or add custom styling ### Important note for cloud users Since the cloud version doesn't support environmental variables, please make the following changes in the CONFIG node: * Update the `instance_url` variable: Enter your n8n URL instead of `{{$env[N8N_PROTOCOL]}}://{{$env[N8N_HOST]}}` * Change the `webhook_path` to simply "webhook" instead of `{{$env[N8N_ENDPOINT_WEBHOOK] || webhook}}` ### Examples 1. Multiple flowcharts on a single page:  2. Several shapes for different nodes:  3. Langchain nodes with special connections styling: