🔍 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 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:
Related Templates
Automate Daily Keyword Research with Google Sheets, Suggest API & Custom Search
Who's it for This workflow is perfect for SEO specialists, marketers, bloggers, and content creators who want to automa...
USDT And TRC20 Wallet Tracker API Workflow for n8n
Overview This n8n workflow is specifically designed to monitor USDT TRC20 transactions within a specified wallet. It u...
Add product ideas to Google Sheets via a Slack
Use Case This workflow is a slight variation of a workflow we're using at n8n. In most companies, employees have a lot o...
🔒 Please log in to import templates to n8n and favorite templates
Workflow Visualization
Loading...
Preparing workflow renderer
Comments (0)
Login to post comments