How to make a flowchart with ChatGPT

Method 1: ask for Mermaid code, then render it

Mermaid is a text syntax for diagrams. ChatGPT and other assistants can write it, and many tools render it.

1. Describe the process and ask for Mermaid. Name the steps, who does them and every decision. A prompt like the one below works well.
2. Copy the code block. The reply should start with flowchart TD (top-down) or flowchart LR (left-right).
3. Render it. Paste the code into a Mermaid renderer such as the Mermaid Live Editor, a Mermaid code block in a Markdown file on GitHub, or a Mermaid extension for VS Code.
4. Fix errors. If the renderer reports a syntax error, paste the error back into the chat and ask for a corrected version. Labels containing brackets or quotes are a common cause; wrap them in double quotes.
5. Change it. Edit the code yourself or ask for a new version. Each change regenerates the whole layout.

Write Mermaid flowchart code (flowchart TD) for our expense approval process.
Employee submits an expense with a receipt. If it is over $500, a manager reviews it first;
otherwise finance reviews it directly. Rejected expenses go back to the employee with a reason.
Approved expenses are paid in the next payroll run.
Use diamonds for decisions and label every arrow that leaves a decision.

The kind of code to expect (written for this page as an example, not copied from a chat):

flowchart TD
  s(["Employee submits expense with receipt"])
  d1{"Over $500?"}
  mgr["Manager reviews"]
  d2{"Manager approves?"}
  fin["Finance reviews"]
  d3{"Finance approves?"}
  back(["Returned to employee with reason"])
  pay["Pay in next payroll run"]
  e(["Expense closed"])
  s --> d1
  d1 -->|Yes| mgr
  d1 -->|No| fin
  mgr --> d2
  d2 -->|Yes| fin
  d2 -->|No| back
  fin --> d3
  d3 -->|Yes| pay
  d3 -->|No| back
  pay --> e

And the flowchart that code describes:

Method 2: PlantUML or Graphviz DOT

The same pattern works with other diagram languages. Ask for PlantUML (common for sequence and activity diagrams) or Graphviz DOT (general graphs), then paste the result into a matching renderer, such as PlantText or WebGraphviz, or a VS Code extension. The trade-offs are the same as with Mermaid: you get a layout chosen by the renderer and you edit the diagram by editing code.

Method 3: generate an editable diagram directly

If you do not want to handle code, paste the same description into a diagram generator. flow-chart.io returns a laid-out flowchart where every shape is an object you can click, rename or move, and you can refine it by describing changes. Pro can still export Mermaid if your documentation needs it.

Which method fits?

Prompt tips for better flowcharts

• List the actors (employee, manager, finance) and give each step an owner.
• State every decision as a yes/no question and say where both answers go.
• Ask for labels on every arrow that leaves a decision.
• Pick one direction: top-down for long processes, left-to-right for short ones.
• Keep one diagram under about 15 steps; split bigger processes into linked diagrams.

Frequently asked questions

Can ChatGPT make a flowchart?

It can write diagram code such as Mermaid, which a renderer turns into a flowchart, and it can generate images. A generated image is a picture rather than an editable diagram, so diagram code or a diagram tool is the better route when you will need to change the flowchart later.

Why does my Mermaid flowchart show a syntax error?

Common causes are special characters in labels (brackets, quotes, parentheses) and node IDs that clash. Wrap labels in double quotes, keep IDs short and unique, and paste the exact error back into the chat.

Is there a free way to render ChatGPT's Mermaid code?

Yes. The Mermaid Live Editor is free, and GitHub renders Mermaid code blocks in Markdown files.

Can I import ChatGPT's Mermaid code into flow-chart.io?

flow-chart.io does not import Mermaid one-to-one. Paste the plain-language description instead and generate an editable version; Pro can export it back to Mermaid.

Source: Rendering options for LLM-written diagram code are summarised in KDnuggets' guide to making flowcharts with LLMs (www.kdnuggets.com/3-easy-ways-create-flowcharts-diagrams-using-llms). Plans and features change; check the vendor's page before deciding.

Related

Last reviewed 9 November 2026.