Skip to main content

🔍 Visualize your n8n workflows with Mermaid.js!

Workflow preview

🔍 Visualize your n8n workflows with Mermaid.js! preview
Open on n8n.io
n8n Cloud
$20/month : Unlimited workflows
2500 executions/month
Try free
Bright Data
THE #1 IN WEB SCRAPING
Scrape any website without limits
Try free
HOSTINGER Hostinger Early Deal
DISCOUNT 20%
Self-hosted n8n
Unlimited workflows - from $4.99/mo
Try free
Apify
#1 hub for scraping, AI & automation
6000+ actors - $5 credits/mo
Try free

Important notice

This workflow is provided as-is. Please review and test before using in production.

Overview

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

  1. Multiple flowcharts on a single page: image.png

  2. Several shapes for different nodes: image.png

  3. Langchain nodes with special connections styling: image.png