⚒️ 🔍 Visualize your n8n workflows with Mermaid.js!
⚡ 7,549 views · ⚒️ Engineering
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_urlvariable: Enter your n8n URL instead of{{$env["N8N_PROTOCOL"]}}://{{$env["N8N_HOST"]}} - Change the
webhook_pathto simply “webhook” instead of{{$env["N8N_ENDPOINT_WEBHOOK"] || "webhook"}}
🌟 Examples
-
Multiple flowcharts on a single page: image.png
-
Several shapes for different nodes: image.png
-
Langchain nodes with special connections styling: image.png
🔗 Nodes Used
Webhook, n8n
📥 Import
Download workflow.json and import into n8n:
Workflow menu → Import from File