How to export an n8n workflow as an image

Why n8n gives you JSON instead of a picture

n8n stores a workflow as data: a list of nodes with types, parameters and coordinates, plus a connection map that says which output feeds which input. The canvas you look at is drawn from that data at runtime. When you hit Download, n8n hands you the data — a .json file — because that is the thing it can round-trip back into a working workflow.

That is the right call for portability and the wrong one for every moment you need to show the workflow: a client deliverable, a README, a course slide, a template listing, a forum post asking why a branch never fires. For those you need a picture, and n8n has never shipped one.

What people try first, and where it breaks

• A screenshot. Fine for four nodes. Past that you either crop the flow or zoom out until the node labels are unreadable, and you capture the n8n UI chrome along with it.
• Print to PDF. The canvas is a scrolling, virtualised surface. Printing captures the viewport, not the workflow, and usually renders a mostly-empty page.
• A full-page capture extension. These scroll and stitch. The n8n canvas does not scroll in the way they expect, so the result is a tall image of the same viewport repeated, or a blank one.
• Redrawing it in a diagram tool. Accurate on the day you draw it, wrong the moment somebody edits the workflow.

All four fail for the same reason: they photograph a window instead of rendering a workflow. The screenshot problem goes into what exactly goes wrong, if you want the detail.

Export it properly, in four steps

1. 01
   Download the workflow JSON from n8n

   Open the workflow, use the ⋯ menu top right, and choose Download. You get a .json file describing every node and connection. Selecting nodes on the canvas and pressing Ctrl/Cmd + C puts the same JSON on your clipboard — useful when you only want one branch.

2. 02
   Open the editor and drop the file in

   Drop the .json onto pixtex.dev, or paste the JSON anywhere on the page. An n8n.io template link works as an input too — paste the URL and the template is fetched for you. Nothing is uploaded to a server at this point; the parse happens in your browser.

3. 03
   Style the canvas

   Two icon packs (n8n's real node icons, or a cleaner custom set), eight backgrounds, three node detail levels, and frame presets sized for Open Graph cards, YouTube thumbnails and square posts. If the original node positions are a mess, turn on auto-layout and the flow is re-laid-out left-to-right or top-to-bottom.

   You can also label individual connections, highlight one path in a colour, and dim everything else — which is how you point at the branch you are actually talking about instead of pasting the whole flow and hoping.

4. 04
   Pick a format and export

   PNG, SVG, JPEG, WebP or PDF, at 1× to 4×. The render happens server-side in a headless browser at the resolution you asked for, so the output is identical whether your screen is a laptop panel or a 5K display.

Which format to pick

Doing it without a browser

Once the look is dialled in, the same options are available from code — the API takes the exact option names the editor uses, so you set it up once by eye and then send it from a script.

curl -X POST https://api.pixtex.dev/v1/render \
  -H "Authorization: Bearer $PIXTEX_KEY" \
  -H "Content-Type: application/json" \
  --data '{"workflow": <workflow.json>, "options": {"scale": 4}}' \
  -o workflow.png

Or skip the curl entirely: npx pixtex render workflow.json does the same thing, a GitHub Action re-renders on every push, and the verified n8n-nodes-pixtex community node renders workflows from inside n8n itself. Keys are free and self-serve at pixtex.dev/developers.