Visualize n8n Workflows with Interactive Mermaid.js Dashboard
Transform n8n workflows into interactive Mermaid.js flowcharts for easy visualization, documentation, and presentations. Responsive design with special node shapes and direct links.
This n8n workflow template creates an interactive web dashboard that visualizes any n8n workflow as a Mermaid.js flowchart. Built with Mermaid.js, Bootstrap 5, and AJAX, it generates responsive, customizable diagrams showing workflow structures at a glance. Users can paste workflow JSON into a webhook or trigger manually to instantly render flowcharts with special shapes for node types, disabled node indicators, and styled connections (e.g., for Langchain nodes).
Key benefits include instant vi
Platform
n8n
Category
IT & Development
Price
$14.99
Creator
QualityWorkflows
n8n
mermaid
visualization
dashboard
workflow
developer-tools
documentation
flowchart
automation
bootstrap
How to import this workflow into n8n
1Purchase or download the workflow to get the n8n workflow JSON file.
2In your n8n instance, open Workflows and choose "Import from File" (or paste the JSON with Ctrl+V on the canvas).
3Open each node marked with a credential warning and connect your own accounts and API keys.
4Run the workflow once manually to verify the data flow, then toggle it to Active.