Encode and decode Base64, base64url and MIME with UTF-8-safe text for Arabic and emoji
n8n Workflow Visualizer
Paste an n8n workflow to draw it as an SVG diagram using its original positions or a layered automatic layout, with nodes coloured by category, disabled nodes marked, zoom and SVG download, all in your browser.
Workspace
How the result is calculated
Nodes (unique names) and connections are extracted from connections after removing duplicates and references to missing nodes. If every node has a numeric position it is used as is; otherwise a layered layout is computed: back edges (cycles) are ignored via DFS, node depth = longest path from a start, x = depth × 240 and y = index within the layer × 110. Colour follows the type category: trigger green, logic (if/switch/merge) orange, code purple, HTTP blue, note yellow. Node names are escaped in the SVG.
Limits:
The diagram is for viewing only; it runs nothing and does not validate the workflow. The automatic layout is simple (no crossing minimisation). Output names (true/false) and non-main connection types are not drawn distinctly. Categories rely on the type name only. PNG export and panning are not available (zoom and scroll only).
FAQ
Why does it differ from n8n?
n8n shows its original positions; when they are missing a simple layout is computed.
Is my workflow sent to a server?
No, it is drawn in your browser.
