🔍 Visualize your n8n workflows with Mermaid.js!
Ready for 3.0Ready for 3.0. This template uses no nodes that n8n 3.0 removes. No removed nodes, versions or helpers found. Static check, last run 2026-10-19.
Nodes used (8)
- Manual Trigger
n8n-nodes-base.manualTrigger - Respond to Webhook
n8n-nodes-base.respondToWebhook - n8n
n8n-nodes-base.n8n - Aggregate
n8n-nodes-base.aggregate - Switch
n8n-nodes-base.switch - Edit Fields (Set)
n8n-nodes-base.set - Code
n8n-nodes-base.code - Webhook
n8n-nodes-base.webhook
What it does
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 instanceurl variable: Enter your n8n URL instead of {{$env"N8NPROTOCOL"}}://{{$env"N8NHOST"}} Change the webhookpath to simply "webhook" instead of {{$env"N8NENDPOINTWEBHOOK" || "webhook"}} 🌟 Examples 1. Multiple flowcharts on a single page: !image.png(fileId:830) 2. Several shapes for different nodes: !image.png(fileId:826) 3. Langchain nodes with special connections styling: !image.png(fileId:829)