n8n Visualizer
How It Works

Visualize your n8n workflows in seconds

n8n Visualizer turns your workflow JSON into an interactive, color-coded diagram. Here's how it works.

01

Export your workflow from n8n

Open your workflow in the n8n editor. Click the three-dot menu in the top right corner and select "Download" to export the workflow as a JSON file. This file contains all the nodes, connections, and settings of your workflow.

02

Paste, drop, or upload the JSON

You have three ways to get your workflow into the visualizer: paste the JSON directly into the textarea, drag and drop the .json file anywhere on the page, or click the upload area to select a file. The tool validates your JSON in real time and shows clear error messages if something is wrong.

03

See your interactive diagram

Your workflow renders as an interactive node diagram. Pan by dragging the canvas, zoom with scroll or pinch. Each node is color-coded by type: purple for triggers, blue for actions, amber for logic, teal for HTTP requests, gray for code, and pink for AI nodes. Click any node to see its details in a slide-in panel.

Keyboard shortcuts

Press ? to see all available shortcuts.

F Fit to screen
+/- Zoom in/out
Esc Close panel
Ctrl+D Toggle dark mode