How to Make a Flowchart with AI: 5 Ready Prompts and How to Export Them

To make a flowchart with AI, describe the process in plain steps and ask Claude, ChatGPT or Gemini to draw it "as a Mermaid flowchart". Mermaid is a text language for diagrams that all three can write: you paste the code into a Mermaid renderer and download a PNG. A prompt that names the diagram type, the direction, the exact steps and the decisions gets a clean chart the first time; a vague one gets a sprawling chart with steps you never mentioned.

Why ask for Mermaid instead of an image?

Image generators can paint something that looks like a flowchart, but every label is pixels. OpenAI's own image generation guide says its models "can still struggle with precise text placement and clarity", and changing one box means generating the whole picture again. Mermaid keeps the labels as text: the words are exactly yours, the layout is automatic, and changing a step means editing one line.

The code also travels. The same diagram renders in the free Mermaid Live Editor, on GitHub (which draws Mermaid in Markdown files, issues and wikis) and in many note and documentation apps, so it is not locked into the chat that made it.

What makes a good flowchart prompt?

Two Mermaid-specific rules prevent two easy-to-make errors: ask for every label in double quotes (brackets and parentheses inside a label break the code) and tell the AI never to use end as an ID, because it is a reserved word in flowcharts.

Which prompts work for common diagrams?

Each prompt names the Mermaid diagram type that suits the job. They work the same in Claude, ChatGPT and Gemini.

1. Process flow (flowchart)

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

Process: [Client sends brief] then [We draft the post] then [Client reviews]. If approved: [Schedule and publish]. If changes are needed: [Revise the draft], then back to the review.

Rules:
- Start with flowchart LR.
- Short IDs (A, B, C) with every label in double quotes, for example A["Client sends brief"].
- Decisions as diamonds, for example C{"Approved?"}, with both exits labelled -->|Yes| and -->|No|.
- Never use the word end as an ID.
- At most 10 boxes, labels under 6 words, no styling.

2. Org chart (top-down flowchart)

Draw our team structure as a Mermaid org chart using flowchart TD. Reply with one mermaid code block only.

People (name, role, reports to):
- [Sam Lee], [Managing Director], nobody
- [Priya Shah], [Head of Marketing], [Sam Lee]
- [Tom Ward], [Head of Sales], [Sam Lee]
- [Ana Costa], [Social Media Manager], [Priya Shah]

Rules:
- One box per person with the name and role on two lines, for example A["Sam Lee<br/>Managing Director"].
- Arrows go from each manager to their reports.
- No styling and no subgraphs.

3. Customer journey (user journey diagram)

Turn this customer journey into a Mermaid user journey diagram (journey). Reply with one mermaid code block only.

Title: [Buying a coffee subscription]
Stages and steps, with how the customer feels from 1 (frustrated) to 5 (delighted):
- [Discover]: [Sees an Instagram ad] [4]; [Reads reviews] [3]
- [Buy]: [Chooses a plan] [4]; [Checks out] [2]
- [Use]: [First delivery arrives] [5]

Rules: one section per stage, each step written as "Step: score: Customer", and no colons inside step names.

Mermaid's journey diagram scores each step from 1 to 5, which makes the low points of the experience stand out at a glance.

4. Decision tree (flowchart with diamonds)

Draw this decision as a Mermaid flowchart (flowchart TD). Reply with one mermaid code block only.

Question: [Should we take on this client?]
1. [Is the budget above £2,000 a month?] No: [Decline politely]. Yes: go to 2.
2. [Can we start within 4 weeks?] No: [Offer a later start date]. Yes: go to 3.
3. [Is it one of our core services?] Yes: [Send a proposal]. No: [Refer to a partner].

Rules:
- Each question in a diamond with the text in double quotes, for example Q1{"Budget above £2,000?"}.
- Each outcome in a rounded box, for example R1("Send a proposal").
- Label every exit -->|Yes| or -->|No|. Never use end as an ID.

5. Project timeline (Gantt chart)

Turn this project plan into a Mermaid Gantt chart. Reply with one mermaid code block only.

Project: [Website relaunch], starting [2026-11-02].
Tasks (phase, task, length, depends on):
- [Plan], [Brief and sitemap], [5 days], none
- [Build], [Design], [10 days], after Brief and sitemap
- [Build], [Development], [15 days], after Design
- [Launch], [Go live], milestone, after Development

Rules: use dateFormat YYYY-MM-DD, one section per phase, a short ID for each task and "after ID" for dependencies, the milestone keyword for Go live, and no colons inside task names.

Ask for dates in the YYYY-MM-DD format even if you think in "2 November": the Gantt chart reads dates in the format its dateFormat line declares, so the two need to match.

Which AI assistant should you use?

All three can write Mermaid. The differences are in what you see before you export:

ChatGPT's previews and Gemini Canvas have no image download, and with any of the three the code is the part worth keeping, so the export step is the same whichever you use.

Can you skip the chatbot?

Yes. Renda's Mermaid to PNG has a Describe it box: type the process in a sentence or a short paragraph (up to 1,000 characters) and it writes the Mermaid for you, with a live preview ready to download. It saves the copy-and-paste step and the prompt rules above, because it is built to return only a diagram, and if what comes back is not a diagram it does not use up a credit. Describe it needs Pro (£4.99 a month) or a £1 Render Pack. If you already use Claude, ChatGPT or Gemini, the prompts above do the same job for free.

How do you export the flowchart as an image?

Copy the code and paste it into a renderer. In mermaid.live, open Actions and click PNG; the Auto size gives twice the on-screen size. Mermaid to PNG also takes a whole chatbot reply, finds every diagram in it and renders each one as a PNG at 2x its own size, at a slide or social size, or as a PDF, with five free PNGs a month. The step-by-step version, including where the Preview and Copy code buttons are in ChatGPT, is in how to turn a ChatGPT flowchart into an image, and for decks read Mermaid diagrams in PowerPoint and Google Slides before you reach for SVG.

Frequently asked questions

classDef done fill:#d1fae5,stroke:#059669
class A,B done