How to Turn a ChatGPT Flowchart into an Image (PNG)

When ChatGPT answers "make me a flowchart" with a block of code that starts with flowchart TD or graph LR, that code is Mermaid: a plain-text language that a renderer turns into boxes and arrows. To turn it into an image, click Copy code on the code block, paste the code into a Mermaid renderer such as the free Mermaid Live Editor (mermaid.live), and download a PNG. ChatGPT can preview the diagram, but the preview has no download button, so inside ChatGPT a screenshot is the only way to keep it.

Why does ChatGPT give you code instead of a picture?

Mermaid describes a diagram in text. Each line names a box or an arrow, and the renderer works out the layout. A small one looks like this:

flowchart TD
    A[New lead] --> B{Budget confirmed?}
    B -->|Yes| C[Book a demo]
    B -->|No| D[Add to newsletter]

Text suits a chatbot. Every label is exactly the words you asked for, the layout is tidy, and changing one step means editing one line and rendering again. ChatGPT can also generate a flowchart as a picture, but OpenAI's own image generation guide says its models "can still struggle with precise text placement and clarity", and fixing one misspelled box in a generated image means generating the whole thing again. For anything with more than a few labels, Mermaid is the more reliable route, which is why it is worth knowing how to get a picture out of it.

Can ChatGPT show the flowchart as a picture?

On screen, yes. OpenAI's help article on writing blocks and code blocks (updated in early October 2026) lists Mermaid diagrams among the code that a code block can preview, alongside HTML, React, SVG and Vega charts. Switch the block from Code to Preview and the diagram appears. If no Preview option shows up, OpenAI's explanation is that "the code block does not support a preview"; asking ChatGPT to "put the diagram in a mermaid code block" is worth a try.

What the preview cannot do is leave ChatGPT. The same article lists copying the code, editing it, opening it full screen and switching between Code and Preview, and nothing about downloading or exporting an image. A screenshot works (Windows+Shift+S on Windows, Cmd+Shift+4 on a Mac), but it is captured at screen resolution and cropped by hand, so it looks soft once it is stretched across a slide. Canvas, which used to hold previews like this, was removed from current models on 28 May 2026; the ChatGPT canvas to PNG guide covers the other preview types.

Which way of saving it as an image is best?

The honest answer: if you have one diagram and the code works, mermaid.live is free and good enough. The other routes earn their place when the reply is long, the code has an error, or you need a set of diagrams sized for a deck.

How do you save a ChatGPT flowchart as a PNG with mermaid.live?

1. Click Copy code on the code block in ChatGPT. The button copies the code without the Markdown fence lines.
2. Open mermaid.live, select everything in the code panel on the left and paste over it. The diagram on the right redraws as you type.
3. Check the first line is the diagram type, such as flowchart TD. If you selected the reply by hand and picked up ```mermaid at the top or ``` at the bottom, delete them: Mermaid stops with "No diagram type detected".
4. Open the Actions panel. Under PNG size, Auto downloads the diagram at twice its on-screen size; Width or Height lets you type an exact number of pixels, for example 1920 wide for a full slide.
5. Click PNG. SVG is there too, but Mermaid's SVGs often lose their text in PowerPoint; the guide to Mermaid diagrams in PowerPoint and Google Slides explains why PNG is the safer choice for decks.

What if the reply has several diagrams or the code will not render?

Long ChatGPT answers often mix explanation with several code blocks: a process flow, a sequence diagram, then a revised version of the first. Copying them into mermaid.live one at a time works but gets tedious, and a message like "Parse error on line 4" is not much help if you do not read code.

Renda's Mermaid to PNG takes the whole reply. Paste everything, prose included, and it finds every Mermaid diagram, previews each one live for free, and explains any error in plain English with the line it is on. By default each diagram downloads as a PNG at its own size at 2x; you can pick a slide or social size instead, or a PDF, and several diagrams render in one go, one PNG each. Five PNGs a month are free, with no account and no watermark. Fix with AI, which repairs broken code in one click, needs Pro or a £1 Render Pack; the guide to Mermaid syntax errors shows how to fix the usual mistakes by hand.

Which prompt gets cleaner Mermaid from ChatGPT?

Several common errors come from habits a prompt can rule out: parentheses inside labels, a box called "end", and explanations mixed into the code block. Paste this and replace the parts in square brackets:

Draw this as a Mermaid flowchart. Reply with one mermaid code block and nothing else.

Process: [describe the steps in order, including any yes/no decisions]

Rules:
- Start with flowchart LR (left to right).
- Short IDs (A, B, C) with every label in double quotes, for example A["Send invoice (PDF)"].
- Decisions as diamonds with a question, for example B{"Paid?"}, and label both exits -->|Yes| and -->|No|.
- Never use the word end as an ID.
- At most [12] boxes, labels under 6 words.
- No styling, no comments, no notes outside the code block.

"One mermaid code block and nothing else" does more than it looks: it keeps ChatGPT's commentary out of the code, so Copy code gives you exactly what the renderer needs. Left to right suits slides and documents; if you want a tall diagram for a phone screen, ask for flowchart TD instead. Changing direction later is a one-word edit on the first line.

Frequently asked questions