🔍 Visualize Your n8n Workflows with Mermaid.js!

Description

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 AXAJ 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!

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
Multiple flowcharts on a single page:


Several shapes for different nodes:


Langchain nodes with special connections styling: