AcademyWorkflowsOperations

Visualize Your n8n Workflows with Mermaid.js

Automation and operations teams that need to document and present how their n8n workflows are structured.

  • Recommendedour rating
  • 5,660views on n8n
Open on n8n.io ↗

Paste it straight onto an n8n canvas with Ctrl+V or Cmd+V.

visualize-your-n8n-workflows-with-mermaid-js.json

Loading the file...

What it does

An n8n template that shows your workflows as interactive flowcharts on a web page, built with mermaid.js and Bootstrap 5. Different node types get their own shapes, disabled nodes are marked, and each chart links back to its workflow. It needs no external dependencies and can be customised.

Use cases

  1. 01Document n8n workflows as flowcharts
  2. 02Show several workflow diagrams on a single page
  3. 03Present an automation to a non-technical team

Connects

Code

Questions about
Visualize Your n8n Workflows with Mermaid.js.

What is Visualize Your n8n Workflows with Mermaid.js used for?

Automation and operations teams that need to document and present how their n8n workflows are structured. An n8n template that shows your workflows as interactive flowcharts on a web page, built with mermaid.js and Bootstrap 5. Different node types get their own shapes, disabled nodes are marked, and each chart links back to its workflow. It needs no external dependencies and can be customised.

How do I import Visualize Your n8n Workflows with Mermaid.js into n8n?

Copy the workflow JSON from this page and paste it onto the n8n canvas with Ctrl+V or Cmd+V. Then connect your credentials in each node.

Is Visualize Your n8n Workflows with Mermaid.js safe to use?

It passed our automatic scan for credential theft, hidden instructions and risky install commands. Third party open source software. Sabemos AI does not maintain it. Check the code and permissions before you connect it to company data.